はじめに
専任のフロントエンドエンジニアが何人もいる大企業に長らく居たため、幸か不幸かJavaScriptを書く機会があまりなく、2010年以前で脳が停止している状況でした。（それって、エンジニアとしてどーよ、というツッコミは甘んじて受けます涙）
翻って、現職のスタートアップでは所謂フルスタックエンジニアにならざるをえないため、一念発起して2016年まで一気にキャッチアップしようという次第です。
学んだことを記録しておく意味でも、自分が採ったアプローチをまとめてみようと思います。
ES6の構文を見てフリーズした
初めて見たときには、フリーズしました。。。
var odds = evens.map(v => v + 1);
var nums = evens.map((v, i) => v + i);
map...
class SkinnedMesh extends THREE.Mesh {
constructor(geometry, materials) {
super(geometry, materials);
}
update(camera) {
super.update();
}
static defaultMatrix() {
return new THREE.Matrix4();
}
}
extends? static?
一足飛びにモダンなトピックを理解するのは無理だと悟ったので、順を追って理解していくことにしました。
歴史とトレンドを知る
Qiitaの以下の2つの記事を読むと、おおよその雰囲気が掴めて助かりました。
ここ数年前から2015/5までのモダンフロントエンドを総まとめしてみた
基礎固め
オブジェクト指向
プロトタイプベース、プロトタイプチェーン、束縛、etc と言われて、なんのことやら状態であれば、「モダンなJavascriptがー」以前に基礎体力が不足してる可能性がありそうです。
JavaScriptのオブジェクト指向に関しては、下記資料が丁寧で分かりやすいです。
ES5
ES5の何たるかについては割愛しますが、caniuse.com によればほぼ全てのブラウザで利用可能です。
日本語解説記事はES2015(ES6)な時代だからこそ、ES5を改めて調べたJavaScript初級者のメモが読みやすかったです。
どんな構文があったっけと調べるには、 http://kangax.github.io/compat-table/es5/ がよさそうです。
npm と browserify あるいは webpack
昔はjQueryのzipをダウンロードし自分たちのプロジェクトに取り込む、といったことをやっていたわけですが、控えめに言っても「超めんどくさい」。
ブラウザで使うモジュール・ライブラリもrubyで言うgemのように管理したいというのは、自然な流れだと思います。
で、browserifyあるいはwebpackは、平たく言うとNode.jsで発展したモジュール管理システム・方式をブラウザでも使えるようにしちゃおうぜ、というツールです。
使い方・入門については、日本語記事も豊富にあるので割愛しますが、browserify のほうがシンプルで用途も限定的なので、初心者向きなのかなと思います。
ES6
ここまでで、ようやくES6を理解するのに必要な下地ができました。
色々な記事見ましたが、Learn ES2015を見ながら同じくBabelのREPLで写経していくのがオススメです。日本語記事なら、ECMAScript 2015（ECMAScript 6）特集が分かりやすかったです。
写経が終わったら、自分で書いたコードをブラウザで使えるよう設定をします。
最低限必要な設定としては、
{
"name": "hello_babel",
"version": "1.0.0",
"description": "",
"devDependencies": {
"babelify": "^7.3.0",
"babel-preset-es2015": "^6.6.0",
"browserify": "^13.0.1"
},
"scripts": {
"build": "browserify script.js -t babelify --outfile bundle.js"
},
"author": "",
"license": "ISC"
}
echo '{ "presets": ["es2015"] }' > .babelrc
で、準備が整ったら
npm run build
すれば、script.js が bundle.js に変換されます。
アッサリ書いてますが、「babelifyとbrowserifyの違いって何？」とか「babelのpresetsって何？」とか戸惑うことはいくつかありました。（今はわかりますけど^^）
こればかりは1つずつ調べて身につけていくしかないのかなぁと思います。
まとめ
自身がES6を使えるようになるまでの学習の道筋をダンプしてみました。
何らかのお役に立てれば幸いです。