- Web制作の勉強を初めた。
- HTML・CSSはなんとか基本的なことはわかった。
- 次は「JavaScript」を始めてみたけど、カンスウがよくわからない！
JavaScriptに入った時点でそのようになってしまう方はたくさんいると思います。
確かに「関数」や「条件分岐」「繰り返し」といった概念は、プログラミング自体に初めて触れる方には少し難しいかもしれません。
そこで今回はその中でも「関数」について、できるだけわかりやすく、
・「関数」ってなんだ？
・「関数」の便利な使い方
・「関数」の書き方バリエーション
について解説をしていきたいと思います。
目次
「関数」ってなんだ？
関数とは？
ひとことで言いますと、
いくつかの「命令」を一つにまとめて、それを色々な場所から呼び出せるようにする仕組み
のことです。
同じ処理を何度も使う場合、毎回同じコードを書くのは手間ですよね。
そういった場合に、繰り返し使う処理をまとめた「関数」を作ってしまい、何度も使いまわせるようにしているんです。
わかりやすいように例えてみます。
例えば電卓を使うときに、何度も消費税10%の税込価格の計算をしないといけないとします。
その場合、毎回「×」「1」「.」「1」「=」と5回もキーを打つのはめんどくさい。
それよりも「消費税10%」ボタンというものがあって、それをポチッと押すだけで1.1倍の計算をしてくれたら楽ですよね？
「×」「1」「.」「1」「=」の命令を「消費税10%」ボタン１つにまとめるように、JavaScriptで何度も繰り返し使う命令文を「関数」にまとめて簡単に使いまわせるようにできるのです。
関数の役割
今度は少し具体的に見ていきましょう。
JavaScriptでいろんな処理を書くと思いますが、「同じ処理」を「何度も」書くという場面が出てきます。
その際に、何度も同じ処理を繰り返し書くのは面倒ですよね。（さきほどの電卓の例と同じです）
ですので「繰り返し出てくる処理」を関数というものにまとめて便利につかえるようにします。
「関数」の便利な使い方
具体的に見ていきましょう。
まず、関数を使わない場合です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
let num = 100; if( num === 100 ) { num = num * 1.1 ; //① alert ( '変数numは' + num + ' です。 '); //② } else if ( num === 200 ) { num = num * 1.1 ; //① alert ( '変数numは' + num + ' です。 '); //② } else if ( num === 300 ) { num = num * 1.1 ; //① alert ( '変数numは' + num + ' です。 '); //② } |
これだと、①②は全て同じ書き方をしていますよね。
先ほどお伝えした、まさに「同じ処理の繰り返し」です。
ですので、この「同じ処理の繰り返し」を関数に入れてしまいましょう。
|
1 2 3 4 5 6 7 |
function total ( hikisuu ) { let result = hikisuu * 1.1 ; //① return 'hikisuuは' + result + 'です。'; //② } |
関数totalの中に①②の処理を入れてみました。
では、次に最初の関数なしで書いたコードにこの関数を使ってみましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
let num = 100; if( num === 100 ) { alert(total(num)); //③ } else if ( num === 200 ) { alert(total(num)); //③ } else if ( num === 300 ) { alert(total(num)); //③ } function total ( hikisuu ) { let result = hikisuu * 1.1 ; //① return '変数numは' + num + 'です。'; //② } |
このようになります。
③が関数を使ったところです。
元々2行の処理だった箇所が1行でスッキリかけていることがおわかりでしょうか？
「関数」の書き方バリエーション
次はJavaScriptでの関数の定義の仕方です。
何種類かあるので覚えておきましょう！
「関数宣言」での書き方
一番基本的な書き方ですね。
function の後ろに関数名をつけて宣言をしています。
|
1 2 3 4 5 |
function sample() { // この中に処理を書きます。 } |
「関数式」での書き方
今度は少し違う書き方です。
functionの後ろに関数名はありませんが、変数sampleの中に関数をいれています。
|
1 2 3 4 5 |
let sample = function() { // この中に処理を書きます。 } |
JavaScriptでは、関数も「オブジェクト」という扱いになるため、こういった書き方ができます。
※JavaScriptをするには「オブジェクト」の理解が必要ですが、それはもう少し学習がすすんでからでOKです。
アロー関数での書き方
こちらはES6という新しいJavaScriptの書き方です。
いきなり最初から使いこなす必要はありませんが、今後の学習で出てくる可能性がありますので「こんな書き方なんだ」程度でいいので覚えておきましょう。
まず、こちらはES5の書き方です。（前述したものですね）
内容は単純に、（）内の引数をコンソールに出力する関数です。
|
1 2 3 |
let sample = function(str) { console.log(str); } |
これをES6の書き方に置き換えるとこうなります。
|
1 2 3 |
let sample = (str) => { console.log(str); } |
「function」がなくなり、「=>」という記号が増えましたね。
さらに「{ }」の中身が1行だけであれば「{ }」も省略できます。
|
1 |
let sample = (str) => console.log(str); |
もうひとつさらに加えると、（）内の引数が1つだけの場合は（）も略せます。
|
1 |
let sample = str => console.log(str); |
とかなりシンプルな書き方になりましたね。
最初のうちは混乱するかもしれませんが、徐々に慣れていけばOKです！
まとめ
HTML・CSSからJavaScriptの学習に入り、関数でつまずく人のために
・「関数」ってなんだ？
・「関数」の便利な使い方
・「関数」の書き方バリエーション
について解説いたしました。
ここを理解できれば「最初の第一歩」はクリアですので是非ご活用ください。
