Ne:Code道場~JavaScript 関数(宣言・実行)の巻~


Ne:Code道場~JavaScript 関数(宣言・実行)の巻~

プログラミング学習で、漫画など視覚的なものと併用すると楽しく継続的に学んでゆける人も多いと思います。そこでこの連載では、猫の漫画を交えつつ、JavaScriptの関数、特にその宣言と実行の学習ポイントについて紹介します。

目次
  1. はじめに
  2. 関数ってザックリどういうものニャ
  3. 関数は例えばどういうものニャ
  4. 「関数の宣言」ってどういうことニャ
  5. 「関数の名前」は自由につけて良いのかニャ?
  6. 「関数の実行」ってどういうことニャ?
  7. 直接書かないで関数にしてるのはなぜニャ
  8. 最後に

はじめに

image この記事ではJavaScriptの関数、特にその宣言と実行について、概要について取り上げつつ、躓きポイント を補足しています。

各節ごとに、Ne:Code道場(猫de道場)の弟子猫がポイントをまとめ、最後に師匠猫がそれらを総括して3ポイントでまとめています。 それらのポイントを中心に、関数の宣言・関数の実行について理解を深めてゆきましょう。

関数ってザックリどういうものニャ

上から順番に実行されるコード、条件分岐によってルートが変わるコード、そして、繰り返し行うコード、これらのイロハを知っていれば、実質的には全ての処理を記載してゆく事が可能です。

でも、その結果出来上がるコードは、上から下にズラーっと長いものになり、似たようなコードが繰り返し登場し、処理を把握するのがとても面倒なコードになります。

作ってお終いなコードは殆ど無く、作ったコードは修正したり、機能を追加・削除で変更を加える必要があります。そんな時に、ズラズラ書いてあるコード、また重複が多いコードは、とても修正しにくいものになります。
そんな時に輝くのが「関数」という仕組みです。
image

関数は例えばどういうものニャ

漫画では魔法で説明しましたが、魔法だと少し例が偏っているかもしれませんので、記事内では現代の魔法の杖(?)、Google Homeを取り上げつつ、それとの対比で関数について説明します。

私は自宅でGoogle Homeを使っていますが、「OKGoogle、今何時?」と言えば、その瞬間の時間について教えてくれます。また「OKGoogle、○分後に教えて」と言えば、その時間が経過した後にアラームを鳴らしてくれます。

これらはそれぞれ、「今の時間」や「アラーム」に対応できる仕組みがGoogle Homeの内部にあり(①)、それを実行するためのルールに則った命令(②)をしたからこそ、その結果を受け取ることができる(③)という流れになっています。命令は何度も実行可能で、その実行毎に結果を変える(④)ことができます。
この動きを元に、関数に置き換えてみますと、以下のように言えます。
①は、「関数の宣言」。
②は、「関数の実行」。
③は、「関数の戻り値」を利用すること。
④は、「関数の引数」で、同じ命令を異なるものとして再利用すること。
長くなってしまうので、今回は特に、①と②について取り上げます。
では、順を追って確認してゆきましょう。
image

「関数の宣言」ってどういうことニャ

変数は、宣言してから用いましたね。
関数も同様に、宣言してから用います。
関数を宣言する時にいつも書くワンセットはこちら。

function 関数の名前 () {
}

変数の宣言は、宣言子の後に変数名でしたが、関数の宣言は名前の後に、丸カッコと波カッコ、カッコ続きなのが特徴ですね。

丸カッコの中には引数を書きます。具体的な説明は引数の部分でしますね。
次に波カッコの中に処理を書きます。ここは、今まで習ってきたイロハ(順次・条件分岐・繰り返し)を好きに書くことが出来ます。この処理の中で、別の関数を呼び出すことも、もちろん可能です。

ただ、もしも、戻り値がある関数を書く場合は、絶対書かなければいけないお約束の一行があります。それは戻り値の部分で説明しますね。

関数の宣言は、「宣言しているだけでは実行されない、実行用の命令をすることで、始めて実行される」という点が、ポイントです。

こちらがGoogle Homeに対して「OKGoogle、今何時?」と言ってないのに、突然、今の時間を言い始めたりしたら、「こ、壊れた。。!((((;゚Д゚))))」と震えてしまいますよね。
image

「関数の名前」は自由につけて良いのかニャ?

変数の時と同様、関数も自由に名前をつけることができます。
変数の時には、「変数名を付ける時には、中には行っているもののイメージがしやすい名前を付けましょう」と補足しました。

関数では、中には「処理」がまとめられているので、名前を付けるときには「動詞」を用いるように心がけると、どういう処理がまとめられているのか、イメージしやすくなると思います。

//  タイマーをセットする処理を、イメージできる名前ニャ
function setTimer () {
}
//  今の時間を表示する処理を、イメージできる名前ニャ
function displayNow () {
}

image

「関数の実行」ってどういうことニャ?

宣言しているだけでは、勝手に実行されない関数。関数実行用の命令文を書くことで、初めて実行することができます。

先ほどのGoogle Homeの例で言うならば、「OKGoogle、○分後に教えて」というのが実行用の命令になっていますね。その際に注意しなければいけないのは、実行するためのルールに則って命令する必要があるという点です。

