SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

LINEフロントエンドレンジャーのWeb開発術

Babelで学ぶECMAScript6(入門編)

LINEフロントエンドレンジャーのWeb開発術 第5回

  • X ポスト
  • このエントリーをはてなブックマークに追加

 本連載はLINEのフロントエンドエンジニアのチームがWeb開発において注目・活用している技術を紹介します。今回は次期言語仕様であるECMAScript6(以下ES6)の仕様について、ES6からES5へのトランスパイラ(コード変換ツール)のBabelを使いながら解説します。

  • X ポスト
  • このエントリーをはてなブックマークに追加

ECMAScript 6とは

 ECMAScriptとはJavaScriptの言語仕様の名称で、各ブラウザベンダーではこの仕様を元にJavaScriptランタイムへ実装を行っています。

 2015年4月現在、策定済みの最新バージョンは5(ES5)ですが、次期バージョンとして仕様策定が進められているものがES 6(コードネーム:harmony)です。

 2015年4月14日に最終草案(Rev38 Final Draft)がリリースされました。順調に進めば2015年6月頃には策定が完了して、ECMAScriptの正式な標準仕様として公開される見通しとなっています。

 ES6では構文の追加など非常に多くの言語仕様が改善されています。

今からES6で開発するには

 すでにES6の一部の機能はChromeやFirefoxで実装されていものも存在しますが、多くの機能や構文はそのままのコードでは現時点(2015年5月現在)の多くのブラウザで動作しません。しかし、本稿で紹介するBabelなどのトランスパイラやpolyfillライブラリを活用することで、今からでもES6の機能を使って開発することは可能です。

 大きく分けると2つのタイプのツールが存在します。

タイプ 特徴 代表的なツール
polyfill/runtimeライブラリ ES6の機能をES5でpolyfill実装または実行時にトランスパイル(コード変換)するJavaScriptライブラリ。基本的にscriptタグでライブラリを読み込むだけなので手軽に利用できる。一方、実行時にトランスパイルが発生する場合はその分処理時のオーバーヘッドが大きい
  • es6-shim.js
  • browser-polyfill.js
  • traceur-runtime.js
トランスパイラ ES6をES5のコードへ変換するツール。トランスパイルする作業が必要だが、サポートする機能は多く実行時のオーバーヘッドは少ない
  • Babel
  • traceur-compiler
  • closure compiler
ES6の対応状況

 各ブラウザやツールで対応しているES6の機能は、こちらのサイトに分かりやすくまとめられています。

 

Babelを使う

 Babelを使ってES6の開発を行う方法を紹介します。

 BabelはNode.js上で動作するツールでES6からES5のトランスパイルを行うことができます。一部の機能についてはpolifillライブラリ(browser-polifill.js)も一緒に使う必要があります。なお、以前は6to5という名称で開発されていました。

 Babelを使うためにはNode.js+npmがインストールされた環境が必要です。インストールはnpmコマンドにglobalオプションをつけて実行します。

$ npm install --global babel

 これでbabelコマンドが使えるようになりました。

補足

 ブラウザからBabelのトランスパイルを実行できるツールも提供されています。簡易的な検証であればこちらを利用するのも良いでしょう。

 

 他にもGruntやgulp、Browserifyなどさまざまなツールと組み合わせて使うことも可能なため、開発環境にあった方法を選択することができます。

 本稿ではbabelコマンドを実行する方法で解説します。

補足

 執筆時点ではバージョン5.1.13を使ったサンプルです。最新バージョンとは内容が異なる可能性がある点ご了承ください。

会員登録無料すると、続きをお読みいただけます

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

次のページ
Hello ES6

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
LINEフロントエンドレンジャーのWeb開発術連載記事一覧

もっと読む

この記事の著者

清水 大輔(LINE株式会社)(シミズ ダイスケ)

大学図書館向けの図書システム開発に携わった後、2009年 NAVER Japanに入社。その後、NHN Japan株式会社(現・LINE株式会社)との経営統合を経て、現職。現在はLINEにおけるWebサービス全般のフロントエンド開発を担当。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/8717 2015/06/05 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング