Ruby on rails を初心者向けに解説①

#はじめに
今回はRuby on railsの解説記事です。

初心者向けに、わかりやすく解説していきます。

頑張っていきましょう。

今回は、記事を書く上で`たかし君`に協力してもらいます。


#Ruby on rails とは
Ruby on rails とは、Webフレームワークの一種です。

最初に、そもそもフレームワークとは一体何なのかについて解説します

###フレームワークとは
フレームとは、簡単に言えば`骨組み`のことです。

フレームワークの意味をwikipedia先生に聞いてみましょう。

>プログラミングにおいて、一般的な機能をもつ共通コードをユーザーが選択的に上書きしたり特化させたりすることで、ある特定の機能をもたせようとする抽象概念のことである。

相変わらず堅い言葉なので、噛み砕いて解説します。

フレームワークとは、`様々な機能を提供してくれる骨組み`のことであると考えて問題ないと思います。

今度は、フレームワークの具体例をみて考えていきましょう。

####Bootstrap
何かWebサイトを作成しようとしたときに、コツコツHTMLとCSSを書いていくのは大変ですよね。

当然、何とか楽をしたいと考えます。どうすれば楽にできるでしょうか。

そうです、誰かが作ってくれたものをパクれば楽ができるのです。

しかし、Webサイトをそのままパクれば怒られてしまうし、作れるバリエーションも限られてしまいます。

ここでたかし君は考えました。

たかし君「そういえば、Webサイトに使われる部品って限られてるよな。ヘッダー部分とかボタン部分とかを個別に楽にかける`枠組み`があれば楽に書けるんじゃね？」

こうして生まれたのが`Bootstrap`です。

BootstrapはCSSのフレームワークで、Webサイトの各々の部品ごとの枠組みを提供してくれています。

###Webフレームワークとは
ここまでの説明でなんとなく分かりましたね。

Webフレームワークとは、`Webアプリを作るための枠組み`のことです。

もう一度たかし君に聞いてみましょう。

たかし君「Webアプリ作るのめっちゃだるいな。でも、Webアプリで使う機能って以外に限られてるよな。ユーザーが打ち込んだURLに応じてデータベースを操作したり、HTMLファイルを作成して送ったり、ログイン機能が必要だったりするだけじゃん。この`枠組み`を誰かが作ってくれて、それをパクれば楽に書けるんじゃね？」

このようにして生まれたのが、Webフレームワークだったり、Ruby on railsだったりするわけです。

それでは、実際にRuby on railsでアプリを作ってみましょう。

#骨組みの作成 (rails new)

最初にローカルのパソコンにRubyとRuby on railsをインストールしてください。

環境構築については、色々な人が記事を書いているので割愛します。

環境構築はうまく行かないことがほとんどですが、できるまで粘り強く調べ続けてください。応援しています。

最初に、railsアプリを作りたいディレクトリに移動して、以下のコマンドを打ちましょう。

```
rails new qiita_project
```

`new`の後ろは何でも好きな名前にしてください。

以下のようファイルが作成されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/8ff6cb1b-aeb6-1c29-1f6f-c837d3113e85.png)

これで、Webアプリを作る際の`枠組み`を作成することができました。

#サーバーの起動(rails server)

作成した`qiita_project`に移動してください。

```
cd qiita_project
```

これで作成した`qiita_project`に移動することができました。

次はサーバーを起動してみましょう。次のコマンドです。

```
rails server
```

次に、chromeなどのブラウザのURL欄に以下のURLを入力してください。

```
http://localhost:3000/
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/559703d6-d50d-b17a-90f3-bb17b6bb1697.png)


ここまでで、サーバーを起動することができました。

#コントローラーの作成 (rails generate controller コントローラー名)
以下のコードでコントローラーを作成することができます。

コントローラーが何を行うかは後に解説します。

```
rails generate controller home
```

上のコードを実行すると、app>>controllers配下に`home_controller.rb`という名前のファイルが作成されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/4ebb4bbf-a261-6035-0b28-d9afd1414472.png)

home_controllerの中身を見てみましょう。

```home_controller.rb
class HomeController < ApplicationController

