Web のきほん

JavaScript のきほん：ページに動きをつける

変数・関数・条件分岐・繰り返しといったプログラミングの土台と、ボタンを押したら画面が変わる「DOM 操作」を、動くサンプルつきで学びます。

更新日：2026-09-25

この記事で分かること

プログラミングの土台になる考え方（変数・関数・条件分岐・繰り返し）
JavaScript を HTML に組み込む方法
「ボタンを押したら画面が変わる」を作る方法（DOM 操作）
エラーの見つけ方（開発者ツールの使い方）

この記事は、どの言語を学ぶ人にも共通する「プログラミングの考え方」を JavaScript で身につける回です。所要時間の目安は 120 分。2回に分けても構いません。

JavaScript とは

JavaScript は、ブラウザの中で動くプログラミング言語 です。HTML が構造、CSS が見た目だとすれば、JavaScript は「動き」を担当します。

ボタンを押したらメッセージを表示する
入力した内容をチェックする
画像を切り替える、メニューを開閉する

ほぼすべての Web サイトで使われていて、サーバー側（Node.js）でも使えるため、最初に学ぶ言語として最も実用的です。

準備：HTML から読み込む

index.html と同じフォルダに script.js を作り、body の いちばん最後（</body> の直前）で読み込みます。

<body>
  <h1 id="title">こんにちは</h1>
  <button id="btn">押してね</button>

  <script src="script.js"></script>
</body>

script.js に次の1行を書いて保存し、ブラウザを更新してください。

console.log('動いています');

画面には何も出ませんが、F12 で開発者ツールを開き「Console」タブを見ると「動いています」と表示されています。この Console が、これからの学習で一番使う場所です。

変数：値に名前をつける

let name = '太郎';        // 文字列（文字はクォートで囲む）
let age = 20;             // 数値
let isStudent = true;     // 真偽値（true か false）

console.log(name + 'さんは' + age + '歳です');

let で変数を作ります。あとから値を変えないものは const を使います（実務では const が基本です）。

const taxRate = 0.1;
let price = 1000;
price = price * (1 + taxRate);   // 1100

文字列をつなげるときは + でもよいですが、次の書き方（テンプレート文字列）のほうが読みやすくておすすめです。

console.log(`${name}さんは${age}歳です`);

関数：処理に名前をつける

同じ処理を何度も書かずに済むように、処理のかたまりに名前をつけたものが関数です。

function greet(person) {
  return `こんにちは、${person}さん`;
}

console.log(greet('太郎'));   // こんにちは、太郎さん
console.log(greet('花子'));   // こんにちは、花子さん

function 名前(引数) { ... } で定義
return で結果を返す
名前(値) で呼び出す

最近は次の書き方（アロー関数）もよく使います。意味は同じです。

const greet = (person) => `こんにちは、${person}さん`;

条件分岐：if

const score = 75;

if (score >= 80) {
  console.log('よくできました');
} else if (score >= 60) {
  console.log('合格です');
} else {
  console.log('もう少しがんばりましょう');
}

比較には >=（以上）、<=（以下）、===（等しい）、!==（等しくない）を使います。=== は = が3つです。2つ（==）でも動きますが、思わぬ挙動をするので3つで統一してください。

繰り返し：for

for (let i = 1; i <= 5; i++) {
  console.log(`${i}回目`);
}

配列（値のリスト）を順番に処理するなら、次の書き方が読みやすいです。

const fruits = ['りんご', 'みかん', 'ぶどう'];

for (const fruit of fruits) {
  console.log(fruit);
}

配列とオブジェクト

複数の値をまとめて扱うための入れ物です。

// 配列：順番のあるリスト
const scores = [80, 65, 92];
console.log(scores[0]);        // 80（番号は 0 から始まります）
console.log(scores.length);    // 3

// オブジェクト：名前つきの値のまとまり
const user = { name: '太郎', age: 20 };
console.log(user.name);        // 太郎

実際のデータは、ほとんどが「オブジェクトの配列」の形をしています。

const users = [
  { name: '太郎', age: 20 },
  { name: '花子', age: 25 },
];
for (const u of users) {
  console.log(`${u.name}（${u.age}歳）`);
}

DOM 操作：画面を変える

ここからが JavaScript の本領です。HTML の要素を JavaScript から取得して、書き換えます。

const title = document.getElementById('title');   // id="title" の要素を取得
const btn = document.getElementById('btn');

btn.addEventListener('click', () => {             // ボタンが押されたら
  title.textContent = '押されました！';             // 見出しの文字を変える
  title.style.color = 'red';                        // 色を変える
});

document.getElementById('id名') で要素を取得
addEventListener('click', 関数) で「クリックされたときの処理」を登録
textContent で文字、style.○○ で見た目を変更

入力欄の値を使う

<input id="nameInput" type="text" placeholder="名前">
<button id="helloBtn">あいさつ</button>
<p id="message"></p>

document.getElementById('helloBtn').addEventListener('click', () => {
  const name = document.getElementById('nameInput').value;
  if (name === '') {
    document.getElementById('message').textContent = '名前を入力してください';
  } else {
    document.getElementById('message').textContent = `こんにちは、${name}さん！`;
  }
});

変数・条件分岐・DOM 操作が1つにつながりました。ここまでできれば、簡単なフォームのチェックや計算ツールが作れます。

やってみよう

カウンター：ボタンを押すたびに数字が1ずつ増えるページを作る。10 になったら「10回達成！」と表示する。
税込計算：金額を入力して押すと、税込価格（10%）を表示する。
リスト表示：配列に入れた好きな映画3つを、for を使って ul の中に li として並べる（ヒント：document.createElement('li') と appendChild）。

3つ目はやや難しいので、AI に「ヒントだけ」をもらいながら進めるのもよい練習です。

つまずきやすいところ

何も起きない → Console に赤いエラーが出ていないか確認。Uncaught TypeError: Cannot read properties of null は「その id の要素が見つからない」という意味で、id のつづり違いか、script を head に置いている（要素が作られる前に実行している）のが原因です。
= と === の違い → = は代入、=== は比較。if (a = 1) は間違いです。
文字列と数値 → 入力欄の value は常に文字列です。計算するなら Number(value) で数値に変えます。

まとめ

変数（let / const）、関数、if、for、配列とオブジェクトがプログラミングの土台。
document.getElementById と addEventListener で画面を動かせる。
エラーは Console を見る。赤い文字は敵ではなく、ヒント。

次は「Claude Code をはじめる」で、ここまで学んだ内容を AI と一緒に作る方法に進みます。

公開教材の一覧へ