初学者によるubuntuでのRails + React で駅案内システム作り①～下準備編～

# はじめに
鳥辺茜は激怒した。必ず、かの邪知暴虐な言語たちを触れるようにならねばと決意した。鳥辺茜にはプログラミングがわからぬ。鳥辺茜は、同人作家である。漫画を描き、旅をして暮らして来た。けれども仕事に対しては、人一倍に敏感であった。
飽きないうちに頑張って完成まで持ち込みたいところです。

# きっかけ
　諸々でフロントエンドエンジニアになることになりました。急に肩ポンでフロントエンドやってねということになりましたが、JavaScriptなんでちょちょっとJQuery書けてやったー！納品！とやっていた経験しかなく、これまでRuby on Rails 5系で開発をほぼぼっちでやっていました(ぼっち・ざ・しすてむかな？)が、フロントエンドなんてちょっとhtml、css、わずかばかりのjsで何とかなってきたのでさぁ大変！　React慣れなきゃ！　ということで色々本買ったり通信教育を受けたり、そして現場で触ってきたりしておりました。　ただ、それでは実際に一から実装してきたわけではないので中々身に着いた実感が湧いてきませんでした。
　ちょっと時間が経過し、余裕が出てきたような気もしなくもないので、これを機に一からRailsとReactで、API通信して色々するシステムを作ってみようと思い、一念発起頑張ることにしました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752048/2acff7b0-c5df-b562-3ac5-347dfdbfbe3a.png)
最終的にこんな感じのを作りたいね～という当初のイメージ図です。
※超初心者なので一から丁寧に書いてます。右サイドバーにある目次に従って適宜ガンガン飛ばして見てください。

# 諸々バージョン情報一覧
```
ruby: 3.0.2p107 (2021-07-07 revision 0db68f0233) [x86_64-linux-gnu]
Rails: 7.0.4.1
node: v18.13.0
PostgreSQL: 14.5 (Ubuntu 14.5-0ubuntu0.22.04.1)
react: 18.2.0
```

# 記事一覧
- [初学者によるubuntuでのRails + React で駅案内システム作り①～下準備編～](https://qiita.com/Akane-Toribe/items/3366b054e9a0f287f401)
  - 今ここ！
- [初学者によるubuntuでのRails + React で駅案内システム作り②～Rails＋ReactでAPI通信編～](https://qiita.com/Akane-Toribe/items/604234a672ff3982b347)
- [初学者によるubuntuでのRails + React で駅案内システム作り③～Scaffold機能を使わずCRUD～](https://qiita.com/Akane-Toribe/items/fb345e5c59c7958b9e66)
- [初学者によるubuntuでのRails + React で駅案内システム作り④～１：１、１：ｍで対応したモデルの登録更新、JSON出力～
](https://qiita.com/Akane-Toribe/items/273f315f20d138b7d5e1)

# 下準備
私が普段原稿制作しているPCはWindows機。これとRailsの相性が最悪なことは以前の開発経験で把握していました。幸いにも弊PCはメモリ128GB(ストレージではなく！)ガン積みつよつよPCなのでVirtual Box内でUbuntuを立ち上げ開発を進めることにしました。(コンテナ開発がいいよとは聞かされていますが、理解が進んでからにします、、、)

## VSCode導入
Windows機に入れます。この辺は詳しく書きません。流石に許して。。。。。。
VSCodeのダウンロードはこちらからどうぞ。
https://azure.microsoft.com/ja-jp/products/visual-studio-code

## VirtualBox導入。
### VirtualBoxインストール
まずは
https://www.virtualbox.org/
にアクセス。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752048/783b48bf-9956-a1f5-4ba0-3052af2d4d3b.png)
英語にめげず真ん中のDownload VirtualBox 7.0を押下。すると
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752048/2e5dd56c-e5b1-b0b3-a6c0-c850f1aa6b1f.png)
どれや念。となりますが、ここでWindows hostsを押下。あとは画面で従うままにInstallを実施。これ将来契約書を読まずにヤバめの契約をしてしまうやつと構図が似てますね。

### VirtualBox設定
さて、導入が完了したらVirtualBoxを立ち上げます。PCの再起動必要かも、その時は再起動しましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752048/5ae5bd00-6d95-03b7-0c21-5c726e833682.png)
はい、Env3となっているのは色々悪戦苦闘したからです。
この新規(N)を押下してください。
![Qiita説明用画像.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752048/76af3d8d-764a-5690-95a7-bdea0d60b93a.png)
名前は分かり易い名前にしましょう。タイプは``Linux``、バージョンは``Ubuntu (64-bit)``でいいでしょう。ISO Imageはひとまず空白でおｋ。完了したら「次へ(N)」を押下。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752048/8f94b85c-70e1-4434-37cf-7c2ebe2ac1f5.png)
お次はHardware設定。ここで詰まったのがUbuntuEnv3というダサい名前になっている原因になっていますが、
**Prosessorsは2以上にしましょう。**
これはマジです。1だと後々Ubuntuを導入する際に永遠に進まなくなります。私はこれで2日分の仕事終わりの余暇時間を消しました。
メインメモリはとりあえず困らないだけにしておけばいいと思います(4GBでも動くならいいんじゃないですかね)。**なお私のPCはメモリが128GBある化け物なので16GBにしました。32GBでも問題なしです**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752048/7b7c3d49-c8b6-0452-c4f8-e23403588e6b.png)
あとはハードディスク設定です。これはデフォルトのままにしておきました。仮想環境内で色々でっかいファイルを保存するわけではないですし。「次へ(N)」を押下しましょう。
![Qiita説明用画像2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752048/5cf3fbc3-9a1b-0aa8-212c-9591aef53d9a.png)
最後に確認画面が表示されます。こちらの内容で問題が無ければ「完了(F)」を押下しましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752048/21748877-389a-879c-4fa6-b75718f95297.png)
このように無事追加されました。

