関数 — 再利用可能なコードブロック

関数はどこにあるか

JavaScript の中で、関数はあらゆるところに見つかるでしょう。実のところ、これまでのコース全体を通して、関数を使ってきました。これについてはあまり触れてきませんでした。しかし、今こそ明確に関数について話し始め、構文を探求する時期です。

括弧のペアを特徴とする JavaScript の構造を使用するほとんどの場合、そして for ループ、while と do...while ループ、または if...else 文のような一般的な言語構造を使用していない場合、関数を使用していることになります。

ブラウザー組み込み関数

このコースでは、ブラウザーの組み込み機能を幅広く活用してきました。

例えば、テキスト文字列を操作するとき。

const myText = "I am a string";
const newString = myText.replace("string", "sausage");
console.log(newString);
// replace() 文字列関数は、対象の文字列と元の文字列を
// 受け取り、元の文字列を対象の文字列に置き換えて、
// 新しく形成した文字列を返します。

または、配列を操作するとき。

const myArray = ["I", "love", "chocolate", "frogs"];
const madeAString = myArray.join(" ");
console.log(madeAString);
// join() 関数は配列を受け取り、配列のすべての
// 項目を単一の文字列に結合し、新しい文字列を
// 返します。

または、乱数を生成するとき。

const myNumber = Math.random();
// random() 関数は、 0 から 1 までの乱数を生成し、
// その乱数を返します。

私たちは関数を使ってきました。

JavaScript 言語にはたくさんの組み込み関数があるので、いろいろあるやりたいことを、全部を自分自身で書かなくてもすみます。実は、呼び出して起動（走らせたり実行することの別の言い方）するコードのいくつかは、JavaScript では書けない、ブラウザー組み込み関数です — こういった関数の多くは、背後のブラウザーのコードを呼び出していて、これらは JavaScript のようなウェブ言語ではなく、大半が C++ のような低水準のシステム言語で書かれています。

ブラウザー関数のいくつかは JavaScript 言語のコアに含まれないことを心に留めておいてください。いくつかはブラウザー API の一部として定義されていて、もっと多くの機能を提供すべくデフォルトの言語の上で構築されています（詳しくは私たちのコースのこの以前の節を見てください）。ブラウザー API のもっと詳しい使い方については、後の方のモジュールで見ていく事になるでしょう。

関数とメソッド

関数のうち、オブジェクトの一部であるものはメソッドと呼ばれます。オブジェクトについては、このモジュールの後半で学びます。 ここでは、メソッドと関数について可能な限り混乱を解消したいと思います。ウェブ上の関連リソースを見ていくと、この 2 つの用語にどちらも目にする機会があるでしょう。

これまで利用してきた組み込み関数は両方です。関数でありメソッドでもあります。組み込みオブジェクトとそのメソッドと同様に、組み込み関数の一覧は JavaScript リファレンスで確認できます。

このコースのここまででもたくさんのカスタム関数を見てきました。ブラウザーの内部でではなくあなたのコードの中で定義された関数です。独自の名前の直後にカッコがついてるものを見かけたら、それはカスタム関数を使っているということです。ループの記事で出てきた random-canvas-circles.html の例（ソースコードはこちら）には、独自に作った draw() 関数が含まれていました。次のようなものです。

function draw() {
  ctx.clearRect(0, 0, WIDTH, HEIGHT);
  for (let i = 0; i < 100; i++) {
    ctx.beginPath();
    ctx.fillStyle = "rgb(255 0 0 / 50%)";
    ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
    ctx.fill();
  }
}

この関数は、<canvas> 要素の中に 100 個のランダムな円を描きます。そうした処理をやりたいとき、毎回そのコードをすべて書き直す必要はなく、次のように関数を呼び出すだけで済みます。

draw();

関数には、他の関数の呼び出しを含め、任意のコードを記述することができます。例えば、上記で見た draw() 関数は random() 関数を 3 回呼び出していますが、random() は以下のコードで定義されています。

function random(number) {
  return Math.floor(Math.random() * number);
}

ブラウザー組み込みの Math.random() は 0 から 1 までの間の 10 進数の乱数を作成するだけなので、私たちにはこの関数が必要でした。私たちは 0 から指定した数にわたる乱数が欲しかったのです。

関数の呼び出し

もうよくご存知でしょう、でも念のため、定義した後で実際に関数を使うには、関数を走らせます（呼び出します）。これはコードのどこかに関数の名前、直後にカッコの組を書けばできます。

function myFunction() {
  alert("hello");
}

myFunction();
// 関数を一度呼び出す

