はじめに
Ruby on RailsでVue.jsを使ってみようと思い調べたところ、webpackerというものが便利だと知ったものの、色々調べていくと「webpack」や「モジュールハンドラ」、「npm」、「yarn」とかイマイチ何を言っているのか理解できず怖くなったので調べてみた結果をまとめておきます。
webpackってなに
webpackerについて調べていたのにwebpackという単語が多数ヒットしたので、まずはwebpackとはについてです。
webpackとは、モジュールハンドラツールのことを指しています。
モジュールハンドラってなに
モジュールハンドラとは、複数の機能に分割（モジュール化）されたファイルをまとめて出力するためのツールのこと
ではどんなファイルをまとめるのかというと、JavaScriptファイルだったり、cssファイルだったり画像ファイルもまとめることができます。
現状を簡単にまとめると、「様々な機能に分割されたファイルをwebpackを利用することで、いい感じに1つのファイルにまとめて渡してくれるすごいやつ」がwebpackです。
（設定によって複数ファイルの出力も可能）
webpackのメリット
webpack(モジュールハンドラ)を使うメリットとは
機能ごとにファイルを分割して管理ができる
webpackが複数ファイルをまとめて出力してくれるおかげで、機能ごとにファイルを分割して管理することができます
では分割することのメリットとは
- コードが見やすくなる
- 変数の競合、グローバル汚染を防ぐことができる
- 開発作業を複数人で分担することが容易になる
- リクエスト数を減らせる
依存関係に悩まされない
複数に分割されたファイルをwebpackが依存関係を解決した状態でまとめて出力してくれるため、依存関係について悩まされない
依存関係について分かりやすい説明があったので引用させていただきます
<body>
<!-- app.jsはjQueryに依存しているため、jQueryを読み込んだ後に読み込む必要がある。 -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="js/app.js"></script>
</body>
上記のようなファイルは以下の懸念点がある。
- 依存しているライブラリが1つだけなら良いが、依存が増えれば増えるほど依存関係がわかり辛くなる。
- それぞれのファイルの依存関係をすぐに理解できるのは作業をした人間のみであり、別の作業者が依存関係をすぐに理解するのは困難。
- 依存関係が複雑になればなるほど、迂闊にスクリプトの読み込み順を変更したり本来不要なファイルを削除できなくなる。
webpackerってなに
調べ始める前はwebpackとwebpackerを混合していました。
webpackerとは、webpackをRuby on Rails上で簡単に利用するためのGemのことを指します。
Railsでは、アセットパイプラインというモジュールハンドラが使われています。ただ日々進化し続けるフロントエンド開発に対応すべくwebpackというモジュールハンドラをRailsへ簡単に導入するためのGemをwebpackerと呼びます。
そしてRailsで開発していくからといって、必ずしもGemであるwebpackerを導入しなくてはならないのかというと、そうではなくwebpackを選択することもできます。
Gemであるwebpackerは、webpackに比べカスタマイズ性に優れていないというデメリットがあります。
npm と yarnってなに
この2つは役割が似ているためまとめます
npm(Node Package Manager)
正式名称を見たらなんとなく、理解しやすくなった。
npmとは、Node.jsのパッケージを管理するためのツールのこと。
Node.jsのパッケージとは
パッケージとはNode.jsの便利な機能をまとめたかたまりのようなもの
yarn
yarn(ヤーンって読むらしい)とは、Facebookが公開した、JavaScriptのパッケージを管理するためのツールのこと
npmもyarnもパッケージ管理ツールということもあり、比較されている記事が多く見つかりました。基本的に利用目的は似通っている