JavaScriptの常識②アロー関数 - プログラミングの理解が遅すぎる初心者がJavaScript、Node.jsで投票型掲示板を作ろうとしてます

今回はアロー関数の話なんですけど、よくある「こう書けば省略できて便利ですよ」みたいな説明じゃなくて、もうちょっと直感で理解しやすい感じで話していきます。

タイトルにも書いている通り、アロー関数はJavascriptの常識です。

ただ、私、その常識すらあまりよくわかっていない点がありまして。

いや、意味はわかるんです。

ただ、すぐにパッとはわからないんです。

アロー関数を習うとき、あるいは参考書なんかに書いてあるのって

function greet(name) {
  return "Hello, " + name;
}

とかが書いてあって、「引数が1つならカッコを省略できる」とか「処理が1行で「return文」だけなら波かっこ {} と return を省略できる」とか、いかにも「省略できて便利なんですよ」ってな感じで書かれていますよね。

私にはそれが便利どころかややこしいんです。

もっと、コードを見た瞬間にパッと意味がわかるような覚え方はないものかと模索してました。

const yell = (name) =>name +"のことかーっ！！";

まずは左辺から見ていきます。

yellは「叫び」って意味です。

yellってどう見てもただの変数ですよね。

しかし矢印があることからアロー関数であるということは明らかですので、この時点で関数の性質を持つ変数ということになります。

なので呼び出すときは

yell(クリリン);

というような書き方になります。

次に右辺です。

(name) =>name +"のことかーっ！！";

これは単純に左側が引数で、右側が引数を使った処理、というだけです。

今回の場合、nameが引数だからnameを使って「"のことかーっ！！"」を付け足すという処理をしているだけです。

で、yellが関数として

yell(クリリン);

と呼び出したら、矢印の右側で処理された結果が返ってきて「クリリンのことかーっ！！」と出力されるわけです。

ちなみに代入ではありません。

nameが「name +"のことかーっ！！"」に代わるのではなく、nameはあくまでnameのまま。

console.log(name);

の出力は「クリリン」になります。

本当は引数が今回みたいにnameしかない場合は(name)のカッコも省略することができます。

name =>name +"のことかーっ！！";

これは今は覚えても覚えなくてもいいでしょう。

別につけておいてもいいわけですし。

あるいは基本はカッコをつけないで、引数がないときと引数が複数あるときはカッコをつけないといけないという風に覚えておいてもいいかと思います。

カッコをつけていいとかダメとか、そういうのを覚えるのが面倒だからこの記事を書いたわけですが、私の頭の記憶容量でもこれくらいなら覚えられるような気がします。

引数がないときとか、引数が２つとか、なんとなくイメージしにくいかもしれないのでそれぞれの例を書いてみます。

const shout = () => console.log("地球もろとも宇宙のチリになれー！！");

これは

shout();

で呼びだしたとき、

console.log("地球もろとも宇宙のチリになれー！！");

という処理が行われるというものです。別に呼び出したいところで

console.log("地球もろとも宇宙のチリになれー！！");

と書いてもいいのですが、複数個所で呼び出したいときなんかにいちいちこんな長い文字列を書くのも面倒ですし、関数にしておいたほうが見栄えもよくなります。

また、何かのイベントを使ったときでも使われます。とくにこのような形でよく使われます。

button.addEventListener("click", () => {
  console.log("戦闘力・・・たったの5か・・・ゴミめ");
});

これはclickしたら、二つ目の引数である関数を実行せよという意味です。

addEventLister("click", 関数);

という形をとる、コールバック関数ですね。

わかりやすい形にするとこんな感じです。

const gomi = () => {
  console.log("戦闘力・・・たったの5か・・・ゴミめ");
};

button.addEventListener("click", gomi);

コールバック関数の記事でも説明しましたが、第二引数が関数なのに()を付けてしまうとその場で処理をしてしまいますから、ここではつけません。

const cell = (attacker, serifu) => {
  return `${attacker}「${serifu}」`;
};

console.log(cell("セル", "それがどうしたー！！"));

これは本当に引数を二つにしたときですね。

実際書いてみるとそこまで難しくないような気がします。

それよりもバッククォートとか$をブラインドタッチで押せるくらいまで慣れることのほうが難しそうです。

とりあえずこれくらいの理解でアロー関数は分かると思います。