end
```

このようにして、コントローラーを作成することができました。

それでは、コントローラーの解説行います。
##コントローラーとは
コントローラーを理解するためには、まず以下の図を理解する必要があります。railが動作する仕組みについてです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/11c4b46a-1245-f94b-db6a-9743fde9ef36.png)

順番に見ていきましょう。

####①ユーザーがサーバーにリクエストを送る
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/8860b1d3-f39a-dda7-1285-61f043bdbf5c.png)

まず、左のユーザーがサーバーにリクエストを送ります。右の様々な動作は、全てサーバー側の話です。

`リクエスト送る`とは、サーバーに何かを要求することです。例えば、URLを入力すると、「このURLに対応するファイルを送ってこい！」と要求(getリクエスト)することになりますし、IDとパスワードを入れてログインしようとすれば、「送ったデータを使って何かしらの処理をしろ！」と要求(postリクエスト)することになります。


####②ルーティングによりどのコントローラーを使うのかを決定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/dfb614b4-ae14-6a2c-8566-6675b9433011.png)

ルーティングにより、ユーザーから受け取ったURLを処理します。

例えば、ユーザーから`home/top`というURLを受け取ったとします。

そうすると、ルーティングは`home#top`というルーティングに変換します。

これは、「homeコントローラーのtopアクションを利用します」という意味です。アクションというのは、コントローラーごとに設定されている「何かを行うコード」だと考えてください。

今回は、簡単のためにユーザーからは「このURLに対応するファイルを送ってこい！」と要求(getリクエスト)されたと考えます。

ユーザーから"home/top"というURLが送られてきて、それをhomeコントローラーのtopアクションを実行するという命令にルーティングしましょう。

configディレクトリ配下のroutes.rbファイルに以下のように追記してください。

```routes.rb
Rails.application.routes.draw do
  get "home/top" => "home#top"
end
```

####コントローラーによりviewファイルを探索

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/ad83bb35-c975-45b3-0043-812060700dba.png)

`home/top`というURLがユーザーから送られてきて、ルーティングにより`home#top`に変換されたとします。

この場合、homeコントローラーのtopアクションを行うことになります。

以下のように、homeコントローラーにtopアクションを追加しましょう。

```home_controller.rb
class HomeController < ApplicationController
    def top
    end
end
```

このようにコードを書くと、homeコントローラーは`home/top.html.erb`ファイルを探して、それをユーザーに返してくれます。


####viewファイルの作成
app >> views　配下のhomeディレクトリにtop.html.erbファイルを追加してください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/c6355b50-a898-bbc2-1670-e5ff3e2a012d.png)


top.html.erbファイルを以下のように編集してください。

```top.html.erb
<h1>Hello World</h1>
```

このようにして、viewファイルを作成することができました。

実際にレスポンスを見てみましょう。

####ユーザーがURLを打ち込んだ場合
再び、以下のコードでサーバーを起動しましょう。

```
rails server
```

webブラウザで以下のURLを打ち込んでください。

```
http://localhost:3000/home/top
```

そうすると、以下の画面が送られてきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/a5b234c7-e441-fcc8-9552-2f499a8f0cf7.png)


何が起きているのかを、もう一度ざっくり解説します。

`http://localhost:3000/home/top`というURLが送られると、それがルーティングにより`home#top`という形に変換されます。

それにより、homeコントローラーのtopアクションが行われます。

そうすると、app >> viewsディレクトリ配下のhomeディレクトリの中のtop.html.erbファイルがrailsにより発見され、それがユーザーに送られます。


#終わりに
長くなってきたので、今回はここまでになります。

次回の記事も読んでくださると嬉しいです。

[Ruby on rails を初心者向けに解説②　~リンクの作成~](https://qiita.com/renesisu727/items/d729616473981e763fdd)

[Ruby on rails を初心者向けに解説③　~データベースの作成~](https://qiita.com/renesisu727/items/c647582a59cfd7bf0a98)

[Ruby on rails を初心者向けに解説④ ~命名規則とform_Tagの使い方について~](https://qiita.com/renesisu727/items/f0f3de5377358f8768ed)

[Ruby on rails を初心者向けに解説⑤ ~データベースの編集と削除~](https://qiita.com/renesisu727/items/8f3a4b7c52c888b52be1)

[Ruby on rails を初心者向けに解説⑥　~バリデーションの作成~](https://qiita.com/renesisu727/items/cee8bbea1147ff78b72d)

[Ruby on rails を初心者向けに解説⑦　~フラッシュの実装~](https://qiita.com/drafts/fd36234d669283c87048/edit)

お疲れさまでした。