JavaScript超入門コース#12 関数

はじめに

こんにちは。キノコードです。
「JavaScript超入門コース#12 関数」について説明します。

関数とは?

まず、関数について説明します。
関数とは、いろいろな「処理」をまとめて1つにしたものです。
なぜ関数があるのでしょうか?
料理で例えてみます。
例えば、いつも作るカレーがあるとします。
そのレシピを料理ロボットに記憶してもらいます。
またカレーが食べたくなったときに、
ボタン1つで作れる。
しかも、その料理ロボットは、自分も使えるし、家族も使える。
その料理ロボットが関数なのです。
関数の便利なところは色々あるのですが、3つあげてみます。
同じものを2回書く必要がない
同じものを他の場面で使える
関数の中のコードを理解していなくても他の人も使うことができる
といった便利な点です。
関数を作ることを「関数を定義する」といいます。
JavaScriptでの関数の定義方法についてみていきましょう。

関数の定義方法

func 関数名( ) {
実行する処理
}

JavaScriptでは関数の定義にfunctionを使います。
functionの後に関数につける名前を書き、丸括弧を書きます。
関数に引数を渡したい場合は、丸括弧のなかに引数名を書きます。
引数は、何個でも渡すことができるので、必要な分だけカンマで区切って入れることができます。
最後に{ }波括弧を書いて、波括弧のなかに実行する処理を書きます。

関数の宣言と実行

それでは、実際に、コードを書いてみましょう。

function say_hello() {
  console.log("Hello World");
}
say_hello();

文字列の「Hello World」を表示する関数を作成していきましょう。
まずは function、そのあとに関数名を書きましょう。
関数名はメッセージを表示する意味を持つ「say_hello」を書きます。
今回、引数はないので丸括弧のみを書きます。
波括弧を書いて、実行する処理を書きます。
これで関数を定義することができました。
関数を実行するには、関数名、丸括弧を記述することができます。
関数名の「say_hello」に引数なしの丸括弧。これで「Hello World」が表示されるはずです。
実行してみましょう。
「Hello World」を表示することができました。

function say_hello() {
  console.log("Hello World");
}
say_hello();
say_hello();
say_hello();

定義した関数は何度でも呼び出すことができます。
3回、say_helloを記述しましょう。
「Hello World」は3回表示されるはずです。
実行してみましょう。
「Hello World」を3回表示することができました。

関数式

関数式では変数名、イコール、function、そのあとに関数名を書きます。
そのあとに、丸括弧を書き、波括弧。波括弧の中に、実行する処理を書きます。
波括弧の後に「;」(セミコロン)が必要なので、注意しましょう。
あいさつを表示する関数式を、コードを書いて作ってみましょう。

var hello= function say_hello() {
  console.log("Good Morning");
};

hello();

変数名はあいさつという意味の「hello」とします。
関数名は「say_hello」としましょう。
functionのあとに関数名、丸括弧。丸括弧の中には引数を書くことができます。
波括弧を書いて、実行する処理を書きます。表示させる文字列は”Good Morning”としましょう。
波括弧の後に「;」(セミコロン)を書きます。
関数式を実行するときは、変数名、丸括弧を書きます。
変数名の「hello」に丸括弧を書きます。
実行してみましょう。「Good Morning」が表示されました。

var hello = function() {
  console.log("Good Morning");
};

hello();

関数式は関数名を省略することができます。
関数名の「say_hello」を省略しましょう。
実行してみましょう。
関数名を省略してもエラーにならず表示することができました。

引数がある関数

引数がある関数についてみていきましょう。
関数名のあとに丸括弧の中に引数を書いて、引数に書いた内容を表示するプログラムを記述していきましょう。
引数名はあいさつの「greeting」とします。
「say_hello」の丸括弧の中に「greeting」を書きましょう。
そして、受け取った引数をconsole.logで表示させましょう。
関数を呼び出すところの引数に、ダブルクォーテーションで「”Good Morning”」を渡してみましょう。
実行してみます。

function say_hello(greeting) {
  console.log(greeting);
};

say_hello("Good Morning");

