WEB制作
JavaScript | 3章：関数を学ぼう
INDEX
目次
前の章に戻る 次の章に進む

3章：関数を学ぼう

前章で学習したイベントの設定方法を完全に習得するためには、関数という仕組みの理解が必要不可欠です。

本章では、関数の使い方を学ぶことにより、さらにJavaScriptの理解を深めていきます。

【3-1】関数とは

(10669)

・プログラムを書いていると、同じ処理や似たような処理が何度も必要になる場面があります。

→例えば、複数ある商品の中からどれか1つを選択して、購入数を選ぶと税込の合計金額が計算されるといった処理が挙げられます。

→この「購入数を選ぶと税込の合計金額が計算される」コードを、1つ1つの商品ごとに書いていたのでは、プログラムが複雑化して解読しにくくなります。

→また、税率を変更して計算したいとき、合計金額を計算するコードを書いた箇所を全て修正していかなければならないため、修正ミスや修正漏れを起こしやすくなります。

→そこで、「購入数を選ぶと税込の合計金額が計算される」部分だけを取り出し、ひとまとめにしておくと、必要なときに呼び出す命令を書くだけで済みます。

→コードの修正も1箇所だけ行えば、全商品の計算処理に一括で適用されます。

・プログラムの処理内容をあらかじめひとまとめにしておき、必要なときに呼び出して実行する仕組みのことを関数といいます。

・JavaScriptのコードを関数で記述することの利点は、プログラムの処理内容を関数としてまとめておくことにより、同じ関数をいろいろな場所で使いまわす（再利用する）ことができる点です。

・この利点を活かして関数を使ったコードを書くことにより、無駄がなく、修正しやすいプログラムを作成することができます。
(10685)

(10686)

■ 関数のつくりかた

・関数をつくることを関数定義といいます。

・関数定義の方法にはいくつもの種類がありますが、本章では、最も基本的なfunction使った定義方法を解説します。

・functionは「機能」という意味ですが、この言葉がプログラミングで登場するときは、「関数」の意味で使われます。

以下が、functionを使った関数を定義するときの書式です。

functionを使った関数の定義

・引数（ひきすう）は省略して記述することも可能です。
・ただし、引数を省略するときも、丸カッコを省略することはできません。
・{ }で囲むブロックにはセミコロンは必要ありません。
(10690)

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

関数名の命名ルール

・基本的に、関数には名前をつけます（つけない関数もあります）。
・関数名をつけるときのルールは以下のとおりです。
・これは、後の章で学習する変数名をつけるときのルールと同じですので、今のうちに覚えてしまいましょう。
★関数名の命名ルール
・半角の英数字を使う
・大文字と小文字は区別される
・記号は「_（アンダースコア）」と「$（ドル）」のみ使える
・関数名の先頭の文字に数字は使えない
・JavaScriptで意味を持つ単語（予約語という）は使わない
　・予約語と同じ名前の関数を定義するとエラーになります。
★JavaScriptの予約語一覧
(10705)

関数名をつけるときの注意点

このルールに則って命名することはもちろんですが、以下の点にも注意して命名することを心がけましょう。
★関数名をつけるときの注意点

・「どんな処理を行なうための関数なのか」がひと目でわかるような名前をつける
・「popupAlert」や「changeImage」のように「動詞+名詞」の形式で命名するのが一般的
・キャメルケースで表記するのが一般的
★キャメルケース（camelCase）とは

・「動詞+名詞」の形式のように2語をつなげて命名する際、最初の語を小文字、2語目の最初の文字を大文字で表す表記法のこと。
・JavaScriptでは関数名と変数名の命名によく使われる。
・大文字部分がcamel（ラクダ）のこぶのように見えることからそう呼ばれる。
(10711)

それでは、以上の点に注意しながら、実際に関数を定義してみましょう。

これまでに何度も記述したダイアログボックスを出すJavaScriptを関数として定義します

関数を定義する

新しいHTMLファイルを用意してください（ファイル名は任意）。

以下の解説を読みながらサンプルコードを入力し、ブラウザプレビューをしてください。
HTMLとJavaScript
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>関数の定義</title>
  </head>
  <body>
    <script>
      function popupAlert() {
      }
    </script>
  </body>
</html>
サンプルコード3-1
☝サンプルコード3-1の解説

・まずは、以下のように関数名をつけた関数の基本形をfunctionを使い記述しましょう。
・alertメソッドを使いダイアログボックスがポップアップする関数を作成するので、関数名は「動詞+名詞」の形式でpopupAlertと命名しました。
・表記法はキャメルケースです。引数は省略しています。
HTMLとJavaScript
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>関数の定義</title>
  </head>
  <body>
    <script>
      function popupAlert() {
              alert("関数が呼び出されました！");
      }
    </script>
  </body>
</html>
サンプルコード3-2
☝サンプルコード3-2の解説

・続いて、この関数が呼び出されたときに実行されるJavaScriptのコードを{ }内に記述します。
・alertメソッドの引数には、何かメッセージを書いてください。
関数を定義しただけの状態です。

