JavaScriptの矢印「=>」とは?
〜これは、アロー関数というものです。

〽️ ただの関数式です。 〽️ アロー関数とは? 〽️ 作ってみよう。〽️ アロー関数のメリットと使いどころ。〽️ コード全体の短縮につながる。






syntax。


(変数/定数名) = 「「1(引数) => { 処理 }」」;


ただの関数式です。


こんにちは、「ふ」です。
JavaScriptについて学習中、サイトや書籍のサンプルコードで見かける、

const foo = a 「「1=>」」 a+2;

という、謎の「 => 」という記号。


何だこれは !?

となった方もいるのではないでしょうか。



ただの関数式です。

動揺することはありません。
⬇︎の、普段使っている関数式と意味は同じです。

const foo = function(a) { bbreturn a+2; bb};

謎の「=>」を使った記述。これは関数式の記述を簡略化した「アロー関数」と呼ばれる構文で、新しい(といっても数年前)バージョンのJavaScriptに追加されたものです。

厳密なところで言うと、アロー関数は通常の関数とは違う、特有の性質を持ってはいます。しかしその辺の細かいところは、かる〜く使用するぶんには考える必要はありません。

今回は「アロー関数」の使い方とメリットについて紹介していきます。
サンプルコードで「=>」が出てきてもビックリしないよう、また自分でもアロー関数を気軽に使えるようになりましょう。

アロー関数とは?


アロー関数は英語で「Arrow Function」〜そのまんまです。
「Arrow」は「矢、矢印」と言う意味です。「=>」の見た目からきているのですね。

基本的な形は次の通りです。

定数/変数名 = (引数) => { 処理 };

「=>」の左が引数、右が処理内容です。
通常の関数式に置き換えると、

定数/変数名 = function() { bb処理 bb} ;

となります。簡単ですね ♪

フツーの関数定義であれば記述が必要な "function" や、もっと言えば丸括弧「( )」や中括弧「{ }」も省略してササっと記述できるのが、アロー関数の最も便利なところです。

作ってみよう。


次は実際にアロー関数を作ってみましょう。コードを書いて体験すれば、すぐに自分のものにできます。

最強省略形。


「引数aに、2を足したものを返す」という関数をつくってみます。

const sample1 = a 「「1=>」」 a+2;

引数も処理も単品であれば、丸括弧や中括弧、「return」の記述も必要ありません。
左側の引数と右側の処理内容で「=>」を挟むだけです。


定義した関数を実行してみましょう。

console.log(sample1(3)); bb「「3// 「5」と出力される」」

全然使えます。

もし、フツーの関数式で書くとすると⬇︎のように。

const sample1 = function(a) { bbreturn a+2; };

従来の記述法がずいぶんと長ったらしく感じてしまいます💧

引数が不要のバヤイ。


引数を必要としない関数のバヤイには、「=>」の左側には「( )」を置きましょう。
例えば、アラートを表示するだけのもの。

const sample2 = 「「1()」」 =>」」 alert("こんにちは");

これは通常の関数定義と同じルールですね。フツーの関数でも、引数なしのバヤイには、

function no_argment 「「1()」」 { alert("こんにちは"); }

と、丸括弧を添えます。

引数が2つ以上。


引数が2つ以上あるときは、丸括弧「( )」で囲みます。
例:引数aとbの和を返したいとき。

const sample3 = 「「1(」」a,b「「1)」」 => a + b;

処理が2行以上。


今度は処理が2行以上のとき。
中括弧「{ }」で囲ってやる必要があります。

const sample4 = () => 「「1{」」 bbconsole.log("こんにちは"); bbconsole.log("さようなら"); bb「「1}」」;

値を返したい場合には、「return」の記述が必要になってきます。

const sample5 = a => { bblet b = 3; bb「「1return」」 a+b; bb};

注意したいのが、処理内容を「{ }」で囲んだ時点で、値を返したい場合には「return」を明記しないといけないということです。これは処理が1行のときでも該当します。

引数aに2を足したものを返す、という関数。

const sample6 = a => {a+2}; console.log(sample6(3)); bb「「3// 「undefined」と出力される」」

処理が1つなのに、成立していません。

const sample7 = a => { 「「1return」」 a+2 }; console.log(sample7(3)); bb「「3// 「5」と出力される」」

「return」を明記することで、うまくいきました。
処理が1つの場合は「{ }」を付けないほうが良さそうです。

アロー関数のメリットと使いどころ。


アロー関数のメリットは「関数式の記述が楽チンになる」という事は分かりました。
もう1つの使い所として、「関数の引数として使える」点が挙げられます。

eventListener。


「要素をクリックするとアラートが表示される」というイベント処理。
従来の書き方だと、

function sample8() { alert("こんにちは"); } element.addEventListener("click",sample8);

もしくは、

element.addEventListener("click",function() { bbalert("こんにちは"); bb});

でした。
アロー関数を使って書いてみます。

element.addEventLinster("click",「「1() => alert("こんにちは")」」);

引数に使うとずいぶんスッキリします。

setTimeout。


setTimeout(「「1() => console.log("こんにちは")」」, 1000);

一定時間ののちに処理が実行される、setTimeoutメソッド。
「set〜」系にもアローを使うと便利です。

処理を自由に置き換える。


そしてこんなこともできてしまいます。

function konna(a,syori) { return syori(a); }

「第1引数に対して、第2引数で処理をしたものを返す」という関数を定義しておきます。
引数の内容を変えて、実行してみましょう。

console.log(konnna(5,a => a**2)); bb「「3// 「25」と出力される」」 console.log(konnna(5,a => Math.sqrt(a))); bb「「3// 「2,236...」と出力される」」

1つ目は、「5」に対してその「自乗を返す」というもの。
2つ目は、「5」の「平方根を返す」という処理です。

引数に関数を含めることによって、処理内容を自由に置き換えることができます。

コードの短縮につながる。


最後までお読みくださり、ありがとうございました。

今回はJavaScriptのアロー関数について紹介してきました。これでもう「=>」に出くわしても、「!」とならなくて済みますね ♫

通常の関数式とアロー関数を比較したとき。
1箇所の書き換えであれば、たかだか1行程度の短縮でしかありません。
しかし、コードが長いものになったときには、全体としてかなりの短縮が可能です。それは、可読性向上に大きく繋がります。


とても簡単なものなので、是非ご自分で手を動かしてアロー関数を書いてみてください。そうするとすぐに慣れてしまうことでしょう。

ではまた => お会いしましょう〜 ♪



JavaScript、乱数の範囲や重複を指定〜Math.random使い方。

2021.11.17
整数/範囲/重複の有無を自在にあやつろう。

SVGでボタンアニメーション【Web Animations API】。

2020.12.19
event.targetからオブジェクトを動かす。


ブログのクリックをGoogle Analyticsで計測。

2021.11.30
新たなツールは導入せずともOK。











「ふ」です。

swift、web、ガジェットなど。役立つ情報や観ていてたのしいページを書いていきたいと思います。