WEB制作
JavaScript | 7章：変数と定数を学ぼう
INDEX
目次
前の章に戻る 次の章に進む

7章：変数と定数を学ぼう

本章では、プログラムを柔軟かつ効率的に動作させるために不可欠な概念である変数と定数を学びます。

【7-1】変数とは

(11355)

変数とは、ひとことで言えば「データの入れ物」です。

これはよくある説明ですが、はじめてプログラミングを学ぶ人にとっては、この例えだけ聞かされてもピンとこないかもしれません。

では、次の例（サンプルコード7-1）を見てみましょう。
x=3
y=5
z=x+y
サンプルコード7-1
・さて問題です。zに入るものは何でしょうか？

　・そうです、8ですね。中学生ぐらいになれば、たいていの人はこの問題を解くことができます。
　・この計算式における「x」「y」「z」のことを変数といいます。
　・この変数のことを入れ物に例えているのですが、そうなるとデータと呼んでいるものが3や5ということになります。
「x という入れ物に、3という数値を一時的に保存しておく」
「y という入れ物に、5という数値を一時的に保存しておく」
「結果、z という入れ物に8という数値が保存される」
・これが変数の役割です。変数とは、データを一時的に保存しておくための記憶装置のことです。
・入れ物という例えも正確ではありますが、記憶装置という例えと一緒に覚えると、より理解がしやすいのではないでしょうか。
変数の特徴
変数には、以下の重要な特徴が２つあります。

★変数の特徴
　１．名前がつけられている
　２．動的に中身のデータを変更することができる
(11370)

(11371)

変数はx、y、zのような名前を持っているのと同時に、動的な中身の変更ができるという柔軟性を持っています。
→例えば、上記計算式のxの中身を6に変更すれば、自動的にzの中身は11に変わります。変数はこのような柔軟性を持っています。
・では、「x=6」と書いたときの「=（イコール）」という記号は何でしょうか。

→私たちは日常会話ではこの記号のことを「等しい」という意味で使うことが多いですが、プログラミングでは「=」を代入演算子として分類し、「左辺に右辺を代入する」という意味で使います。
→「x=6」は「変数xに6を代入する」という意味です。
よく使う代入演算子
演算子 意味
= 左辺の値に右辺の値を代入する
+= 左辺の値に右辺の値を加算したものを左辺に代入する
-= 左辺の値から右辺の値を減算したものを左辺に代入する
*= 左辺の値から右辺の値を乗算したものを左辺に代入する
/= 左辺の値から右辺の値を除算したものを左辺に代入する
変数に値（データ）を代入するときに使う代入演算子には種類が数多くあります。

以下は、よく使う代表的な代入演算子です。
データ型
(11398)

★データ型とは
・３や5や6や11のような算術計算（加算、減算、乗算、除算など）ができるデータのことを数値と呼びます。
・変数に代入することができるデータにはいろいろな種類があります。
　・その種類のことをデータ型といいます。数値はデータ型の一種です。それぞれのデータ型は異なる性質を持っており、用途が異なります。
・JavaScriptで変数や定数に代入可能なデータ型には、以下のようなものがあります
JavaScriptで扱える主なデータ型
データ型 意味
数値（number） 1や-1などの整数と0.1などの小数を含めた数値
文字列（string） 「''」「""」で囲まれた0個以上の文字の集合
真偽型（boolean） true（真）またはfalse（偽）を示す型
シンボル型（symbol） 固有の識別子を作成するための型
null 値が空であることを示す型
undefined 値が未定義であることを示す型
配列（array） 番号付きのデータの集合
オブジェクト（object） 名前付きのデータの集合
関数（function） JavaScriptの関数（プログラムのひとかたまり）

■ 変数を宣言する（let宣言）

(11408)

★変数宣言の方法
・変数を宣言するためのキーワードをlet宣言といいます。
・let宣言を使った変数の定義方法は以下のようになります。
・「=」は先述したように、左辺の値に右辺の値を代入するという意味の代入演算子で、変数に値をセットするために使います。
この記述方法を使い、サンプルコード7-1をJavaScriptの規則に則って記述し直すと、以下のサンプルコード7-2のようになります。
任意のファイル名でHTMLファイルを作成し、<body></body>内に記述してみましょう。
<script>
        let x=3;
        let y=5;
        let z=x+y;
