LoginSignup
3
2

More than 1 year has passed since last update.

@hellotechcamp(yaho baby)

(備忘録)MacにゼロからRubyの環境構築をする方法

Posted at

環境構築とは？

  • プログラミングを書いたり、実行したりするような環境を自分のパソコンに整うこと

環境構築の手順

①テキストエディタの準備

  • テキストエディタは文章を作成、編集するためのソフトウェア
  • Microsoftが無料提供しているVisual Studio Codeが有名
  • 今回はVisual Studio Codeを中心に進む
  • Download URL ：　https://code.visualstudio.com/

②VSCodeに拡張機能導入(推奨)

拡張機能とは？

  • VSCode単体ではサポートしてない機能を後から付け加えるためのもの

Japanese Language Pack for Visual Studio Code

  • 日本語表記にする

HTML Snippets

  • HTMLタグ、CSSタグの入力を補完

Ruby

  • Rubyの構文をチェック、間違った箇所を指摘

zenkaku

  • 全角スペースを知らせる
  • zenkakuに関してはインストールしただけでは使用でき図、以下を実行
    ①command + shift + pで、コマンドパレット(設定ファイル)の検索画面を開く
    ②「> Enable zenkaku」と入力して選択
    ③command + QでVSCodeを終了するか、「Code」を選択し、「Visual Studio Codeを終了する」を選択して終了
    ④finderでホームディレクトリを開く
    ⑤command + shift + .で隠しディレクトリ表示
    ⑥> .vscode > extensions > mosapride.zenkaku-0.0.3 > と移動
    ⑦extension.jsを2本指タップ、メニュー表示
    ⑧「このアプリケーションを開く」から「テキストエディット」を選択
    ⑨　5行目の「var enabled = false;」を「var enabled = true;」に変更、command + Sで保存

Code Spell Checker

  • コードのスペルをチェック

③その他便利機能カスタマイズ

  • tabキーで入力される半角スペースの数を設定
    ①VSCodeのサイドバー、「管理（下部の歯車マーク）」→ 「設定」
    ②Editor: Tab Sizeを２に設定
    ③Editor: Render Whitespaceで「all」を選択

  • オートセーブ設定
    ①VSCodeのサイドバー、「管理（下部の歯車マーク）」→ 「設定」
    ②オートセーブの設定で「onFocusChange」を選択

④APP開発のための環境を整える

  • 最初、MacOSの状態を確認する必要あり
  • 以下、MacOSがCatalina以降の場合を想定して進めます。
    ※Mojaveではbashというシェルを使用、Catalina以降はzshというシェルを使用

①まず、下記のコマンドを実行

zshをデフォルト設定
% chsh -s /bin/zsh
ログインシェルを表示
% echo $SHELL
以下のように表示されればOK
/bin/zsh

% echo $SHELL コマンドで、/bin/zshと表示されなかった場合は、一度ターミナルを閉じて再度開木、もう一度echo $SHELLコマンド

PWの入力を求められる場合あり

②Command Line Toolsを用意

  • Command Line Toolsとは、WebのAPP開発に必要なSWをダウンロードするため必要な機能

1)Command Line Toolsをインストール

ターミナル
% xcode-select --install

2)インストール→同意→ダウンロード開始→完了

③Homebrewを用意

  • Homebrewは？ソフトウェア管理ツール

Macのチップモデルによって方法が異なる

以下、M1チップではなくIntelモデルである前提で進める

1)Homebrewをインストール

ターミナル
# ホームディレクトリに移動
% cd

# ホームディレクトリにいるかどうか確認
% pwd

# コマンドを実行
% /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

2)ターミナル画面表示に従い、必要な場合PW入力かEnterキーを押す

3)Homebrewがインストールされているか確認

ターミナル
% brew -v
Homebrew 2.5.1 # 数字は異なる場合あり

4)Homebrewをアップデート

ターミナル
% brew update

