JavaScriptについて勉強していますが、アロー関数について躓いてしまいました。初心者だからこそ、なぜ、どこに理解できなかったのか、まとめました。実際に理解に苦しんでいる方、初心者に教える際の参考等になれば幸いです。
#####筆者の経歴
・Webコーディングの勉強を始めてから16ヶ月程度
・小規模サイト4,5件作成
・JavaScript、phpはほぼ初心者
##目次
・アロー関数とは
・どう躓いたのか
・なぜ躓いたのか
・どのようにして理解したか
・どう理解したか
#アロー関数とは
『=>』で記載されたコードはアロー関数が使用されています。構文は以下です。
(引数)=>{処理内容}
functionを用いた構文と比較すると非常にシンプルです。
JavaScriptの仕様ES6(2015年)より導入されました。
#どう躓いたのか
const result = items.filter
(item => item === target);
教科書に上記のコードがいきなり掲載され、分からなくなってしまいました。このコードを例Aとします。
#なぜ躓いたのか
①教科書で、例Aのコードが関数の説明の章よりも前に記載されていた。そのため、これは「=>」を記載する場合は関数以外にもあるのだろうと考えてしまった。
②例Aのコードは知っている構文と違うので、アロー関数とは違う別のものだと考えてしまった。
③「===」はif構文当で使用するのにifが見当たらないので、「===」の立ち位置が分からなくなった。
④「=>」が指しているのは「item」なのか、「item === target」なのか判断できなかった。
⑤教科書は入念に検討されているという先入観があり、①〜④は間違っていないだろうと考えた。
・・・
以上のことから、アロー関数を特定するための「=>」がよく分からず、躓いてしまいました。
#どのようにして理解したか
JavaScriptについて先生に質問し、解決しました。
上記の質問に対する回答は以下になります。
①「=>」を記載する場合はアロー関数だと断言できる。多分これは教科書の作りが悪い。
②構文から書き方を変えている。
③filter関数によって条件式が設定されている。
④ちょっとここは理解が難しい気がしますが、「item === target」と区切るのが正解。
⑤僕の先入観が強すぎるのが悪い。
例Aをfunctionを用いたコードに直せば以下のようになります。見やすくなりましたね。
const result = items.filter
(function(item){ return item === target});
#どう理解したか
上の項で書き直したコードを比較することで、アロー関数の本質に近づけたような気がします。卵を使って目玉焼きを作る例を関数で表現するとこんな感じでしょうか？
・関数式・・・const フライパン = function(卵){焼く}
・アロー関数・・・const フライパン = (卵)=>{焼く}
結果はいずれも目玉焼きができますね！
※コードはSAMURAI ENGINEER の教材「
JavaScriptでWebサイトに動きを付ける方法を学ぼう」より一部を抜粋しました。