</script>
サンプルコード7-2

■ フォームのテキストボックスに計算結果を表示する（数値の代入）

HTMLとJavaScript
<form>
  <input type="text" class="elem" />
</form>

<script>
  let x = 3;
  let y = 5;
  let z = x + y;
</script>
サンプルコード7-3
★サンプルコード7-3の解説

・上記サンプルコード7-2では、変数zに3+5の計算結果である8が代入されます。
・その結果をフォームのテキストボックスに表示してみましょう。
・上記（サンプルコード7-3）のように、formタグとinputタグでテキストボックスをひとつ作成します。
・このとき、scriptタグよりも上にフォームを作成します。
HTMLとJavaScript
<form>
  <input type="text" class="elem" />
</form>

<script>
  let x = 3;
  let y = 5;
  let z = x + y;

  document.querySelector(".elem").value = z;
</script>
サンプルコード7-4
★サンプルコード7-4の解説
・inputタグのclass名をquerySelectorメソッドで取得してオブジェクトを作成し、valueプロパティの値をセットすれば、テキストボックスにその値を表示することができます。
・変数zをvalueプロパティにセットしてからブラウザプレビューしてみましょう。
(11432)

変数の中身を変更する（変数に値を再代入する）
次に、変数の中身を変更してみましょう。

サンプルコード7-5は変数の動的な中身の変更ができるという特徴を確認するためのものです。
(11443)

HTMLとJavaScript
<form>
  <input type="text" class="elem" />
</form>

<script>
  let x = 3;
  let y = 5;
  x=6;//変数xに6を再代入する
  let z = x + y;

  document.querySelector(".elem").value = z;
</script>
サンプルコード7-5
★サンプルコード7-5の解説
サンプルコード7-4に1行書き加えます。

let x = 3;
let y = 5;

の下にx=6;を追加しましょう。

これは、最初の行で宣言して3を代入した変数xに、後から6を代入して中身を入れ替えるという意味です。

このような操作を、変数に別の値を再代入するといいます。

結果的に、その下の行のlet z = x + y;の計算式の変数xには6が入るため、変数zの中身は自動的に11に変わります。
JavaScriptはブラウザにDOMが読み込まれた後でないと処理されない
HTMLとJavaScript
<script>
  let x = 3;
  let y = 5;
  let z = x + y;

  document.querySelector(".elem").value = z;
</script>

<form>
  <input type="text" class="elem" />
</form>
サンプルコード7-6
★サンプルコード7-6の解説
・scriptタグよりも上にフォームを作成したことには理由があります。
　・JavaScriptはブラウザにDOMが読み込まれた後でないと処理されないためです。
・試しにscriptタグよりも下にフォームを作ってみましょう。
・こちらのコードではテキストボックスに何も表示されません。
(11465)

loadイベント、またはDOMContentLoadedイベントを設定する
HTMLとJavaScript
<script>
  let x = 3;
  let y = 5;
  let z = x + y;

  document.addEventListener("DOMContentLoaded", function () {
    document.querySelector(".elem").value = z;
  })
</script>

<form>
  <input type="text" class="elem" />
</form>
サンプルコード7-7
★サンプルコード7-7の解説
・loadイベントは画像を含む全コンテンツの読み込みが完了したタイミングを意味します。
・一方、DOMContentLoadedイベントは、画像以外の全コンテンツの読み込みが完了したタイミングを意味します
・従って、画像を使用した処理を行わない場合は、通常はDOMContentLoadedイベントを設定します。
(11472)

■ よく使う算術演算子

・今回のサンプルコードでは、変数を使った加算の算術計算を+演算子を使って行いましたが、JavaScriptでは標準的な四則演算をはじめとするさまざまな数学的計算が可能です。
・その際、以下のような算術演算子を使用します。
よく使う算術演算子一覧
(11626)

