Ruby on Rails初心者の学習記録 Part1

# はじめに
Ruby on Rails初心者の学習記録です。
Railsを利用して、簡単なWebアプリケーションを開発できるようになることをゴールにしています。

- [Part2：モデル](https://qiita.com/Yasushi-Mo/items/5dfe81d39b5a153fe43c)
- [Part3：CRUD（前編）](https://qiita.com/Yasushi-Mo/items/931cfcef990647f1da18)
- [Part4：CRUD（後編）](https://qiita.com/Yasushi-Mo/items/337d5e31e0ea1f56485f)

# 1. Rubyの基礎を学習
Rubyも利用したことがなかったので、まずはRubyを簡単に勉強しました。
[Progate](https://prog-8.com/)というオンラインプログラミング学習サービスを利用しました。初心者がつまりやすい開発環境の構築が不要なので、手っ取り早くRubyの文法を学ぶうえでは、利用しやすかったです。

# 2. Railsインストール
1.である程度Rubyの雰囲気はつかめたので、次はRailsのインストール及び関連作業を行い、Railsを利用したWebアプリケーション開発の準備をします。
※利用OSはWindows11です。

## ⅰ. Rubyインストール
Railsをインストールする前にRubyをする必要があります。[「Rubyのインストールと環境設定」](https://www.javadrive.jp/ruby/install/)を参考にインストールしました。
インストール後、コマンドプロンプト（ターミナル）で「ruby -v」と入力して、実行すると以下のようにRubyのバージョンが表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318188/b49cff0b-5266-15aa-806e-21a4033ee6e2.png)

## ⅱ. SQLiteの設定
また、Railsで利用するデフォルトのデータベースであるSQLiteも事前にインストールが必要なようです。
[「RailsからSQLite3を利用できるようにする」](https://www.javadrive.jp/rails/install/index2.html)を参考に設定しました。
「sqlite3 --version」でバージョンを確認できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318188/a1ef6198-bcdf-6c3c-1fea-2cecd33d10a3.png)

## ⅲ. Railsインストール
以下のコマンドで、インストールします。
```
gem install rails
```

「rails -v」でバージョンを確認できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318188/a0c34a75-ff1c-a758-ca17-4d45012cfae5.png)

# 3. Webアプリケーションの開発
次は実際にアプリケーションの開発を行います。
[「Getting Started with Rails」](https://guides.rubyonrails.org/getting_started.html)と[「アプリケーション作成から実行までの手順」](https://www.javadrive.jp/rails/ini/)を参考にしました。

## ⅰ. アプリケーションの作成
以下のコマンドで、アプリケーションを作成します。
```
rails new blog
```
作成が完了すると、アプリケーション名と同じ名前でフォルダが作成されました（今回は「blog」という名前のアプリケーションを作成）。
さらにその下には、各種フォルダ/ファイルが作成されています。各種フォルダ/ファイルの用途については、[Rails公式ドキュメント](https://guides.rubyonrails.org/getting_started.html#creating-the-blog-application)に記載があります。
RailsはMVC（Model、View、Controller）アーキテクチャに基づいて構築されていますが、それらのフォルダはappフォルダ内にありました。ぱっと見では、実装時にどこに何を書けばよいかわかりやすそうです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318188/23c776d4-32a3-1df7-9dc2-efa64214f90e.png)

## ⅱ. アプリケーションの起動
以下のコマンドでローカルサーバーを起動します。

```
rails server
```
[http://localhost:3000/](http://localhost:3000/)にアクセスすると、デフォルトのページが表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318188/ce279dca-7a52-7299-8558-3bd446e5756e.png)


また、`log/development.log`の中身を見てみると、コマンドプロンプト（TERMINAL）と同じ内容が書き込まれています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318188/60607c4e-1d9c-a29a-773a-1bdce9462972.png)

## ⅲ. ルーティング
作成したアプリケーションに新しい画面を追加します。

Railsでは、`config/routes.rb`でルーティングの定義をしているようです。
```/articles```にアクセスしたら、```index```を表示するように定義します。

```routes.rb
Rails.application.routes.draw do
  get "/articles", to: "articles#index"

  # Define your application routes per the DSL in https://guides.rubyonrails.org/routing.html

  # Defines the root path route ("/")
  # root "articles#index"
end
```

次にコントローラーを作成するために以下のコマンドを実行します。

```
rails generate controller Articles index --skip-routes
```
実行後、以下のファイルが作成されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318188/39c9cd73-38b5-5c33-791c-fcd285687d62.png)

[http://localhost:3000/articles](http://localhost:3000/articles)にアクセスすると、以下のページが表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318188/cbc9544d-5ddf-4008-70bc-65ce0c506c22.png)

こちらの画面のレイアウトは、先ほどのコマンドで作成されたファイル内に含まれている```app/views/articles/index.html.erb```で定義しています。

```index.html.erb
<h1>Articles#index</h1>
<p>Find me in app/views/articles/index.html.erb</p>
```

そのため、ファイル内を書き換えると、画面の表示も変わります。
```index.html.erb
<h1>Hello, Rails!</h1>
<p>Find me in app/views/articles/index.html.erb</p>
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318188/61577460-25f0-9179-40d4-14bf70ac31c5.png)

## ⅳ. デフォルト画面の設定
次は、http://localhost:3000 アクセス時も同じ画面が表示されるようにします。

設定ファイルは同じく```config/routes.rb```になります。
以下のように```root```の設定を追加します。

```routes.rb
Rails.application.routes.draw do
  root "articles#index"
  
  get "/articles", to: "articles#index"

  # Define your application routes per the DSL in https://guides.rubyonrails.org/routing.html

  # Defines the root path route ("/")
  # root "articles#index"
end
```
http://localhost:3000 にアクセスすると```ArticlesController```の```index```に指定した画面が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318188/cbc549ae-a2a7-2756-4b68-b2fd2fca36d1.png)

# 最後に
今回はRubyの基本文法やRailsを利用したWebアプリケーションの開発環境構築手順及びルーティングについて学びました。
今後はMVCアーキテクチャのModelの部分やProgateで学んだRubyのコードをWebアプリケーションの開発でも利用してみたいと思っています。

最後までお読みいただきありがとうございました！

- [Part2：モデル](https://qiita.com/Yasushi-Mo/items/5dfe81d39b5a153fe43c)
- [Part3：CRUD（前編）](https://qiita.com/Yasushi-Mo/items/931cfcef990647f1da18)
- [Part4：CRUD（後編）](https://qiita.com/Yasushi-Mo/items/337d5e31e0ea1f56485f)
- [Part5：復習])(https://qiita.com/Yasushi-Mo/items/032b671eed16acdadc6b)

# 参考
- [Getting Started with Rails](https://guides.rubyonrails.org/getting_started.html)
- [Progate](https://prog-8.com/)
- [RailsからSQLite3を利用できるようにする](https://www.javadrive.jp/rails/install/index2.html)
- [Ruby on Rails入門](https://www.javadrive.jp/rails/)
- [Rubyのインストールと環境設定](https://www.javadrive.jp/ruby/install/)
- [アプリケーション作成から実行までの手順](https://www.javadrive.jp/rails/ini/)