# RUNTEQに入ってたら最初にやっておくと後が楽になる環境構築
いろいろ書いてはありますが、公式ドキュメントに書いてあることが全てです
なんか間違ってたりエラー出ちゃったら教えてください

## やること
### [GoogleChrome](https://www.google.com/intl/ja_jp/chrome/)を入れる
開発ではChromeがさいつよなのでとりま入れときましょう

### 1. [Homebrew](https://brew.sh/index_ja)を使えるようにする
1. Homebrewをインストールする

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

(上記コマンドのログは長いですが、何か不具合が起きた時に役に立つかもなのでメモか何かにコピペしておくのがおすすめです)

2. Homebrewが使える状態になったか確認する

brew -v

でHomebrewのバージョンっぽいやつが表示されたらOKです
#### [補足]んでHomebrewって何？
- macでの開発で扱ういろいろなツールを一元管理(インストールしたり削除したり)してくれるものです
- 開発を行う上ではいろいろなツールを使う必要があり、それを個々で管理するのは大変なのでよく使われます
- Linuxなど他のOSでもyumやaptなど似たようなものが使われています

### 2. [rbenv](https://github.com/rbenv/rbenv)を使ってrubyを使えるようにする
1. rbenvをインストールする

brew install rbenv ruby-build

2. 自分のシェルを確認する

echo $SHELL

- ここで表示されるものによって次のコマンドが変わります
- 新しくMacを買った人は大体zshが表示されます
- 古めのMacを使っている人はbashと表示されるかも

3. とりあえず使えるようにする

eval "$(rbenv init - zsh)"

- このコマンドを打つとrbenvにパスを通したり、rbenvを使うのに必要な設定をしてくれます。
- でもこれは設定を保存してくれないので次の作業が必要になります

4. シェルの設定にこのコマンドを実行してくれるように書く(ターミナルの起動時に設定を読み込んでくれます)
echoっていうコマンドを使ってシェルの設定ファイルにコマンドを書き込みます(ファイル開いて編集も可能です)

- zshの人

echo 'eval "$(rbenv init - zsh)"' >> ~/.zshrc

- bashの人

echo 'eval "$(rbenv init - bash)"' >> ~/.bash_profile

5. とりあえず`rbenv rehash`しとく
- コマンドのキャッシュとかをいい感じにリセットしてくれるのでとりあえず打っとく

6. 直近で使用するrubyをインストールする

- M1Macの人(M1の場合古いRubyをインストールするときはオプションが必要です)

RUBY_CFLAGS=-DUSE_FFI_CLOSURE_ALLOC rbenv install 2.5.1
rbenv global 2.5.1

- intelMacの人

rbenv install 2.5.1
rbenv global 2.5.1

#### [補足]んでパスって何？
- すごくざっくりいうとそのツールがどこにあるよっていう情報です
- コンピュータはこの情報をみていろいろなツールを扱っています
#### [補足]んでシェルって何？
- 人間とコンピュータ様の間に立ってこれやってって言ってますよとか言ってくれる仲介役の人です
- zshやbashの他にもfishとかなんかいろいろあるっぽいです

### 3. [nodenv](https://github.com/nodenv/nodenv)を使ってnode.jsを使えるようにする
1. nodenvをインストールする

brew install nodenv

2. とりあえず使えるようにする

eval "$(nodenv init -)"

3. シェルの設定にこのコマンドを実行してくれるように書く
- zshの人

echo 'eval "$(nodenv init -)"' >> ~/.zshrc

- bashの人

echo 'eval "$(nodenv init -)"' >> ~/.bash_profile

4. 直近で利用するnode.jsをインストールする

nodenv install 15.14.0
nodenv global 15.14.0

### 4. [pyenv](https://github.com/pyenv/pyenv)を使ってpython環境を作っておく
1. pyenvをインストールする

brew install pyenv

2. とりあえず使えるようにする

eval "$(pyenv init -)"