■ 変数名の命名ルール

変数名の命名ルールは、3章で学習した関数名の命名ルールと同じです。
★変数名の命名ルール
・半角の英数字を使う
・大文字と小文字は区別される
・記号は「_（アンダースコア）」と「$（ドル）」のみ使える
・変数名の先頭の文字に数字は使えない
・JavaScriptで意味を持つ単語（予約語という）は使わない
読みやすいコードを書くことを念頭に置き、以下の点にも注意しながら命名しましょう。
★変数名をつけるときの注意点
・変数の中身が類推しやすい名前をつける
・ローマ字などではなく、基本的には英単語で名前をつける
・キャメルケースで表記するのが一般的

■ HTML中に文字列を書き出す（文字列の代入）

・変数に代入できるデータ型は数値だけではありません。
・本章の「JavaScriptで扱える主なデータ型」の表に掲載されているデータ型はすべて変数に代入してJavaScriptで扱うことができます。
・次は変数に文字列を代入してみましょう。
・変数に代入した文字列を連結してspanタグ内に出力します。
textContentプロパティでテキストを出力する
HTMLとJavaScript
<p class="full-name"></p>

<script>
  let lastName = "五反田";
  let firstName = "花子";
  let fullName = lastName + firstName

  document.querySelector(".full-name").textContent = fullName;
</script>
サンプルコード7-8
★サンプルコード7-8の解説
・textContentプロパティは要素オブジェクトのプロパティで、要素オブジェクト内にテキストを出力、または要素オブジェクト内のテキストを取得する際に使います。
・今回は変数fullNameをtextContentプロパティの値としてセットし、変数の中身を出力するために使っています

★文字列の連結とは
・「lastName + firstName」部分で使われている+演算子は、ここでは四則演算の加算を意味しません。
・+演算子を文字列に対して使うと、文字列の連結という意味になります。
・サンプルコード7-8では、"五反田"という文字列と”花子”という文字列が連結され、”五反田花子”という文字列が変数fullNameに格納されます。
(11495)

【7-2】演習 10ずつ加算するボタン

・ここまでに学んできた変数や代入演算子、算術演算子の使い方を応用して次のしくみを作ってみましょう。
・ボタンをクリックする度に、初期値の0に10ずつ加算されていくというものです。
演習データをダウンロードし、「plus10_start.html」をエディターで開いてください。

JS7-1演習データ.zip (1.08 KB)
HTMLマークアップ
plus10_start.html
<p class="number"></p>
<button class="btn">プラス10</button>
サンプルコード7-9
・HTMLはサンプルコード7-9のようにマークアップします。
・ボタンクリック時に、pタグ内に処理結果の数値を出力します。
JavaScriptで初期値を出力する
・このタグの下にscriptタグを記述し、JavaScriptを書いていきます。
・まずは初期値の0をpタグ内に出力します。
plus10_start.html
<p class="number"></p>
<button class="btn">プラス10</button>

<script>
  //初期値
  let num = 0;
  //初期値の0をpタグ内に出力
  document.querySelector(".number").textContent = num;
</script>
サンプルコード7-10
★サンプルコード7-10の解説
・変数numを宣言し、初期値の0を代入します。
・pタグのclass名をquerySelectorメソッドで取得し、textContentプロパティの値として変数numをセットすれば、pタグ内に0が出力されます。
(11520)

ボタンにクリックイベントを設定する
・ボタンにクリックイベントを設定します。
・関数の処理として、変数numに10ずつ加算したものをpタグに出力するためのコードを記述します。
plus10_start.html
<script>
  //初期値
  let num = 0;
  //初期の0をpタグ内に出力
  document.querySelector(".number").textContent = num;
  //ボタンにクリックイベントを設定
  document.querySelector(".btn").addEventListener("click", function () {
    //num変数に10加算
    num += 10;
    //num変数に格納されている10加算した結果をpタグ内に出力
    document.querySelector(".number").textContent = num;
  })
</script>
サンプルコード7-11
★サンプルコード7-11の解説

