関数

スクリプトの色々な場所で同じアクションを実行する必要がある場合がよくあります。

例えば、訪問者がログイン/ログアウトしたり、また複数の箇所で見栄の良いメッセージを表示する必要があったりします。

関数はプログラムのメインの “構成要素” です。これによりコードを繰り返すことなく何度も呼び出すことができます。

私たちは既に組み込み関数の例を見ています。 alert(message), prompt(message, default) や confirm(question)です。これと同じように私たち自身も関数を作ることができます。

関数定義

関数を作るために、関数定義 を使います。

次のようになります:

function showMessage() {
  alert( 'Hello everyone!' );
}

function キーワードが最初にきて、次に 関数名 がきます、そして括弧の中に パラメータ のリスト(カンマ区切り、上の例では空)がきて、最後に中括弧の間に関数のコード、 “関数本体” です。

function name(parameters) {
  ...body...
}

作成した関数はその関数名で呼び出すことができます: showMessage()

例:

function showMessage() {
  alert( 'Hello everyone!' );
}

showMessage();
showMessage();

showMessage() の呼び出しは、関数のコードを実行します。この例では、2度メッセージが表示されます。

この例は関数のメインの目的の1つを明確に示しています: コードの複製を回避する、と言うことです。

もしメッセージ内容、または表示方法を変更する必要がある場合、1箇所のコード(関数)を修正するだけで十分です。

ローカル変数

関数内で定義された変数は、関数内でのみ参照可能です。

例:

function showMessage() {
  let message = "Hello, I'm JavaScript!"; // ローカル変数

  alert( message );
}

showMessage(); // Hello, I'm JavaScript!

alert( message ); // <-- エラー! 変数は関数のローカルです

外部変数

関数は外部変数にアクセスすることもできます。次の例を見てください:

let userName = 'John';

function showMessage() {
  let message = 'Hello, ' + userName;
  alert(message);
}

showMessage(); // Hello, John

関数は外部変数に対してフルアクセス権を持ち、変更することもできます。

例:

let userName = 'John';

function showMessage() {
  userName = "Bob"; // (1) 外部変数の変更

  let message = 'Hello, ' + userName;
  alert(message);
}

alert( userName ); // 関数呼び出しの前は John

showMessage();

alert( userName ); // Bob, 関数によって値が変更されました

外部の変数は、同じ名前のローカル変数が存在しない場合にのみ使われます。そのため、let を忘れた場合、意図せず外部の変数を変更してしまう可能性があります。

同じ名前の変数が関数内に宣言されている場合は、外部変数を 隠します。例えば、以下のコードでは関数はローカルの userName を使います。外部の userName は無視されます。

let userName = 'John';

function showMessage() {
  let userName = "Bob"; // ローカル変数の宣言

  let message = 'Hello, ' + userName; // Bob
  alert(message);
}

// 関数は作られ独自の userName を使います
showMessage();

alert( userName ); // John, 変更されていません。関数は外部変数へアクセスしませんでした

パラメータ

パラメータを使うことで、任意のデータを関数に渡すことができます。

下の例では、関数は2つのパラメータを持っています: from と text です。

function showMessage(from, text) { // 引数: from, text
  alert(from + ': ' + text);
}

showMessage('Ann', 'Hello!'); // Ann: Hello! (*)
showMessage('Ann', "What's up?"); // Ann: What's up? (**)

行 (*) と (**) で関数が呼ばれたとき、与えられた値はローカル変数 from と text にコピーされます。そして関数はそれらを使います。

ここにもう1つ例があります: 私たちは変数 from を持っており、それを関数に渡します。注意してください：関数は常に値のコピーを取得するため、関数の中の処理は from を変更していますが、その変更は外には見えません:

function showMessage(from, text) {

  from = '*' + from + '*'; // "from" をより良く見せる

  alert( from + ': ' + text );
}

let from = "Ann";

showMessage(from, "Hello"); // *Ann*: Hello