例えば、「OKGoogle」を言わなかったり、逆に「OKGoogle、文字分後に教えて」と、数字であるべきところを数字以外で伝えても、Google Homeは期待する「○分後に教える」という動きをしてくれません。
それは関数実行時も同様です。
関数を実行する際にいつも書くワンセットはこちら。

関数の名前 ();

ただ、これだけだと、あまりイメージしにくいですよね。 一旦は、以下の二点を抑えておきましょう。

まず、関数の名前の後についている丸カッコ、これはいうなれば、Google Homeならば「OKGoogle」という命令に似ています。丸カッコがついていることで、JavaScriptはその前の文字列が関数の名前になっていることを認識してくれるのです。

また、実行時に関数の名前を指定していること、これはいうなれば、「○分後に教えて」という命令と似ています。○分後にアラームを実行したいならば、○のところに正しい数字を指定しつつ、Google Homeに伝えることで、初めて、アラームを設定する処理が実行される動きになっています。
JavaScriptでは、関数の名前が宣言済のものと完全に一致している場合に限り、処理が実行される動きになっています。

このあたりのNGのイメージを具体的な例で確認してみましょう。
まずは、丸カッコつけ忘れの場合のイメージです。

// 「こニャにちは」と出力する関数helloを宣言したニャ!
//  これで何回も挨拶することができるニャ!
function hello() {
  console.log(“こニャにちは”);  
}
// おおっと!これでは関数の実行になってないニャ!
// 丸カッコがついて初めてJavaScriptは関数だと認識してくれるニャ
hello; 

次が、名前間違えてしまった場合のイメージです。

// 関数については割愛するニャ!
function hello() {
  console.log(“こニャにちは”);  
}
// おおっと!丸カッコはついているけれど名前が違うニャ!
// これじゃ、hello関数は実行できないニャ。。
helloCat(); 

以上を踏まえて、正しいイメージはこちら。

// ちゃんと、「こニャにちは」と出力されたニャ!
// 宣言したhello関数のところに、処理がジャンプしている証拠ニャ♪
hello(); 
// 何回実行しても、安定の「こニャにちは」出力ニャ!
hello(); 

image

直接書かないで関数にしてるのはなぜニャ

サンプルコードですと、hello関数の中身はたった一行ですし、関数として書かなくても、以下のように書けば良いのでは、と猫弟子は思ったようです。

// 関数の中身をそのまま書くニャ
console.log(“こニャにちは”);
// 上の行をコピペで追加すれば良いニャ
console.log(“こニャにちは”);

では、例えば、以下のように想像してみましょう。
挨拶をする時に、二分の一の確率で、「元気MAXだニャ!今日も頑張っていくニャ!」と言い添えるようにした時に、関数としてまとめられていたら、修正箇所はたった一箇所で済みます。
同じような意味合いの処理を、コピペで増幅している時には、関数としてまとめて再利用することで、いざ修正となった時に、楽できるのがポイントですね。

function hello() {
  console.log(“こニャにちは”);
  // 関数の中だけ修正すると楽ちんニャ
  // 二分の一になるように、0か1の数字をランダムで取得するニャ
  let num = Math.floor(Math.random() * 2);
  if(num === 0) {
    console.log(“元気MAXだニャ!今日も頑張っていくニャ!”);
  }
}

image

Webサイト担当者としてのスキルが身に付く

無料カウンセリングはこちら

最後に

関数の宣言、関数の実行について、猫弟子がいくつか上げたポイントを、猫師匠が厳選3ポイントでまとめたのがこちらです。

  1. 関数は宣言ありきだニャ
    1. 宣言して初めて利用できるようになるニャ
    2. どういう処理がまとめられているのかを意識しつつ、名付けてあげるニャ
  2. 関数の実行は、呼び出したいものをしっかりJavaScriptに伝えてあげるのがキモニャ
    1. 丸カッコがついて無いと、それが関数だとJavaScriptに分かってもらえないニャ
    2. 呼び出す名前を間違えたら、JavaScriptはその関数に決してたどり着けないニャ
    3. 正しく関数を実行できたら、関数の宣言がどんなに離れていても、JavaScriptは迷うことなくそこまでジャンプしてゆけるニャ。
  3. 同じ意味合いの処理をコピペ生産しているなら、関数化を検討してみると、将来の備えにもなるニャ
    1. いざ変更となった時に、関数として一箇所にまとめられているか、コピペで複数箇所に散らばっているかでは、ミスの発生確率や、修正後の確認の労力も段違いになるニャ

今回は、関数一回目ということで、関数の宣言と、関数の実行を取り上げました。
関数は新たに学ぶキーワードも多く、また文法も、今までイロハで学んできたものよりは特殊です。
なので、分解しつつ、段階を追いながら、着実に学んでゆくのがポイントになると思います。
関数を使いこなすことによって、楽で読みやすいコードを作ってゆくことができます。するとコードへの理解も深まり、プログラミングが更に楽しくなってくるでしょう。
関数の宣言と、関数の実行への理解をしっかり身につけつつ、今後の学習に繋げてゆきましょう。
image


小泉七菜
この記事を書いた人
小泉七菜
まずは7日間お試し!人気プログラミング講座を無料公開中
オンライン・プログラミングレッスンNo.1のCodeCamp