・buttonタグのclass名をquerySelectorメソッドで取得し、clickイベントを設定します。
・関数内には、まず変数numに10を加算するという処理を記述します。
・例えば、num=10;と書くと、これは変数numに10を代入するという意味になり、変数numに元々入っていた値が10に置き換わるだけですので、クリックする度に加算することにはなりません。
・そこで、左辺の値に右辺の値を加算したものを左辺に代入するという意味の代入演算子+=を使い、num += 10;と記述します。
・こちらだと、ボタンをクリックする度に変数numの値に10ずつ加算していくという処理になります。
・補足すると、num += 10;は、num = num+10;と同じ意味です。
・そして最後に、10加算されたnum変数の中身をtextContentプロパティの値としてセットしてpタグ内に出力します。
・これで完成です。
完成したコード全体
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>JavaScript</title>
  </head>

  <body>
    <p class="number"></p>
    <button class="btn">プラス10</button>

    <script>
      //初期値
      let num = 0;
      //初期値の0をpタグ内に出力
      document.querySelector(".number").textContent = num;
      //ボタンにクリックイベントを設定
      document.querySelector(".btn").addEventListener("click", function () {
        //num変数に10加算
        num += 10;
        //10加算した結果をpタグ内に出力
        document.querySelector(".number").textContent = num;
      })
    </script>
  </body>
</html>
サンプルコード7-12

【7-3】定数とは

(11539)

★変数と定数の違い
・変数とは「データの入れ物」のことです。
　・入れ物である変数の重要な性質のひとつは、中身を変更できる点です。
　・言い換えれば、変数に保存されているデータは別のデータで上書きすることができるということです。
　・演習7-2で作成した10ずつ数値が増えていく仕組みは、変数のこの性質を利用しています。
　・ECサイトなどで商品をカートに入れる度に合計金額や消費税が自動計算される仕組みも、変数のこの性質があるからこそ実現可能なのです。

・一方で、同じ「データの入れ物」でも、別のデータで上書きすることができない入れ物があります。
　・それが定数（constant）です。
　・JavaScriptでは、プログラムの処理過程で中身が変更される入れ物を変数として定義し、中身が最後まで変更されない入れ物を定数として定義することが推奨されています。
　・そうすることで、プログラムのミスを予防したり、ミスを早期に発見できたりするといった利点があります。

■ 定数を宣言する（const宣言）

(11544)

★定数宣言の方法
・JavaScriptで定数を扱う際には、決まった記述法があります。
・変数宣言のletの代わりに、const宣言を使って宣言するだけです。
変数letと定数constの違い
以下は変数letと定数constの違いを表にしたものです。
　 let const
再代入（データの上書き） 可 不可（エラーになる）
再宣言（同じ名前の定数を２つ以上宣言する） 不可（エラーになる） 不可（エラーになる）
スコープ ブロックスコープ{}で括られた処理範囲でのみ有効 ブロックスコープ{}で括られた処理範囲でのみ有効
※スコープとは
変数にアクセスできる範囲のこと。

★JavaScriptで定数を使用する理由
 ・定数は再代入と再宣言が禁止されていることにより、開発途中やコードの修正中の意図しないミスにすぐに気がつくことができるから。
・見通しがよく、簡潔で読みやすいコードを書くことができるから。
　・最近の開発現場では、再代入が必要な場合を除いて、できるだけconstを使いましょうという傾向があります。
定数宣言時のエラー例
JavaScript
<script>
  //初期値
  const num = 0;//const宣言で定数宣言して0を代入する
  //初期の0をpタグ内に出力
  document.querySelector(".number").textContent = num;
  //ボタンにクリックイベントを設定
  document.querySelector(".btn").addEventListener("click", function () {
    num += 10;//num定数に10を加算（定数には値を再代入できないのでエラーになる）
    //10加算した結果をpタグ内に出力
    document.querySelector(".number").textContent = num;
  })
