無料
JavaScriptでWebページを動かす
DOM から要素を取得・更新・追加し、クリック・入力・フォーム送信に反応する処理を作る全 20 レッスン（411 分）のコースです。タイマーと localStorage も使い、最後は入力を保存できるひとことメモを仕上げます。用意された HTML/CSS を使うため、学習の中心は JavaScript です。
レッスン
20件
所要時間
約7時間
ランク
初級
最初のレッスンを読む
15分・無料・登録なしで読めます
動く図解・要素を取得する
動く図解・要素を取得する
目標
script.js（DOM・イベント・タイマー・localStorage を使って、入力内容を保存できるひとことメモ付きプロフィールページ）
できるようになること
querySelector・textContent・classList で既存の要素を取得して更新できる
createElement と append を使い、配列から要素の一覧を描画できる
addEventListener でクリック・入力・フォーム送信を受け取り、必要な既定動作を制御できる
setTimeout・setInterval・localStorage を使い、時間とブラウザ内保存を扱える
よくある質問
前提知識・必要な環境
必須
- • 「JavaScript入門：コードを動かす」と「JavaScript基礎文法：処理を組み立てる」修了相当
- • HTML の要素・class・フォームの基本
推奨
- • CSS セレクタと class の基本
環境
ブラウザ完結（インストール不要）
必要ツール: ブラウザ内エディタ, HTML/CSS/JavaScript プレビュー, DOM 状態テスト
このコースに入っているもの
触れる図解
11本
導入スライド
40枚
手を動かす演習
16問
理解度クイズ
2問
つまずき辞典
39件
読み物のレッスン
2本
監修
ゆめさくコード編集部
プログラミング学習をもっと身近に。初心者から実務レベルまで、わかりやすいコンテンツをお届けします。
生田 陸人
ゆめさくエンジニア / 現役ソフトウェアエンジニア。Ruby on Rails・Nuxt.js・Next.js・CakePHPなどの実務の開発をベースに、学習コンテンツを作成しています。
ブラウザが HTML から作る DOM のしくみを知り、querySelector で要素を掴み、textContent と classList と createElement でページを書き換えます。作品ギャラリーを配列から描く形に作り替えます。
addEventListener でクリックに反応させ、event オブジェクトを読み、入力欄の値を取り、preventDefault でフォーム送信を止めます。ダークモード切替と入力チェックを実装します。
setTimeout と setInterval で動く時計を出し、localStorage に設定を保存します。総仕上げとしてひとことメモウィジェットを作り、自由拡張と次のステップで締めくくります。
このコースを終えると取れるバッジ
JavaScript 第6コース
0 / 20 レッスン
このコースの動く図解
動かしながら、仕組みや変化を目で確かめられます。
こんな人におすすめ
JavaScript で Web ページの内容を書き換えたい人
クリック・入力・フォーム送信に反応する処理を作りたい人
プロフィールページをデータ駆動の UI に育てたい人
おすすめしない人
- ×条件分岐・配列・ループ・関数・オブジェクトをまだ学んでいない人
- ×Promise・async/await・fetch やサーバー通信だけを学びたい人
前提が不安な方へ
先にこちらを通しておくと、つまずきにくくなります
次に学ぶなら
このコースを終えたあとに進むと、無理なく続けられます
