おうちで環境構築をした ( Windows, Ruby, Rails, JS, TS, React )

ジョブカン事業部のアドベントカレンダー 7 日目の記事です！

新卒がおうちで環境構築をしたときの手順を書いています。

0. はじめに

ごあいさつ

はじめまして、入社1年目のasmriと申します。
この度、アドベントカレンダーに投稿する機会をいただき、初めてQiitaで記事を書く運びとなりました。
この記事は私の現在の環境構築への理解を手順とともに残すための備忘録に近いものです。
お手柔らかにご覧いただければと思います。

記述がされるもの / されないもの

• 記述されるもの
  • 究極の出典 ( 公式ドキュメント )
  • 私の曖昧な理解
  • 私の実行した環境構築の手順
• 記述されないもの
  • 正確無比な内容
  • 説明できないものの説明
  • 各種コマンドの説明 引数の解説
• 記述されたりされなかったりするもの
  • 直接の出典

コマンドの書き方などに関しては公式ドキュメントなどの公的なページをできる限り記載するようにいたします。

されたりされなかったりの基準についての例

1. 特定のエラーが発生した際、そのエラーの記事を参照して解決した際は直接の出典を記述する
2. インストール方法の記事を見たが、インストール方法がまるまる公式ドキュメントに記述されていた場合は直接の出典を記述しない

究極の出典についても私が究極の出典足り得ると考えたものを記載しているだけにすぎませんので、基準はかなり曖昧です。ご容赦ください。

記事の流れについて

簡単な流れとして
WSLのインストール
-> 各種ツールのインストール ( Git, VSCode )
-> 言語処理系のインストール ( Ruby, JavaScript )
-> ライブラリやフレームワークのインストール ( Ruby on Rails, React )

という構成になっています。

補足

書き方の形式について

• $で始めているもの: はコマンドライン上で実行しているコマンド
• x.x.x など: バージョンを示したいもの
• >で始めているもの: 対話形式の状態での入力を表したいもの
• <日本語>の形式を取っているもの: 任意の文字列を入れることを示すマーク <>は外して入力する

環境情報

OS : Windows 11 Home 24H2

1. 環境構築 について

環境 が指すもの

環境構築とは何を指すのでしょうか。言葉通り取れば環境を構築することと思えますが、そもそもここでいう環境が一般的に何を指すのか私はあまりわかっていません。多少文脈によるところも大きいのかもしれないので、この記事の文脈における「環境」を明示するとすれば、
「Ruby, JavaScript, TypeScript のコードが実行でき、Ruby on Rails, Reactが搭載されている環境」 です。
この環境がマシン ( PC ) 上に構築され、Ruby, JavaScript, TypeScriptについて動作の確認ができるところをゴールにしています。

環境構築の手法について

一概に環境を構築するといっても手法は様々あるようで、主に以下の４つが主流な方法として挙げられるかと思います。

1. 各種ツールをすべて直接ホストOS ( ここではWindowsマシン ) 上にインストールする方法
2. ホストOS上にツールを入れるが、言語処理系のインストールにバージョン管理ツールを利用する方法
3. 仮想マシンに全てのツールのインストールを行う方法
4. コンテナ技術を利用し、コンテナ上に言語処理系のインストールを行う方法

それぞれメリットデメリットあるのですが、ここでは2. と3. の合わせ技のような形の仮想マシン上でバージョン管理ツールを利用して環境構築を行います。
こちらのメリットとしては

• 1.の手法よりもバージョン単位でのインストール / アンインストールの手間が少ない
• 4.の手法よりも学習コストが低い

などが挙がると思います。
ここではWSLというWindows上でLinuxを仮想的に動かせるソフトを利用し、その上でバージョン管理ツールを利用する方法を取ります。

2. WSL のインストール

WSLとは

公式の説明

私の理解

Windows Subsystem for Linux の略で、Windowsで開発をするなら必須レベルのやつ。
Linuxのコマンドが実行できるので、Windows特有のコマンドを探したりで悩まされることもなく、Windowsに既に入っているソフトなどと干渉して変な挙動したりが無いので安心。

WSLのインストール手順

WSLの最新版WSL2をインストールします。
参照 : WSLのコマンド

1. ターミナル を開く
2. タブバーの ∨ から Windows PowerShell を開く
3. 利用可能なLinuxディストリビューション一覧を表示する
   $ wsl --list --online を実行
