Gatsby.jsを利用した爆速Webサイト制作 Lesson 3： JavaScript超入門その２
こんにちは、Teshi(@atsuhio)です。フィリピンに住みつつ、欧米の子供向けプログラミングスクールCodeGrit Jrを開発中です。オンライン英会話サービスも運営しています。
このレッスンは、以下のリンクにある初心者向けプログラミング学習コースの一部として作成しています。
前回のレッスンでは、JavaScriptの基礎を学び実際にコードを書いてみました。今回のレッスンでは前回のレッスンでも少し触れましたがJavaScriptを利用する上で必須のコンセプトであるファンクションについて学んでいきます。
ファンクション(関数)とは？
ファンクションはJavaScriptで最も基本的な機能の一つで、「複数の処理を一つにまとめた大きな一つの処理」のことです。関数ともいいます。
前回のレッスンの中で出てきた以下のコードを思い出してみましょう。
window.document.write('<h1>初めてのJavaScript</h1>');このコードはHTMLドキュメントに'<h1>初めてのJavaScript</h1>'という文字列を書き込むwrite()というファンクションを使っているという話でしたね。
ファンクションは複数の処理をまとめている
このwriteというファンクションを使うと5文字で済んでしまいますが、実際には裏側では複数の処理を行っています。何度もその複数の処理を自分で書くのは手間です。その複数の処理をまとめて簡単に呼び出せるようにしているのがファンクションです。
ファンクションは名前を持つことで目的を明確にする
またファンクションを使わない場合、処理が複雑になるほど一体そのコードが何をしようとしているのかが、分かりづらくなってしまいます。ファンクションは名前を持っているので処理全体の意味を分かりやすくしてくれる効果もあります。
ファンクションは繰り返し呼び出せる
また、この同じwriteを繰り返し呼び出すこともできました。
window.document.write('<p>結果は');
window.document.write(result);
window.document.write('です。</p>');ファンクションは0個から複数の値(引数)を受け取り利用できる
こちらはちょっと新しい概念となるのですが、例えば上記のwriteというファンクションでは文字列を受け取って、受け取った文字列をHTMLドキュメントに書き込むということをしています。
writeファンクションの場合は1つの文字列だけを受け取っていますが、ファンクションによっては何も受け取らなかったり、複数受け取ることもあります。こうした受け取る値のことを専門用語で引数といいます。例えば「writeファンクションは1つの文字列を引数に取る。」というふうに言えばプログラマーにはすぐに意味が通じます。
引数の数は決まってないのですが3個以内に収めるのがベストプラクティスとされています。初心者の方の場合はルールと思った方が良いかもしれません。
ファンクションの特徴のまとめ
まとめると、ファンクションは以下のような特徴を持っています。
- 一つの処理や複数の処理をまとめている。
- 名前を持つ。(ここではwriteという名前)
- 何らかの目的にあった動作を行う。(ここではHTMLドキュメントへの書き込み)
- 繰り返し呼び出すことができる。
- 引数を0個または複数個受け取り、その引数の値を利用した処理を行う。
ファンクションを自分で作ってみよう
このファンクションですがすでに用意されたものを使うだけではなくて、自分で作って、使うということも出来ます。そしてファンクションの中でファンクションをさらに使うということも出来てしまいます。
早速ですが前回の課題で書いたコードをさらに一まとめにしたファンクションを書いて見ましょう。
let a = 8;
const b = 3;
a = a + b;
let result = a % b;
result = result.toString();
window.document.write('<p>結果は');
window.document.write(result);
window.document.write('です。</p>');見てみると分かりますが、ここではa, bという2つの変数が出てきてます。またaとbを足してからbで割ったあまりを出しているのでファンクション名はaddAndShowRestという名前にしてみましょう。
ファンクションの宣言のしかた
変数の時は変数を宣言するといいましたね。同じようにファンクションを定義するときもファンクションを宣言するという言い方をします。
addAndShowRestファンクションを宣言してみると以下のようになります。
function addAndShowRest(a, b) { ...中の処理 }詳しく見ていきましょう。ファンクションを定義するときには、
1. functionというキーワードを書く。
2. ファンクションの名前を書く。(addAndShowRest)
3. 引数を与える。(ここではa,bの2つ)
4. {}で囲った部分に処理を記述する。
という風にします。
全ての処理を書いて見ましょう。すると以下のようになります。
function addAndShowRest(a, b) {
const sum = a + b;
let result = a % b;
result = result.toString();
window.document.write('<p>結果は');
window.document.write(result);
window.document.write('です。</p>');
}上記のコード元々のものとほとんど同じなのですが一つ注意点があります。
元のコードでは
a = a + b;としていた部分が、
const sum = a + b;に変わってますね。引数に与えている変数aに新しい値を与えてしまうと混乱を招くことにつながります。そのため、sumという変数を新しく宣言しています。
引数の名前に関する注意点
さて、ここまでの関数では引数の名前にa, bとつけていたのですが、この名前はどうつければいいの？と思った方はいるでしょうか？とても鋭い質問です。
引数の名前ですが、基本的に何をつけても構いませんが必ず小文字で始まるようにします。また引数の名前から意味が分かりやすいとベストです。
例えば、文字列を引数にしたいのであればStringを省略して(str)のような名前を使ったり、高さと幅を引数として取りたいのであれば高さと幅それぞれの英語である(height, width) という引数名にするなどです。
プログラミングでは実はこうした命名が重要とされてまして、今後もどうやって名前をつけるかについては何度かに分けて解説していきます。
ファンクションの呼び出し
すでにwriteファンクションを何度か利用していますので大体想像はできるかと思いますがファンクションを呼び出す時は実際の値を引数の部分に与える必要があります。
先ほど定義したaddAndShowRestファンクションであればたとえば以下のようにして呼び出せます。
addAndShowRest(3, 8)引数の数が定義されたものより多すぎたり、少なすぎたりするとエラーが発生してしまいますので注意してください。
作成したファンクションを使ってみよう
さて、では早速作成したファンクションをjsFiddleで使って見ましょう。リンク先にはすでにファンクションが定義してありますのでそのまま開いてください。
実際に動作することが確認出来たでしょうか？
実際には、このファンクションは<p>たぐで囲ったものを出力する関数にさらに分けた方が良くなったりします。
ファンクションから返ってきた値は変数に格納できる
さて、ここまで学びの部分ばかりだったので次の項目では自分でコードを書くチャレンジがあります。その前に一つ知っておきたいことを書いていきます。
JavaScriptのファンクションからは何らかの結果の値が返ってくることがあります。この値は変数に格納することが出来ます。
例えば足し算をするだけの関数sumを作成してみましょう。
function sum(a, b) {
return a + b;
}returnというキーワードが出てきたことに気付いたでしょうか？このreturnキーワードを使うことでsumファンクションはaとbを足した結果を返しています。
結果を変数に格納するには以下のようにします。
const result = sum(3, 4)このようにするとresultの中には3と4を足した結果である7が格納されます。
チャレンジ１: ファンクションを分けてみよう
さて、先ほど定義したaddAndShowRestファンクションはうまく動くのですが実はあまり良くない点があります。それは一つのファンクションで「足して割ったあまりを出す。」という処理と、<p>タグで結果を囲んでHTMLドキュメントに書き込むという２つの処理を同時にしてしまっているからです。
プログラミングの世界のベストプラクティスでは、一つのファンクションは一つの役割だけを持つべきとされています。これを単一責任の原則（Single responsibility principle）と言ったりします。プログラマーの世界では長年の歴史から生まれたこうしたベストプラクティスが色々あるのですね。
そこで課題です。上記のファンクションを計算結果を出すファンクションと、<p>タグをつけて出力するファンクションの2つに分けましょう。
ファンクション名は以下のように定義してください。
addAndGetRest - 足して割った余りの計算結果を出す。
writeAsParagraph - <p>タグをつけてHTMLドキュメントに出力する。
ここまでに学んだ知識を総動員すればきっと出来ますので頑張ってみてください。解答は以下の無名ファンクションに関する説明の項目の後にあります。
課題は完成しましたか？完成したら解答を確認して次の項目に進みましょう。
無名ファンクションを変数に格納する
ここからが初心者が混乱してしまうところなのですが実はファンクションの宣言の方法は一つだけではありません。変数に対して名前無しのファンクションを格納するということも出来ます。この時ファンクション自体には名前がつけられていないので、無名ファンクションと読んだりします。
具体的には以下のように書きます。先ほど書いたsumという関数と比較していきますね。
通常のファンクション宣言の場合:
function sum(a, b) {
return a + b;
}
const result = sum(3, 4);無名ファンクションを変数に格納する場合:
const sum = function(a, b) {
return a + b;
}
const result = sum(3, 4);いかがでしょうか、上記を見ても2つはほとんど同じことが分かるかと思います。
アローファンクションを利用する
上記でなぜ初心者が混乱しやすいと書いたかというと、無名ファンクションの書き方はES6だとさらに別の書き方があるためです。実際に比較してみましょう。
通常の無名ファンクションの場合:
const sum = function(a, b) {
return a + b;
}
const result = sum(3, 4);アローファンクションの場合:
const sum = (a, b) => {
return a + b;
}
const result = sum(3, 4);ご覧になって分かるかと思いますが、違いはほとんどありません。唯一の違いはfunction(a, b) という部分が(a, b) => に変わっていることだけです。
２番目の宣言のしかたは=>この矢印の部分が英語の矢(Arrow - アロー)に見えるのでアローファンクションと呼びます。
ではなぜ、アローファンクションが紹介されたのでしょうか？それはプログラミングは基本的に怠惰な生き物なので色々ものを省略したいと思っているからです笑 冗談ではありません。functionという文字を毎回打ち込むのは面倒だし読みづらい、だからアローファンクションを使います。
こちら非常に混乱しやすいので最後にもう一度、アローファンクションと通常のファンクションで比較しますね。
通常のファンクション宣言の場合:
function sum(a, b) {
return a + b;
}
const result = sum(3, 4);アローファンクションを使い変数に格納する場合:
const sum = (a, b) => {
return a + b;
}
const result = sum(3, 4);チャレンジ１の解答例：
こちらのjsFiddleページにも解答例があります。
チャレンジ１自分で挑戦して出来たでしょうか？解答例のコードは次のようになります。
function addAndGetRest(a, b) {
const sum = a + b;
let result = a % b;
return result;
}
function writeAsParagraph(sentence) {
window.document.write('<p>結果は');
window.document.write(sentence);
window.document.write('です。</p>');
}
const result = addAndGetRest(3, 8);
writeAsParagraph(result);レッスン３のポイントとまとめ
今回のレッスンでは以下のようなことを学びました。どれも重要な概念なのでしっかり理解しましょう。
1. ファンクションは複数の処理を一つにまとめたもの
2. ファンクションは変数に格納することもできる
3. 引数名は何でも良いが分かりやすい名前をつける
4. ファンクションは複数の方法で書くことができる。
次回のレッスン4では、いよいよGatsby.jsでの開発をスタートするためのセットアップを行っていきます。
レッスン４は明日一部を公開予定です。