目次


JavaScript 言語入門, 第 6 回

関数

Comments

コンテンツシリーズ

このコンテンツは全7シリーズのパート#です: JavaScript 言語入門, 第 6 回

このシリーズの続きに乞うご期待。

このコンテンツはシリーズの一部分です:JavaScript 言語入門, 第 6 回

このシリーズの続きに乞うご期待。

Interactive code: When you see Run at the top of a code sample, you can run the code, check the results, make changes, and run it again.

編集者による注記: このシリーズは、対話式コーディング機能を追加して更新されています。コード・リストに「実行」ボタンがある場合、そのコードを実行して結果を確認し、コードを変更してから再度実行して、その成果を確認できることを意味します。

関数が役立つ理由はさまざまにあります。関数はスクリプトのコンテナーであり、イベントが発生した場合、あるいはその関数が呼び出された場合にだけ、その関数の内部に含まれるスクリプトが実行されます。したがって、Web ページに組み込まれたスクリプトをブラウザーが最初にロードして実行するときには、関数は実行されません。関数の内部に特定のタスクを実行するスクリプトを含めることで、ユーザーが随時、スクリプトを実行してその特定のタスクを行えるようにすることができます。

単純な関数

関数を作成するのは簡単です。function という単語の後に、半角スペース、そして関数の名前を続けるだけで関数を作成できます。関数の名前は自由に選べます。ただし、関数で実行するタスクに関連した名前にすることが共通の慣例となっています。一例として、以下に、既存の変数の値を変更する関数を記載します。

この例は、関数を作成する方法を示しているだけでなく、関数を呼び出して変数の値を変更する方法も示しています。この例で変数の値を変更できる理由は、変数がメイン・スクリプトのスコープ内で宣言されているからです。関数も同じくメイン・スクリプトのスコープ内で宣言されているため、関数はその変数を認識します。一方、関数内で宣言された変数には、その関数の外部からアクセスすることはできません。

挑戦!

挑戦アイコン「実行」をクリックして、以下のコードをそのまま実行した場合の結果を確かめてください。その後、変数を変更してから、もう一度「実行」をクリックします。結果はどうなりましたか?次は、関数内の数値を変更してから、「実行」をクリックして結果を確認してください。

Show result

関数のパラメーター

関数は、関数パラメーターを使用してデータを受け入れることも可能です。関数はパラメーターを 1 つ以上持つことができます。関数パラメーターが使用されている場合、関数呼び出しには、関数パラメーターの数に応じて 1 つ以上の引数を設定することができます。パラメーターと引数を混同してしまうことはよくありますが、パラメーターは関数定義の一部であり、引数は関数を呼び出すときに使用する表現です。以下に、パラメーターを持つ関数と、引数を設定した関数呼び出しの例を記載します。

挑戦!

挑戦アイコン「実行」をクリックして、以下のコードをそのまま実行した場合の結果を確かめてください。次に、変数を変更してから「実行」をクリックして、どのような結果になるのかを確認してください。

Show result

上記の関数は、関数パラメーターで渡された引数に 1 を加えてインクリメントします。この例での引数は、すでに宣言してある変数です。ただし、num は単純な数値変数なので、その値は渡されたままの値になります。関数内部のパラメーターを変更しても、変数自体の値は変わりません (前の例で関数によって変数の値を変更できたのは、パラメーターではなくグローバル変数を変更したためです)。

紛らわしいことに、配列変数はこれとは異なった動作をします。関数が配列内のある要素の値を変更すると、その要素は元の配列内で変更されます。以下のコードで試してみてください。

Show result

一方、配列自体を置き換えることはできません。以下の関数はその名前に反して、元の配列をそのままの状態に残します。

Show result

以上のとおり、関数は配列内の要素を変更することはできますが、配列自体を置き換えることはできません。

return 文

return 文も関数の中でよく使われます。return 文は、関数内のスクリプトが実行された後、その結果の値を返す文です。この文を使用すれば、例えば関数によって返された値を変数に代入することができます (この手法は、前のセクションで説明した混乱しやすい結果を避けるのに有効です)。以下に、スクリプトを実行した後に、関数から値を返す例を示します。

挑戦!

挑戦アイコン「実行」をクリックして、以下のコードをそのまま実行した場合の結果を確かめてください。その後、変数を変更し、もう一度「実行」をクリックしてください。

Show result

この関数の利点は、関数に任意の 2 つの数値を渡せば、関数がそれらの値を合計して任意の変数に代入できる値を返すようにできることです。

まとめと次のステップ

今回のチュートリアルでは、関数を作成する方法、パラメーターと引数を使用する方法、そして retuen 文を使用する方法を学びました。関数の目的は、その内部に特定のタスクを実行するスクリプトを含めることによって、ユーザーが随時、スクリプトを実行してその特定のタスクを行えるようにすることです。つまり、コードが込み入って理解しにくいものにならないようにするためには、関数が役立ちます。このチュートリアル・シリーズで、このとりわけよく使われているプログラミング言語の学習を続けてください。次回のトピックは、ループです。


ダウンロード可能なリソース


関連トピック


コメント

コメントを登録するにはサインインあるいは登録してください。

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Web development
ArticleID=1049332
ArticleTitle=JavaScript 言語入門, 第 6 回: 関数
publish-date=09072017