4. 入れたいディストリビューションを指定してインストールする
   ここでは一覧からUbuntuの一番新しい ( 数字の大きい ) ものを選択
   $ wsl --install --distribution Ubuntu-24.04
5. インストールされているか確認する
   $ wsl --list --verbose
   インストールしたUbuntu24.04が表示されているのでﾖｼ
   名前の左に*がついてるのを確認 ( 既定のディストリビューションになっていることを確認 )

WSLの初期設定

1. WSLのデフォルトのディストリビューションを起動し、ホームディレクトリに移動する

   1. $ wsl ~

      > Provisioning the new WSL instance Ubuntu-24.04
      This might take a while...
      Create a default Unix user account: 
      

   2. と対話型でアカウント名を教えてねと言われるので、ユーザー名入力して確定

      > Create a default Unix user account: <ユーザー名>
      

   3. と次にパスワードを聞かれるので入力 ( 文字数のカウントとかなくて不安になるけど普通に入力できる )　

      > New password:　
      

   4. 再度パスワードを要求されるので同じものを入力

      > Retype new password:
      

2. ここまででWSLの初期設定完了

3. 現在の階層を確認
   $ pwd
   自分が/home/<ユーザー名>にいたらﾖｼ ( ここがホームディレクトリ )

3. Git のインストール

Gitとは

公式の説明

私の理解

バージョン管理ツール。ファイルの変更された部分だけを抽出してその変更の意図を書き込んで記録できるすごいやつ。
セーブデータが作れる感じ。ファイル編集ミスったらミスする前に戻れる。
GitHubにアカウントを作成して接続できるようにするとセーブデータのバックアップみたいにおいておけるようになる。
また、GitHub上のリポジトリのURLにアクセスしてそこにあるファイルを持ってくる ( クローンする ) こともできるので、今回はこれを利用して各種言語処理系などのツールをインストールするために利用する。

Git のインストール手順

参照 : WSLでのGitのインストール
参考 : Linuxマニュアルページ - gitコマンド, Ubuntuマニュアルページ - aptコマンド

1. Ubuntuに標準搭載されているバージョン管理ツールaptのパッケージapt-getを利用してGitをインストールしたい
   1. 現在地を確認
      $ pwd
=> /home/<ユーザー名>であればﾖｼ
   2. aptが入っていることを確認 ( ヘルプを確認するコマンド )
      $ apt --help
   3. 「aptでインストールまたはアップグレード可能なものリスト」のバージョンを最新にする
      管理者権限が必要なためコマンドの頭にsudoを付けて実行
      $ sudo apt update
   4. aptで管理しているツールのうちでアップグレード可能なものをアップグレードする
      $ sudo apt upgrade
2. apt-getでインストール可能なものの一覧からGitを探す
   apt-cache search git | grep git
   前のコマンドだけでは多すぎるので、grepでgitに一致するものだけを抽出した ( それでも多かった... )
3. apt-getを利用してGitをインストール
   $ sudo apt-get install git
4. gitコマンドが実行できることを確認
   $ git --help
   コマンドの使い方が表示されれば完了

4. Visual Studio Codeのインストール

VSCode とは

公式

私の理解

エディタ, ターミナルなど開発に必要な道具をたくさん持ってる便利な道具箱。
今回はほぼ純粋なエディタ ( ファイル編集ソフト ) としてのみ利用。

VSCodeのインストール

1. Microsoft Store でVisual Studio Codeを検索して探し、インストール

VSCodeの初期設定

1. WSLに戻り、ホームディレクトリに移動
   $ cd ~
2. VSCodeを起動
   $ code .と入力
3. VSCodeが起動したら親ディレクトリも信用してよいか聞かれるので任意でチェックを入れて進む
4. 左サイドバーから拡張機能のタブを選択して、WSLを検索してインストール
   ( ついでに日本語化のためのJapanese Language Pack for Visual Studio Codeも入れたり )
5. 右上の×で閉じて再度$code .で開いた際に上のディレクトリ名が表示されているところにWSLの表示があれば大丈夫

5. 各言語の実行環境の用意

最初に、ホームディレクトリ配下に開発環境を入れるディレクトリを作成する。

1. $ mkdir <ディレクトリ名>でディレクトリを作成
2. $ cd <ディレクトリ名>でその階層に移動

Rubyの実行環境の用意

1. 環境構築についてで書いたようにRubyの実行環境にはバージョン管理ツールを利用する。バージョン管理ツールはrbenvを選択。

rbenvのインストール

参照 : Gitを利用したrbenvのインストール方法

