環境構築とは？

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

環境構築の手順

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

テキストエディタは文章を作成、編集するためのソフトウェア
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