まだ呼び出していないため、ブラウザには何も表示されません。
この時点では関数は登録されただけで、実行はされていません。

■ 関数の呼び出し

・定義済みの関数は、以下の書式で呼び出して実行することができます。
(10728)

関数の呼び出しを記述する

HTMLとJavaScript（関数の呼び出し）
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>関数の定義</title>
  </head>
  <body>
    <script>
        function popupAlert() {
         alert("関数が呼び出されました！");
        }

        //関数の呼び出し
              popupAlert();
    </script>
  </body>
</html>
サンプルコード3-3
☝サンプルコード3-3の解説

・今回のように関数の引数を省略している場合は、呼び出す際も省略します。
・定義した関数よりも下側に関数の呼び出しを記述してみましょう。
・関数が呼び出され、処理が実行されました。
・ただし、この呼び出し方で関数を実行したときのブラウザ動作は、関数を使わずに以下のコードを記述した場合と、表面上何も違いがありません。
<script>
  alert("関数が呼び出されました！");
</script>
サンプルコード3-4
・上記の関数を定義した上で、その関数をページ読み込みと同時に呼び出すサンプルコード3-3は、あくまでも関数の仕組みをシンプルに理解するためのものです。

ブラウザプレビュー

(10735)

関数の定義と呼び出しが重要になる場面のひとつは、2章で学習したイベントハンドラー / イベントリスナーの処理を作成するときです。

2章に掲載したイベントハンドラー / イベントリスナーの設定方法を、ここでもう一度振り返ってみましょう。
★イベントハンドラー / イベントリスナーの設定方法

1.HTMLのタグの要素の属性として記述する
2.タグの要素オブジェクトのプロパティとして記述する
3.addEventListenerメソッドを使い記述する
・ 2章では、この3つの設定方法のうち、1. の「HTMLのタグの要素の属性として記述する」方法を使い、関数を使わないイベントハンドラーの設定方法を解説しました。
・本章では、関数の定義という側面から、1.〜3.の方法をまとめて解説していきます。

■ 1. HTMLのタグの要素の属性として記述する

・2章では、onclick属性の属性値としてJavaScriptのコードをそのまま記述する方法で、以下のコードを解説しました。
・ボタンをクリックしたとき（クリックイベントの発生時）に、ダイアログボックスを出すというJavaScriptです。
・この記述の仕方は、JavaScriptのコードが複雑になった場合に可読性を阻害するため、あまり好ましいものではないことも2章で説明しました。
HTMLとJavaScript
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>イベントハンドラーの設定1</title>
  </head>
  <body>
    <button onclick="alert('クリックイベントを検出しました！')">
      ダイアログボックスを出す
    </button>
  </body>
</html>
サンプルコード3-5

onclick属性の属性値として関数の呼び出しを記述する

・関数を定義すれば、以下の方法で関数を呼び出す形式に書き換えることができます。
(10868)

HTMLとJavaScript
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>イベントハンドラーの設定1</title>
  </head>

  <body>
    <button onclick="popupAlert()">ダイアログボックスを出す</button>

    <script>
      function popupAlert() {
        alert('クリックイベントを検出しました！');
      }
    </script>
  </body>
</html>
サンプルコード3-6
☝サンプルコード3-6の解説

・関数の呼び出しの記述を、onclick属性の属性値として「onclick="popupAlert()"」と記述します。
・このように、タグ内からイベント設定用の属性を使って関数を呼び出すことにより、JavaScriptのコードが複雑になった場合でも、タグの属性値には関数呼び出しのみが書かれることになるため、HTMLの可読性がこれより下がることはありません。

ブラウザプレビュー

ボタンをクリックしたときにダイアログボックスが表示されたら、関数の呼び出しに成功しています。
(10875)

関数呼び出しの形式で書き換えても、同じ動きが実現できました。

■ 2. タグの要素オブジェクトのプロパティとして記述する

1章の「DOMの基本的理解」節では、以下のことを学びました。

・ この考え方で特定のタグの要素（ノード）をオブジェクトとして操作するために、documentオブジェクトには次のようなメソッドが用意されています。
【DOMの基本的理解】

・タグの要素をツリー構造の階層関係で捉えたHTML文書のことをDOM（Document Object Model）と呼ぶ。
・この考え方においては、HTML文書を構成するタグの要素は全てオブジェクトである。
・画像とアンカーとフォーム以外のタグの要素（h1、p、div、span、ul、liほかのタグの要素）に関しては、あらかじめ決まったオブジェクト名の単語が用意されていない。
・JavaScriptでは、全てのタグの要素（img、a、formを含む）を、documentオブジェクトの配下に置くという考え方で操作できるようにしている。

documentオブジェクトのメソッド（タグの要素をオブジェクト化する）

メソッド名 使い方
document.querySelector
（"CSSセレクター"）
 CSSのセレクター形式で要素を取得して、一致する最初のHTML要素をオブジェクト化する
document.querySelectorAll
（"CSSセレクター"）
 CSSのセレクター形式で要素を取得して、一致するすべてのHTML要素をオブジェクト化する
