今回の記事の CodeSandbox 参考コード https://codesandbox.io/s/7yjjvjyvr1

さて、今回もアローファンクションを書いていきます。一回慣れれば簡単ですが、何事も慣れるまでは大変ですので、繰り返していきましょう。

ただし、少しだけ変えます。

関数が「引数を受け取れるように」変更を加えます。

逆に言えば、この一点以外は、前回と全く同じです！

昔ながらの書き方

まずは昔ながらの書き方だと、こう書いていましたね。

(引数がそもそもなんなのかわからないという人がいれば教えてください。)

// --参考-- 昔からあるやつ
// argument = 引数 を受け付ける
const traditionalFunction = function(argument) {
  // 受け取った引数をただ返す
  return argument;
};

const resTraditional = traditionalFunction("これは引数1");
// 渡した引数が、そのまま返ってくる
console.log(resTraditional);

アローファンクションで引数を受け取る場合

さて本題です。

アローファンクションの場合は、　() => の () の中に引数を受け取る変数名を書きます。

(argument) => こうです。

結果以下のようになります。

// argument = 引数 を受け付ける
const arrowFunction = (argument) => {
  // 受け取った引数をただ返す
  return argument;
};

// 関数を実行するには () を最後につければ良い
// 引数を渡してみる
const res = arrowFunction("これは引数2");
console.log(res); 
// => "これは引数" と出る。
// 渡した引数がそのまま返ってきている

注意点: 保存をするとargument => {} となる…

一点注意点がありまして、CodeSandbox で保存をすると勝手に以下のようになります。

これは、Prettier というツールが自動的に実行されて、コードを綺麗に整えてくれる機能が発動する結果として生じます。

実はアローファンクションにはいくつか省略できる書き方があって、これはその一つです。どちらも同じアローファンクションとして機能します。

// 保存すると、勝手に以下のコードのように
// argument の周りの () が
// 勝手に消える！！と思うかも
// Prettier というコード整形が気を利かして、
// アローファンクションの
// 省略記法を適用してくれています。
// (省略の記法については今後扱います)
const arrowFunction2 = argument => {
  return argument;
};

どういう時にどこを省略できるのか、ということに関しては今後扱います。

Prettier が発動して、見た目が少し変わることがあるけれど、機能として同じだよ、ということを覚えておいてください。

今日の宿題

ちょっと昨日の補足です。

昨日さりげなく書いてしまったのですが「バインド」というのは、いわゆる「代入」と同じことを指します。

関数を作って変数に代入するという作業を前回も今回もたくさんしてきたわけですが「代入する行為」、それを業界用語で「バインド」といいます。

バインドというだけで、なんかすごくコンピューターサイエンスに詳しい人のような雰囲気を出すことができますので、多用するといいと思います。(アグリーです！)

さて、今日の宿題です。

• 変数にアロー関数をバインドします(変数名はなんでも OK)
• そのアロー関数は、引数を受けれるようにしてください(この際の変数名もなんでも OK)
• そのアロー関数は、受け取った引数をそのまま返すようにしてください
• (今日説明してきたアロー関数と全く同じですね。自分で書くだけです)

今日は以上で〜す。終わり！(feat. 三四郎 小宮)