</script>
サンプルコード7-13
例えば、「【7-2】演習 10ずつ加算するボタン」で宣言した変数numを、上記（サンプルコード7-13）中のconst num = 0;のように定数として宣言したらどうなるでしょうか？
・結果は、num += 10;のところで再代入ができないので、コンソールにエラーが表示され、処理が停止します。
定数の使い所
では、どんなデータが定数として定義されるのに相応しいのでしょうか。

★定数と変数の使い分け方
・const宣言で定義すべき定数の値は、プログラムの処理の過程で変化しないことが前提となる値です。
　・例えば円周率のように未来永劫変わらない数値であったり、消費税率のような頻繁には変わらない数値などは定数として扱うのに適切な値であると言えるでしょう。
　・または、”入力に不備があります”のような特定の条件下でメッセージとして出力され、後で文言が変わる可能性のない文字列なども、定数として定義するのに相応しいと言えるでしょう。
・一方で、let宣言で定義する変数には、プログラムの処理の過程で再代入される可能性のある値や状態が変わるデータを代入します。
　・例えば、ECサイトの購入画面でユーザーが選択する商品の個数や、自動で計算される合計金額のような数値は、ユーザーが入力内容を変更すれば変わるので、変数としてlet宣言で定義すべきデータです。
・また、次のようにquerySelectorメソッドなどでclass名を取得して作成した要素オブジェクト（再代入される可能性がないもの）を定数に代入することで、コード全体を簡潔に、見通しがよく記述することができます。

■ 要素オブジェクトを定数に代入する

JavaScript
<script>
  //初期値
  let num = 0;
  //初期の0をpタグ内に出力
  document.querySelector(".number").textContent = num;
  //ボタンにクリックイベントを設定
  document.querySelector(".btn").addEventListener("click", function () {
    //num変数に10加算
    num += 10;
    //10加算した結果をpタグ内に出力
    document.querySelector(".number").textContent = num;
  })
</script>
サンプルコード7-12（再掲）
・要素オブジェクトを定数に代入することにより、サンプルコード7-12をより読みやすく、簡潔で見通しの良いコードに書き換えてみましょう。
・こちらのコードでは、querySelectorメソッドを使いclass名を取得して作成した要素オブジェクトが2種類使われています。document.querySelector(".number")については2回重複して登場しますので、冗長で無駄の多いコードに見えてしまいます。
そこでこの2つの要素オブジェクトを定数に代入することにより、簡潔に書き換えたコードが、次のサンプルコード7-14です。
JavaScript
<script>
  //オブジェクトの作成
  const numBox=document.querySelector(".number");
  const btnObj=document.querySelector(".btn");

  //初期値
  let num = 0;
  //初期の0をpタグ内に出力
  numBox.textContent = num;
  //ボタンにクリックイベントを設定
  btnObj.addEventListener("click", function () {
  //num変数に10加算
  num += 10;
  //10加算した結果をpタグ内に出力
  numBox.textContent = num;
  })
</script>
サンプルコード7-14
★サンプルコード7-14の解説
・どうでしょうか？行数は増えましたが、こちらの方が一文が短く、すっきりとした見通し良いのコードになっています。
・一番最初に要素オブジェクトを代入するための定数を宣言し、オブジェクトの一覧のようなものを作ってしまうことで、コードを書いている途中や修正を行う際に、numBox定数やbtnObj定数に何が代入されているかわからなくなってしまっても、すぐに中身を確認することができます。
・この書き方は、要素オブジェクトの数が増え、コードが長くなるほど管理のしやすさを実感することができます。
・登場人物の多い、長い小説を読んでいるとき、巻頭に登場人物一覧が載っていると、読み進める際にストーリーの把握がしやすくなるという利点がありますが、それと似ているような気がします。

【7-4】演習　要素オブジェクトを定数に代入する

前章の演習6で作成したボタンクリックで文字サイズを変えるJavaScriptを、定数に要素オブジェクトを代入することにより、簡潔で見通しの良いコードに書き換えてみましょう。
演習データをダウンロードし、「font-size_start.html」をエディターで開いてください。