5)Homebrewの権限を変更

ターミナル
% sudo chown -R `whoami`:admin /usr/local/bin

④新しいバージョンのRubyをインストール

1)rbenv と ruby-buildをインストール

  • rbenvとruby-buildはRrubyの土台となる
ターミナル
% brew install rbenv ruby-build

2)rbenvをどこからも使用できるように設定

ターミナル
% echo 'eval "$(rbenv init -)"' >> ~/.zshrc

3)zshrcの変更を反映

ターミナル
% source ~/.zshrc

4)readlineをinstall

  • ターミナルのirb上で日本語入力を可能にする設定を行うため
ターミナル
% brew install readline

5)readlineをどこからも使用できるように設定

ターミナル
% brew link readline --force

6)rbenvを利用、Rubyをインストール

ターミナル
% RUBY_CONFIGURE_OPTS="--with-readline-dir=$(brew --prefix readline)"
% rbenv install 2.6.5

7)利用するRubyのバージョンを指定

ターミナル
% rbenv global 2.6.5

8)rbenvを読み込んで変更を反映

ターミナル
% rbenv rehash

9)正しくバージョン指定するできたか、最終確認

ターミナル
% ruby -v

⑤MySQLを用意

  • MySQLは、アプリケーションでデータを管理するツール

1)MySQLのインストール

ターミナル
% brew install mysql@5.7

2)MySQLの自動起動設定

  • MySQLは本来、PC再起動のたびに起動し直す必要があるが、面倒であるため、自動起動設定を推奨
ターミナル
% mkdir ~/Library/LaunchAgents 
% ln -sfv /usr/local/opt/mysql\@5.7/*.plist ~/Library/LaunchAgents
% launchctl load ~/Library/LaunchAgents/homebrew.mxcl.mysql\@5.7.plist

3)mysqlコマンドをどこからでも実行できるように設定

ターミナル
# mysqlのコマンドを実行できるようにする設定
% echo 'export PATH="/usr/local/opt/mysql@5.7/bin:$PATH"' >> ~/.zshrc 
% source ~/.zshrc #  設定を読み込むコマンド
% which mysql # mysqlのコマンドが打てるか確認する

# 以下のような表示でOK
/usr/local/opt/mysql@5.7/bin/mysql

4)MySQLの起動確認

ターミナル
# MySQLの状態を確認
% mysql.server status 

# 以下表示でOK
 SUCCESS! MySQL running

⑥shared-mime-infoを用意

1)shared-mime-infoをインストール

ターミナル
% brew install shared-mime-info

2)shared-mime-infoがインストールされているか確認

ターミナル
% brew list

⑦Railsを用意

1)bundlerをインストール

  • bundler（バンドラー）とは？Rubyの拡張機能（gem）の管理のためのツール
ターミナル
% gem install bundler --version='2.1.4'

2)Railsをインストール

ターミナル
% gem install rails --version='6.0.0'

3)rbenvを再読み込みし、変更を反映

ターミナル
% rbenv rehash

4)Railsの導入確認

ターミナル
% rails -v
Rails 6.0.0  
# 「Rails」あとの数字は変わる可能性があり

⑧Node.jsを用意

  • Node.jsはJavaScript実行の為に必要なもの
  • Homebrewを用いて、Node.jsをインストール

1)Node.jsをインストール

ターミナル
% brew install node@14

2)Node.jsへのパス設定

ターミナル
% echo 'export PATH="/usr/local/opt/node@14/bin:$PATH"' >> ~/.zshrc
% source ~/.zshrc

3)Node.jsの導入確認

ターミナル
% node -v
v14.15.3 # 数値は異なる場合あり

⑨yarnを用意

  • yarnとは、プログラム同士の関係性を管理するもの

1)yarnをインストール

ターミナル
% brew install yarn

2)yarnの導入確認

ターミナル
% yarn -v
3
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
3
2