JavaScript ライブラリをまとめてみるぜ
乱立する謎の JavaScript ライブラリたちをまとめて、2016年中に数年間の遅れを取り戻そうっていう企画。
既に Node.js はインストールとかしてるし、jQuery 程度なら何となく書いたことあるけど、Babel だ Webpack だ Gulp だ Bower だ Browserify だって単語がごっちゃになってる人向け。
整理しよう！
界隈の記事をつまみ食いしてのまとめなので、認識が合ってるか分からない。間違ってたら教えてください。
「今から覚える必要がありそうか」「なさそうか」も独断と偏見で○△×をつけてみた。
パッケージ管理系
| 名前 | 要る？ | 概要 |
|---|---|---|
| Node.js (のーど・じぇーえす) | ○ | JavaScript なのにサーバが立てられたりする。npm が付いてくるからまず入れる。 |
| npm (えぬ・ぴー・えむ) | ○ | JavaScript ライブラリのバージョン管理ツール。Node.js を入れるとついてくる。もうなんか必須くさいし頑張る。 |
| Bower (ばわー) | ○ | フロントエンド系のバージョン管理ツール。npm との違いは扱うツールがサーバサイド (npm) かクライアントサイド (Bower) か (どっちにもあるツールもある)。Twitter 製らしい。npm でインストールする。 |
JavaScript を楽に書けるようにしてくれる・コンパイルする系
| 名前 | 要る？ | 概要 |
|---|---|---|
| Babel (べーべる) | ○ | JavaScript の次期標準仕様みたいな ES2015 (ES6) っていう構文で書いたものを、最近のブラウザが分かるレベルに置換してくれるツール。時代を先取りするなら先取った構文で書いておいて、このツールで置換すればいいじゃん的発想。意図が違うけど役割的には AltJS の一種と見なせるかも。 |
| TypeScript (たいぷすくりぷと) | △ | AltJS とかいうヤツの一種。JavaScript に型の概念が付くよ的な。コレで書けって言われるまで覚えない。 |
| CoffeeScript (こーひーすくりぷと) | × | TypeScript の仲間。Atom エディタの見栄えはコレで設定されてる。もう覚える気はない (そういえば一瞬「Dart」とか聞いた記憶もあるけどココらへん…？)。 |
JS をビルドしたりする系
| 名前 | 要る？ | 概要 |
|---|---|---|
| Browserify (ぶらうざりふぁい) | ○ | フロントエンドで Node.js 向けのモジュールを使えるようにし、必要な JS ファイルをガッチャンコして1つの JS を吐くヤツ。シンプルめなモジュール管理用のビルドツールってところか。 |
| Webpack (うぇぶぱっく) | △ | 用途は Browserify に近いが、Browserify と違って複数の JS ファイルも吐ける。CSS のビルドもやれるようなので頑張れば Browserify と Gulp を捨てられるっぽい。機能が多そうなのと一つひとつ勉強したいのでコイツは少し後回しにしよう。 |
| Gulp (がるぷ) | ○ | タスクランナー。定義したタスクを回してくれる。上のような直接 JavaScript ファイルをカキカキしてブラウザ F5 すれば反映されるような感じではない環境になるので、開発中は都度ビルドとかさせながら画面表示とか見るんだけど、そういうのを自動化できるヤツ。 |
| Grunt (ぐらんと) | × | Gulp の先輩。もう Gulp でいいと思ってる。これは覚えないことにした。 |
フロントエンドのアレコレ系
| 名前 | 要る？ | 概要 |
|---|---|---|
| React.js (りあくと) | ○ | View 操作するライブラリ。仮想 DOM とコンポーネント化って考え方で、jQuery 的な黒魔術にならずにインタラクティブな画面が作れる感じ。 |
| JSX (じぇー・えす・えっくす) | △ | React 書いてるときに HTML を混ぜ込んだみたいなコードを書く、アレのことらしい。アレを解釈させるためのヤツっぽい。特に意識せずとも React 触ってればいいんでしょ多分。 |
| Angular.js (あんぎゅらー) | × | HTML に JavaScript を埋め込むっぽい書き方をする View のライブラリ。React でもうこれはいいかな。 |
| Vue.js (びゅー・じぇーえす) | × | Angular よりシンプル、って感じ。 |
| Backbone.js (ばっくぼーん) | × | Angular みたくフルスタックじゃない使い方もできるよ的な、クライアントサイドで MVC を分けるライブラリ。Underscore.js もこの辺？ |
| jQuery (じぇーくえりー) | △ | なんだかんだ使うんでしょまだ… |
こんなところでしょうか。関係性が分かってきたので一つひとつの何が分かってなくて、したいことに対して何ならできるのかが分かってきたかも。