document.getElementById
("id名")
 id名を取得してHTML要素をオブジェクト化する
document.getElementsByTagName
("要素名")
 HTMLの要素名を取得して、一致するすべてのHTML要素をオブジェクト化する
document.getElementsByClassName
("class名")
 class名を取得して、一致するすべてのHTML要素をオブジェクト化する
☝
・これらのメソッドを使うことにより、すべてのHTMLのタグの要素をオブジェクトとして扱うことができます。
・一般的には、querySelectorメソッドとquerySelectorAllメソッドが最もよく使われているようですが、getElementByIdメソッドの方が処理速度が早いという利点があります。
・しかし人間が体感できるほどの速度の差はないので、本教材では、querySelectorメソッドまたはquerySelectorAllメソッドを主に使用してコードの解説をしていきます。

タグの要素オブジェクトのプロパティとしてイベントを設定する書式

タグの要素オブジェクトのプロパティとしてイベントを設定する書式は以下のとおりです。
(10817)

・イベントと実行するJavaScriptのコードをまとめて記述できるのがこの方法です。

・イベント名の先頭に小文字で「on」をつけると、タグの要素オブジェクトにイベントを設定するためのプロパティとして機能します。
・この記述方法だと、HTMLタグ内には何も書かずに要素とイベントとの関連付けができるため、コードの可読性がさらに向上します。
・1.の方法で記述したコード（サンプルコード3-6）を2.の方法で書き換えてみましょう。
・まずはbuttonタグにclass名をつけます。
HTML
<button class="btn">ダイアログボックスを出す</button>
サンプルコード3-7
・次に、querySelectorメソッドでbuttonタグのclass名を取得し、要素オブジェクトを作成します。
HTMLとJavaScript
<button class="btn">ダイアログボックスを出す</button>

<script>
  document.querySelector(".btn").onclick = function(){
    alert('クリックイベントを検出しました！');
  }
</script>
サンプルコード3-8
☝サンプルコード3-8の解説

・document.querySelector(".btn")と記述すれば、buttonタグをオブジェクトとして扱うことができます。
・その要素オブジェクトのプロパティとしてonclickプロパティを「.（ドット）」でつなげ、プロパティにセットする値として関数を記述します。このとき、関数名をつける必要はありません。
・複数の場所で使いまわすことがない場合は、関数はfunction(){}のように名前をつけずに記述した方が、コードをシンプルに記述できます。
・このような名前をつけない関数のことを匿名関数、または無名関数といいます。
HTMLとJavaScript
<button class="btn">ダイアログボックスを出す</button>

<script>
//onclickプロパティの値として関数名popupAlertをセットする
  document.querySelector(".btn").onclick = popupAlert;

//popupAlert関数の定義
  function popupAlert() {
    alert('クリックイベントを検出しました！');
  }
</script>
サンプルコード3-9
☝サンプルコード3-9の解説

・もしも、複数の場所で関数を使いまわすことが目的で、名前をつけた関数を作成するのであれば、イベントの設定はサンプルコードのように記述します。
・通常の「関数名()」の関数呼び出しではなく、「関数名」のみをプロパティの値としてセットします。

要素オブジェクトのプロパティとしてイベントを設定する書式の欠点

HTMLとJavaScript
<button class="btn">ダイアログボックスを出す</button>

<script>
//こちらの関数は実行されない
  document.querySelector(".btn").onclick = function () {
    alert('クリックイベントを検出しました！');
  }

//こちらの関数が実行される
  document.querySelector(".btn").onclick = function () {
    document.bgColor = "#fff000";
  }
</script>
サンプルコード3-10
☝サンプルコード3-10の解説

・2.の記述方法にはひとつ欠点があります。
・サンプルコード3-10のように、ひとつの要素に対して、同一イベントのイベントハンドラーを複数設定できないという点です。
・例えば、サンプルコードは2つめの関数しか実行されません。
・このようなコードを書く状況がそれほどあるわけではありませんが、知識としては知っておくべきでしょう。

■ 3. addEventListenerメソッドを使い記述する

・以下の記述法を使うと、ひとつの要素に対して、同一イベントのイベントハンドラーを複数設定することができます。
・通常のイベントの設定には、こちらの記述方法を使うとよいでしょう。
・本教材では、今後イベントハンドラーの設定には以下の記述方法を使うことにします。
(10853)

HTMLとJavaScript
<button class="btn">ダイアログボックスを出す</button>

<script>
  document.querySelector(".btn").addEventListener("click", function () {
    alert('クリックイベントを検出しました！');
  })

  document.querySelector(".btn").addEventListener("click", function () {
    document.bgColor = "#fff000";
  })
</script>
サンプルコード3-11
☝サンプルコード3-11の解説

・addEventListenerメソッドは、タグの要素オブジェクトのメソッドで、オブジェクトにイベントを設定するためのメソッドです。
・サンプルコード3-10をaddEventListenerメソッドを使って書き換えると以下のようになります。
・ボタンにクリックイベントが発生した際には、2つの関数が両方とも実行されます。
これで「3章：関数を学ぼう」の解説を終わります。

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