### Ubuntu設定
これでUbuntu導入や！　と虫のいい話はありません。この状態だとUbuntuを導入できる環境を整えたにすぎません。そういえば先程ISO Imageのところをすっ飛ばしましたね。こちら設定しましょう。
ISOイメージとは光学ドライブに保存するデータ形式のことを言います。Windowsをインストールするときに買ったCDをイメージしてもらえると分かり易いかと思います。あれのUbuntu版をどこかからダウンロードする必要があります。
ということで早速　https://www.ubuntulinux.jp/download/ja-remix へアクセスしましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752048/dbca149b-c108-e48f-c570-65f882406676.png)
表示されているUbuntuのISOイメージを導入します。バージョンはお好きな方で。
ダウンロードが完了したらまたVirtualBoxに戻ります。先程のVirtualBoxの一覧画面で歯車マークの「設定(S)」を押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752048/7e2b421c-1cfb-a2fb-0a2c-e9102aa3922c.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752048/9afc080a-057f-b37c-b902-916c9ef89190.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752048/74775908-9dc4-54c3-9da6-4977b11d35e1.png)
``設定>ストレージ>コントローラ: IDE 空``を押下すると光学ドライブやら云々が出てきます。こちらで先程ダウンロードしたUbuntuのISOイメージを挿入します。
これが完了したらいよいよ一覧画面に戻り、「起動(T)」を押下しましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752048/a9d27384-80a6-53c8-1d6b-3683727d2c1a.png)
ちｓっさ！！！！！！！！若くてよかった！！！！！(若さアピール)
これのTry or Install UbuntuでEnterキーを押下するといよりよ進み始めます。暫く置いておくと
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752048/d1556a2d-87f2-a70d-2033-fa0501ff9139.png)

初期設定画面！！！　なお、画面の表示が見切れている模様。

