Windows10でLinuxの仮想環境を作成して快適にRuby on Railsチュートリアルを学びたい!!!

#初めに
この記事はRuby on Railsチュートリアル学びたいけどメインマシンのOSがWinで悩んでる方、
または脳死で環境構築できるやり方を探してる人など初学者向けです。

そこまで踏み入った内容には触れません。あしからず。

そのうえ非常に長いエントリになっております。
やることが多いので画像は少な目にします。

環境構築出来た勢いに任せて書きなぐったので
なにか誤った情報を載せていたりつまったりしたら是非コメントください。


#この記事でやってること
Windows10に
VirtualBoxをインストールして
Linux(Linux mint)の環境を作成し
Ruby(Ruby on Rails)環境を整えて
VisualStudio Codeで快適に
Ruby on Railsチュートリアルを学ぶ。

(Cloud9で良いじゃんとは言わないお約束で。環境構築の練習です。)

###必要なもの

- やる気 
- ググれる力
- エラーに負けないメンタル

さあやっていきましょう。

記事を読んでうまくいかない時やわからない時はまずググりましょう。
エラーメッセージが出ていればそれを読みましょう。
Google大先生は偉大です。大体解決します。

それでも詰まったときは遠慮なくコメントください。
できる限りお答えします。

##Linux環境を構築する
まずはLinuxの環境の作成です。

今回はVirtualBoxを使用していきます。
わかる人はデュアルブートでもかまいません。
Linux環境を作成して次項へ進んでください。

###VirtualBoxとは
簡単にいえばメインマシンのOS上で別のOSを動かせるソフトです。
今回で言えばWindows10の上でLinuxが動いているイメージですね。
あくまで仮想なので環境に不具合が起きてもメインマシンには影響ありません。

