モノクロタイム

I'm from the future!

【ES6】WebStormでECMAScript2016を書く

こんにちは,れいじです.

モダンなJavaScript,通称ECMAScript6がいいらしいと聞いたので触りだけやってみました.

作業環境はこんな感じ.

  • OS: Mac OS X 10.10.5
  • IDE: WebStorm 2016.2.3(体験版)
  • babel: 6.14.0
  • npm: 3.3.12

参考にした記事はこちら.

qiita.com

詳しい作業手順などはこちらに書いています.

ただ,babelのインストールコマンドが違うので注意.正しくは

npm install -g babel-cli

です.

WebStormでES6ファイルを作る

上記Qiitaの記事を参考にしてES6ファイルを作ったはいいものの,以下のようなエラーメッセージが出ました.

Error: Couldn't find preset "es2015" relative to directory

・・・

以下いっぱいエラーが出る

何かファイルが見つからないようだということがわかります.

ターミナルを起動し,作成したプロジェクトファイルへcdで移動したあと,以下のコマンドを打つことでエラーを解消することができました.

$ npm install babel-preset-es2015 --save --no-bin-links
$ npm install babel-preset-react --save --no-bin-links

エラーが解決し,作成したES6ファイルの下に.jsファイルが生成されています.

f:id:yomoyamareiji:20160915214713p:plain

babelを使用し,モダンな書き方のES6ファイルが現行のブラウザでも動作するjsファイルに変換されています.

f:id:yomoyamareiji:20160915215020p:plain

f:id:yomoyamareiji:20160915214927p:plain

自動的にファイルが書き換わってる!すごい.

サンプルを動かしたまでにとどまっているので,ES6の書き方をどんどん覚えていきたいですね.

ではでは〜