この記事は日本語ユーザが読んでいる想定なのでおとなしく日本語を選択します。見切れているのでtabキーでうまいことあたりを付けていきましょう。``tab``キー三回押下＋``Enter``キー押下で次の設定画面へ移ります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752048/aa0aa9d2-53ec-7bd8-2f39-988c24d6f0d7.png)
ここもJapaneseでいいでしょう。``Shift``と``Tab``キー同時1度押下＋``Enter``キー押下で進みます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752048/bd9cbe1f-b0dd-4a16-62b7-3f9baf1d5644.png)
こちらは「最小インストール」を選択してから``Shift``と``Tab``キー同時2度押下＋``Enter``キー押下で進みます。ちなみにここでの選択肢はそのままでも問題ないんですが、そうするとこの手順の最後の方での再起動でアホみたいに時間がかかります。今この記事のために立ち上げていますが今とても後悔しています。早く寝たい。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752048/57e46426-3aa9-7e49-c411-1b70d35ade00.png)
恐ろしい表示が出ていますが、これは仮想環境内のお話なので気にせず``Shift``と``Tab``キー同時1度押下＋``Enter``キー押下で進みます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752048/a061a712-70b4-1952-1acc-a2ddc357094e.png)
こだわりがなければ``Shift``と``Tab``キー同時1度押下＋``Enter``キー押下で進みましょう。私はここでSapporoと書きましたが正直意味ないです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752048/1f5fa119-2591-ff2e-d7cb-9e62cb539467.png)
最後にユーザ情報を登録します。覚えられるユーザ名、パスワードにしましょう。完了したら「あなたの名前」にフォーカスを当てた状態でば``Shift``と``Tab``キー同時1度押下＋``Enter``キー押下。これでインストールが始まります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752048/8bf44f89-419f-89ab-42ec-3de680f6064d.png)
完了！　あとは今すぐ再起動をして(これがめっちゃ時間かかります、その間は一枚でも多くイラストを描いたりしましょう)さっさと画面サイズをデカくしましょう。流石にこの小ささで色々やるのは心が折れそう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752048/77d9af16-8fb8-f6c7-d124-716c514ed1b0.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752048/4b86977b-0d86-0d33-bff6-8e3fbfddb1b8.png)
ログインを行った後左下の白い正方形9つのアイコンを押下
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752048/ec9b8a5e-a6be-e302-c589-350294d64aaf.png)
ちっせえ！！！耐えて設定アイコンを押下。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752048/cafba016-28a8-adf0-c96c-b0e9055e1f1f.png)
設定の左サードバーをスクロールすると「ディスプレイ」があるので、これで表示したいサイズを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752048/14bcfbc1-f2ab-8902-4aa9-0b41f99b7464.png)
これでもう問題なく使えるサイズになりましたね。
あとは更新作業をお忘れなく。
```
$ sudo apt update
$ sudo apt upgrade
```


## VSCodeとVirtualBoxを接続
これから仮想環境(Virtual Box)とVSCodeを繋いで開発を進めていこうと思いますが、ここで良い記事がありました。
https://qiita.com/niba2828/items/52bd7c54f19ac54695bb
こちらを参考にセットアップを進めました。最終的にVirtualBoxで
```
$ ssh <UserName>@localhost -p 2222
$ (パスワードを入力) 
```
で接続できるようになればもう勝ちです。
毎回作業時には
- Virtual Boxで仮想環境立ち上げ
- VSCode立ち上げ
- ssh接続コマンドを叩いて接続

で、閉じるときは
- VSCodeを閉じる
- Virtual Boxの電源を落とす(ファイル＞閉じる)

で行います。


# アプリ作成(Rails)
## 諸々インストール
まず肝心のRubyのインストールを行っていきます。
こちらのQiitaの記事を読みながら行いました。バージョンはとりあえず3.0.2を使っています。
https://qiita.com/kerupani129/items/77dd1e3390b53f4e97b2

お次はPostgreSQLの導入。こちらは下記サイトを参考に作りました。なお、新しくpostgresユーザ以外のスーパーユーザを作成しました。
https://zero-cheese.com/2474/

そしてRailsのインストール。
```
$ gem install rails
$ rails -v
```
これでバージョン確認が出来たらおｋ。

## とりあえずRailsアプリ作成
まずはRailsアプリの構築からスタート。管理側の画面になるためこちらはcssはbootstrapでサクッと作成。管理側の画面を凝ったりするつもりはないので、デザイン面ではbootstrapでサクッと実装してしまおうという魂胆です。なお、途中からbootstrapを入れようとすると結構めんどくさそうで、そのせいで途中放棄＋rails newした残骸が私の仮想環境下にあります。時間があればbootstrapの導入だけでもチャレンジしたいですね。

