UIを作るためのJavaScriptライブラリであるReactの公式ドキュメントでは、JavaScriptの新しい規格であるECMAScript6（ECMAScript2015）で記述されています。Wikipedia(新しいタブで開く)でECMAScriptについて調べてみると、冒頭でこのように説明されています。

ECMAScript（エクマスクリプト）は、JavaScriptの標準であり、Ecma Internationalのもとで標準化手続きなどが行われている。

他言語の機能が取り入れられたECMAScript6

Wikipediaの説明だけでは分かりにくいかもしれませんね。もう少し踏み込んだ説明をすると、ECMAScript6はそれまでのJavaScriptの言語仕様を温存しつつ、多言語で実現されていたさまざまな最新機能が取り入れらています。

ECMAScript6にはブロックスコープや配列の分割代入などさまざまな新機能がありますが、その中でも今回はアロー関数式についてご紹介します。

アロー関数式について

アロー関数式とは、従来からある無名関数の省略記法のことを指します。

従来の無名関数

var f = function() { x * y };

ECMAScript6従来の無名関数は丸括弧の前に”function”という文字列が必要です。

アロー関数式

var f = () => { x * y };

ECMAScript6のアロー関数式では”function”の文字列は省略され、代わりに”=>”というアロー演算子の記号が丸括弧と波括弧の間に入ります。

両者の違い

var f = (id, name) => ( {id: 1, name: echizenya} );

ただしアロー関数式と無名関数は完全に同じというわけではありません。アロー関数式で書いた関数の戻り値がオブジェクトリテラルの場合において、波括弧とreturnキーワードを省略するときは、オブジェクトリテラルを丸かっこで囲む必要があります。

Reactでアロー関数式を使う

アロー関数式

<div id="root"></div>
<script type="text/babel">
        (() => {
            ReactDOM.render(
               <p>Hello World！</p>
                document.getElementById('root')
            );
        })();
   </script>

Reactでアロー関数式を使って”Hello World！”と表示させてみましょう。本来はheadタグの中でReactやbabelのスクリプトを読み込む記述が必要ですが、割愛しています。

従来の無名関数

<div id="root"></div>
<script type="text/babel">
　　　　(function() {
            　　　　ReactDOM.render(
                　　　　<p>Hello World！</p>,
                　　　　document.getElementById('root')
            　　　　);
        　　})();
</script>

ちなみにアロー関数式ではなく、従来からある無名関数でも”Hello World！”を表示させることができます。