アロー関数の復習｜コードで実践

React のコードはアロー関数だらけ

この章では、React を書くときに毎日使う JavaScript の記法だけを先に復習します。最初はアロー関数です。

アロー関数は function を使わずに関数を作る書き方です。同じ処理を 2 通りで書き比べてみます。

// function を使った書き方
const toDisplayName = function (name, title) {
  return name + "（" + title + "）";
};

// 同じ処理をアロー関数で書いたもの
const toDisplayName = (name, title) => {
  return name + "（" + title + "）";
};

function が消えて、引数のうしろに => が付きました。やっていることは同じです。

中身が 1 つの式だけなら、もっと短く書ける

関数の中身が「値を 1 つ返すだけ」のときは、波かっこと return を省略できます。

const toDisplayName = (name, title) => name + "（" + title + "）";

toDisplayName("あおい", "Web エンジニア"); // あおい（Web エンジニア）

これを暗黙の return と呼びます。省略しないほうがよい場面もあるので、どちらも読めるようにしておきます。

引数が 1 つのときは、引数のかっこも省略できます。ただし引数が 0 個のときは () => と書く必要があります。

const toUpperTitle = (title) => title.toUpperCase(); // かっこありでも良い
const toUpperTitle2 = title => title.toUpperCase();  // かっこを省略した形
const always = () => "公開中";                        // 引数 0 個はかっこが必須

このコースでは、引数が 1 つでもかっこを書く形で統一します。あとから引数を足すときに書き直さずに済むからです。

なぜ React でこれが要るのか

React では、関数を「値として渡す」場面がとにかく多いからです。

<button onClick={() => setCount(count + 1)}>いいね</button>

works.map((work) => <li>{work.title}</li>)

ボタンを押したときの処理も、配列を 1 件ずつ変換する処理も、その場で作った小さな関数を引数として渡しています。ここに function (work) { return ... } と書くと長すぎて、JSX の形が読めなくなります。アロー関数が読めないと、React のコードはほとんど読めません。

もう 1 つ、アロー関数は this を自分で持たないという性質があります。昔の React でつまずきの元だった this の束縛が、アロー関数と関数コンポーネントの組み合わせでほぼ消えました。今のところは「アロー関数を使っておけば this で困らない」とだけ覚えておけば十分です。

つまずきどころ

波かっこを書いたのに return を書き忘れると、何も返さない関数になります。

const toDisplayName = (name, title) => {
  name + "（" + title + "）"; // 計算しただけで捨てている
};

toDisplayName("あおい", "Web エンジニア"); // undefined

波かっこを書いたら return も書く、波かっこを書かないなら return も書かない、とセットで覚えます。

演習

function で書かれた関数を、アロー関数に書き直します。あわせて、肩書きも表示に含まれるように直してください。

アロー関数の復習

React のコードはアロー関数だらけ

中身が 1 つの式だけなら、もっと短く書ける

なぜ React でこれが要るのか

つまずきどころ

演習

要件

入出力例

ヒント

メモ