```
$ rails new <Project name> --database=postgresql --css=bootstrap
```

## GitLab設定
次にgitでの管理を実施。やはりssh keyは登録しておくに限る。ということでssh key設定から始めますか。
まず立ち上げほやほやの仮想環境には~./sshディレクトリは無いので
```
$ mkdir ~./ssh
$ cd ~./ssh
```
で作成し、遷移します。お次は鍵作成を実施。
```
$ ssh-keygen -t rsa
```
色々聞かれますが全て``Enter``キーでスキップします。
ちなみに1回目の質問では作成する鍵の名前を設定できますので、違う名前にしたいときは名前を入力してから``Enter``キーを押下しましょう。2回目、3回目はパスフレーズ(パスワードのようなもの)を設定する項目ですが今回はスルー。すると鍵のファイルが作成されます。
```
$ ls
id_rsa  id_rsa.pub
```
ちなみにid_rsaの方は秘密鍵、is_rsa.pubの方は公開鍵になります。
早速作成した鍵をgitLabへ登録しましょう。
https://gitlab.com/
でGitLabへアクセス(アカウント作成まだの方は作成を！)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752048/5c3ffb41-b2ea-4428-cfee-03151dfd7323.png)
左上のアイコン箇所を押下し、Preferencesを押下するとユーザ設定画面を開くことが出来ます。サイドバーでSSH Keysを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752048/81f87737-ea9a-0be1-e2d2-ee9b6952a74d.png)
Titleに良い感じの名前を(私は<UserName>@<UserName>-VirtualBoxにしました)、Keyに``id_rsa.pub``の中身を丸っとコピペして貼り付けて``Add key``を押下。最後に
```
$ ssh -T git@gitlab.com
```
を叩いて``Welcome to GitLab, @<UserName>!``が出ればOKです。
これを行って何が嬉しいかと言いますと、後で``git push``したりするときに毎回ユーザ名とパスワードを入力する手間が省けます。
次はGitLabのサイトでプロジェクトを新規作成します。ホーム画面の``New project``を押下。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752048/17f568cf-2838-df0c-a67c-a9f4db18051f.png)
ここではとりあえず右上の``Create blank project``を押下。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752048/d7b51f15-8278-8fcb-743b-43b1d96e7ee3.png)
こんな感じの画面になるので``Project name``はお好きな名前に、``Project slug``は良い感じの名前に設定。``Visibility Level``はひとまず``Private``を選択、``Project Configuration``は``Initialize repository with a README``にチェック。これでCreate projectを押下すれば無事作成完了です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752048/f9edac36-40e8-2773-8257-fe42c91383a3.png)
ここからは再びコマンドを叩き続けます。まずはRailsアプリを作成したディレクトリへ移りましょう。

```
$ git init
# 初期化実施

$ git add .
$ git commit -m "first commit"
# 初めてのcommit実施。

$ git remote add origin git@gitlab.com:<USER NAME>/<Project name>.git
# リモートで作成したプロジェクトに登録実施

$ git remote -v
# リモートで登録されているか確認を実施

$ git checkout -b first_task
# mainにプッシュすると怒られが発生するのでブランチを変更

$ git push origin first_task
# リモートにfirst_taskをプッシュ
```

さて、リモートでmainブランチへマージしてしまってローカルのmainもgit pullで最新化や！　となったところで思わぬ障壁が。
```
fatal: Invalid value for pull.rebase: false~
```
やかましいわ。とりあえず
```
$ git config --global pull.rebase false
```
を実施してから再度 git pullを実施。成功したので一安心。
## ちなみに
GitLabを一人で立ち上げたDmitriy Zaporozhetsさんはウクライナ、ハルキウ州在住の方です。ウクライナ侵攻で激戦区になりつつも最終的には国境までロシア軍を追い返した州ですね。

## database設定
お次はdatabaseの設定やります。
プロジェクトディレクトリ配下のconfig>database.ymlファイルを開きます。

