【英語でプログラミング学習】一気にプログラミングが面白くなる「関数」を理解しようーブラウザをしゃべらせてみます！

2020年4月2日 00:06

プログラミングを始めて最初に辛いと思うのは、変数やらデータ型やら四則計算やらと、いろいろと覚えこまされるにもかかわらず、一向に「何かをやる」雰囲気にならないことです。常に「だからこれで何ができるの？」という先が見えない不安を抱えながら、ひたすらシンタックスの勉強をするというのは楽しいことではありません。ところが、今回取り上げる「関数」を理解すると、ようやくプログラミングが「何かをするものだ」ということが見えてきます。

今回はプログラミング英語の表現もたくさん出てきますので、まずはリンクビデオを聞いて、どこまで理解できるか挑戦してみてください。今回は「関数のタイプ（Types of Functions)」のところまでです。

ここまで。

関数は「動詞」です！

これまで”参照型”のデータタイプとしてObjectそしてArrayを学習しましたが、そこにもう一つ重要な「関数」があります。

Functions are one of the fundamental building blocks in JavaScript.
関数はJavaScriptで基礎的な構成要素の一つです。

Building blockは「積み木」のことですが、エンジニアのコンテクストでは、何かものを作る際に、積み木のように要素を組み立てて完成させるようなものに対してよく使います。ここでは、JavaScriptでの基礎要素として重要なものだと言っています。そして関数の”定義”としてこう述べています。

A function is a set of statements that performs a task or calculate a value.
関数とは、一連のステートメントで、タスクを実行したり、値を罫線したりします。

a set of statementsというのは「コードが何行が書かれている」ということ。taskというのは「仕事」なのですが、「作業」と考えたほうがわかりやすいです。それをperform（実行）するというのがperform a taskです。calculateは「計算する」という意味なのはわかりますよね。何だか難しく説明しているようですが、要は「関数というのはコードを何行が書いて、何かを実行したり、値を取り出したりするものです」という意味です。

ちなみにこれを会話でざっくり説明する時は、

関数というのはコードを何行が書いて、何かを実行したり、値の取り出したりするものです。
A function is something, you write some programming codes to do something or get some values.

などとざっくり説明しても十分通用します。簡単な基礎動詞だけでもちゃんと説明はできます。statementsやperform、calculateなど難しい単語が一切ないでしょう？ Moshさんの説明はそれを高尚な表現にしただけなのです。

さて話は関数に戻って、まず最初の関数の宣言(declare)がこれです。

function greet () {
   console.log ('Hello World');
}

関数はfunctionというキーワードで宣言し、ここではgreet（挨拶する）という”動詞”を使っています。つまり、この関数がperformするtaskというのが「挨拶する」ということです。なんじゃそりゃ？と思うかもしれませんが、ここで言う「挨拶」というのはコンソールにHello Worldという文字を表示するということだけです。

ここで一点理解してほしいのは、関数というのは「動詞」だということです。何かをすることが関数で、その本質は動詞。逆にこれまでやった変数やObjectなどはすべて「名詞」なのです。英語も名詞と動詞はとても重要な要素でしたが、JavaScriptで名詞と動詞にあたるObjectと関数はとても重要な要素なのです。Moshさんが最初に説明した点のポイントはそこにあります。

関数は「呼び出す」まで何もしない

この超簡単な関数を作って、それをどうするかというと「呼び出す」のです。

We can call this function, like this.
この関数をこうやって呼び出すことができます。

function greet () {
   console.log ('Hello World');
}

greet();

greet関数を書いたその下に、greet()；と書いて、これで関数を呼び出すと説明しています。ところが、初めてプログラミングをやる方はこれがよくわからないと思います。恐らくこういう疑問が湧いてくるでしょう。

「この最初のgreetという関数のところは何をやるの？」

今までconsole.logとか、あるいはlet name = 'Mosh'など書いてきたコードは何かをしていましたよね。つまり、「コードを書＝何かをする」というイメージを持っていた方も多いと思います。なのに、ここでは３行もコードをかいていながら、そこが何をしているのかよくわからない。そんな疑問を持ったらこう考えてください。

関数は何かをするための”指示書き”で、それ自体は何もしない

その証拠に、HTML内にScript要素を入れ、次のように関数だけ書いてみてください。ちなみにこのコードは、ページが開くとアラートボックスが出てきて、そこにhelloという文字を表示するだけの関数です。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<body>
   <script>
       function greet()
       {
           alert('hello');
       }
   </script>
</body>
</html>

当然、これだけではページを開いても何も起こりません。そこでこの関数を「呼び出す」という行為が必要なのです。

greet();

