【最新版Rails環境構築】RailsアプリをVScodeで開きブラウザ表示させるまでの手順
はじめに：
RailsアプリケーションをVisual Studio Code（以下VScode）で開き、そこからブラウザ（Google Chrome）で表示させるまでの手順をまとめている。プログラミング初学者がVScodeを用いてRails環境の構築をスムーズに行えることを目的としている。
この記事を読むことで得られる結果：
ローカル環境（自分のPC）にインストールされているVScodeからRailsアプリケーションをブラウザで表示することが可能となる。
開発環境：
- windows 11
- Vscode 1.87.2
- Ubuntu 22.04
- wsl 2.1.5.0
- ruby 3.2.3
- rails 6.1.7
- rbenv 1.1.2
- sqlite3 3.37.2
- node 12.22.9
- nmp 10.5.0
- yarn 1.22.22
手順：
1．Ubuntu(22.04.3 LTS)のインストール
- Microsoft Storeを開き、検索ボックスに「Ubuntu」と入力し、インストールを押す。
Microsoft Storeの画面
Ubuntuとは
Linux系のOSのこと。仮想環境を作ることができる。
2．Vscodeのダウンロード
3： ブラウザを開き、Vscodeのインストールサイトへ移動し、インストールを押す。（https://code.visualstudio.com/download）
VScodeダウンロードの画面
3．wsl2のインストール
1: ターミナルを開き、以下のコマンドを実行する。
wsl --install
wsl2とは
Windows Subsystem for Linux 2の略。Linux（先ほどのUbuntu）を稼働させるためのもの。
2: usernameとpasswordを入力し、以下の表示がでていればインストール成功。
PS C:\Users\...> wsl --install
インストール中: Ubuntu
Ubuntu がインストールされました。
Ubuntu を起動しています...
Installing, this may take a few minutes...
Please create a default UNIX user account. The username does not need to match your Windows username.
For more information visit: https://aka.ms/wslusers
Enter new UNIX username:
New password:
Retype new password:
passwd: password updated successfully
この操作を正しく終了しました。
^[[24;5~Installation successful!
To run a command as administrator (user "root"), use "sudo <command>".
See "man sudo_root" for details.
Welcome to Ubuntu 22.04.3 LTS (GNU/Linux 5.15.146.1-microsoft-standard-WSL2 x86_64)
* Documentation: https://help.ubuntu.com
* Management: https://landscape.canonical.com
* Support: https://ubuntu.com/advantage
This message is shown once a day. To disable it please create the
/home/.../.hushlogin file.
...@DESKTOP-R2IF631:~$
4．rbenvを用いてRubyをインストール
1: rbenvをインストールする。（パスワード入力し、「Y」を押す）
sudo apt install rbenv
rbenvとは
Rubyのバージョン管理ツール。任意のバージョンにいつでも切り替えることができる。
例）2つの任意のバージョンをインストールした
①Ruby 2.2.0 （こちらを使用中）
②Ruby 3.3.0 （こちらを使用したい）
自己学習している教材のrubyのバージョンが3.3.0だとすると、2.2.0➡3.3.0へ切り替えることができる。
2: ruby-buildをインストールする。
git clone https://github.com/rbenv/ruby-build.git "$(rbenv root)"/plugins/ruby-build
ruby-buildとは
Ruby をバージョンごとに異なるディレクトリにビルドするためのツール。
3: libyamlとlibffiをインストールする。
sudo apt-get install libyaml-dev libffi-dev
libyamlとは
YAMLファイルを簡単に扱うためのライブラリのこと。
libffiとは
あるプログラミング言語から他のプログラミング言語で定義された関数を利用するための、関数インターフェース・ライブラリのこと。
4: Rubyをインストールする。（バージョンを指定することが可能）
rbenv install 3.2.3
5: Rubyの開発用ヘッダーファイルをインストールする。
sudo apt-get install ruby-dev
ヘッダーファイルとは
プログラムのソースコードの一部であり、そのプログラムにおいて使用される変数や定数、関数、その他あらかじめ宣言する必要があるデータ・命令の宣言を記述した文書ファイルのこと。
6: インストールされているRubyの一覧を確認する
rbenv versions
7: インストールされているRubyのバージョンを切り替える。使用しているバージョンに*が付く。
rbenv global 3.2.3
5. Railsをインストール
1: Bundlerをインストールする。
sudo gem install bundler
Bundlerとは
gemのバージョン間の依存関係を解決しながらGemfileに列挙したすべてのgemをインストールしてくれるツールのこと。
2: Railsをインストールする。（バージョン指定可）
sudo gem install rails -v "6.1.7"
3: ターミナルを再起動し、Railsがインストールされたか確認する。
rails -v
6. SQlite3をインストール
1: SQlite3をインストールする。
sudo apt install sqlite3
2: SQlite3をインストールされたか確認する。
sqlite3 --version
SQlite3とは
オープンソースの軽量RDBMS（データベース管理システム）のこと。
7. node.jsとnpmをインストールする。
1: node.jsとnpmをインストールする。
sudo apt install -y nodejs npm
2: nをインストールする。
sudo npm install n -g
3: 最新のnode.jsとnpmをインストールする。
sudo n stable
4: 1でインストールしたnode.jsとnpmをアンインストールする。
$ sudo apt purge -y nodejs npm
$ sudo apt autoremove -y
5: node.jsとnpmのインストールおよびバージョンを確認する。
$ node -v
$ npm -v
8. yarnをインストールする。
1: yarnをインストールする。
sudo npm -g install yarn
9. Railsアプリケーションを作成
1: Railsアプリケーションを作成する。
rails new SampleApp
2: アプリケーションのディレクトリへ移動する。
cd SampleApp
3: Webpackerをインストールする。
rails webpacker:install
10. Vscodeを開く
1: ターミナルからVScodeを開く。（アプリケーションのディレクトリで）
code .
2: Rails serverを立ち上げる。
rails server
3: （http://127.0.0.1:3000）にアクセスし、ブラウザで表示されるか確認する。
ブラウザでの表示画面
参考サイト
おわりに
今回、UbuntuにrubyやRailsなどをインストールし、VScodeを用いながら、アプリケーションをブラウザで表示するまでの流れを解説した。プログラミング初学者でもステップを踏めば簡単に開発環境を整えることができることがわかった。
Discussion