Little Strange Software

スマホアプリの開発を行う LittleStrangeSoftware のブログです。

【JavaScript】はじめてのアロー関数

 どうも!LSSです!!

 

昨日の記事のコードのなかで、しれっと

rndm=a=>Math.floor(Math.random()*a);

という怪しげな一行を忍ばせていました。

 

これ、「アロー関数」と呼ばれるもので、何気に初めて使ってみたのです。

=>が「アロー関数」の特徴で、アロー=矢っぽいからそう呼ばれているようですね。

 

 

JavaScriptの関数と言えば

function 関数名(引数){
処理内容
}

のように記載するもの、という認識でした。

 

そうして宣言しておけば、同スクリプト内の別のところで
関数名();
とだけ書く事で「処理内容」の部分に記載した内容を呼び出して実行する事ができます。

 

 

アロー関数

昨日の記事で使用したアロー関数、 

rndm=a=>Math.floor(Math.random()*a);

は、実は、

function rndm(a){
return Math.floor(Math.random()*a);

と書くのと同じ効果を持ちます。

ちなみに内容としては、

kekka=rndm(100);

のように書く事で「0~99の間の整数のいずれかをランダムに取り出す」という役割を果たす関数となっています。

 

つまり、

関数名=引数=>処理内容;

という書き方でも、関数が定義できる、って事ですね。

(ただし、この説明には少し語弊があります)

 

 

関数宣言からアロー関数への変化の道のり

まず、ごく一般的な「関数宣言」である、

function rndm(a){
return Math.floor(Math.random()*a);

を、順を追って変形させて、アロー関数に至るまでの考え方を書いていきます。

 

上記の形で書く事を「関数宣言」と呼びましたが、これを「関数式」の形に変更します。

 

rndm=function(a){return Math.floor(Math.random()*a);}

このような書き方でも、rndmは乱数を整数で返す関数として使えるようになり、使い方も「関数宣言」と同じく、

kekka=rndm(100);

のような書き方で扱う事ができます。

この書き方を「関数式」と言い、functionの後に「関数名」がないので「無名関数」という事になります。

使い方は同じなのに、この場合の「rndm」は「関数名」ではなく、「変数」であり、
「関数式によって変数に関数リテラルを代入した」
という事になります。

 

正直、自分はこの「関数を変数に代入する」というところで「???」でした。

「関数リテラルとはなんぞや!?」とw

 

調べてて今回ようやく理解したのですが、まず「リテラル」というのは…例えば

aisatsu='hello';

というコードを実行すると、変数aisatsuに hello という文字列が代入されます。

この時の 'hello' の部分が、「リテラル」。

「固定の値」といった意味らしいです。

そして「関数リテラル」とは、「関数を固定の値同様にモノとして扱う」という意味合いとなります。

 

さて、話を戻して…

rndm=function(a){return Math.floor(Math.random()*a);}

によって「無名関数を変数rndmに代入」しましたが、この
「関数を扱う時にいちいちfunctionって書くのが面倒くさい」
って事で、アロー関数という書き方が使えるようになりました。

 

rndm=(a)=>{return Math.floor(Math.random()*a);}

という書き方で、上記のfunctionを使った書き方と同様の結果になるようになりました。

 

変数=(引数)=>{処理内容;}

という書式ですね。

functionを書かなくていい代わりに、引数と処理内容の間に=>という記号を使った、という事になります。

 

そして、アロー関数はさらに省略した書き方が認められる場合があります。

 

まず「引数が1つだけの時」。

rndm=a=>{return Math.floor(Math.random()*a);}

のように、 a の前後にあった ( ) を省略する事ができます!
※ちなみに、これはあくまで「1つだけの時」であって、2つ以上の引数の場合のほか、「引数を持たない関数」の場合でも ( ) は必要となります。

 

次に「処理内容が return 一発の時」。

複数の処理を連ねて書くのではなく、returnで戻り値を返すだけの処理の時、

rndm=a=>Math.floor(Math.random()*a);

のように { } を省略する事ができるばかりか、returnというコマンドも省略できてしまいます!

 

変数=引数=>処理内容;

という書式ですね。

 

これは「引数処理内容による処理を通過させた結果を返す関数を変数に代入する」というニュアンスで捉えると、わかりやすい…のかも…?

 

いや、やっぱ分かりづらいか^^;;;

 

 

あとがき

というわけで、「普通の関数宣言」から「関数式」、そこから「アロー関数」にして「さらに省略したアロー関数」に至る流れを、なんとなく把握しました。

 

web上でコードを調べている時に、ちょくちょくこの「アロー関数」を平然と使用したコードに出会う事があり、「=>」を見ただけでもう「???」と理解不能に陥っていましたが、なんとかついていけるようになったかもです^^

 

「関数リテラル」「関数を値として変数に代入する」という概念もついでに分ったかも? 

 

…個人的な感覚でいうと…この「とにかく省略して書ける」という点では凄く自分の好みにあっています^^

が、反面、「変数=引数=>処理内容;」という書き方が「関数を用意している」ようには見えにくい事に変わりはなく、「可読性」って意味では難がある表現かなぁ、とも思いました^^;

 

なお、この「アロー関数」、同様のものが他の言語でも採用されており、「Kotlin」で全く理解できなかった「ラムダ式」というのがあったのですが、どうやらそれもこの「アロー関数」と同じ理屈のようです。

 

 

 

ってなとこで、今回はこのへんで!

次回もまた、よろしくお願いします^^