babel,es2015についてのメモ1 #メモ

以前。coffee scriptについてはちょっと調べた。
http://qiita.com/bonk/items/8ecbf48aa889a2927e32

export/import

require()とは何か？何が便利なのか - Qiita
http://goo.gl/npp0XP

サーバーサイドで外部ライブラリを読み込む時にはrequire()となった。今の自分だとwebpack。

【古い記事】Babelで理解するEcmaScript6の import / export - Qiita
http://goo.gl/NPUJb1

es2015がbabelによりトランスパイルされる。
importはrequireを使った式に変換される。

exportはmodule.exportとかObject.definePropertyを使った式に変換される

import - JavaScript | MDN
https://goo.gl/p9nJf4

いろんな書き方がある。

ES Modules と Node.js について - from scratch
http://goo.gl/WbtIB7

ES6でexportとexport defaultをどう使い分ければいいの？ - なっく日報
http://goo.gl/Eg53Eq

基本的にはdefaultを指定しておく。

(Babel 5における)ES6のモジュールを解説してみた - uehaj's blog
http://goo.gl/j1sOHw

defaultとnamedの挙動がわかりやすい。

アロー関数

react-routerのアロー関数

export const HomeView = () => (
  <div>
    <h4>Welcome!</h4>
  </div>
)

これは、定数でファットアローのクロージャーをエクスポートしている？？
babelでコンパイルすると、、なんかreactの記述が入ってきてる。。
どういうこと？
JSXって何？

var Home2View = exports.Home2View = function Home2View() {
  return _react2.default.createElement(
    'div',
    null,
    _react2.default.createElement(
      'h4',
      null,
      'Welcome!'
    ),
  };

React.jsのJSXを使ってみる - Qiita
http://goo.gl/8dbSQS

JSX - Wikipedia
https://goo.gl/t2tbmy

「JSX」って名前のものが色々あって混乱する - Qiita
http://goo.gl/kJAzHY

入門 React.js その2 JSXについて | JavaScript Journal
http://goo.gl/slr2d6

なるほど文字リテラルじゃないのか。
babelを使ってjsxをjavascriptに変換してる・・・と言っていいのかな？

jsxじゃない処理をjsxのところに入れようかと思ったけど変に混在させる記述はきっとよくないんだろうな。（この手探り感。。）

reactのドキュメントを見よう。。

ループ処理

関数を再帰的しているのをループに書き直してくれるらしい。

IDE intellij

intellij-es67を入れようとしたがバージョンが対応してなかった。

external toolにも登録できた

constを使う

JavaScript(ES2015)でvarやletを使う必要はほぼ無い - id:anatooのブログ
http://goo.gl/eA8nk0

letだけを使う人を見かけるんだけど、実際にはletもほとんど使う必要なくて、多くの場合はconstで問題ない。また、他人が書いたソースコードの中でletを見ると、「これ後で再代入されるん？」って一瞬身構えるので、再代入の必要がないならconstを使う方が可読性も良くなる。

追記: よくよく調べてみると、ESLintには再代入しないletに警告を出すprefer-constがあった。より厳格にしたい場合はこのprefer-constを有効にする。

可読性だけなら、、警告出してくれるならletでもいいんじゃないか。。
って考え方ってだめかなあ。コード量が増えたらだめか。

@hoge

How can we access redux in componentDidMount with react-router 1.0? · Issue #239 · reactjs/redux
https://goo.gl/wJaSV1

で、

@connect(select) という記載をみたけど、これはどういう意味だろう。。

decorator syntaxというらしい？？
まだ先進的な機能かな？たぶん、後述の処理結果を別処理に並行して注入したりする？？よくわからん。

es2015 デコレータ - Google 検索
https://goo.gl/Ugp5Ga

Syntax decorators · Babel
https://goo.gl/y07DpG

全力で ES Decorator使ってみた - Qiita
http://goo.gl/kBG65b

ECMAScript 2015のブラウザ対応状況と実践投入に向けて | HTML5Experts.jp
https://goo.gl/Rwhcp8

ECMAScript 6 compatibility table
http://goo.gl/49OaXU