CodeYear 第2週 ~Functions~
更新日:2021.07.03
第2週はFunctionsです。プログラミングの世界では、”function(s)”は「関数」という意味です。まずはLessonsをスタートしましょう。
FunctionsのLessonsには2つの章があるようです。関数は新しい概念なので、まずはLessonsで学習していきます。Functions in JavaScriptからスタートしましょう。
Lessonsには5つのセクションがあります。それぞれ、「1. 関数の定義」、「2. 関数内の変数」、「3. 戻り値」、「4. 値としての関数呼び出し」、「5. パラメータの理解」となっています。1つ目からスタートしましょう。
1問目では、関数とは何かについて書かれています。プログラミングの世界で、関数とは再利用が可能なコードのブロックを指しています。関数を「呼び出す」ことで、関数の中身が実行されることになります。そして、関数は「function」というキーワードで始まるブロックになります。
例えば、1行目の中カッコ「{」から4行目の中カッコ「}」は1つのコードのブロックになっているのですが、これに「function()」と付けることで、この中カッコで囲まれた部分は関数となります。1行目では、この関数(1行目の中カッコから4行目の中カッコまでの部分)をhelloというものにvarキーワードでセットしています。varキーワードは変数を宣言するために使われていましたが、関数にも使うことができます。
こうして、helloが1行目~4行目のコードのブロックとなりました。
6行目でhello();と書かれていますが。この「hello」とは、1行目で出てきたhelloを指します。そして、hello()と書くことで、関数を「呼び出す」ことができます。6行目のhello();に来ると、この部分で1行目から4行目が実行されます。
さて、これだけを見ると面倒なことをしているだけのように見えるかもしれません。しかし、このhello()を複数回呼び出すことで、関数の中身を簡単に呼び出すことができるというメリットがあります。例えば、helloの中身では”I am saying hello”と出力しています。もしこれを2回行いたい場合は、関数がなければ1~4行目の中カッコの中身を2回書かなければなりません。この例では効果が分かりにくいかもしれないのですが、もし関数の中身が非常に長かったり、何度も呼び出す必要があったりする場合は、効果が大きく現れます。
さて、(前置きが長くなりましたが)この問題では”I am saying hello”と2回出力させる必要があります。つまり、helloの中身を2回実行する→helloを2回呼び出せば良いわけです。
正解は次の通りです。
さて、次のExerciseに進むと、新しい関数が出てきます。ぱっと見たところ、関数として正しく定義されているように見えますが、このまま実行するとエラーが出てきます。どこかを修正しなければなりません…。
問題文にも書かれていますが、関数は、functionというキーワードの後に、「()」を入力(←後の問題で、カッコの中に色々なものをいれるパターンも出てきますが、今はこれだけ)して、その後に中カッコで囲まれたコードのブロックを入れて、最後にセミコロンで終わります。
ここで出てきている関数の書き方は、大体合っているのですが微妙に間違っています…どこが間違いか分かったでしょうか?
実は「function」というキーワードのスペルが間違っています(ちなみに私はこれに気付くまで結構時間がかかりました…(笑))。スペルを正しく直してRunをクリックすれば、このExerciseはクリアです!
ちなみに、コードの行数の部分に赤い丸に×印が付いていますが、これは「この部分は明らかに間違っている」ということを表しており、このままRunすると、エラーが出ます。今後も、これが出ている部分は必ず直すようにしましょう。
3問目は、自分でオリジナルの関数を作る問題です。これまでの問題を通して、関数の定義のやり方は分かったかと思います。自分の名前を出力する(console.log(“自分の名前”);を実行する)関数を定義して、myFirstFunctionにセットしましょう。なお、最後にこの関数を呼び出すことも忘れずに。
できましたか?
このセクション最後の問題です。まず、初めから書かれているコードを眺めてみると、10~14行目と、18~22行目の内容が全く同じだということに気付くかと思います。同じコードを2回書くのは無駄ですよね。そこで、この部分を関数として定義してしまい、10~14行目と18~22行目の部分で、その関数を呼び出すようにするのが、この問題の趣旨です。この問題はやるべきことが多いのですが、問題文に1つずつ説明されているので、この説明に従っていきましょう。まずfixNameという名前で7行目に関数を定義し、10~14行目の内容(18~22行目の内容とも言えます)を、その関数の中にコピー&ペーストしてしまいます。そして、10~14行目と18~22行目の内容を削除し、代わりにfixNameを呼び出すようにします。
最終的に、名前を聞かれるメッセージが2回出てきて、それに姓と名をすべて小文字で入力すると、姓と名の1文字目が大文字になった名前が出力されるようになればクリアです!
このセクションが終われば、他のセクションもやってみましょう。「5. Understanding parameters」まで完了すると、このLessonsは完了です。
ちなみに、Lessonsの2つ目にある「Review of Functions in JavaScript」は復習問題です。第2週 Functionsには、Lessonsの他に、4つのProjectsがあります。これはLessonsで学習したことを応用したもので、タクシー料金計算のコードなどを作ります。「FizzBuzz++:Return of the Modulus」というProjectは、第2週までには出てきていない「オブジェクト」の内容が突然出てきているので、他と比べて難しいと思いますが…。
第2週 FunctionsのすべてのLessonsとProjectsをクリアすると、次のようになりました(原稿執筆時点)。第2週 Functionsを始めた時点から、バッジを新たに8つ獲得したことになります!