環境構築とは?
- プログラミングを書いたり、実行したりするような環境を自分のパソコンに整うこと
環境構築の手順
①テキストエディタの準備
- テキストエディタは文章を作成、編集するためのソフトウェア
- 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を2に設定
③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