CURRICULUM  /  LAYER 01  /  CHAPTER 04

JavaScriptを読む

HTMLが「意味」、CSSが「見た目」なら、JavaScriptは「動き」です。

ボタンを押したら何かが起きる。

入力したら何かが変わる。

この「起きる」「変わる」を書き表すための言葉を、これから一つずつ読み解いていきます。

JavaScriptは何をしている言語なのか

あなたがウェブサイトを開いて、ボタンをクリックしたら、画面の一部がふわっと変わった。

入力欄に文字を打ち込んだら、リアルタイムで文字数が表示された。

送信ボタンを押したら、ページを遷移せずにメッセージが表示された。

こういう「動き」を作っているのが、JavaScriptです。

ブラウザの中に住んでいて、HTMLの内容を読み書きしたり、ユーザーの操作に反応したりする。

それがJavaScriptの仕事です。

まずは最小の例を読んでみる

言葉の説明をする前に、いきなり実物を見てもらいます。

次のコードは、ボタンをクリックしたら画面のメッセージが変わるという、ごく小さな例です。

<p id="message">こんにちは</p>
<button id="greet-btn">押してね</button>

<script>
  const btn = document.getElementById("greet-btn");
  btn.addEventListener("click", function() {
    const msg = document.getElementById("message");
    msg.textContent = "こんばんは!";
  });
</script>

最初に見ると、呪文のようですよね。

でも、落ち着いて一行ずつラベルのように読んでいくと、ちゃんと意味があります。

この先の説明を読んだあとで、もう一度このコードに戻ってくると、ぐっと親しみが湧くはずです。

変数 ─ 「あとで使うもの」に名前を付ける

プログラミングで一番最初に出てくる概念が、変数です。

変数というと難しく聞こえますが、要するに「後で何度も使うものに、名前を付けて取っておく」ための仕組みです。

// 「name という名前で、'山田' という文字列を取っておく」
const name = "山田";

// 取っておいた name を、後で使える
console.log(name);  // → 山田 と表示される

const というキーワードは「これから変数を作りますよ」という合図です。

その後に名前を書き、= で値を結び付けます。

数学の「等しい」ではなく、「右の値を左の名前に入れる」という意味だと思ってください。

JavaScriptには変数を作る方法が3つあります(const・let・var)。

違いは少しずつありますが、初心者のうちは、原則 const を使うと覚えてOKです。

途中で値を書き換える必要があるときだけ let を使い、var は古い書き方なので新しいコードでは避けましょう。

// const: 一度決めたら変えない(基本これ)
const pi = 3.14;

// let: あとで値を書き換える必要があるとき
let count = 0;
count = count + 1;  // ← constだとこれができない

値にはいくつかの種類がある

変数に入れる値には、いくつかの種類(型)があります。

入門段階では、次の4つを押さえれば十分です。

const name    = "山田";        // 文字列(string)─ ダブルかシングルのクォートで囲む
const age     = 42;            // 数値(number)─ そのまま書く
const isAdmin = true;          // 真偽値(boolean)─ true または false
const fruits  = ["りんご", "みかん"]; // 配列 ─ 複数の値をまとめて入れる箱

