2016年6月29日水曜日

2010年以前で止まっていたJavaScript脳を2016年までバージョンアップした話

12:25    No comments

勉強の為に引用しました。
http://qiita.com/kotaroito/items/0f04cd089e6c13c79c09

  • 695
    ストック
  • 0
    コメント

  • aki77
  • tsumuchan
  • d6rkaiz
  • hosopy
  • tak_0x00
  • ysk_1031
  • kawakami_o3
  • saicologic
  • sygnas
  • webgyo

はじめに

専任のフロントエンドエンジニアが何人もいる大企業に長らく居たため、幸か不幸か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つの記事を読むと、おおよその雰囲気が掴めて助かりました。

基礎固め

オブジェクト指向

プロトタイプベース、プロトタイプチェーン、束縛、etc と言われて、なんのことやら状態であれば、「モダンなJavascriptがー」以前に基礎体力が不足してる可能性がありそうです。
JavaScriptのオブジェクト指向に関しては、下記資料が丁寧で分かりやすいです。

ES5

ES5の何たるかについては割愛しますが、caniuse.com によればほぼ全てのブラウザで利用可能です。
どんな構文があったっけと調べるには、 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を使えるようになるまでの学習の道筋をダンプしてみました。
何らかのお役に立てれば幸いです。

 編集リクエストを送る投稿者に記事をより良くするための提案ができます 💪
PR 社内メールでの情報共有をなくそう - Qiita:Team
あなたもコメントしてみませんか :)
ユーザー登録(無料)
すでにアカウントを持っている方はログイン

0 コメント:

コメントを投稿