1. rbenvのファイル群をGitHubページから取得
   $ git clone https://github.com/rbenv/rbenv.git ~/.rbenv
2. bashに環境変数を設定する
3. 環境変数を変更したので再起動
   $ exitや×などで抜けて再度WSLを立ち上げ、ホームディレクトリ配下の自身で作成したディレクトリに移動 ( $ cd <ディレクトリ名> )
4. rbenvのコマンドでインストール可能な安定版Ruby処理系のリストを表示する
   $ rbenv install -l
installコマンドが使えないといわれるので、インストール手順のNoteを読むとruby-buildが必要と書いてあるので
   1. 拡張機能のruby-buildをインストール
      $ git clone https://github.com/rbenv/ruby-build.git ~/.rbenv/plugins/ruby-build
5. 再度rbenvのコマンドでインストール可能な安定版Ruby処理系のリストを表示する
   $ rbenv install -l
6. 公式のRuby ブランチごとのメンテナンス状況やRuby のリリース一覧を確認する
7. インストールしたいものを選びインストール
   $ rbenv install x.x.x
   Cのコンパイラが存在しないといわれてエラーになる
   1. ruby-buildのページでUbuntu向けに必要なツールのおすすめがあるので、このコマンドを実行
   2. $ sudo -y apt-get install build-essential autoconf libssl-dev libyaml-dev zlib1g-dev libffi-dev libgmp-dev rustc
8. 自分のいるファイルが<ディレクトリ名>のディレクトリの状態にする
9. 再度インストールしたいRuby処理系のバージョンをインストール ( インストールの待ち時間長め )
   $ rbenv install x.x.x
10. そのディレクトリで使うRuby処理系のバージョンを上でインストールしたものに設定する
    $ rbenv local x.x.x
11. Ruby処理系のバージョンを確認する
    $ rbenv version
x.x.xが表示されれば完了

Rubyの実行

テキトーなRubyのファイルを作成して、それがちゃんと実行できるかを確認します。

1. サンプルファイルを作成
   $ touch sample.rb
2. VSCodeでファイルを開く
   $ code sample.rb
3. ファイルにputs "Hello Ruby!!"など実行が確認できるものを記述して保存 ( Ctrl + S )
4. WSL上で実行
   $ ruby sample.rb
   期待される出力が出れば終了

JavaScriptの実行環境の用意

Rubyと同じくバージョン管理ツールを利用したい考えで、npmを選択、加えて、本来はブラウザで実行が確認できるものの、node.jsは入れたほうがよいと書籍に書いてあったのでnode.jsもインストールする。するとnpmはnode.jsインストール時についてくるので、node.jsのみのインストール手順を書く。
node.jsもまたバージョンが存在するため、これのバージョン管理ツールを導入する。 ( nvmを選択 )
参照 : nvmのgitコマンドでのinstall手順

1. 手順に従ってホームディレクトリ配下にリポジトリをクローンする
   git clone https://github.com/nvm-sh/nvm.git ~/.nvm