「Good Morning」が表示されました。
引数の呼び方として、say_hello(greeting)の引数を仮引数、say_hello(“Good Morning”)の引数を実引数と呼びます。
つまり、仮引数は関数を定義しているところの引数のことで、実引数は関数を呼び出すところの引数のことです。

function say_hello(greeting) {
  console.log(greeting);
};

say_hello("Good Morning");
say_hello("Good afternoon");
say_hello("Good evening");

次に、引数の値を変更して、表示する内容を変えてみましょう。
引数に「Good afternoon」と「Good evening」を書いて、実行してみましょう。
「Good afternoon」と「Good evening」も表示することができました。

function cal(x) {
  console.log(x * 3);
};

cal(6);

今度は、関数に数値を渡して、関数内で計算と表示をさせてみます。
この関数は計算をさせるので、関数名は計算という意味のcalculateの前3文字をとったcalという関数名にします。
引数名はxとしましょう。
その受け取った引数を関数内で掛け算してみましょう。
xかける3をconsole.logで表示させてみます。
xに6を渡してみましょう。
実行してみます。
18が表示されました。

function cal(x, y) {
  console.log(x / y);
};

cal(6, 3);

今度は、関数に数値を渡して、関数内で計算と表示をさせてみます。
この関数は計算をさせるので、関数名は計算という意味のcalculateの前3文字をとったcalという関数名にします。
引数名はxとしましょう。
その受け取った引数を関数内で掛け算してみましょう。
xかける3をconsole.logで表示させてみます。
xに6を渡してみましょう。
実行してみます。
18が表示されました。

複数の引数がある関数

function cal(x, y) {
  console.log(x / y);
};

cal(6, 3);

引数を2つにしてみましょう。
引数を2つにしたい場合、カンマで区切れば良いです。
引数は、何個でも渡すことができるので、必要な分だけカンマで区切って入れることができます。
yという引数を定義します。
x割るyとして、これを表示させてみましょう。
xに6、yに3を渡します。
実行してみましょう。
2となり、予想通りの結果となりました。

戻り値がある関数

function cal(x, y) {
  return x / y;
};

var result = cal(6, 3);
console.log(result);

次に、戻り値がある場合の関数をみていきたいと思います。
戻り値がある場合は、関数内で処理した結果を受けることができます。
例えば、先ほどやった「x / y」の計算結果を返す場合、console.logではなく、returnを記述します。
実行結果を受け取るために、resultという変数に代入しましょう。
そして、resultを表示させてみます。
実行してみます。
2が表示されました。
ところで、関数内で表示させる処理と、戻り値を受け取った値を表示させる処理とでは、どのような違いがあるのでしょうか。
どちらも表示するという点は同じです。
違いは、リターンで戻り値を受け取って表示させるかどうかです。では、リターンの意味は、どんなところにあるのでしょうか?
戻り値がない関数は、関数内で処理した結果を返すことができません。
一方、戻り値がある関数は、関数内で処理した結果を返すことができます。そのため、受け取った結果をさらに計算したり文字列とくっつけたりすることができます。
例えば、足し算をする関数で計算した結果を、さらに引き算をする関数で計算することができます。
しかし、関数内で単に表示させる処理では、関数の結果を返すわけではないです。したがって、計算結果をさらに違う関数に渡すことはできません。
このように、戻り値がない場合と戻り値がある場合では使い方が変わってきます。
どちらの関数もよく使うので、必要に応じて使い分けてみてください。
レッスンは以上です。

確認問題

それでは確認問題です。
calという関数を作り、10と5と8の引数を渡します。
足し算の結果を変数に代入して、結果を返してください。
そして、関数の外側で計算結果を表示させてみてください。
動画をストップし、記述してみてください。

function cal(x, y, z) {
  return x + y + z;
};

var result = cal(10, 5, 8);
console.log(result);

function cal(x, y, z) {
return x + y + z;
};

var result = cal(10, 5, 8);
console.log(result);

KinoCode チャンネル

YouTubeで毎日動画配信しています。
動画は3分間なので、
 ・通勤時間
 ・お昼休み
 ・お手すきのとき
 ・寝る前
など手軽に視聴できます。
 
ちょっとしたインプットにどうぞ!
 
▼チャンネル登録はこちらからどうぞ。