これを入れてようやくアラートが出てきます。

さて、greet関数とその呼び出しですが、次のように書いたらどうなるかわかりますか？違いは関数を宣言する前にgreet関数を呼び出しているということです。

greet();

function greet () {
   console.log ('Hello World');
}

これでも結果は前と全く同じです。

「あれ？なんで関数の宣言の前に呼び出せるの？「

Moshさんの説明にはありませんが、指示書きである関数はコード内のどこに置いても構いません。どうせ何もしないわけですから、どこに置いても構わないのです。関数というのは最初から「実行される」ことを前提にしているのではなく、あくまで「説明」なのだと考えてください。プログラムの実行で重要なのはgreet()という実行のところなので、関数そのものはどこにあっても構わないわけです。「関数＝指示書き」というイメージがつかめてきたでしょうか。

parameterとargumentの違いが分かりますか？

さてこのgreet関数、どうもピンときませんよね。Moshさんもこう認めています。

That's pretty boring.
これはとてもつまらないものだ。

そこで、input（入力）を加えてみようと言っています。関数をこう変えます。

function greet (name) {
   console.log('Hello ' + name);
}

関数の宣言にあった括弧の中にnameという変数を入れています（この場合はletキーワードは不要です）。つまりgreet関数を呼び出す際に「名前」の文字列を入れる（input）ことができるという意味です。そしてコンソールに書き出す文字は'Hello ' プラスそのnameの文字列です。

そしてこの名前変数付きの関数を呼び出す場合は、当然名前の文字列を渡してやらないといけません。

greet('John');

こうやって呼び出したら、出てくる文字列は'Hello ' + 'John'つまり'Hello John'となるわけです。

さて、ここで重要な言葉の説明をしています。この関数に入れるname変数のことをparameter（パラメータ）と言います。

We refer to this variable as a parameter.
この変数のことをパラメータと呼びます。

そしてこの関数の場合、nameという変数は関数の中だけで使えるという点も説明しています。例えば関数の外でnameという変数をコンソールに出そうとします。

function greet (name) {
   console.log ('Hello ' + name);
}

consoler.log(name); //ここがエラーになる

これは一気にエラーになります。

It will not be accessible outside the function.
その変数は関数の外ではアクセスできない。

「指示書き」で使う変数はその中だけで使うものと覚えておいてください。

一方、パラメータ付きの関数を呼び出す場合には何か値を渡さないといけません。

greet('John');

ここでは'John'という文字列を渡していますが、これをargument（アーギュメント＝引数）と言います。

We refer to this as an argument.
これを引数と呼びます。

つまり、関数で設定するのがパラメータ、関数を呼び出す際に渡す値を引数と呼ぶわけです。

この後はgreet関数を複数回呼び出したり、さらにパラメータが複数あるものを試したりしていますが、そこは簡単に理解できると思います。

ブラウザがしゃべるという関数を作ってみよう

ではせっかく関数の理解をしたので、もっと面白い関数を作ってみましょう。私の別記事で、Web Speech APIというのを使ってブラウザにしゃべらせるJavaScriptを１分で書くという方法を解説しました。

そこの説明で使っているコードを利用してこんな関数を作ってみて下さい。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<body>
   <script>
       //Spea関数の宣言
       function speak(text)
       {
           let uttearnce = new SpeechSynthesisUtterance();
           uttearnce.text = text;
           uttearnce.volume = 1;
           uttearnce.rate = 1;
           uttearnce.pitch = 1;
           uttearnce.lang = 'ja-JP'
           window.speechSynthesis.speak(uttearnce);
       }

       //Speak関数を呼び出す
       speak('私は日本語が話せます');
   </script>
</body>
</html>

まずgreet関数と比べるとちょっと複雑ですが、それでも７行。めんどうならそのままコピペしてみてください。

関数を見ると一目瞭然です。speakというのは文字通り「話す」関数。パラメータはtextという文字列です。そしてこれを呼び出す際に、引数として話したい言葉を入力してみてください。これを保存してHTMLページをブラウザで開くと「私は日本語が話せます」というボイスが聞こえてくるはずです。

これで関数のイメージがさらにクリアになったと思います。関数は自分がやりたいこと、実現したいことをコード化して書くもので、まさにプログラミング作業の中枢部分です。いかに高度な”動詞”を定義できるかで、アプリケーションの動作が決まってきます。このSpeakの中身は今はよくわからないかもしれませんが、コードの書き方次第でブラウザがしゃべるということまでできるのが関数です。これからコーディングの知識を増やしていけば、皆さんももっと高度なことができるようになるはずです。

この記事が気に入ったらサポートをしてみませんか？