関数の実引数と仮引数

関数によっては、呼び出す際に引数（実引数、argument）を必要とするものがあります。これは、関数が正しく動作するために、関数の括弧内に記載する必要がある値のことです。

また、仮引数 (parameter) という用語も耳にすることがあるでしょう。これは多くの場合、実引数 (argument) と混同して使われます。非公式な会話ではこれで問題ないことも多いのですが、両者には異なる意味があります。仮引数とは、関数の定義に掲載されている変数のことであり、一方、実引数とは、関数が呼び出された際に、関数に渡されて、それらの仮引数を表すための値のことです。

例を見てみましょう。ブラウザー内蔵の Math.random() 関数は実引数を必要としません。呼び出されると、常に 0 から 1 までの間の乱数を返します。

const myNumber = Math.random();

しかし、文字列の replace() 関数は、主たる文字列の中で探す部分文字列と、その文字列を置き換える部分文字列の 2 つの引数を必要とします。

const myText = "I am a string";
const newString = myText.replace("string", "sausage");

オプション引数

引数は、オプションとして定義されている場合があります。この場合、関数を呼び出す際に、それに対応する実引数を指定する必要はありません。指定しない場合、関数は通常、デフォルト値を使用します。例えば、配列の join() 関数の引数はオプションです。

const myArray = ["I", "love", "chocolate", "frogs"];
const madeAString = myArray.join(" ");
console.log(madeAString);
// 'I love chocolate frogs' を返す

const madeAnotherString = myArray.join();
console.log(madeAnotherString);
// 'I,love,chocolate,frogs' を返す

結合/区切り文字を指定する実引数が指定されなかった場合、デフォルトではカンマが使用されます。

デフォルト引数

関数を書いていて、オプション引数を定義したい場合は、引数名の後に = をつけ、その後にデフォルト値を続けることでデフォルト値を指定することができます。

function hello(name = "Chris") {
  console.log(`Hello ${name}!`);
}

hello("Ari"); // Hello Ari!
hello(); // Hello Chris!

無名関数とアロー関数

ここまでは、このように関数を作成してきました。

function myFunction() {
  alert("hello");
}

しかし、名前を持たない関数を作成することもできます。

(function () {
  alert("hello");
});

これは名前がないため、無名関数と呼ばれます。関数が引数として別の関数を受け取る場合、無名関数がよく用いられます。このような場合、無名関数がよく実引数として渡されます。

無名関数の例

例えば、ユーザーがテキストボックスに入力したときに何らかのコードを実行したいとします。これを行うには、テキストボックスの addEventListener() 関数を呼び出します。この関数は少なくとも 2 つの実引数を期待します。

• 待ち受けするイベントの名前。この場合は keydown です。
• イベント発生時に実行する関数。

ユーザーがキーを押すと、ブラウザーは指定された関数を呼び出し、ユーザーが押した具体的なキーを含む、このイベントに関する情報を格納した引数を渡します。

function logKey(event) {
  console.log(`"${event.key}" が押されました。`);
}

textBox.addEventListener("keydown", logKey);

独立した logKey() 関数を定義する代わりに、無名関数を addEventListener() に渡すことができます。

textBox.addEventListener("keydown", function (event) {
  console.log(`"${event.key}" が押されました。`);
});

アロー関数

このように無名関数を渡す場合、アロー関数という別の形式を使用することができます。 function(event) の代わりに (event) => と書きます。

textBox.addEventListener("keydown", (event) => {
  console.log(`"${event.key}" が押されました。`);
});

引数を 1 つしか取らない関数の場合、引数を囲む括弧は省略できます。

textBox.addEventListener("keydown", event => {
  console.log(`"${event.key}" が押されました。`);
});

最後に、関数の中身が return 文の 1 行だけであれば、中括弧と return キーワードを省略して式を暗黙的に返すことができます。次の例では、 Array の map() メソッドを使用して、元の配列のすべての値を倍にしています。

const originals = [1, 2, 3];

const doubled = originals.map(item => item * 2);

console.log(doubled); // [2, 4, 6]

map() メソッドは、配列内のそれぞれのアイテムを指定された関数に渡し、その関数の返値を取得して新しい配列に追加します。

アロー関数はとても簡潔です。map() のコードを、通常の無名コールバック関数を使って書き直すと、次のようになります。

const doubled = originals.map(function (item) {
  return item * 2;
});

同じ簡潔なアロー関数構文を使用して addEventListener() の例を書き換えることができます。

textBox.addEventListener("keydown", (event) =>
  console.log(`"${event.key}" が押されました。`)
);

