ようこそ!浜村拓夫の世界へ

    ブログ内検索

    最近の記事

    ブックマーク数の多い記事

    Blog Translation

    Powered By FC2ブログ

    Powered By FC2ブログ
    ブログやるならFC2ブログ


    FC2ブログ LOGIN

    with Ajax Amazon

    ES2015(ES6)へのバージョンアップ

    このエントリーを含むはてなブックマーク はてなブックマーク - ES2015(ES6)へのバージョンアップ あとで読む
    JavaScriptの開発は、ES2015(ES6)へ主軸が移りつつある。
    ES5からES6へバージョンアップする場合、どのようにしてES6の勉強をすれば良いだろうか?
    「ES2016」や「ES6」で検索しても、教材となる情報源がうまく見つけられない。

    ES6時代のJavaScript - クックパッド開発者ブログ (2015/02/02)

    最近のWebフロントエンドの変化は非常に激しく、ちょっと目を離した間にどんどん新しいものが出てきますよね。そんな激しい変化の一つとしてES6という次期JavaScriptの仕様があります。



    ES2015 (ES6)についてのまとめ - Qiita (2016/01/16)

    ES2015 (ES6)とは
    先日策定された、ECMASCriptの6th Editionのことであり、当初はES6と呼ばれているが、正式名称をECMASCript2015(ES2015と呼ばれる)とし、今後は年単位のリリースを予定しているとのこと
    [公式サイト] http://www.ecma-international.org/ecma-262/6.0/index.html



    春からはじめるモダンJavaScript / ES2015 - Qiita

    なぜ2016年の記事でES2016ではなく、ES2015なのか、と疑問に思った方もいるかもしれません。それは、ES2015がただの年次アップデートではなく、これから始まる毎年のメジャーバージョンアップの起点となるバージョンであり、またES5から飛躍的に仕様が増えたバージョンであるからです。

    トランスパイラで今すぐES2015を使う
    ここまで述べたES2015ですが、その仕様の多さのあまり、ほとんどの機能が現行のサポートすべきブラウザで実装されていません。
    で、ES2015で書いたコードをどう扱うかというと、トランスパイラと呼ばれるものでES5(場合によってはES3)に変換します。メンテすべきコードをES2015以降に保ちつつ、実行コードはES5という状態なら、殆どのブラウザにおいてランタイムでの動作が保証されます。

    メジャーなES2015トランスパイラに以下の2つがあります。
    ・babel: プラガブルにシンタックスを入れ替え可能なトランスパイラ。作者はsebmck(現facebook)
    ・typescript: 型アノテーションのシンタックスの拡張とその静的解析を行なう。MS製。



    2016年ももう冬ですがw
    ES2015を使う場合は、ターゲットとなるブラウザーの対応状況に応じて「トランスパイラ」というツールを使って、下位互換性を保つんですね。

    Babelで始める!モダンJavaScript開発 | HTML5Experts.jp (2015/10/01)

    Babelとは、2014/9から開発が始まっているECMAScriptコンパイラです。
    機能としては、ECMAScript2015 (ES6)やECMAScript7などで書かれたソースコードを一般的なブラウザがサポートしているECMAScript5の形式に出力することができます。



    TypeScript - Wikipedia

    TypeScript はマイクロソフトによって開発され、メンテナンスされているフリーでオープンソースのプログラミング言語である。TypeScript は JavaScript に対して、省略も可能な静的型付けとクラスベースオブジェクト指向を加えた厳密なスーパーセットとなっている。C# のリードアーキテクトであり、DelphiとTurbo Pascalの開発者でもあるアンダース・ヘルスバーグが TypeScript の開発に関わっている。



    言語の特長
    TypeScript は JavaScript (ECMAScript 5) に次のような言語機能の拡張を加えたものである。

    ECMAScript 6 由来
    ・クラス
    ・アロー関数式 (ラムダ式)
    ・オプション引数、デフォルト引数
    ・let, const
    ・テンプレート文字列:文字列内への変数埋め込み
    ・モジュール
    ・for/of
    ・分割代入
    ・Symbol


    ECMAScript 7 由来
    ・デコレーター
    ・Async/Await


    独自
    ・型注釈(変数、引数、戻り値などの型宣言)とコンパイル時の型チェック
    ・型推論, 型ガード - if文の instanceof などを利用した型推論
    ・インターフェイス
    ・列挙型
    ・Mixin
    ・ジェネリック
    ・名前空間
    ・タプル
    ・共用体型
    ・型エイリアス

    構文的には、静的型付けやクラス、継承、インターフェイスのようなオブジェクト指向、名前空間などの機能を追加する、ECMA-262 言語標準のマイクロソフトによる実装である JScript.NET と TypeScript はよく似ている。



    考えようによっては、TypeScriptをJavaScriptとして利用して、トランスパイラでES5とかに出力するという手もありだな?
    TypeScriptのうち、ES6由来の機能まで使ったり、ES7由来の機能まで使ったり、と使い分ける。
    JSの言語仕様を先取りして学習しておけば、いちいちバージョンアップのたびに勉強し直す手間が省けるかもしれない。

    ・トランスパイラの機能
    ・現状のブラウザー、サーバーサイドJSのバージョン対応状況を調査
    ・ES2015とTypeScriptの互換性を調査

    どうやってECMAScript 6を学び始めるか

    :beginner: ES6を学ぶ前に

    ES5がわからない
    => ES5を学ぶ

    Transpilerの動作原理がわからない
    => ブラウザが対応してる機能を優先して学ぶ

    Transpilerではできないことも理解してる
    => 容量用法を持って正しく使いましょう



    ・ES5とES6の差分を知るために、まずはシッカリとES5について復習しておく。
    ・トランスパイラの機能(できること、できないこと)を知っておく。
    ・トランスパイラも完璧じゃないので、利用者の環境を考慮しておく。

    ES2015の学習方法を調査しようと思っていたけど、TypeScriptも視野に入れて、再調査してみよう。
    いずれにせよ、便利になって、なおかつ学習コストが低いことが望ましい。
    関連記事

    コメント

    コメントの投稿


    管理者にだけ表示を許可する

    トラックバック

    トラックバックURL:
    http://hamamuratakuo.blog61.fc2.com/tb.php/1423-d9cd629c

    FC2Ad