はじめに

OCAではRailsを中心にプログラミングの学習を行っていただきますが、そもそもプログラミング初心者が最初に躓くことってなんだと思いますか？
アルゴリズムだとか、変数がわからないとか、それよりも前に『開発環境が作れない』ということが多々あります。
特にWeb系の言語は、初学者でも入りやすい言語だとは思いますが、環境を作るにはコマンドを使ったりしないといけなかったりで、導入のハードルは少し高く感じます。
そこでOCAでは、dockerを使って開発環境を用意することで、環境構築でつまずいてしまうという事態を回避しています。

この記事では、一度回避した環境構築に立ち返り、より理解を深めようという内容です。

環境

今回作成する環境は次の通りです

Homebrew 2.2.0
ruby 2.6.3
Rails 6.0.1

Homebrewのインストール

まずはHomebrewをインストールします。
HomebrewはMacOSのパッケージ管理ツールです。
Homebrewは色々なタイミングで使うことがあるので、入れていない人はこの機会にいれておきましょう

まずは以下のコマンドを叩いてHomebrewがインストールされていないことを確認してください。
この記事に出るコマンドすべてに言えることですが、頭の$はコマンドであることを示しているため、打たなくて大丈夫です

$ brew -v

さて、まずはHomebrewのインストールと言いましたが、あれは嘘です
以下のコマンドを入力し、コマンドライン・デベロッパーツールをインストールします。
AppstoreからXCodeをインストールしてもOKな様子

$ xcode-select --install

ダイアログが出たりすると思いますが気にせず進めましょう。

インストールが終わったら、今度こそHomebrewをインストールします

$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

インストールが終わったら、正常にインストールが完了したか確認します。

$ brew docker

さて、ここで勘のいい方ならあることに気づくかと思います。

「あれ、rubyのコマンド使ってない？」

そうです。今からrubyを入れようとしているのに、rubyのコマンドを使用しました。

実はmacにはrubyが標準搭載されています。
ですが、バージョンが古かったり、別バージョンを使う上で管理が面倒なので、別の方法でrubyを入れ直すというわけです。

rubyをインストール

次に、rubyをインストールするためのツールをインストールします。

以下のコマンドを実行します。

$ brew install rbenv ruby-build

rbenv はrubyをインストールするためのツールであり、rubyのバージョンを切り替えるためのツールでもあります。

インストールが終わったら、rbenvのパスを通します。
簡単に説明すると、パスを通すと、ディレクトリのどの位置にいてもコマンドのフルパスを書かずともそのコマンドを実行できるというメリットがあります。

$ echo 'export PATH="~/.rbenv/shims:/usr/local/bin:$PATH"' >> ~/.bash_profile
$ echo 'eval "$(rbenv init -)"' >> ~/.bash_profile
$ source ~/.bash_profile

パスを通し終わったら、以下のコマンドを実行してみます。

$ rbenv install --list

今のコマンドは、rbenvを使ってインストールできるrubyのツールが表示されます。
ここでは最新版である 2.6.3 があるか確認しましょう。
他にインストールしたいバージョンが決まっていれば、そのバージョンを探してください。

バージョンが決まれば、以下のコマンドを順番に実行してrubyをインストールします。

$ rbenv install 2.6.3
$ rbenv global 2.6.3
$ rbenv rehash

インストールが完了したら、以下のコマンドで確認しましょう。

$ ruby -v

ここで表示されたrubyのバージョンが今インストールしたバージョンと同一か確認してください。
もし違う場合は、以下のコマンドを実行してインストールされているかを確認します。

$ rbenv versions

rbenv globalコマンドを使えば指定のバージョンに切り替えることが可能です。

Railsをインストール

まずは作業ディレクトリを決めましょう
今の場所を確認するときは、pwdコマンドを使います。
今の実行場所が嫌な人はcdコマンドを使って移動しましょう。

作業ディレクトを決めたら、次のコマンドを実行します。

$ rbenv local 2.6.3