3. シェルの設定にこのコマンドを実行してくれるように書く
- zshの人

echo 'eval "$(pyenv init -)"' >> ~/.zshrc

- bashの人

echo 'eval "$(pyenv init -)"' >> ~/.bash_profile

4. 直近で利用するnode.jsをインストールする

pyenv install 2.7.18
pyenv global 2.7.18

#### [補足]なんでpython入れるの？
- macOS 12.3 Montereyで以前のバージョンだとデフォルトで入っていたpythonが消されてしまったので自分で入れる必要があります

### 5.VSCodeを入れる
プログラムを書くためにはエディタというものを使う必要があります(簡単にいうと高機能なメモ帳です)
RUTNEQ生がよく使っているものだと大体VSCodeかVimの2択な気がします
とりあえずVSCode入れておいて後から考えましょう
1. インストールする
下記ページからMacって書いてあるところをクリックしてダウンロードする
https://code.visualstudio.com/download
2. zipファイルをクリックする
- ダウンロードが終わったらFinder(下の方にある顔見たいなやつ)のダウンロードっていうところに入ってるはず
- zipファイルをクリックするとアプリが出てくるのでクリック
- 開くってところを押すとVSCodeを起動してくれます

[](https://startup-technology.gyazo.com/60a7c76cf10f7949ddf86c00ecc8186c)

3. 拡張機能の紹介(普段使ってないエアプでも入れてるおすすめ)
- Japanese Language Pack for Visual Studio Code
- 多分VSCodeのシステムの文字を勝手に日本語にしてくれます
- new-zenkaku
- 全角スペースに色をつけてくれます
- プログラムは半角スペースと全角スペースを間違っただけでエラーが起きるのでとりあえず入れとくのがおすすめ
- Syntax highligth系のやつ
- プログラム(というよりHTMLの拡張テンプレート)毎にコードに色をつけてくれるやつが違うので何かを使う場面になったら都度入れるのがおすすめ
- erbとかSlimとかが入ってました

### 6.ターミナルの表示を変えてみる
1. シェルの設定ファイルを開く
- VSCodeはフォルダを開くっていうところをクリックするか、一番上に出ているファイルっていうところから`開く...`ってやつをクリックすると開けます
[](https://startup-technology.gyazo.com/9fd152a95db755573b182782b0d5fc73)
- ですが、シェルの設定ファイルは隠しファイルというもので通常の状態だとみることはできません
[](https://startup-technology.gyazo.com/966629fc08e35f9ec8d0cde33879a018)
- Macのショートカットで`Command`と`Shift`と`.`を同時押しすると隠しファイルを表示することが出来ます
[](https://startup-technology.gyazo.com/d0fcc40e01d0b307c58f87bf46f1b860)
- 先ほどrbenvの設定をするときに出てきた`.zshrc`か`.bash_profile`のどちらか自分のシェルの設定ファイルを開きましょう(今は下記の感じのはず)
[](https://startup-technology.gyazo.com/1245eea938f0cecbb0e932347e02d076)
- ここに下の設定をコピペして貼り付けましょう

autoload -Uz vcs_info
setopt prompt_subst
zstyle ':vcs_info:git:*' check-for-changes true
zstyle ':vcs_info:git:*' stagedstr "%F{yellow}!"
zstyle ':vcs_info:git:*' unstagedstr "%F{red}+"
zstyle ':vcs_info:*' formats "%F{166}%c%u[%b]%f"
zstyle ':vcs_info:*' actionformats '[%b|%a]'
precmd () { vcs_info }
PS1="%~
%B%F{green}❯%f%F{yellow}❯%f%F{red}❯%f%b"
RPROMPT=$RPROMPT'${vcs_info_msg_0_}'

- こんな感じになるはず
[](https://startup-technology.gyazo.com/9f305b8bf8b127f9c49c41586210a6b1)

### 7.Dockerを使えるようにしておく
- なんか書く予定