macにRailsをゼロからインストールする
  • 2019.08.02に公開
  • 2019.10.03に更新
  • SPA開発
  • 2. 開発環境を整える
  • No.1 / 4
「SPA開発」では、Nuxt.js v2.14未満が使用されています。 Nuxt.jsはv2.13~14で大きなバージョンアップがありました。それに伴い、書き方も大きく変化しています。 v2.14以上で書かれた「SPA開発」の続編は、カテゴリー「 Udemy 」 で公開しています。

Railsをインストールするために必要なもの

  1. Railsをインストールするには、
  2. Rubyが必要です。Rubyをインストールするには、
  3. rbenvが必要です。rbenvをインストールするには、
  4. Homebrew が必要です。Homebrewをインストールするには、
  5. Command Line Tools for Xcode が必要です。 << ココから順にインストールを開始します。

ツールの説明は下で触れています。

Railsを円滑に動かすために必要なもの

  • RailsにはJavascriptを実行するnode.jsが必要です。

    node.js導入以外の方法もあるようです。

  • Railsプロジェクトごとにgemを管理するためにはBundlerが必要です。

    gemとはRubyのライブラリのことです。

    ライブラリとはrubyをもっと便利に使うことができる部品のことです。

    ちなみに、RailsもRubyライブラリの一つです。

必要であればインストールするもの

必要であれば、PostgreSQLMySQLなどのデータベースをインストールしてください。

ちなみにmacの環境では、標準でSQlite3がインストールされています。

本プロジェクトでは開発環境でSQlite3を使うので、インストールには触れません。

早速インストール

1. Command Line Tools for Xcodeのインストール

Command Line Tools for Xcodeとは、mac用のコマンドラインツールです。

ターミナル上でいろんな操作を可能にします。

まずインストールされているかターミナル上で確認します。

$ xcodebuild -version

↓のようにバージョンが表示されていればOKです。次へ進みましょう。

Xcode 10.3
Build version 10G8

バージョンが表示されない場合はインストールを実行します。

$ xcode-select --install

2. Homebrewのインストール

Homebrewとは、macOS上で開発をするにあたって、必要なパッケージをインストールしたりアンインストールしたりするものです。

Homebrewをインストールします。

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

上記は2019年8月現在のものです。

最新のインストールコマンドはここにあります。

macOS 用パッケージマネージャー — Homebrew

インストールされたか確認します。

$ brew -v

バージョンが表示されたらOKです。次へ進みましょう

Homebrew 2.1.8

3. rbenvのインストール

rbenvとは、Rubyのバージョン管理ツールです。

プロジェクトごとにRubyのバージョン切り替えを可能にしてくれます。

まず、Homebrewを使ってrbenvをインストールします。(brewはHomebrewのコマンドです)

$ brew install rbenv

次に、rbenvコマンドを使えるようパスの設定と初期化設定を.bash_profileに追記します。

ターミナルで以下のコマンドを実行してください。

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

不安な方は.bash_profileを起動して確認しておきましょう。

$ vi ~/.bash_profile

先ほどのパスが記入されていますね。

export PATH="$HOME/.rbenv/bin:$PATH"
eval "$(rbenv init -)"
~                                                                                                                
~                                                                                                                
~

確認が取れたら、.bash_profileファイルを終了します。

$ :q

.bash_profileの設定を反映させるために下のコマンドを実行します。

$ source ~/.bash_profile

rbenvがインストールできたか確認をとりましょう。

$ rbenv -v

バージョンが表示されたらインストール成功です。

rbenv 1.1.0

4. Rubyのインストール

Rubyはrbenvを使ってインストールしていきます。

なお、Rails 6を動かすにはRubyのバージョンが2.5以上でなければなりません。

まず、インストールできるRubyのバージョンを確認しておきましょう。

$ rbenv install --list

上の方に出てきた数字がRubyのバージョンを表しています。

...
2.6.2
2.6.3
2.7.0-dev
2.7.0-preview1
...

今回は、最新の安定版である 2.6.3 をインストールしていきます。

$ rbenv install 2.6.3

インストールが終わったら、システム全体で使用するRubyのバージョンを指定します。

$ rbenv global 2.6.3

Rubyのバージョンを確認しましょう。

$ ruby -v

バージョンが表示されれば成功です。

ruby 2.6.3p62 (2019-04-16 revision 67580) [x86_64-darwin18]

(補足) rbenvのよく使うコマンド集

  • rbenv versions

rbenvにインストールしたRubyのバージョン一覧を取得する。
※が現在のプロジェクトで利用しているRubyのバージョン

$ rbenv versions
  system
  2.3.1
  2.4.1
  2.5.3
* 2.6.3 (set by /Users/ユーザー名/.ruby-version)
  • rbenv version

現在のプロジェクトで利用しているRubyのバージョンを表示する。($ ruby -vと同じ)

$ rbenv version
2.6.3 (set by /Users/ユーザー名/.ruby-version)
  • rbenv local

プロジェクト単位でRubyのバージョンを切り替える。

$ rbenv local 2.5.3

切り替わったか確認。

$ rbenv versions
  system
  2.3.1
  2.4.1
* 2.5.3 (set by /Users/ユーザー名/.ruby-version)
  2.6.3

5. RubyGemsのアップデート

RubyGemsとは、Rubyのgemライブラリを管理するツールです。

RubyGemsはRubyに同梱されていますが、新しいバージョンが公開されている場合がありますので、念の為アップデートしておきましょう。

$ gem update --system

下のように出てきた場合は最新版がインストールされています。次へ進みましょう。

Latest version already installed. Done.

6. Bundlerのインストール