そんな便利なVirtualBoxを[インストール](https://www.virtualbox.org/)します。
インストールは画面の指示に従うだけなので特に触れません。

###Linuxのイメージファイルのダウンロード
次にVirtualBoxで動かしたいLinuxのイメージファイルをダウンロードします。
今回はLinux mint(19.1)を使用しますが他のディストリビューションがいい人は適宜読み替えて進んでください。

ここから[ダウンロード](https://linuxmint.com/download.php)します。
![Linux mint version.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403521/8c439331-4964-830a-972c-461570ab7421.png)

こんな感じでエディションが分かれてますが大まかな違いは重くて多機能か軽いかって感じです。
見た目もちょっと違います。
好きなの選びましょう。

ちなみに一番人気は
![シナモン人気.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403521/7d8ea684-fe20-df12-50f7-63bebdbc6bc3.png)
Cinnamonらしいです。
まあどれ選んでいいかわからないって人はCinnamonの64bit選んでおいてください。

###VirtualBoxにLinuxをインストールする
ダウンロードが終わったらVirtualBoxを起動させます。

新規を選んでください。
![VB 新規.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403521/fbe12c93-fda2-0b51-2330-ebdec135a72b.png)

次は名前の設定です。
画面通りに名前を入力すればタイプとバージョンが自動で変更されるはずです。
![コメント 2019-04-27 234123.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403521/19617583-7e35-0073-20c2-9cdcbb5b3bf1.png)


次はメモリの設定です。
メインマシンに余裕があれば多く割り当ててもかまいません。
ひとまずデフォルトのままでいきます。
![コメント 2019-04-27 234349.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403521/8cd07c84-599c-a50a-1ebd-c97f39126665.png)

次は仮想ハードディスクの設定です。
必要なので作成します。
![コメント 2019-04-27 234622.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403521/7d3edb23-4004-a858-579c-d85d5d0e58f3.png)
ハードディスクのタイプはVDIでいいでしょう。
サイズは可変でいきます。
容量20GBもあれば十分じゃないでしょうか。

これでひとまず仮想環境が設定できたと思います。
![コメント 2019-04-28 084515.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403521/71d39a0b-5539-b918-e9ba-a64e30fc0eea.png)
(上のは無視してください。)


次に今作成した仮想環境の設定を開きます。
設定→ストレージ→コントローラのCD選択

属性欄に光学ドライブを選択するCDのプルダウンがあるので開きましょう
![コメント 2019-04-27 235803.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403521/436bc53d-b473-8393-6b88-d63c305de5a5.png)

仮想光学ディスクファイルを選択して先ほどダウンロードしたLinuxのイメージファイルを選択します。
![コメント 2019-04-28 000532.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403521/95ae9dc7-4736-719c-89a0-f451c565bf20.png)


完了したらLinux mintを起動します。

うまく起動したらデスクトップ上のCDアイコンからLinux mintをインストールします。
※これしないとLinux mintはちゃんと入りません。あくまで起動を行っただけです。
　
Linux mintのインストールは画面の表示に従って設定するだけで特に解説もないので割愛します。

その他細かい設定も自分の好みに合わせて変更しておくといいと思います。

また、Linuxを扱う以上、CUIの使用からはどうやっても逃れることはできません。
CUI苦手なのでGUIだけでなんとかしようと思ったけどできませんでした。

でもlsコマンドすら知らなかった僕でも環境構築できたので何とかなります。
気合入れて立ち向かっていきましょう。
次項でもCUIでRubyのインストールを行います。

##Rubyの環境構築
Linux mintがうまくインストールされたら次はRubyの環境構築です。
[ここ](https://github.com/rbenv/ruby-build/wiki)を参考にしてます。

環境構築には以下の物が必要なのでインストールします。

- Git
- rbenv
- ruby-build
- Ruby
- Ruby on Rails

それでは順番に行きましょう。

###Gitのインストール
Gitはバージョン管理システムです。
知らない人はググりましょう。

まずはmintの端末(Winでいうコマンドプロンプトみたいなもの)を開いて

```
$ sudo apt update
```
と入力しておきましょう。
一応最初なので解説しておくと

- su→root権限を持ったユーザ
- sudo→suのユーザ権限(root権限)でコマンドを実行
- apt→パッケージ管理用のコマンド類
- apt update→パッケージを更新するコマンド

こんな感じで構成されています。
つまりこのコマンドはroot権限でパッケージを更新するってコマンドです。

まあなんとなくで良いのでコマンドが組み合わさって出来ているんだなって理解しましょう。
脳死でコピペしてるとハマった時にえらい目に遭います。

次に

```
$ sudo apt install git
```

と入力します。
意味は分かりますよね。

インストールできたか確認するためバージョンを確認しましょう。

```
$ git --version
```

バージョン情報が表示されたら大丈夫です。
ほかのアプリをインストールしたときでもこのバージョン確認はなるべく行いましょう。
また、アプリがインストールされているかどうかの確認も行えるので覚えておきましょう。

次行きます。

###rbenvのインストール
rbenvはRubyのバージョンを管理するためのツールです。
便利というか必須なのでとりあえず入れておきましょう。

```
$ git clone https://github.com/sstephenson/rbenv.git ~/.rbenv
```

###ruby-buildのインストール
rubyをインストールするために必要なrbenvのプラグインです。
入れましょう。

```
$ git clone https://github.com/sstephenson/ruby-build.git ~/.rbenv/plugins/ruby-build
```
ruby-buildに必要な環境があるのでそれも入れときます。

```
$ apt-get install autoconf bison build-essential libssl-dev libyaml-dev libreadline6-dev zlib1g-dev libncurses5-dev libffi-dev libgdbm5 libgdbm-dev
```

ついでにパスを通す必要があるんですがここ僕かなりつまったのでもうGUIでやりました。
ホームの**.bashrc**というファイルを開いて

```bash

export PATH=$HOME/.rbenv/bin:$PATH
eval "$(rbenv init -)"
```
って追記してください。

**.bashrc**ってファイルはシェル(一先ず端末って理解で大丈夫です)起動時に１回実行されるファイルなので
シェル起動時に毎回設定したい内容をここに入力しておくんだそうです。
だから今回はPATHっていう環境変数を指定したパスにする設定を毎回呼び出すようにしました。
難しかったので勉強しておきます、、、

次行きます。

###Rubyのインストール
rbenvのコマンドを使ってインストールしていきます。

まず

```
$ rbenv install --list
```
でインストールできるRubyのバージョンの一覧が出ると思います。

そして

```
$ rbenv install x.x.x
$ rbenv rehash
```
と入力してください。
(x.x.xはインストールしたいバージョンを入力)

Rubyのバージョン設定もしておきます。
rbenvでのバージョンの指定方法には**global**と**local**の2通りがあるんですが
**global**は基本的に使用されるRubyのバージョン
**local**は別ディレクトリにバージョン情報を作ってそれを読み込んで使用されるバージョン
って感じなので今回は**global**にだけ設定します。

```
$ rbenv global x.x.x
```

設定が完了しているか確認しておきましょう。

```
$ ruby -v
$ rbenv versions
$ which ruby
```
rubyのバージョンが正しいこと、
自分のインストールしたバージョンに*が付いて表示されていること、
表示されたパスが
**/home/(ユーザ名)/.rbenv/shims/ruby**
となっていればパスは通っていますので大丈夫です。
違っていれば.bashrcファイルを確認してみてください。
###Ruby on Railsのインストール
やっとここまできました。
最後は簡単です。

自分のインストールしたいバージョンを選択して実行するだけです。
一先ずグローバルインストールしてます。
また、railsチュートリアルでbundlerについての説明があるのでbundlerについては省きます。
railsチュートリアルでrailsのインストールもあるのでrailsチュートリアルをこれから行う人は
ここは飛ばしてもよいかもしれません。

```
$ gem install rails -v x.x.x
```

##Visual Studio CodeをRubyに対応させる
一先ずお疲れさまでした。

でもまだRuby(Ruby on Rails)の環境構築が済んだだけです。
ここからはより快適にRuby on Railsライフを送るためにIDEを使用したいと思います。
Vimなんて知りません。...いつか勉強します。笑

今回は業務で使用したことのあるVisual Studio Codeを選びましたが
正直IDEはなんでもいいと思います。
Atomとかのテキストエディタでもいいと思います。好みの部分もあると思うので。

###Visual Studio Codeをインストールする
ここから[ダウンロード](https://azure.microsoft.com/ja-jp/products/visual-studio-code/)して下さい。


###Visual Studio Codeにプラグインを追加する
Visual Studio CodeはそのままではRubyに対応していません。
なのでプラグインを追加して対応させます。

Visual Studio Codeを開いて
![コメント 2019-04-28 022355.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403521/0f55c767-ebea-8024-1d23-1a637b0a44f3.png)

拡張機能タブを開いてください。

画像のツールバーが日本語表記になっているのはお気づきでしょうか。
Visual Studio Codeはデフォルトは英語表記なので使いづらいですよね。
なのでまず日本語表記にするプラグインを入れます。

拡張機能タブの検索欄に"japanese"と入力してください。
![コメント 2019-04-28 023006.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403521/5d48eb87-0dd0-ea42-b16d-002e49eb5632.png)
画像に表示されているプラグインをインストールしてください。
(現在インストールされてしまっているので画像はアンインストールになっています。)

次にRubyに対応させるためのプラグインを入れます。
拡張機能タブの検索欄に"Ruby"と入力してください。
![コメント 2019-04-28 023332.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403521/fd29d002-a93a-2085-c055-2dfb030f9c04.png)
再び画像に表示されているプラグインをインストールしてください。
(現在インストールされてしまっているので画像は以下略)

これでRubyに対応した!!と思いたいんですがRubyに対応するプラグインは
依存しているgem(Rubyのライブラリ的なもの)があるのでそのgemもインストールしなければなりません。

インストールしましょう
[ここ](https://impsbl.hatenablog.jp/entry/RubyInVSCode1)を参考にさせて頂いています。

```
$ gem install rubocop
$ gem install ruby-debug-ide
$ gem install debase
$ gem install rcodetools
$ gem install ruby-lint
$ gem install reek
$ gem install faster
$ gem install debride
```

正しくインストールされていることを確認したら次。
##Visual Studio Codeを設定する
Visual Studio Codeの設定タブ(ファイル→基本設定→設定)を開いて
拡張機能→Ruby  configurationを開く。

そして画面通りに設定してください。
![コメント 2019-04-28 024439.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403521/b5626ac5-09ae-9697-e078-4adac85171c1.png)

設定できたらLint欄のjsonファイルを開きます。
![コメント 2019-04-28 024711.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403521/99240ea4-b1ab-d5ad-3421-5f5b19869609.png)
開いたら次のようにjsonファイルを書き直してください。

```setting.json
{
    "ruby.lint": {
        "reek": true,
        "rubocop": true,
        "ruby": true, //Runs ruby -wc
        "fasterer": true,
        "debride": true,
        "ruby-lint": true
    },
    "ruby.intellisense": "rubyLocate",
    "ruby.codeCompletion": "rcodetools",
    "ruby.format": "rubocop",
    "ruby.useLanguageServer": true,
    "ruby.locate": {
        "exclude": "{**/@(test|spec|tmp|.*),**/@(test|spec|tmp|.*)/**,**/*_spec.rb}",
        "include": "**/*.rb"
    }
}
```

これでVisual Studio CodeでもRubyの自動補完やデバッグができるようになりました。
お疲れさまでした。

#あとがき
初めての環境構築でつまりまくったので備忘録兼だれかの手助けができればと思い、
環境構築後、改めて情報収集をして書き上げました。

同じようなことをしてる人がいなくてつぎはぎの情報をかき集めながら
知らないことはその場で勉強しながら行ったので3日もかかりました。笑

パスを通すところはいまだに謎です。
あそこで多分3時間ぐらいハマってました。
勉強します。

あまり文章を書くことがないので非常に読みづらい記事だとは思います。
多分いくつかの記事に分けたほうがスマートだったのかもしれませんが

この記事が知らない誰かの役に立てることを祈ります。

あなたも是非快適なRuby on Railsライフを!!!