10年ぶりのJavaScript環境構築

10年前に何をやったか思い出すと、アルバイトでAfterEffectsプラグインを作ることになり、 AfterEffectsの持っている言語がECMAScriptだったので、それを弄っていたのでした。

それ以来まったくJavaScriptには触っていなかったのですが、 ここ最近色んな都合で10年ぶりにJavaScriptを触っています。

久々に触ってみたJavaScriptはもはや全く違う世界でした。

そもそもなんだこれプロトタイプベースオブジェクト指向じゃなくて 普通のクラスベースオブジェクト指向している……。

てかトランスパイラ…!新しい文法を使うために、そんなことをしているのか。

……みたいな状態です。

以下書くのは、10年ぶりにJSを触った私がどのような環境を構築したのかを説明するものです。

やりたかった事

Webフロントエンドに相当するSPAアプリケーションを作りたかった。

作った構成

結論としては以下のような構成にしました。 他の選択肢がありうるツールは基本的に全部列挙しました。

ツールのカテゴリ 使ったツール名
処理系基礎 nodejs
パッケージマネージャ yarn
言語 es2016(のはず。latest)
トランスパイラ babel
トランスパイラのコード解釈プラグイン babel-preset-latest
lint eslint
型チェック機構 flowtype
ビルドシステム webpack
ビルドシステムにおけるbabel担当 babel-loader
ビルドシステムにおけるeslint担当 eslint-loader
ビルドシステムにおけるflowtype担当 flowtype-loader
テストフレームワーク ava
ビューコンポネント構築フレームワーク react
パーマリンク管理フレームワーク react-router
Webコンポネントライブラリ material-ui
アプリケーション状態管理 flumpt(reduxに乗り換え予定)

何とか動いてます

結論

色々書くつもりだったんですけど列挙した時点で力尽きました。。。 それぞれのファイルの関連とかは完璧に覚えたつもりですが 中身の設定を完璧に調節していくのだけで 特に作りたいものを生産していない時間が過ぎていく感じが深いです。。。 もうちょっとシンプルには…多分ならないですよね。代わりに進歩の速さを手に入れてる感じ。

Reactに入門するには、各種StarterKitを使ったほうがいいかもしれません。 たとえば https://github.com/Pepeye/redux-starter とかは良さそう。 ただトラブルシューティング出来るためだけにも、全ての設定に目を通して、意味を理解しておくことは重要だと思います。