この場合、 console.log() の値、 undefined が暗黙的にコールバック関数から返されます。

アロー関数を使用することで、コードをより短く、読み取りやすくすることができますので、使用することをお勧めします。詳しくは、 JavaScript ガイドのアロー関数の節 や、アロー関数のリファレンスページ を参照してください。

アロー関数のライブサンプル

次のものは、先ほど説明した keydown のサンプルを完全に動作するようにしたものです。

HTML:

<input id="textBox" type="text" />
<div id="output"></div>

JavaScript:

const textBox = document.querySelector("#textBox");
const output = document.querySelector("#output");

textBox.addEventListener("keydown", (event) => {
  output.textContent = `"${event.key}" が押されました。`;
});

div {
  margin: 0.5rem 0;
}

結果です。テキストボックスに入力して出力を見てください。

関数のスコープと競合

スコープという言葉について説明しておきましょう。関数を扱う際には大切な概念です。関数を作成するとき、関数の中で定義されている変数や関数は、内部でそれぞれ独自のスコープというものを持ちます。これはそれぞれが独自の小部屋に閉じ込められていて、別の関数の内部から、あるいはこの関数の外部のコードから触れられくなることを意味しています。

すべての関数の外側である最上位を、グローバルスコープと呼びます。グローバルスコープで定義された値はすべて、コードのどこからでもアクセスできます。

JavaScript がこのように動作するのは、主にセキュリティとコードの整理整頓のためです。コード内のあらゆる場所から変数にアクセスできる状態にしたくない場合があるからです。外部から呼び出されたスクリプトが、同じ変数名を使用することでコードを混乱させ、競合を引き起こし、問題を生じさせる可能性があります。これは悪意を持って行われる場合もあれば、単なる偶然の場合もあります。

例えば、ある HTML ファイルが 2 つの外部 JavaScript ファイルを参照しているとして、そのどちらも同じ名前の変数と関数を定義しているとします。

<!-- Excerpt from the HTML -->
<script src="first.js"></script>
<script src="second.js"></script>
<script>
  greeting();
</script>

// first.js
const name = "Chris";
function greeting() {
  alert(`${name} さん、こんにちは。当社へようこそ。`);
}

// second.js
const name = "Zaptec";
function greeting() {
  alert(`当社は ${name} と呼ばれています。`);
}

この例を GitHub でライブ実行 できます（ソースコードはこちら）。以下の説明を読む前に、別のブラウザータブで開いてください。

• このサンプルをブラウザで表示すると、まず Hello Chris: welcome to our company. と表示されたアラートボックスが表示されます。これは、最初のスクリプトファイル内で定義された greeting() 関数が、内部スクリプト内の greeting() の呼び出しによって実行されたことを意味します。

• しかし、2 つ目のスクリプトはまったく読み込まれず、実行されず、コンソールに Uncaught SyntaxError: Identifier 'name' has already been declared というエラーが表示されます。これは、name という定数がすでに first.js で宣言されており、同じスコープ内で同じ定数を 2 回宣言することはできないためです。2 つ目のスクリプトが読み込まれなかったため、second.js の greeting() 関数を呼び出すことはできません。

• もし const name = "Zaptec"; という行を second.js から削除してページを再読み込みすると、両方のスクリプトが実行されます。アラートボックスには、Our company is called Chris. と表示されるようになります。関数が再宣言された場合、ソースコード内の順序で最後に記述された宣言が使用されます。それ以前の宣言は事実上上書きされます。

コードの一部を関数内にまとめることで、こうした問題を回避でき、ベストプラクティスとされています。

これは動物園に似ています。ライオン、シマウマ、トラ、ペンギンはそれぞれ専用の檻に入れられており、その中にあるものしか利用できません。これは関数スコープに似ています。もし彼らが他の檻の中に侵入できたら問題が起きることでしょう。良くて、知らない住人に囲まれて気まずい思いをします。寒くて水だらけのペンギンの檻に入ったライオンやトラは酷い気分になるでしょう。最悪の場合、ライオンやトラはペンギンを食べてみようとするかもしれません。

動物園の飼育係はグローバルスコープのようなものです。彼らはすべての檻にアクセスする鍵を持っており、餌を補充したり、病気の動物の世話をしたりします。

スコープで遊んでみよう

スコープを示すための実際の例を見てみましょう。

