🔰【初学者用】PCの環境構築

はじめに

今回は初歩の初歩に戻り、PCの環境構築を記述していきます。
なんでこの記事を書くかというと、「PCを変えたときに環境構築に時間を使いたくないから！」
これから就職し、PCを変える可能性もあるのでその段階で迷う時間を減らせるよう記述していきます。
※初心者の方が最初に見ても分かりやすいよう説明も交えながら記述していきますね！！（Mac限定）
※ここに書いていることは覚えなくていいです。一度設定すれば、次に使うのは当分先のため。

テキストエディタ

まずはテキストエディタから準備。
テキストエディタとは、文章作成、編集するためのソフトウェア。開発を行う際、テキストエディタにコードを書き込みます。
様々な種類があるのですが、私は始めにprogateとドットインストール（どちらもオンライン学習サイト）で使用していたVSCodeというエディタを使用しています。

VSCode

マイクロソフトが開発した無料で利用できるテキストエディタ。エンジニアには人気が高い！
※未経験でまだ学習段階のエンジニアの肌感ですが、学習サイト等でもほとんどがVSCodeを使用している印象なので、テキストエディタはこれで間違いないかと思います。
下記リンクからダウンロードします！
VSCodeダウンロードページリンク

ダウンロード後の流れ

①リンクを開いたらDownload for Macをクリック
②Google Chromeの場合、画面左下にダウンロードしたファイルが表示されるので表示されたファイルをクリック
③ファイルを展開したらVSCode.appが表示されるのでアプリケーションフォルダにドラッグ＆ドロップ
④必要な方はDockにドラッグ＆ドロップで配置
⑤アプリケーションのアイコンをクリックし、起動できたら完成☆

拡張機能

テキストエディタに導入する拡張機能を紹介します。

• Japanese Language Pack for Visual Studio Code（英語が苦手な初学者必須）
  日本語表記にする
• HTML Snippets
  HTMLタグ、CSSタグの入力を補完する
• Ruby
  Rubyの構文をチェックし、間違った箇所を指摘する
• zenkaku
  全角スペースを知らせる（初学者必須）
• Code Spell Checker
  コードのスペルをチェックする
  各々必要に応じて導入しましょう。

導入方法

1.起動したウィンドウ画面左側の、アイコンメニュー内にある四角のアイコンをクリック
2.左上の「Search Extensions in Marketplace」に拡張機能の名前を入力
3.表示された拡張機能を選択し、install（またはインストール）をクリックする
4.右下のRestart Nowをクリックして再起動すると、設定が反映される

テキストエディタのカスタマイズ

拡張機能以外にも、元々設定できるものをカスタマイズすることでより、テキストエディタを使いやすくします。
今回は以下の2点を導入

• 半角スペースの設定
• オートセーブ設定

半角スペースの設定

コードの縦列を揃える（インデント）する際は基本的にtabキーを使用します。
例えば2個の半角スペースを入れる場合、スペースキーを2回押しますが、tabキーを半角スペース2つ分と設定しておけば、tabキーを1回入力するだけで良くなります。必須な効率化です！

設定手順

1.VSCodeのサイドバーより、「管理（下部の歯車マーク）」→ 「設定」の順に選択
2.Editor: Tab Sizeを２に設定
3.Editor: Render Whitespaceで「all」を選択

オートセーブ設定

何も設定しない状態だとコードを編集するたびにcommmand + sで都度上書き保存する必要があります。コードを編集するたびにオートセーブするよう設定します。

設定手順

1.VSCodeのサイドバーより、「管理（下部の歯車マーク）」→ 「設定」の順に選択（直前の作業に続けて行う方は、この操作の必要はありません）
2.オートセーブの設定で「onFocusChange」を選択

環境構築

ここから本格的に環境構築していきます。
まずcontrolキー + space(もしくはcommandキー + space)を押すと、検索バーが表示されるので、「ターミナル」と入力し、検索結果として出たターミナルのアプリケーションをダブルクリックして起動します。

ターミナル

ターミナルは、PCに命令をすることができるアプリケーション。
環境構築を実行するにはコマンドラインというツールが必要になるのですが、Macにデフォルトでインストールされているコマンドラインがターミナルになります。
※コマンドラインとはコンピューターに対してキーボードからコマンドという文字を打つことで操作を行う仕組み。

ターミナルを開いたら %の右側の文を1行ずつコピペ→エンター

# zshをデフォルトに設定
% chsh -s /bin/zsh

# ログインシェルを表示
% echo $SHELL
# 以下のように表示されれば成功
/bin/zsh

もし、Password for ***：
と表示されたらPCのパスワードを入力してください。

Command Line Tools

Command Line Toolsとはwebアプリケーション開発に必要なソフトウェアをダウンロードするために必要な機能です。
ターミナルに以下のコマンドを入力してCommand Line Toolsをインストール

% xcode-select --install

表示画面に従いインストール→同意する→完了

Homebrew

ソフトウェア管理ツール。
これを導入する前に確認しなければならないことがあります。
画面左上のりんごマークからこのMacについてをクリックし表示されたMacの情報のプロセッサにIntel」の文字が表示されている場合はこのまま進めてください。（以下M1モデルの場合の記述を飛ばしましょう。）
※M1モデルの場合以下の手順が必要になります。
①finderを開く
②右上の検索バーからターミナルと入力し検索
③右クリックで情報を見るを選択
④「Rosettaを使用して開く」にチェックを入れて閉じる
⑤再度ターミナルを右クリックし終了を選択
⑥ターミナルをクリック
⑦ポップアップが表示されるのでインストールをクリック
⑧完了！

Homebrewをインストール

# ホームディレクトリに移動
% cd

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

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

Password:が表示されたらPCのパスワードを入力
==> You are using　〜〜と表示されたらエンター

以下のコマンドでインストールできているか確認します。

% brew -v

結果↓

Homebrew 2.5.1　#数字は異なる場合あり

と表示されていたらインストールされています。
以下のコマンドでアップデート

% brew update

権限を変更します

% sudo chown -R `whoami`:admin /usr/local/bin

これで完了です！

MySQL

最後にMySQL。これはアプリケーションでデータを管理するツールです。データ管理にも様々な種類がありますが、MySQLが最もポピュラーです。

MySQLをインストール

% brew install mysql@5.6

少し時間がかかります。
完了したら自動起動設定をおこないます。

% mkdir ~/Library/LaunchAgents 
% ln -sfv /usr/local/opt/mysql\@5.6/*.plist ~/Library/LaunchAgents
% launchctl load ~/Library/LaunchAgents/homebrew.mxcl.mysql\@5.6.plist 

このコマンドを打たないとPCの再起動のたびに起動し直す必要がでてきます。
続いてどこからでも実行できるように設定

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

# 以下のように表示されれば成功
/usr/local/opt/mysql@5.6/bin/mysql

起動確認

% mysql.server status # MySQLの状態を確認するコマンド

# 以下のように表示されれば成功
 SUCCESS! MySQL running

続いてshared-mime-infoをインストール

% brew install shared-mime-info
% brew list

表示されるリストの中にshared-mime-infoがあれば完成です！

お疲れさまでした！！
あとは各々自身のPCに必要な言語等をインストールしていきます。
今の私の段階ですと、Ruby・Rails・Node.js・yarnなどにあたります。がこれは人によりけりなので、何とも言えないですね。

終わりに

もしPCを変えたときのためにということで記述しました。
実際に実務を経験されているエンジニアの方々はどれくらいのスパンでPCを買い換えるのか。。。
私は入社と同時に買い替えたい！と心の中で思っています。