はじめに
フロントエンドエンジニアとして様々なツールにお世話になっているけど、説明をしろと言われても答えられないためまとめてみました。
対象読者
- npmとyarnの違いって何？
- node.jsのバージョンを変えたい！何を使えば良い？
- webpackとgulpってやってること同じなんですか？
以上のような疑問を抱えているフロントエンドエンジニアの皆様
Node.js
ツールではないが、フロントエンドエンジニアは必ずお世話になっているはずなので、大前提として書きました。
公式では、以下のように書かれてます。
Nodeはスケーラブルなネットワークアプリケーションを構築するために設計された非同期型のイベント駆動のJavaScript環境です。
(引用元: https://nodejs.org/ja/about/)
難しく書かれてますが、とりあえず以下の点を押さえておけばまずはOKです。
- JavaScriptのプラットフォームであって、フレームワークでもライブラリでもない。
- サーバーサイドで実行されるJavaScript。
- 非同期、ノンブロッキングI/O、ChromeのJavaScriptエンジンV8で動作するという特徴がある。
パッケージ管理ツール(パッケージマネージャー)
処理やプログラムの部品をひとまとめにしたものをパッケージと言います。
それらをインストール、削除などの管理をしやすくしたものをパッケージ管理ツールです。
MacOSでしたら、brew installってよく見かけると思いますが、HomebrewというmacOS用パッケージマネージャーを使ってパッケージをOSにインストールしているのです。
Node.jsのパッケージ管理ツールには、npmとyarnがあります。
npm
Node Package Managerの略。
初代、Node.jsパッケージ管理ツールです。
package.jsonにパッケージの依存関係を書き、node_modulesにパッケージをインストールしてきます。
yarn
2016年にFacebookが発表したNode.jsのパッケージ管理ツール。
package.jsonにパッケージの依存関係を書き、node_modulesにパッケージをインストールすること自体はnpmと何も変わりがないです。
yarnは、npmの以下の問題点を解決して作られたnpmの上位互換みたいなようなものです。
- 速度が遅い → パッケージを並列にインストール
- 出力が長い → シンプルに(最低6行)
yarnとnpmの詳しい違いは、下記サイトを読んでみるとよいと思います。
Yarn：Facebook発のパッケージマネジャーはnpmに代わるスタンダードになるか
Node.jsのバージョン管理システム
Node.jsのバージョンは日々アップデートしており、バージョンに依存するパッケージも大量にあります。
そのため、Node.jsのバージョンを簡単に切り替えることのできるバージョン管理システムが必要となります。
Node.jsのバージョン管理システムは主に、nvmとnodebrewが使われています。
nvm
おそらくスター数やコミッターが一番多いNode.jsのバージョン管理システムです。
Node Version Managerの略で、よくnpmと間違えられますが、全くもって別のものです。
主にbush向けに書かれており、他のshellを使っている人はnodebrewの方がおすすめです。
nodebrew
nvmと違って、プラットフォームに依存せず簡単にバージョンが切り替えられるNode.jsのバージョン管理システムです。
最近はnvmからnodebrewに乗り換える人が多いため、nodebrewの方が良いのかもしれませんが、bush使いでしたらそこまで違いは見当たりません...
モジュールバンドラー
プログラムを分割したそれぞれの単位のことをモジュールと言います。
それらの依存関係を解決してひとまとめにするツールがモジュールバンドラーです。
browserifyもモジュールバンドラーとして有名ですが、イマドキフロントエンドエンジニアはwebpack一強だと思うので、今回はwebpackのみご紹介します。
webpack
javascriptだけでなく、cssや画像までもひとまとめにすることができるモジュールバンドラーです。
ファイルの圧縮やソースマップの作成ができたり、ローカルサーバーの起動できたりして、フロントエンドの痒いところに手が届くような機能が盛りだくさんです。
モジュールをひとまとめにする際に、それらの付加機能を追加することができるため、よくタスクランナー(特にgulp)として紹介されてますが、あくまでwebpackはモジュールバンドラーです。
タスクランナー
機能や処理をタスクとし、それらを自動化するツールがタスクランナーです。
制作をより効率的に行うために、自動でできるところは自動でやることが大切になります。
タスクランナーは、自動化したい作業を設定ファイルに書いてコマンドを打つだけで動くため、忙しいフロントエンドの味方ですね。
Gulp
2013年に公開されたタスクランナーで、Githubのスター数はGruntの三倍弱あります。
簡単な設定ファイルを書けば自動化することが可能なので、学習コストが低いです。
最近では、パッケージ自体のバージョン依存が多くみられます。
パッケージをインストールしてタスクを追加する際は、そのパッケージがどれくらい更新されてるか、どのバージョンに対応してるかを調べてから導入しましょう。
Grunt
2011年に公開されたタスクランナー。
オブジェクト指向のような抽象度の高い設定をするため、細かくタスク設定をすることが可能です。
GulpとGruntの違いは、圧倒的にこの記事がわかりやすかったので参考にしてください。
Gruntとgulpを比較 〜 JSおくのほそ道 #008
個人の見解ですが、gruntを使っている人はもうほとんどいないと思っていたんですけど、npm trendsで見てみたところ、gulpユーザーはgruntユーザーの2倍くらいだが、gruntユーザーがそこまで大幅には減っていないですね。
さいごに
- npmとyarnの違いって何？
→ 速さとシンプルなどが違うだけで、機能は一緒！ - node.jsのバージョンを変えたい！何を使えば良い？
→ nodebrew使えば問題なし！ - webpackとgulpってやってること同じなんですか？
→ webpackはモジュールバンドラー、gulpはタスクランナーで別のもの！
【告知】
今年もOthloTechのアドベントカレンダーがあります！
学生エンジニアの方はぜひのぞいてみてください！