1. まず function-scope.html の例のローカルコピーを作成します。これには a() と b() という 2 つの関数と、x、y、z の 3 つの変数が含まれます。これらの変数のうち 2 つは関数内で定義され、もう 1 つはグローバルスコープ内で定義されます。また output() という 3 番目の関数も含まれています。この関数は単一の引数を取り、ページの段落に出力します。

2. ブラウザーとテキストエディターでサンプルを開きます。

3. ブラウザーの開発者ツールで JavaScript コンソールを開きます。JavaScript コンソールで、次のコマンドを入力します。

   js

   output(x);
   

   変数 x の出力値が画面に表示されるはずです。

4. コンソールに次のように入力してみてください

   js

   output(y);
   output(z);
   

   どちらも、 "ReferenceError: y is not defined" の一行のエラーが返されるはずです。なぜでしょうか？ 関数スコープのため、つまり y と z は a() と b() 関数の中でロックされているので、グローバルスコープから呼び出されたときには output() はそれらにアクセスできません。

5. しかし、別の関数の中から呼び出されたときはどうでしょうか？ a() と b() を次のように編集してみてください。

   js

   function a() {
     const y = 2;
     output(y);
   }
   
   function b() {
     const z = 3;
     output(z);
   }
   

   コードを保存してブラウザーに再ロードしてから、 JavaScript コンソールから a() と b() 関数を呼び出してみてください。

   js

   a();
   b();
   

   ブラウザーのビューポートに y と z の値が表示されるはずです。これは正常に動作します。なぜなら、output() 関数は他の関数内で呼び出されており、出力される変数が定義されているのと同じスコープ内にあるからです。output() 自体はグローバルスコープで定義されているため、どこからでも利用可能です。

6. 今度は次のようにコードを更新してみてください。

   js

   function a() {
     const y = 2;
     output(x);
   }
   
   function b() {
     const z = 3;
     output(x);
   }
   

   保存してもう一度読み込み、 JavaScript コンソールでもう一度試してみてください。

   js

   a();
   b();
   

   a() と b() の両方の呼び出しは x の値、つまり 1 が出力されます。これは x がグローバル変数であり、すべてのコード内どこでも利用可能であるため、output() の呼び出しが x と同じスコープではなくてもうまく動きます。

7. 最後に、次のようにコードを更新してみてください。

   js

   function a() {
     const y = 2;
     output(z);
   }
   
   function b() {
     const z = 3;
     output(y);
   }
   

   保存してもう一度読み込み、 JavaScript コンソールでもう一度試してみてください。

   js

   a();
   b();
   

   今度は a() と b() の両方の呼び出しで、迷惑な "ReferenceError: variable name is not defined" エラーが返されます。これは output() 呼び出しと、出力しようとしている変数が同じ関数のスコープにない、つまりこれらの関数呼び出しからは変数が参照できない状態だからです。

ループと条件式のスコープに関する補足

なお、条件分岐 や ループ 内で宣言された変数のスコープは、let や const を使用して変数を宣言した場合の関数スコープと同様に機能することに注意してください。たとえば、上記の例に次のようなブロックを追加した場合は次のようになります。

if (x === 1) {
  const c = 4;
  let d = 5;
}

for (let i = 0; i <= 1; i++) {
  const e = 6;
  let f = 7;
}

output(c)、output(d)、output(e)、output(f) を呼び出すと、先ほどと同じ same "ReferenceError: [変数名] is not defined" というエラーが発生します。これらの変数はそれぞれのスコープ内に閉じ込められているため、output() 関数からはアクセスできません。

従来の var キーワードの動作は異なります。もし c、d、e、f が var を使って宣言されていた場合、次のようになります。

if (x === 1) {
  var c = 4;
  var d = 5;
}

for (let i = 0; i <= 1; i++) {
  var e = 6;
  var f = 7;
}

これらはグローバルスコープに持ち上げられるため、コンソールに出力する（例えば、output(c) を使用するなど）と正常に動作します。一方、関数内で var を使用して宣言された変数は、その関数内にスコープが限定されたままとなります。

この一貫性のなさは、混乱やエラーを発生させるおそれがあり、var の代わりに let や const を使用すべきもう一つの理由となっています。

まとめ

この記事では関数の背後にある基本的な概念を探り、次に実用的な方法を習得し、独自のカスタム関数を構築する手順を紹介しました。

関連情報

• 関数の詳細ガイド — ここに含まれていないいくつかの高度な機能について説明します。
• 関数
• Using functions to write less code, Scrimba ^{MDN 学習パートナー} - 便利な関数の概要を紹介するインタラクティブなレッスンです。

• 前のページ
• Overview: JavaScript による動的スクリプティング
• 次のページ