14:00本連載はLINEのフロントエンドエンジニアのチームがWeb開発において注目・活用している技術を紹介します。今回は次期言語仕様であるECMAScript6(以下ES6)の仕様について、ES6からES5へのトランスパイラ(コード変換ツール)のBabelを使いながら解説します。6とはECMAScriptとはJavaScriptの言語仕様の名称で、各ブラウザベンダーではこの仕様を元にJavaScriptランタイムへ実装を行っています。6(コードネーム:harmony)です。Draft)がリリースされました。順調に進めば2015年6月頃には策定が完了して、ECMAScriptの正式な標準仕様として公開される見通しとなっています。DraftES6では構文の追加など非常に多くの言語仕様が改善されています。今からES6で開発するにはすでにES6の一部の機能はChromeやFirefoxで実装されていものも存在しますが、多くの機能や構文はそのままのコードでは現時点(2015年5月現在)の多くのブラウザで動作しません。本稿で紹介するBabelなどのトランスパイラやpolyfillライブラリを活用することで、今からでもES6の機能を使って開発することは可能です。大きく分けると2つのタイプのツールが存在します。ES6の機能をES5でpolyfill実装または実行時にトランスパイル(コード変換)するJavaScriptライブラリ。基本的にscriptタグでライブラリを読み込むだけなので手軽に利用できる。ES6をES5のコードへ変換するツール。各ブラウザやツールで対応しているES6の機能は、こちらのサイトに分かりやすくまとめられています。tableBabelを使うBabelを使ってES6の開発を行う方法を紹介します。BabelはNode.js上で動作するツールでES6からES5のトランスパイルを行うことができます。一部の機能についてはpolifillライブラリ(browser-polifill.js)も一緒に使う必要があります。以前は6to5という名称で開発されていました。Babelを使うためにはNode.js+npmがインストールされた環境が必要です。インストールはnpmコマンドにglobalオプションをつけて実行します。babelこれでbabelコマンドが使えるようになりました。補足ブラウザからBabelのトランスパイルを実行できるツールも提供されています。簡易的な検証であればこちらを利用するのも良いでしょう。JavaScript他にもGruntやgulp、Browserifyなどさまざまなツールと組み合わせて使うことも可能なため、開発環境にあった方法を選択することができます。本稿ではbabelコマンドを実行する方法で解説します。執筆時点ではバージョン5.1.13を使ったサンプルです。最新バージョンとは内容が異なる可能性がある点ご了承ください。Japan株式会社(現・LINE株式会社)との経営統合を経て、現職。現在はLINEにおけるWebサービス全般のフロントエンド開発を担当。圧縮・解凍UNIX基本講座@CodeZine『CodeZine(コードジン)』の公式アカウントです。【NEW】デブスト2019デブサミ2019福岡・関西デブサミ2019夏デブスト関西デブサミ2019×ログインEメールパスワード※旧SEメンバーシップ会員の方は、同じ登録情報(Eメール&パスワード)でログインいただけます。イラストの無断転載を禁じます。記載されているロゴ、システム名、製品名は各社及び商標権者の登録商標あるいは商標です。