// "from" の値は同じで、関数はローカルコピーを変更しています。
alert( from ); // Ann

関数のパラメータとして渡された値は “引数（ひきすう）” とも呼ばれます。 これらの用語を整理すると:

• パラメータとは、関数の宣言時に括弧内に記述される変数のこと(宣言時の用語)
• 引数とは、関数が呼び出されたときに渡される値のこと(呼び出し時の用語)

パラメータを列挙して関数を宣言し、引数を渡して関数を呼び出すことになります。

上の例ではこのように言えるでしょう。「関数showMessageは2つのパラメータを持つと宣言されており、from と “Hello” という2つの引数を与えて呼び出されている」

デフォルト値

関数の呼び出し時に引数が与えられていない場合、対応する値は undefined になります。

例えば、前述の関数 showMessage(from, text) は1つの引数で呼ぶことも出来ます:

showMessage("Ann");

それはエラーではありません。このような呼び出しは "*Ann*: undefined" を出力します。text が渡されていないため、text は undefined となります。

パラメータのいわゆる “デフォルト” (呼び出し時に省略された場合に使用される)値を、関数宣言の中で = を使用して指定することが可能です:

function showMessage(from, text = "no text given") {
  alert( from + ": " + text );
}

showMessage("Ann"); // Ann: no text given

これで text パラメータが渡されていない場合、 値は "no text given" になります。

ここで、 "no text given" は文字列ですが、より複雑な式にすることもできます。そしてそれはパラメータが無い場合にのみ評価され、代入されます。なので、このようなことも可能です:

function showMessage(from, text = anotherFunction()) {
  // anotherFunction() はテキストが与えられなかった場合にのみ実行されます
  // その結果がtextの値になります
}

代替のデフォルトパラメータ

パラメータのデフォルト値を関数宣言ではなく、後の段階で実行中に設定することが理にかなっている場合があります。

省略されたパラメータをチェックするために、undefined と比較できます:

function showMessage(text) {
  if (text === undefined) {
    text = 'empty message';
  }

  alert(text);
}

showMessage(); // empty message

…もしくは || 演算子:

// パラメータが省略 or  "" の場合, 'empty' を設定
function showMessage(text) {
  text = text || 'empty';
  ...
}

モダンな JavaScript エンジンは NULL合体演算子 ?? をサポートしており、0 などの偽値を通常とみなす場合に適しています:

// count パラメータがない場合は "unknown"
function showCount(count) {
  alert(count ?? "unknown");
}

showCount(0); // 0
showCount(null); // unknown
showCount(); // unknown

値の返却

関数は、実行結果として呼び出しコードに値を戻すことが出来ます。

最もシンプルな例は2つの値の合計を行う関数です:

function sum(a, b) {
  return a + b;
}

let result = sum(1, 2);
alert( result ); // 3

ディレクティブ return は関数の任意の場所に置くことが出来ます。もしも実行がそこに到達したとき、関数は停止し、値を呼び出し元のコードに返します(上の result へ代入します)。

1つの関数に多くの return が出現することもあります。例えば:

function checkAge(age) {
  if (age > 18) {
    return true;
  } else {
    return confirm('Got a permission from the parents?');
  }
}

let age = prompt('How old are you?', 18);

if ( checkAge(age) ) {
  alert( 'Access granted' );
} else {
  alert( 'Access denied' );
}

値なしで return を使うことも出来ます。これは関数を直ぐに終了させます。

例:

function showMovie(age) {
  if ( !checkAge(age) ) {
    return;
  }

  alert( "Showing you the movie" ); // (*)
  // ...
}

上のコードでは、checkAge(age) が false を返すと、showMovie は alert の処理をしません。

function doNothing() { /* empty */ }

alert( doNothing() === undefined ); // true

function doNothing() {
  return;
}

alert( doNothing() === undefined ); // true

return
 (some + long + expression + or + whatever * f(a) + f(b))

return;
 (some + long + expression + or + whatever * f(a) + f(b))

return (
  some + long + expression
  + or +
  whatever * f(a) + f(b)
  )

