ゆるふわ技術日誌

エンジニア見習いの悪戦苦闘日記

ES6のArrow functionについて… #6

毎日技術日誌

今日やったこと

JavaScriptのArrowFunctionの仕様についていろいろ

寝坊しました。というか二度寝しました。

React tutorialは進捗ダメですが、React tutorial内に度々出てくるArrow functionについて少々…。

基本的な文法は

function hoge(messge) {
    console.log(message);
}

//Arrow function
const hoge = (message) => {
    console.log(messge)
}

こんな感じで書き換えることができます。コレだとあまり恩恵を受けられていない感じが否めないですが、無名関数とかだと効果抜群です。

JSXでもこんな感じ。

<button className="square" onClick={() => alert('click')}>

かなりスッキリしていい感じですね。

JSXの例で気がついたのですが、どうやら、関数本体が1文しかない場合は波括弧も不要みたいですね。ES6素晴らしい。

何故React tutorialにはセミコロンがついているのか

ご存知の通り、最新のJavaScriptの仕様では文末のセミコロンは不要なのですが、React tutorialはちゃんとセミコロンがついています。Arrow function使ってることからも、互換性のためとは思えないし、何故かよくわからなかったので調べてみました。

JavaScriptの行末セミコロンは省略すべきか

どうやら、書き方によってはヤバイ挙動をすることがある…みたいですね。

つくづく闇深い言語だ…。

雑談

17時からバイトなので早めの更新です。

二度寝してつらい…。

でんぱ組のファンクラブ、会員証が届きました！

オタク！