React入門 ・ Chapter 1

アロー関数

コード演習 ・ 冒頭を無料公開中

Reactの世界へようこそ。……と言いたいところですが、Reactに触る前に、少しだけ準備運動をします。この第0部では、Reactで毎日使うJavaScriptの道具を4つだけ、先に手に馴染ませます。最初の道具は「アロー関数」です。

関数とは「値を受け取って、値を返す機械」

関数は、材料を入れると製品が出てくる機械です。JavaScriptでの基本の書き方は、動画で見た通りこうでした。

function greet(name) {
  return "こんにちは、" + name + "さん";
}

greet("太郎") と呼び出すと、"こんにちは、太郎さん" が返ってきます。nameが材料(引数)、returnの後ろが製品(戻り値)です。

同じものを、もっと短く——アロー関数

現代のJavaScript、特にReactの世界では、同じ関数を別の書き方で書くのが主流です。それがアロー関数。

const greet = (name) => {
  return "こんにちは、" + name + "さん";
};

コード演習はブラウザ上でそのまま実行できます

本文の残り、エディタ・テスト実行・解答コード・ヒントはプラン加入後に利用できます。

料金プランを見る