JS7-2演習データ.zip (2.59 KB)
書き換え前
//大ボタン
document.querySelector(".large").addEventListener("click", function () {
  document.querySelector(".main-text").style.fontSize = "24px";
});

//中ボタン
document.querySelector(".medium").addEventListener("click", function () {
  document.querySelector(".main-text").style.fontSize = "16px";
});

//小ボタン
document.querySelector(".small").addEventListener("click", function () {
  document.querySelector(".main-text").style.fontSize = "12px";
});
サンプルコード6-5（再掲）
要素オブジェクトだらけですね。

早速書き換えてみましょう。
書き換え後
//オブジェクト一覧
const largeBtn = document.querySelector(".large");
const mediumBtn = document.querySelector(".medium");
const smallBtn = document.querySelector(".small");
const mainText = document.querySelector(".main-text");

//大ボタン
largeBtn.addEventListener("click", function () {
  mainText.style.fontSize = "24px";
});

//中ボタン
mediumBtn.addEventListener("click", function () {
  mainText.style.fontSize = "16px";
});

//小ボタン
smallBtn.addEventListener("click", function () {
  mainText.style.fontSize = "12px";
});
サンプルコード7-15
★サンプルコード7-15の解説

querySelectorメソッドで作成された4つの要素オブジェクトを全て定数に代入します。

定数には中身が推測しやすい名前をつけることを心がけましょう。

消費税率や円周率のような数値を代入する場合、一般的には定数名はすべて大文字で命名し、単語をアンダースコアで区切る表記法がよく使われているようですが、今回は判読性を優先し、キャメルケースを使って命名しています。

【7-5】引数を指定した関数を定義しよう

3章で学習した関数には、引数（ひきすう）を指定する記述方法があります。

引数を指定した関数の定義には、通常変数を使います。

■ 引数とは

こちらは3章で学習した関数の定義方法です。

関数の()内に記述するものを引数といいます。
(11644)

★引数とは
・引数（パラメータともいう）とは、関数を実行するときに関数に渡す値やデータのことです。
・引数を使った関数を定義することにより、1つの関数で複数の異なるデータに対して同じ処理を行うことができます。

■ 引数を指定した関数の定義方法

前節「【7-4】演習　要素オブジェクトを定数に代入する」で作成したサンプルコード7-15の関数の箇所を、引数を指定した関数に書き換えてみましょう。
//オブジェクト一覧
const largeBtn = document.querySelector(".large");
const mediumBtn = document.querySelector(".medium");
const smallBtn = document.querySelector(".small");
const mainText = document.querySelector(".main-text");

//大ボタン
largeBtn.addEventListener("click", function () {
  mainText.style.fontSize = "24px";
});

//中ボタン
mediumBtn.addEventListener("click", function () {
  mainText.style.fontSize = "16px";
});

//小ボタン
smallBtn.addEventListener("click", function () {
  mainText.style.fontSize = "12px";
});
サンプルコード7-15（再掲）
・このコードは、前節で要素オブジェクトを定数に代入することにより、ある程度見通しが良く読みやすいコードにはなりました。
・しかし、fontSizeプロパティの値として指定した文字サイズが異なるだけで、ほぼ同じ内容の3つの関数が繰り返し書かれているという点では、重複が多く、まだ改善の余地を残したコードであるとも言えます。
そこで、引数を使った関数を定義することにより、1つの関数を大・中・小ボタンで使いまわす形に書き換えてみたいと思います。
関数の引数には変数名を指定する
(11658)

上記は引数を指定した関数の定義方法です。
・関数の()内には変数名を記述します。
→この変数は、関数内で利用される一時的な変数として機能し、関数が呼び出される度に別の新しい値を代入することができます。
→このとき、let宣言を使い変数宣言を行う必要はなく、変数名のみを()内に記述します。
この書式に従い、サンプルコード7-15の関数を書き換えると、以下のようになります。
//引数を指定した関数の定義
function fontSizeChange(fontSizePx) {
  mainText.style.fontSize = fontSizePx;
}
サンプルコード7-16
★サンプルコード7-16の解説