2. VSCodeで~/.bashrcを開き、以下の環境変数を追加
   .bashrc

   export NVM_DIR="$HOME/.nvm"
   [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
   [ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"
   

3. 環境変数を変えたのでWSLを再起動
4. $ nvm lsで現在入っているものがないことを確認 -> N/Aが返ってくる
5. nvmでインストール可能な一覧を取得
   $ nvm ls-remote
   ( メジャーバージョン２つごと ( 偶数番 ) にIronだのJodだの名前がついてるみたいだけど一旦気にしない、一番大きい数字のLTSを確認だけする )
6. node.jsのLong term Support ( LTS )版を入れる
   $ nvm install --lts
7. インストールされていることを確認
   $ nvm version
x.x.xが返ってきて成功
8. npmの初期設定をする
   $ npm init -y
package.jsonができたら成功
9. $ npm versionって打つとnpmの各パッケージのバージョンが出る
10. nodeとnpmが入っていることを確認できて完了

JavaScriptの実行

JavaScriptのファイルもサンプルを作成して実行する。

1. sample.jsを作成してVSCodeで開く
   $ code sample.js
2. ファイルにconsole.log("Hello JS!!")など実行が確認できるものを記述して保存 ( Ctrl + S )
3. WSL上で実行
   $ node sample.js
   期待される出力が確認されたらOK
4. 対話形式での動作確認
   $ nodeで入ってプログラムを記述し実行 > .exitで抜ける

TypeScriptの実行環境の用意

npmを利用してインストールすることを選択
参照: npmを利用したTypeScriptのインストール

1. npmでTypeScriptの最新パッケージをインストール
   $ npm install typescript --save-dev
2. トランスパイラを実行する指示があるので、行う
   $ npx tsc

TypeScriptの実行

1. sample.tsのファイルを作成
   $ touch sample.ts
2. sample.tsのファイルを編集

   const msg :string ="Hello TypeScript!!";
   console.log(msg)
   

   のようにして実行が確認できるものを記述して保存 ( Ctrl + S )
3. WSL上でnodeコマンドを利用し実行
   $ node sample.ts
   期待される出力が確認できれば成功

6. 各言語のライブラリやフレームワークの用意

Ruby on Rails のインストール

参照: gemでRails をインストールする
Rubyのパッケージ管理ツールgemを利用してRuby on Railsもインストールできるそうなので、これを利用。
gemはRubyのインストール時に利用可能になっているため、インストールが不要

1. gem が利用できることを確認
   $ gem --help
2. Ruby on Railsのパッケージ ( gem ) をインストール
   $ gem install rails
3. Ruby on Railsがgemに追加されていることを確認
   $ gem list | grep rails

Railsアプリケーションの作成

参照: 最初のRailsアプリケーションを作成する

1. アプリケーションの名前を指定してrails newする
   $ rails new <アプリケーション名>
2. アプリケーション配下に移動する
   cd <アプリケーション名>
3. rails serverを立ち上げる
   $ rails server
4. ブラウザからlocalhost:3000にアクセスし、Railsのロゴが表示されることを確認
5. WSLに戻ってrails serverを切断 ( Ctrl + C )
6. 動作確認完了

Reactの実行環境の用意

ビルドツールにはViteを利用してReactをインストールする。
フレームワークはRailsで間に合っているので、ViteとReactにそれぞれ必要なものだけ別途インストールする

1. Rails配下で実行予定のため、Railsアプリケーション直下でもnpmの初期化をしておく
   $ npm init

Viteのインストール

Vite とは

公式

私の理解

なんか速いが語源になってるやつ、速そう。
フロントのファイルを構成するビルドツールというのがいて、その一種。

Vite のインストールを行う

参照 : Vite 手動インストール
$ npm install -D vite

1. index.htmlを配置
   $ touch index.html
2. index.htmlを編集
   code index.html
<p>Hello Vite!!</p>などのhtmlを記述
3. 動作確認
   $ npx vite
localhost:5173 で記述したhtmlが表示されていれば成功
4. Reactの実行には素のViteでは無理なのでReactのビルドがされるように拡張機能を入れる必要がある
   参照 : プラグイン一覧, プラグインの使用
5. package.jsonのdevDependenciesに追加
   $ npm install -D @vitejs/plugin-react
6. viteのconfigファイルにプラグインを追加する
   1. vite.config.tsを<アプリケーション名>直下に配置されていることを確認し
   2. 編集
      $ code vite.config.ts
import react from '@vitejs/plugin-react'を追記
      以下の形になるよう、difineConfigの配列にReactプラグインを追加
   vite.config.ts

   export default defineConfig({
     plugins: [react()],
   })
   

Reactのインストール

参照 : 既存のプロジェクトにReactをインストールする

1. Reactに必要なパッケージをnpmで入れる
   $ npm install -D react react-dom
2. ReactでTypeScriptが使えるようにするためのツールのインストール ( 型定義用など )
   参考 : ReactでTypeScriptを使用する
   $ npm install -D typescript @types/react @types/react-dom

これで完成

8. おわりに

振り返り

まだ実用するには設定ファイルの編集などが必要ですが、ひとまず一通りの道具が揃ったような状態までは持ってこれたと思います。とりあえず満足です。
TypeScriptの環境構築周りの知識の怪しさがかなりあり、tscとTypeScriptのパッケージを両方入れていたりするのですが、もしや一つで大丈夫か？とか思ったので、後日調べて調整しようと思います。
他にも調べる途中でRubyもJavaScriptもバージョン管理ができそうなmiseの存在などを知り、便利そうだなと思ったりもしました。

初めて記事を書いたもので、かなり記事らしからぬ部分もあるかと思いますが、お目こぼしいただければ幸いです。

改めまして、ここまでお読みいただきありがとうございました。

お知らせ

DONUTSでは、新卒中途を問わず積極的に採用活動を行っています。

私の所属するジョブカン事業部でも一緒に働けるエンジニアを募集しています！！！