目次
全体の流れ
導入手順詳細
1. Homebrewのインストール
まず、Nodebrewをインストールする前に、Homebrewがインストールされていることを確認してください。
※NodebrewとHomebrewは似ていますが、Homebrewを利用してNodebrewをインストールします。
Homebrewがまだインストールされていない場合は、以下のコマンドをターミナルで実行してインストールします。
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
2. Nodebrewのインストール
Homebrewがインストールされたら、次にNodebrewをインストールします。
以下のコマンドをターミナルで実行してください。
brew install nodebrew
3. 環境変数の設定
Nodebrewを使用するためには、パスを通す必要があります。
まずは以下のコマンドを実行し、現在使用しているシェルを確認してください。
echo $SHELL
上記出力結果を確認の上、以下のコマンドを実行し、~/.bash_profile または ~/.zshrc (
使用しているシェルに応じて) にパスを追加してください。
// bashの場合 echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bash_profile // zshの場合 echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.zshrc
変更を反映させるために、以下のコマンドを実行してください。
// bashの場合 source ~/.bash_profile // zshの場合 source ~/.zshrc
4. Node.jsのインストール
先ほどインストールした Nodebrew を使用し、今度は Node.js をインストールします。
// 最新バージョンをインストールする場合 nodebrew install-binary latest // 特定のバージョンをインストールする場合（ 例えば v21.7.0 ） nodebrew install-binary v21.7.0
上記コマンドを実行すると環境によっては以下のエラーが発生するケースがあるようです。
Warning: Failed to open the file・・、curl: (23) Failure writing output to destination
これはmacのホームディレクトリ（~）に .nodebrew/src のフォルダが存在しないため表示されるエラーのようです。
もしエラーが発生する場合は以下のコマンドを実行後、再度Nodebrewを使用してNode.jsをインストールしてください。
// フォルダを作成 mkdir -p ~/.nodebrew/src // node.jsをインストール（最新バージョン） nodebrew install-binary stable // node.jsをインストール（バージョン指定） nodebrew install-binary v21.7.0
5. 使用するNode.jsのバージョンの設定
インストールしたNode.jsのバージョンを使用するためには、以下のコマンドで指定します。
※「4. Node.jsのインストール」で最新バージョン or 特定のバージョンのいずれかに合わせて以下コマンドのいずれかを実行してください。
// 最新バージョンをインストールする場合 nodebrew use latest // 特定のバージョンをインストールする場合（ 例えば v21.7.0 ） nodebrew use v21.7.0
もし上記コマンドでエラーが発生する場合は、以下のコマンドで現在PCにインストールされているNode.jsのバージョンを確認してください。
// インストール済みの Node.js を確認 nodebrew list // 出力結果: インストール済みの Node.js 一覧 v14.21.3 v16.20.2 v19.9.0 v21.7.0
上記インストール済みの Node.js の中から使用したいバージョンを指定して以下コマンドを実行。
nodebrew use v21.7.0
6. Node.jsのバージョン確認
node -v => v21.7.0
上記コマンドで Node のバージョンが実行されればOKです。
7. Webpackを利用したプロジェクトの立ち上げ
Node.jsがインストールできた場合は、実際にWebpackを利用したプロジェクトの立ち上げてみましょう。「教材」メニューから「Webpackを利用したプロジェクトの立ち上げ方」を検索し、実際に立ち上げてみてください。
キーワード説明
Homebrewとは？
Homebrewは、mac上にアプリケーションやプログラミング言語(phpやpythonなど)のダウンロード、インストール、アップデートを簡単に行うことができます。標準のmacには入っていないので、まずこれをインストールします。
Node.jsとは？
Node.jsは、ブラウザで動作するJavaScriptを、ブラウザ以外で実行できるようにする為のツールです。
今回はmac上にこのNode.jsを入れて、ブラウザを使わずにJavaScriptを動かせるようにすることです。
WebpackはJavaScriptによって動作するソフトウェアです。
シェルとは？
シェルは、ユーザーがキーボードを使ってコンピューターに特定の操作をさせるための仲介者のようななイメージです。具体的にはブラウザがウェブ上の情報を見るための窓口であるのと同様に、シェルはコンピューター内部や外部のシステムとやりとりをするための窓口です。ブラウザでURLを入力することで特定のウェブページを開くように、シェルではコマンドを入力することでPCに様々なタスクを実行させます。
macOSでは、「bash」や最近では「zsh」といった異なる種類のシェルが標準で使用可能で、購入後のmacでターミナルを開くとすぐに利用可能です。
パスとは？
パスは、アプリケーションやプログラム、ファイルがコンピューター上にある場所を指します。例えば、家の住所のようなもので、コンピューターが必要なプログラムを見つけられるようにするための道しるべです。
HomebrewやNode.jsなどのプログラムをmacにインストールすると、これらのプログラムをコンピューターがどこで見つけられるかを知っておく必要があります。ここで「パスを通す」という作業が登場します。これは、シェル（ターミナルでコマンドを入力する場所）が、HomebrewやNode.jsのようなプログラムを使うためにどこを見ればいいかを教える作業です。
シェル（ターミナル）を使って、特定の場所にあるプログラムを起動したいとき、そのプログラムの「パス」をシステムに知らせておくことで、フルの住所を打ち込むことなく、名前だけでプログラムを呼び出すことができるようになります。例えば、Node.jsで何かしらの作業をしたいとき、「node」と入力するだけで起動できるのは、その「パス」がシステムに登録されているからです。
webpackとは？
webpackは、ウェブサイトを作るためのさまざまなファイル（たとえばPug、SCSS, JavaScript、画像など）を一つにまとめる（バンドルする）ツールです。
ファイルをバンドルする主な目的は、ブラウザからサーバーへのリクエスト（データ取得）の回数を減らし、サイトやウェブアプリの訪問者がページをより高速に閲覧できるようにすることです。
開発者にとっては、webpackを利用すると複数のファイルを管理しやすく小分けにして開発することができます。具体的には、ヘッダー(
header.pug)やフッター(footer.pug)といったサイトの共通パーツを個別のファイルとして作成し、それらを必要に応じて組み合わせることができます。
これにより、複数ページにわたって共通の要素を一貫して保持したり、特定のページにだけ特別な機能やスタイルを適用したりすることができます。
最終的にwebpackを通してhtmlをする際に複数のpugファイルが１つのhtmlファイルにまとめられます。