webpackerを使用したRails開発の環境構築

概要

Rails5.1から導入されたwebpackを使ってみたい！という願望。
その前準備として環境構築をしておきます。

Macに構築

homebrewが既にインストール済みという前提です。
bashの場合は、zshrcではなくbash_profileとしてください。

Step1: 準備の準備

# homebrewを更新
$ brew update
# homebrewでrbenvとruby-buildをインストール
$ brew install rbenv ruby-build
# rbenvの初期化スクリプトをzshrcに追記
$ echo 'eval "$(rbenv init -)"' >> ~/.zshrc
# zshrcを実行（追記した為） 
$ source ~/.zshrc

Step2: Ruby環境の準備

# インストール可能Rubyバージョンを確認
$ rbenv install --list
# Ruby2.6.1をインストール（2019/02/14時点の最新安定板）
$ rbenv install 2.6.1
# メインで使用するRubyのバージョンを指定
$ rbenv global 2.6.1
# 2.6.1が適用されていることを確認
$ ruby -v
# インストール可能なrailsのバージョンを確認
$ gem query -ra -n  "^rails$"
# rails5.2.2をインストール（ri/rdoc不要）
$ gem install rails -v 5.2.2 -N

# 希望するバージョンが表示されない場合
# rbenvとruby-buildを更新してみると出てくることがある
$ brew update
$ brew upgrade rbenv ruby-build

Step3: Node.jsの準備

webpackerを使用した開発でNode.jsは必要になります。

# node.jsをインストール
$ brew install node
# nをインストール
# nとはnode.jsのバージョン管理するライブラリ
$ npm install -g n
# nを使ってnode.jsをインストール
$ sudo n latest
# npm自身を更新
$ npm update -g npm
# npmの全パッケージを更新
$ npm update -g
# npmが古くないことを確認
$ npm outdated -g
# node.jsの確認
$ node -v

Step4: yarnの準備

Node.jsと同様にwebpackerを使用した開発で必要になります。

# yarnをインストール（homebrew使用）
$ brew install yarn
# yarnのPATHを通す（zshrcに追記）
$ echo 'export PATH="$HOME/.yarn/bin:$PATH"' >> ~/.zshrc
# zshrcを実行（追記した為） 
$ source ~/.zshrc

まとめ

以上の作業で、一通りの環境構築が完了しました。
明日からの目標：「Hello,World!」をブラウザで表示する。

参考

rbenvを利用したRuby環境の構築
Node.jsとnpmとアップデート
yarnを使ってみた
Gem準備 コマンド集
Gem準備 -N