[Javascirpt]ECMAScript6の新しい記法を書いてみた

もちろん全部紹介するのは、僕の知識も
ブログ記事的にも難しいので、重要なものをいくつか

僕の検証した環境はnodejs v.4.2.1で、既にそのまま利用できるものもありました。

1. import

参考リンク

外部モジュールを参照するための構文
ES5 CommonJSではrequireを用いて代用されていましたが
ES6では標準でサポートされるようになりました。

下記のようなJSファイルがあったとします
※exportは後述

Math.js

これをimportすることを考えてみます。

  • 1 import name from “module-name” -> import Num from “Math”

こうすることでexport defaultで設定されているものがimportされ
Numという変数(オブジエンドというらしい)に束縛されます。

Num.PI Num.ONEのように利用することができます。
このようにimportした場合はexport defaultされている以外の
値はインポートされません。

  • import { member } from “module-name”;
  • import { member as alias } from “module-name”;
  • import { member1 , member2 } from “module-name”;
  • import { member1 , member2 as alias2 , […] } from “module-name”;

これはメンバーをインポートするための構文。
ひとつ例を挙げると

これで直接EX_ONEやEX_TWOが使えるようになります。aliasは
別名をつけるもので、

とかやると、Oneとして値を利用できます。

2. export

もう大体importの説明で出ちゃってますが
importされるときに利用できるメンバにつけるもの。

defaultをつけると、中括弧でメンバ名を指定しなくてもimportされるようになります。

手元で

とdefault複数あってもエラーにはならないけど、
後で宣言したほうで上書きされるっぽいです(TWOの値だった)

3. const

定数の定義で、これをつけて宣言された値はreadonlyになります。

4. let

ブロック内限定の局所変数の宣言。
ただ、挙動に関しては議論が色々あるっぽいので、詳細はこちら
で確認してください。

5. class, extends

他のオブジェクト指向言語とかみたいにクラス定義を書ける文。
内部的にはprototypeベースの糖衣構文になっているだけ。

が、コードの見た目的に感覚として、わかりやすいですね(Javascriptに
慣れ親しんでいない僕みたいな人にとって)

extendsも同様

これを

こう書けます。

6. String template

文字列に変数埋め込んだりできるやつ。rubyの書き方に似てますね。

これを

と書けるようになります。(バッククォート ` で囲む)
改行とかタブも文字列中のものがそのまま反映されます。

7. アロー関数

function hogehoge(a,b)みたいなのを(a,b) => { ... }と書けるように
なりました。引数が1つの場合は括弧も省略できます。

短い文字で関数が定義できるようになったー、というだけでなく
アロー関数内のthisは、function(){}内部で呼び出されたthisと違って
実行された関数のthisを指すようになります。
(詳しい説明はMDNとかを参照してください。)

こんな感じです。thisが使われているところが3箇所あって
3箇所とも参照しているものが別です。(コメント参照)
(特に一番最後の例が注意で、functionをそのままアロー関数に置き換える
わけではなさそう?)

最後に

Reactのアプリのチュートリアルを書くついでにまとめたんだけど
思った以上に長くなってしまったのでReactのほうは今度別の記事にします。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です