JSをビルドしようとすると登場する「Node.js」「npm」「yarn」「webpack」「babel」たちがいまいちよくわからず進んできてしまっていたのですが、最近ようやくそれぞれの役割をざっと理解できるところまで到達したのでメモ。
そもそもビルドとは
そもそもの話、ビルドって何？？という感じだったので調べてみた。
調べる過程でコンパイルと混同していたことに気がついたので、違いも含めて確認してみた。
ビルドとコンパイルの違い
コンパイル...人間用に書かれたソースコードをコンピューターが理解できる機械語に変換すること
ビルド...ソースコードをコンパイルした上でプログラムが実行できるような状態にまで持っていくこと
あくまでも「ビルドの中の過程でコンパイルをする」という感じかな。
https://wa3.i-3-i.info/diff502programming.html
「ビルド」機能とは？仕組みやコンパイルとの違いを解説 | サービス | プロエンジニア
JSのビルドとは
そもそも、JSは本来フロントエンドの言語。サーバーサイドで動かすためには、ビルドすることによってサーバーサイドで実行可能なファイルを作成する必要がある。
じゃあ、なぜわざわざJSをサーバーサイドで使おうとしているのか？？
最初からRubyとかPHPとかのサーバーサイド言語を使うのじゃダメなのか？？
わざわざJSを使うメリットがあるのか？？と思い調べてみると、
- Node.jsを使用することで高速な動作が可能（大量の接続があっても処理速度が落ちにくい）
という利点がある模様。
どちらかというと高速な処理を実現できるNode.jsを使いたいから、JSを使うという雰囲気なのかな〜と思いました。
【Node.js】サーバーサイドでJavaScriptを使う利点
【JavaScript】ビルドとは何か〜webpackを使ってビルドする - Qiita
Node.jsとは
ということで、もう少しNode.jsについて知りたくなったので調べてみた。
うーん、なかなか内容が難しいけどめっっちゃ平たく言うと、
- たくさんの接続を同時に処理することができる
- Node.jsは本来サーバーサイドでの高速処理を実現しようとするものだけど、近年色々と出てきたJSのフレームワーク（VueやReact）のビルドに使用されている＝結局クライアントサイドで動かすことをゴールとして使用されるケースが多い
みたいな感じかな。語彙力。。
でも確かに「Node.jsってVueとかReactを書きたい時に使うやつでしょ？？」って思っていた。
それもそうだけど、本来はどちらかというと「サーバーサイドでJSを動かすためのもの」が正解なんだなということが分かりました。
yarnとは / npmとは
JSのパッケージマネージャー。
これだけだと「？？？」という感じだが、
- Node.jsをインストールするとnpmも一緒にインストールされる
- npmはJSのパッケージマネージャー（ライブラリの使用に必要なものを楽にインストールしてくれるもの）
- yarnは2016年にFacebookが公開したJSのパッケージマネージャー
と、ここまで整理するとだいぶ噛み砕いて理解することができた。
要するに、例えばあるフレームワークを使用したいってなった時に100個のライブラリのインストールが必要な場合、一つずつインストールしていくのは面倒。
npmやyarnなどのパッケージマネージャーでそれらを一気にインストールしてくれるような実行コマンドが用意されているので、楽だよねというお話かな。
元々あったnpm派の人と新しく出てきたyarn派の人がいるようだけど、yarnのほうが若干高速らしい。
webpackとは
webpackとは、プロダクト内部で使用するJSファイルを一つのJSファイルにまとめてくれるもの。
メリットとしては、
- ファイルを予め一つにまとめておくことでブラウザからのリクエスト回数を減らせる
- プロダクト内で結合対象のファイルを自動検知してくれる
- ファイル結合時にコードの変換処理をすることができ、最新のコードで書いたものを古いブラウザにも適応することが可能
といったことが挙げられる。
webpackとは？使い方と導入するメリットをわかりやすく解説 | Workship MAGAZINE(ワークシップマガジン)
Webpackとは？メリットや使い方、インストール方法を…｜Udemy メディア
Node.jsとwebpackの位置付けに関しては
Node.js...サーバーサイドでのJSを実行可能にするための環境
webpack...Node.jsのある環境で使用。JSの実行可能ファイルを作成する過程を担う
という感じかな。。
若干難易度が高いけど、以下の記事の図が分かりやすかった。
babelとは
ようやく終わりに近づいてきた。ふぅ。。
Babelとは、簡潔にいうと、JavaScriptのコードを新しい書き方から古い書き方へと変換するツールです。
もうこの記事が分かり易すぎるのでこれ以上言及したくないのだけど（疲れただけw）、要するに
- ブラウザごとの環境の違いに対応
- 単体で使われることもあるがwebpack等の他のビルドツールと併用されることも多い
という感じかな。。
まとめ
- ビルドとは、ソースコードをコンパイルしてプログラムが実行可能なファイルを作成すること
- Node.jsとは、JSでのサーバーサイド構築を可能にする環境
- webpackやbabelはビルドツール。Node.js環境で動く
- npmやyarnはパッケージマネージャー
という感じかな。
記事によってnpmでインストールしている例があったり、yarnでインストールしている例があったり、
こっちではwebpackを使っていて、あっちではbabelを使っていて、
みたいな状況をたくさんの記事で見てきたのですが、大体こういうことだったようです。
ビルドやコンパイルって日頃Ruby/Railsを使っていると基本的に意識しないので、理解できるまでにかなり時間がかかりました。。
いろんなことがきちんと理解できていないまま、表面的な解決策だけ得ようとして、いろんな記事を渡り歩くのがよくなかったですね。。