```
default: &default
  adapter: postgresql
  encoding: unicode
  # For details on connection pooling, see Rails configuration guide
  # https://guides.rubyonrails.org/configuring.html#database-pooling
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
```
こちらを
```
default: &default
  adapter: postgresql
  encoding: unicode
  username: <UserName>
  password: <Password>
  host: localhost
  # For details on connection pooling, see Rails configuration guide
  # https://guides.rubyonrails.org/configuring.html#database-pooling
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
```

に変更を実施。postgreSQLの設定周りについては別記事を見ていただければです。これが完了したら
```
$ rails db:create
```
を実施、無事
```
Created database '<ProjectName>_development'
Created database '<ProjectName>_test'
```
こんな感じで作成されればOK。あとは
```
$ rails s
```
で表示確認をしてみて
![VirtualBox_UbuntuEnv3_21_01_2023_03_06_31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752048/38a00749-7eb7-0820-202f-3eef7963e078.png)
OKですね。

## 日本語化
お次は日本語化を実施します。管理の時に毎度英語を読むのは辛いので。。。
Gemfileファイルを編集します
```
# 日本語化を実施するために導入
gem 'rails-i18n'
```
その後
```
bundle install
```
でgemのインストールを実施します。
ちなみにi18n は「internationalization」の略です。詳しくは
https://railsguides.jp/i18n.html
こちらを参照してください。

話は戻って次は config/application.rb にてデフォルト地域の設定を行います
```
module TimetableServerNew
  class Application < Rails::Application
    # Initialize configuration defaults for originally generated Rails version.
    config.load_defaults 7.0

    #デフォルトのlocaleを日本語(:ja)に設定
    config.i18n.default_locale = :ja
  end
end
```
そして更に日本語訳ファイル(後で作ります)が読み込まれるよう設定をお案軸 config/application の日本語設定の下に追加します
```
    # カスタム日本語訳文ファイルの場所を読み込むよう設定
    config.i18n.load_path += Dir[Rails.root.join('config', 'locales', '**', '*.{rb,yml}').to_s]
```
あとは新規でmodel用とview、controller用の2ファイル、日本語対応ymlファイルを``config/locales``配下に作成します
``activerecord/ja.yml``
``view/ja.yml``
日本語化ファイルの中身については次の記事にて書きます。

# アプリ作成(React)
## nodeインストール
まずnode.jsをインストールします
```
$ sudo apt install nodejs
$ node -v
```
お次はアプリ作成です
```
$ npx create-react-app <AppName>
```
ちなみにnpxは``node package executer``の略称で、パッケージの実行ツールのことです。npmをさらに強くした感じと思ってもらえるとです、たぶん。詳しくはググってもらえればです。
```
Happy hacking!
```
こんな感じのが出てきたら完了です。ということで早速Reactアプリを立ち上げてみましょう。
```
$ npm start
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752048/02d81438-bfe3-e1b3-8c23-424fd820fc0d.png)
表示されました。やったね！
ここで薄々お気づきの方もいらっしゃるかもしれませんが、localhost:3000です。つまりRailsアプリのポート番号ともろ被りしています。これは宜しくない、ということでReactアプリ側のポート番号を変えていきます。
``<AppName>>package.json``ファイルを見てみます。
```
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
```
こちらのstartの部分を下記のように変更します。
```
"start": "PORT=3001 react-scripts start",
```
これで再度ctrl+Cでアプリを止め、再度``npm start``を行って今度はlocalhost:3001へアクセスすると
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752048/352bb0e7-064b-db4b-d064-16008ca3eb0c.png)
3001番で立ち上がりました！　あとはこのアプリもGitLabへ登録しちゃいましょう。サイトへアクセスし、新しくプロジェクトを作成、アップロードする手順はRailsの時と全く同じです。

次からはいよいよ中身のお話を進めていきます、飽きないように頑張って作成していきますので応援よろしくお願いします。
次の記事は
[初学者によるubuntuでのRails + React で駅案内システム作り～Rails＋ReactでAPI通信編～](https://qiita.com/Akane-Toribe/items/604234a672ff3982b347)
です。