DOM から要素を取得・更新・追加し、クリック・入力・フォーム送信に反応する処理を作る全 20 レッスン（411 分）のコースです。タイマーと localStorage も使い、最後は入力を保存できるひとことメモを仕上げます。用意された HTML/CSS を使うため、学習の中心は JavaScript です。
レッスン
20件
所要時間
約7時間
ランク
初級
学習環境
ブラウザ完結
script.js（DOM・イベント・タイマー・localStorage を使って、入力内容を保存できるひとことメモ付きプロフィールページ）
DOM から要素を取得・更新・追加し、クリック・入力・フォーム送信に反応する処理を作る全 20 レッスン（411 分）のコースです。タイマーと localStorage も使い、最後は入力を保存できるひとことメモを仕上げます。用意された HTML/CSS を使うため、学習の中心は JavaScript です。
querySelector・textContent・classList で既存の要素を取得して更新できる
createElement と append を使い、配列から要素の一覧を描画できる
addEventListener でクリック・入力・フォーム送信を受け取り、必要な既定動作を制御できる
setTimeout・setInterval・localStorage を使い、時間とブラウザ内保存を扱える
ブラウザ完結（インストール不要）
必要ツール: ブラウザ内エディタ, HTML/CSS/JavaScript プレビュー, DOM 状態テスト
テキストでの解説
2
レッスン
コーディングの問題
16
レッスン
クイズ問題
2
レッスン
ゆめさくコード編集部
プログラミング学習をもっと身近に。初心者から実務レベルまで、わかりやすいコンテンツをお届けします。
ゆめさくエンジニア / 現役ソフトウェアエンジニア。Ruby on Rails・Nuxt.js・Next.js・CakePHPなどの実務の開発をベースに、学習コンテンツを作成しています。
レッスンの最初に、図と短い言葉で学ぶ内容をつかみます。
JavaScriptでWebページを動かす - DOM とは何か
ブラウザは HTML ファイルを上から読み、書いてある入れ子のとおりに部品を並べた木を組み立てます。この木を DOM と呼びます。JavaScript がページの文字や見た目を変えられるのは、この木を触れるからです。
文字を取り出せるということは、入れ替えることもできるということです。この回はまず、取り出す側から見ていきます。
document と書くと、ブラウザが組み立てた木そのものを指せます。
女性向けエンジニアスクール
const title = document.querySelector("h1");
console.log(title.textContent); // 山田はな1 / 4
JavaScriptでWebページを動かす - 要素を取得する
書き換えたい部品を先に見つけないと、何も始まりません。探すのに使うのが querySelector と querySelectorAll です。探しかたの指定には、CSS で使うセレクタの文字列をそのまま渡します。
同じ .work という 1 つの文字列で、当たる相手の数が変わります。次の図解で、その数を自分で数えます。
1 つだけ欲しいときが querySelector、全部欲しいときが querySelectorAll です。
const name = document.querySelector("#profile-name");
console.log(name.textContent); // 山田はな
const works = document.querySelectorAll(".work");
console.log(works.length); // 31 / 4
JavaScriptでWebページを動かす - テキストを書き換える
見つけた要素の textContent は、読むだけでなく代入もできます。代入した瞬間に、その部品が画面に出している文字が入れ替わります。
では、書き換わったのはどこまででしょうか。次の図解で、画面と保存してあるファイルを見比べます。
= の右に書いた文字が、そのまま画面の文字になります。
const name = document.querySelector("#profile-name");
console.log(name.textContent); // 山田はな
name.textContent = "山田はな（イラストレーター）";
console.log(name.textContent); // 山田はな（イラストレーター）1 / 4
JavaScriptでWebページを動かす - 要素を作って追加する
作品が 1 つ増えたら、一覧に行を足したくなります。まずは足す部品そのものを createElement で作ります。作った直後の部品は、中身が空の li が 1 つ手元にある状態です。
ここまで書いても、画面には何も出てきません。作った部品はまだ木の外にあるからです。
作った部品にも、いつもどおり textContent で文字を入れられます。
const li = document.createElement("li");
li.textContent = "ロゴデザイン";
console.log(li.textContent); // ロゴデザイン1 / 4
動かしながら、仕組みや変化を目で確かめられます。
JavaScript で Web ページの内容を書き換えたい人
を目指す人
クリック・入力・フォーム送信に反応する処理を作りたい人
を目指す人
プロフィールページをデータ駆動の UI に育てたい人
を目指す人
陽葵「予約ページ、動くようにしてほしいの」
1問目は無料で解けます。
教材を見ないで、依頼と完成条件だけを読んで書いてみてください。
JavaScript道場 ハレノヒ珈琲を動かす10問
先にこちらを通しておくと、つまずきにくくなります
このコースを終えたあとに進むと、無理なく続けられます