このコマンドを使うと、今いるディレクトリで作業するときには、rubyのバージョンが2.6.3に固定されます。
これにより、他のプロジェクトで違うrubyバージョンを扱うことになっても、影響がなくなります。

次に、bundlerをインストールします。
すでにインストールされていないか、次のコマンドで確認してください。

$ bundle -v

bundlerはgemを管理するためのツールで、そのアプリケーションで使われるパッケージやバージョンを管理してくれます。
複数人で開発をするときは、他のPCでもバージョンは揃えないといけないので、その役割をbundlerが担っているというわけです。
https://qiita.com/jnchito/items/99b1dbea1767a5095d85

逆にgemは、パッケージの形式だと考えてください。

bundlerもgemのひとつなので、次のコマンドを使ってインストールできます。

$ gem install bundler
$ bundle -v

bundlerにインストールが終わったら、次のコマンドでGemfileを作成します。

$ bundle init

作成されたGemfileを編集します。

せっかくなのでvimを使って編集しましょう。

$ vi Gemfile

最初はこの様になっていると思います。

# frozen_string_literal: true

source "https://rubygems.org"

git_source(:github) {|repo_name| "https://github.com/#{repo_name}" }

# gem "rails"

この一番下にある # gem "rails" のコメントアウトを解除します。

矢印キーで一番下まで移動し、xキーを二回押して#と余分なスペースを消します

これで編集完了ですので、その状態で:wqと順番に入力してエンターキーを押すとvimを終了させることが出来ます。

ちなみにvimを使って何かを書き足したいときは、iキーを押して挿入モードにします。
挿入モードを解除するときは、escキーを押します。

もし万が一間違った操作をしてしまった場合は、:q!と順番に入力してエンターキーを押せば、保存せずに終了することが出来ます。
https://qiita.com/hide/items/5bfe5b322872c61a6896

Gemfileを編集したら、いよいよrailsのインストールです。
次のコマンドでrailsをインストールしましょう

$ bundle install --path=vendor/bundle

bundle installは、Gemfileの中身を見て色々インストールしてくれます。
なので先程railsのコメントアウトを外しましたので、このコマンドでrailsがインストールされます。

また、--pathオプションでは、今インストールしたパッケージの保管場所を指定しています。
これをつけないとPC全体に影響が出るグローバルな位置にインストールされます。

つけなくても問題ないとする声もありますが、同一サーバで複数のrailsを扱う場合はつけたほうがいいといった声もありますので、役割だけでも覚えておきましょう。

railsのインストールが完了したら、次にrailsプロジェクトを作成します。

$ bundle exec rails new sample

sampleの部分はそのプロジェクトの名前に適宜変えてください。
プロジェクトの作成が終わったら、cdコマンドで移動し、railsサーバーを起動します

$ cd sample
$ rails s

ブラウザからlocalhost:3000にアクセスしてWelcomeページが表示されたら成功です！

rails s が失敗する

Webpacker configuration file not found

といったメッセージでrails sが失敗する場合があるようです。
下記コマンドを実行することで解消します。

$ rails webpacker:install

yarnを入れろと怒られた場合はこちら

$ brew install yarn

私の場合はnode.jsのバージョンが低すぎると怒られたので下記の記事を参考に修正しました。
https://qiita.com/tonkotsuboy_com/items/5322d226b6783d25b5df

おわり

こうして文章にしてみると、結構やることあるんだなと再認識しました。
スムーズに行く場合もありますが、最後のように既存の環境が原因でうまく行かないなんてこともよくあります。

エラーが起きたときは英語ばかりで何をかいてあるのかさっぱりでお手上げになりがちですが、よく読むとこうしてくださいと指示があったり、エラーの内容が書いてあったりするので、それを頼りにググればきちんと解決できます。

慌てず冷静に、素敵なコーディングライフを祈ってます

手順の参考はこちら
https://qiita.com/TAByasu/items/47c6cfbeeafad39eda07