・この1つの関数を、大・中・小ボタンのクリックイベント発生時に呼び出し、フォントサイズの指定のみを変えて実行します。

・fontSizePxが引数として指定した変数名です。
→この変数は、関数内で利用することが可能です。

・今回は、関数内の処理のfontSizeプロパティにセットする値として変数fontSizePxを指定しました。
→この変数fontSizePxには、fontSizeChange関数を呼び出す度に、新しい値を代入することができます。
→その結果、クリックするボタンによって異なる文字サイズが設定されるしくみをつくることができます。
引数を指定した関数の呼び出し
(11666)

引数を指定した関数の呼び出し方法は上記のとおりです。

関数呼び出しの()内に、変数に代入する値を引数として記述します。
この書式に従い、サンプルコード7-16の関数を、各ボタンにclickイベントが発生した時に呼び出すと、以下のようになります。
//大ボタン
largeBtn.addEventListener("click", function () {
  fontSizeChange("24px");
});

//中ボタン
mediumBtn.addEventListener("click", function () {
  fontSizeChange("16px");
});

//小ボタン
smallBtn.addEventListener("click", function () {
  fontSizeChange("12px");
});
サンプルコード7-17
★サンプルコード7-17の解説
・関数の呼び出しはfontSizeChange()です。

・この記述を使い、大・中・小ボタンそれぞれのクリックイベント発生時に関数の呼び出しを行います。

・文字サイズは、"24px"、"16px"、"12px"のように、それぞれのボタンのイベント発生時に指定した呼び出し文の()内に記述すれば、関数が実行される際に、変数fontSizePxに代入され、ボタンごとに異なる文字サイズが設定される処理が完成します。
JavaScriptのコード全体
<script>
  //オブジェクト一覧
  const largeBtn = document.querySelector(".large");
  const mediumBtn = document.querySelector(".medium");
  const smallBtn = document.querySelector(".small");
  const mainText = document.querySelector(".main-text");

  //引数を指定した関数の定義
  function fontSizeChange(fontSizePx) {
    mainText.style.fontSize = fontSizePx;
  }

  //大ボタン
  largeBtn.addEventListener("click", function () {
    fontSizeChange("24px");
  });

  //中ボタン
  mediumBtn.addEventListener("click", function () {
    fontSizeChange("16px");
  });

  //小ボタン
  smallBtn.addEventListener("click", function () {
    fontSizeChange("12px");
  });
</script>
サンプルコード7-18
補足 イベントの設定を配列とループでまとめる
<script>
  //オブジェクト一覧
  const largeBtn = document.querySelector(".large");
  const mediumBtn = document.querySelector(".medium");
  const smallBtn = document.querySelector(".small");
  const mainText = document.querySelector(".main-text");

  //ボタンオブジェクトを配列に格納する
  const btnObj = [largeBtn, mediumBtn, smallBtn]
  //文字サイズを配列に格納する
  const fSize = ["24px", "16px", "12px"]

  //引数を指定した関数の定義
  function fontSizeChange(fontSizePx) {
    mainText.style.fontSize = fontSizePx;
  }

  //clickイベントの設定をループでまとめる
  for (let i = 0; i < btnObj.length; i++) {
    btnObj[i].addEventListener("click", function () {
      fontSizeChange(fSize[i]);
    });
  }
</script>
サンプルコード7-19
・サンプルコード7-18を見て、clickイベントの設定部分がまだ重複の多いコードだと思った人もいると思います。
・実は、clickイベントの設定部分もサンプルコード7-19のように、簡潔にまとめることができます。
・ただし、こちらのコードには「10章 JavaScriptの反復処理を学ぼう」と「11章 配列を学ぼう」の学習内容が含まれていますので、10章と11章を学んだ後でしたら、解読できるようになっているはずです。
・ここでは参考程度にご紹介しておきます。
これで「7章：変数と定数を学ぼう」の解説を終わります。

次の章に進みましょう。
前の章に戻る 次の章に進む
WEBCOACH | キャリアチェンジまでの全てを学ぶマンツーマンWEBスクール
© 2020 by WEBCOACH