文字列はクォート(" か ')で囲むのがルールです。

クォートを忘れると、JavaScriptはそれを「変数名」だと勘違いして、怒られます。

これが初心者のつまずきあるあるです。

関数 ─ 「ひとまとまりの処理」に名前を付ける

変数が「値に名前を付ける仕組み」なら、関数は「処理のひとまとまりに名前を付ける仕組み」です。

同じ処理を何度も書かずに済ませたり、複雑な処理に分かりやすい名前を付けて整理したりするために使います。

// 「greet という名前で、挨拶を表示する処理」を定義する
function greet(name) {
  console.log("こんにちは、" + name + "さん!");
}

// 定義した関数は、何度でも呼び出せる
greet("山田");  // → こんにちは、山田さん!
greet("田中");  // → こんにちは、田中さん!

用語を整理しましょう。

• 定義(define)── 関数を作ること。function 名前(...) { ... } の部分
• 呼び出し(call)── 定義した関数を実際に動かすこと。greet("山田") の部分
• 引数(ひきすう / argument)── 関数に渡す値。ここでは "山田"
• 返り値(かえりち / return value)── 関数が処理の結果として返す値

返り値は return というキーワードで指定します。

// 2つの数を足して、結果を返す関数
function add(a, b) {
  return a + b;
}

const sum = add(3, 5);
console.log(sum);  // → 8

条件分岐 ─ 「もし〜なら」を書き表す

プログラムは、いつも同じことをするわけではありません。

「もしログインしていたらマイページを表示、そうでなければログインページにリダイレクト」のように、状況に応じて処理を分けたい場面がたくさんあります。

それを書くのが条件分岐です。

const age = 20;

if (age >= 18) {
  console.log("成人です");
} else {
  console.log("未成年です");
}

これは、こう読みます。

「もし age が18以上だったら、『成人です』と表示する。そうでなければ、『未成年です』と表示する」。

英語がそのまま読めれば、ほぼ日本語で追いかけられる構文です。

条件が3つ以上に分かれるときは、else if を使います。

const score = 75;

if (score >= 90) {
  console.log("優");
} else if (score >= 70) {
  console.log("良");
} else if (score >= 50) {
  console.log("可");
} else {
  console.log("不可");
}

上から順番に条件が試されて、最初にマッチしたブロックだけが実行されます。

score が75なら、「90以上か?」はNo、「70以上か?」でYesになり「良」と表示されます。

それ以降の条件はチェックされません。

比較のための記号

条件に使う記号もいくつか覚えておきましょう。

特に注意したいのは、「等しい」が == ではなく === であることです。

a === b     // 等しい(これを使う)
a !== b     // 等しくない(これを使う)
a < b       // 小なり
a > b       // 大なり
a <= b      // 以下
a >= b      // 以上

// 組み合わせ
a && b      // かつ(両方trueならtrue)
a || b      // または(どちらかがtrueならtrue)
!a          // 〜でない(trueとfalseを反転)

JavaScriptには == と === の2種類の「等しい」があるのですが、== は型の違いを曖昧に吸収してしまうため、思わぬバグの温床になります。

原則として ===(等しい)と !==(等しくない)だけを使うと覚えておくと、ほぼ事故りません。

最初の例に戻ってみる

さて、最初に見せたコードをもう一度貼ります。

今なら、ずっと読めるはずです。

const btn = document.getElementById("greet-btn");
btn.addEventListener("click", function() {
  const msg = document.getElementById("message");
  msg.textContent = "こんばんは!";
});

読み下してみます。

1. const btn = ...:「id が greet-btn の要素を探してきて、btn という名前で取っておく」
2. btn.addEventListener("click", function() { ... }):「btn がクリックされたら、中の処理を実行する」
3. const msg = ...:「id が message の要素を探してきて、msg という名前で取っておく」
4. msg.textContent = "こんばんは!":「msg の中身の文字を『こんばんは!』に書き換える」

やっていることは、「ボタンを見つけて、クリックされたらメッセージを書き換える」。

それだけのことを、変数・関数・DOM操作の組み合わせで書き表しているわけです。

document.getElementById や addEventListener は今はまだ呪文でOK。

「HTMLの要素を取ってくる命令」「イベントを待ち受ける命令」くらいの理解で十分です。

解読演習

function discount(price, isMember) {
  if (isMember) {
    return price * 0.8;
  } else {
    return price;
  }
}

const a = discount(1000, true);
const b = discount(1000, false);

console.log(a);
console.log(b);

function max3(a, b, c) {
  var result;
  if (a > b && a > c) {
    result = a;
  }
  if (b > a && b > c) {
    result = b;
  }
  if (c > a && c > b) {
    result = c;
  }
  return result;
}

function max3(a, b, c) {
  return Math.max(a, b, c);
}

console.log(0 == "");       // ①
console.log(0 === "");      // ②
console.log("1" == 1);      // ③
console.log("1" === 1);     // ④

この章のまとめ

• JavaScriptはブラウザの中で動く言語で、「動き」を担当する
• 変数は「値に名前を付けて取っておく」仕組み。原則 const、書き換えが必要なら let
• 関数は「処理のひとまとまりに名前を付ける」仕組み。引数を受け取り、return で値を返せる
• 条件分岐は if / else if / else。状況に応じて処理を分ける
• 「等しい」の比較は 必ず ===。== は奇妙な型変換をするので使わない
• DOM操作(getElementById など)でHTMLを読み書きできる ─ 今はまだ呪文でOK

次の章では、いよいよサーバーサイドのPHPに入ります。

JavaScriptがブラウザの中で動く言語だとしたら、PHPはサーバーの中で動く言語。

どこが同じで、どこが違うのか。

この比較が、ウェブ全体の見通しを一段良くしてくれます。