Vue.jsと最近のJS開発へのキャッチアップメモ
そうだ、JavaScriptをやってみよう！という発作が数年に一回くらい発生するのです。
立ち読みした雑誌で何となくよさげだった、Vue.jsを試してみようかと思い、とりあえず門戸をくぐってみたところ、なんか最近のJS開発ってだいぶぶっ飛んだ進化してるんですね。ビルドが前提の開発とか、想像もしてなかった…。まぁ、まともな言語になってきたってことなんすかね…。
とりあえずこのページは、私がキャッチアップした内容の雑多なリンク集です。エコシステムまわりは正直、キーワードのメモに過ぎない…。多すぎ。
開発環境
Atom,Brakets,Visual Studio Codeを試した結果、Visual Studio Codeがよさげという結論。
- Visual Studio Code上でイマドキのJavaScript開発環境を構築する
- Visual Studio Code で Vue の開発環境を整える JSLintの定義とかは、ここパクったらだいたいよくなった。
Vue.js関連
- 公式 コンポーネントまでは、「基本的な使い方」のサンプルコードを写経した。
- Vue.js入門 ―最速で作るシンプルなWebアプリケーション Vue-RouterやVue-Cli周りを参考にした。
- Vue.js #1 Advent Calendar 2017 そろそろコンポーネントやスタイル使ってなんか作りたいので参考に。。ボリューム多いな…
エコシステム関連
たくさんあって覚えきれないのでリスト化するよ！
パッケージ管理
- npm ：node.jsで使用されるパッケージ管理ツール。
- bower ：ブラウザで動く昔ながらの Javascript のためのパッケージ管理ツールです。だそうな・・
参考：
モジュールバンドラ関連
仕様関連。
- CommonJS ：モジュール化に関するJavaScriptの仕様。
- AMD ：CommonJSとは別のモジュール化の仕様らしい。
- ES Modules ：ES2015で定められたモジュール化の仕様。export/default。
モジュールシステム関連。
- Browserify ：CommonJSのモジュール仕様に沿って書いたJavaScriptを、ブラウザ上で動かせるようにしたモジュールシステム。モジュール解決・コンパイルするイメージ。
- RequireJS ：AMDのモジュール仕様に従ったモジュールシステム。
- Webpack ：CommonJSとAMDの両方に対応下モジュールシステム。なんかBrowserifyより高機能らしい。
参考：
- webpack で始めるイマドキのフロントエンド開発
- JavaScriptのモジュール管理(CommonJSとかAMDとかBrowserifyとかwebpack)
- webpack 入門 （v3系 対応） 難しそう
- ES2015のモジュール管理これが一番まとまってる気がする
タスクランナー
ビルドタスクの自動化ツールっぽい。ビルドスクリプトだと思えばいいのかな？
- Grunt ：定番らしい。
- Gulp ：後発でこっちのが早かったり、記法がシンプルだったりするらしい。
参考：
トランスパイラとJSの仕様
仕様関連
- EcmaScript ：JavaScriptの仕様からブラウザ周りを取っ払ったもの。
- ES2015 ：最新のECMAScript仕様。クラスとかモジュールとかが追加されて普通の言語っぽくなった。
ツール
- Babel ：ES2015仕様が変わりすぎてブラウザでサポートされないので、ECMAScript5に変換するツール。
参考：
神
- vue-cli ：vueでES2015スタイルの開発を行うためのプロジェクト・テンプレートを生成してくれる。WebpackやBabelの設定などを勝手にやってくれるので超助かる。初心者でもとりあえずモダンな開発を体験できる。
参考：
その他参考
Vue.JSがフロントエンド開発未経験者にとってはホント神で、チュートリアル写経ではあるけどとりあえず簡単なSPAが作れて、モダンなJS開発を体験できるのが助かる。逆に、ビルド時に裏で何が動いているのかさっぱりではあるけど…まぁおいおい理解していけばいいかな。（タスクランナーとか何が動いてるのか全然わかってない）
とりあえずなんか動くアプリを作りたいので、よくあるTODOアプリ代わりにD&Dイニシアチブ管理アプリとか作ってみるつもり。Vue.JS主体でキャッチアップしていくけど、まだまだいろいろあるんだよな。。。
後そもそもデザインの知識や、CSSの知識がないんだが、ElementUIあたり使えばうまくいくだろうか…。