関数の命名

関数はアクションです。そのため、それらの名前は通常は動詞です。それは簡潔にすべきですが、関数がすることをできるだけ正確に表現してください。そして、コードを読む人が正しい手がかりを得られるようにします。

曖昧なアクションを示す動詞のプレフィックスから関数名を始めることは広く行われています。プレフィックスの意味についてはチーム内での合意が必要です。

例えば、"show" で始まる関数は、通常何かを表示します。

以下で始まる関数…

• "get…" – 値を返します,
• "calc…" – 何かを計算します,
• "create…" – 何かを生成します,
• "check…" – 何かをチェックし、真偽値を返します, etc

このような名前の例です:

showMessage(..)     // メッセージを表示します
getAge(..)          // 年齢を返します(なんとかしてその値を得る)
calcSum(..)         // 合計を計算し、それを返します
createForm(..)      // フォームを生成します(通常それを返却します)
checkPermission(..) // 権限をチェックし、true/false を返します

決まった位置にプレフィックスを使用すると、関数名を見ただけでそれがどのような種類の処理を行い、どのような値を返すのかを理解することが出来ます。

関数 == コメント

関数は短く明確に1つのことを行うべきです。もし関数が大きい場合、恐らくそれを幾つかの小さい関数に分けることは価値があるでしょう。このルールに従うことは簡単ではないこともありますが、間違いなく良いことです。

分割した関数はテストやデバッグが簡単になるだけでなく、 – その存在自体が素晴らしいコメントになります!

例えば、下にある2つの関数 showPrimes(n)を比べてみましょう。どちらも素数を n に達するまで出力します。

1つ目のパターンはラベルを使います:

function showPrimes(n) {
  nextPrime: for (let i = 2; i < n; i++) {

    for (let j = 2; j < i; j++) {
      if (i % j == 0) continue nextPrime;
    }

    alert( i ); // a prime
  }
}

2つ目のパターンは、素数の確認をするための追加の関数 isPrime(n) を使います。

function showPrimes(n) {

  for (let i = 2; i < n; i++) {
    if (!isPrime(i)) continue;

    alert(i);  // a prime
  }
}

function isPrime(n) {
  for (let i = 2; i < n; i++) {
    if ( n % i == 0) return false;
  }
  return true;
}

2つ目のパターンのほうが理解しやすいですね。コードの塊の代わりに、アクション(isPrime) の名前を見ます。このようなコードは 自己記述的 と呼ばれる場合があります。

従って、関数はその再利用を意図していない場合でも作ることがあります。それらはコードを構造化し、読みやすくします。

サマリ

関数はこのように定義します:

function name(parameters, delimited, by, comma) {
  /* code */
}

• パラメータとして関数に渡される値は、ローカル変数にコピーされます。
• 関数は外部の変数にアクセスすることができます。しかし、それは内側からのみ機能します。関数の外側のコードは、関数のローカル変数を見ることはできません。
• 関数は値を返すことができます。もしもそれをしなかった場合、戻り値は undefined です。

コードを綺麗で理解しやすいようにするために、その関数内では外部変数ではなく、ローカル変数やパラメータを利用することを推奨します。

パラメータを取得せずに外部変数を変更する関数よりも、パラメータを取得してそれを処理して結果を返す関数の方が、常に理解しやすいものです。

関数名:

• 名前は、関数がすることを明確に記述するべきです。コードの中で関数呼び出しを見るとき、良い名前であればそれが何をして何を返すのかを簡単に理解することができます。
• 関数はアクションなので、関数名は通常動詞的です。
• create…, show…, get…, check… など、数多くのよく知られた関数のプレフィックスが存在します。関数がすることのヒントとしてそれらを使いましょう。

関数はスクリプトの主な構成要素です。今や私たちは基礎をカバーしたので、実際にそれらを作り使い始めることができます。しかし、それはまだほんの始まりに過ぎません。私たちは何度もそれらに戻り、より高度な機能について深めていきます。