Bundlerとは、Rubyのgemライブラリをプロジェクト単位で管理することができるツールです。

プロジェクトディレクトリに「Gemfile」というファイルを作成し、そのファイル上でインストールするgemを記載したり、gemのバージョンを明記したりしてgemを管理することができます。

インストールを実行しましょう。

$ gem install bundler

7. Railsのインストール

やっとRailsのインストールです。

mac上にインストールするRailsは、現在(2019年8月)の安定版である5.2.3をインストールします。

$ gem install rails -v 5.2.3

インストールが終わったら確認をしておきましょう。

$ rails -v

バージョンが出てきたら正しくインストールされています。

Rails 5.2.3

8. node.jsのインストール

node.jsはHomebrewでインストールできます。

$ brew install node

node.jsをプロジェクト毎にバージョン管理できる「Nodebrew」を使ってインストールするには、こちらの記事を参考にしてください。

Nuxt.jsを動かす環境を構築する

最後にインストールの確認だけしておきましょう。

$ node -v
v12.7.0

お疲れ様でした

以上でRailsの開発環境が構築できました。

次回はBitbucketのセットアップをしていきます。

あなたの力になれること
私自身が独学でプログラミングを勉強してきたので、一人で学び続ける苦しみは痛いほど分かります。そこで、当時の私がこんなのあったら良いのにな、と思っていたサービスを立ち上げました。周りに質問できる人がいない、答えの調べ方が分からない、ここを聞きたいだけなのにスクールは高額すぎる。そんな方に向けた単発・短期間メンターサービスを行っています。
独学プログラマのサービス
SPA開発の投稿
1
  • 更新情報
  • /
  • #01
「Rails apiとNuxt.jsでSPA開発」のデモアプリを開発中...。【2020/05/19追記: このカテゴリーの更新を一旦終了といたします】
1
  • 今回作るアプリケーション
  • /
  • #01
Railsアプリの完成イメージ画像と作ろうと思った経緯
2
  • 今回作るアプリケーション
  • /
  • #02
今回作るRailsアプリの全体像と機能の整理
1
  • 開発環境を整える
  • /
  • #01
macにRailsをゼロからインストールする
2
  • 開発環境を整える
  • /
  • #02
Rails apiモードのプロジェクトを作成し、Gitにコミットする
3
  • 開発環境を整える
  • /
  • #03
Bitbucketに公開鍵を追加し、Railsプロジェクトをpushする
4
  • 開発環境を整える
  • /
  • #04
HerokuCLIのインストールとherokuアプリケーションの作成
1
  • RailsをHerokuにデプロイする
  • /
  • #01
Herokuのデータベース設定と開発に便利なgemを導入する
2
  • RailsをHerokuにデプロイする
  • /
  • #02
HerokuにPumaを導入するためのRailsセットアップ
3
  • RailsをHerokuにデプロイする
  • /
  • #03
Railsに"Hello"を表示してHerokuへデプロイする
1
  • RailsとNuxt.jsを共存させる
  • /
  • #01
【RailsとNuxt.jsの共存】Rails上にNuxt.jsのプロジェクトを構築しよう
2
  • RailsとNuxt.jsを共存させる
  • /
  • #02
Nuxt.jsからRailsへ、初めてのapi通信でHelloを表示しよう
3
  • RailsとNuxt.jsを共存させる
  • /
  • #03
Nuxt.jsにVuetify2.0を導入してFont Awesomeもインストールするぜ
4
  • RailsとNuxt.jsを共存させる
  • /
  • #04
初めてのRailsApiアプリの公開。Herokuにデプロイする準備と実際のデプロイまで
1
  • データベース設計
  • /
  • #01
データベースを正規化する前に、会計システムの勘定科目データを整理する
2
  • データベース設計
  • /
  • #02
会計システムのデータベース設計に挑む
1
  • バージョンアップ情報
  • /
  • #01
【ご報告】Nuxt.jsを2.10.2にバージョンアップしました
2
  • バージョンアップ情報
  • /
  • #02
【ご報告】Railsを6.0.0にバージョンアップしました
1
  • Userモデル開発
  • /
  • #01
本番環境と開発環境でRailsのSeedデータを切り替える
2
  • Userモデル開発
  • /
  • #02
Railsにユーザーテーブルを作成する【テーブル確認コマンド】
3
  • Userモデル開発
  • /
  • #03
【Rails】EachValidatorクラスを使ったEmailカスタムバリデーション【lib以下読み込み】
4
  • Userモデル開発
  • /
  • #04
【Rails】エラーメッセージの日本語化【i18nとja.ymlのセッティング】
5
  • Userモデル開発
  • /
  • #05
【Rails】開発・テスト・本番環境の全てにユーザーSeedデータ投入する
6
  • Userモデル開発
  • /
  • #06
【Rails】ユーザーモデルのバリデーションをテストする
1
  • ログイン周りのレイアウト設計
  • /
  • #01
【Nuxt.js】ログインフラグでレイアウトを切り替えるテクニック【2019/12/07追記あり】
2
  • ログイン周りのレイアウト設計
  • /
  • #02
【Nuxt.js】ウェルカムページのレイアウト構築【sassの導入】
3
  • ログイン周りのレイアウト設計
  • /
  • #03
【Nuxt.js】ログイン周りの入力フォームコンポーネント設計【2019/12/07追記あり】
4
  • ログイン周りのレイアウト設計
  • /
  • #04
【Nuxt.js】会員登録フォームを構築してサインアップページを完成させる
独学プログラマ
独学でも、ここまでできるってよ。
CONTACT
Nuxt.js制作のご依頼は下記メールアドレスまでお送りください。