Railsもどきを作ってみよう(ビュー編)

# はじめに
railsを使ったアプリ開発は、ブラックボックス化されているとよく言われます。

そこで、少しずつ解剖していこうと思います。その手段として、Railsもどきを作っていきます。

今回は、ビュー編として、rubyのライブラリーであるWEBRickを利用して、サーバを立て、ホームページを表示することを目指します。

目指すディレクトリ構成は下記の通りです。

```
directory
  |- app
      |- views
           |- basic_pages
               |- home.html.erb
  |- srv.rb
```

## 環境
・ruby 2.7.1
・Ubuntu 20.04.1 LTS

## 対象となる読者
・この記事に興味を持ってくれた方
・Railsを使ったことがあって、その仕組みを考えてみたい方

## ポイント
１．サーバを立てる
　①サーバを立てるスクリプトファイル（srv.rb）を作る
　②srv.rbを実行する

２．ホームページを表示する
　①ホームページのビューファイル（app/views/basic_pages/home.html）を作る
　②ルートパスをホームページに設定する
　③erbファイルに対応させる

# １．サーバを立てる
まずは、サーバを立てましょう。言い換えると、http://localhost:3000 （以後、ルートパス） にアクセス出来るようにしましょう。何もしていない状態では、このアドレスにアクセスできないはずです。

そこで、サーバを立てるには、下記二つを行う必要があります。

①サーバを立てるスクリプトファイル（srv.rb）を作る
②srv.rbを実行する

## ①サーバを立てるスクリプトファイルを作る

このファイルの意味は、サーバを立てることです。

```rb:src.rb
require 'webrick' 

op = { BindAddress:  "127.0.0.1", Port: 3000, DocumentRoot: "." }

s = WEBrick::HTTPServer.new(op)
s.start
```

参考↓↓↓
https://techacademy.jp/magazine/19901

## ②srv.rbを実行する
ターミナルで下記コマンドを打ち込みましょう。

```terminal:ターミナル
ruby srv.rb
```
すると、下記のようなログが出るはずです。

```
[2020-11-05 19:36:40] INFO  WEBrick 1.6.0
[2020-11-05 19:36:40] INFO  ruby 2.7.1 (2020-03-31) [x86_64-linux]
[2020-11-05 19:36:40] INFO  WEBrick::HTTPServer#start: pid=15542 port=3000
::1 - - [05/Nov/2020:19:36:43 JST] "GET / HTTP/1.1" 200 1022
- -> /
```
ルートパスにアクセスすると、
![Screenshot from 2020-11-05 19-37-22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/642882/95d1db08-bd90-18e6-659b-4b650922eaed.png)
こんな感じの画面になるはずです。これで、サーバは立ちあがりました。

サーバを止めたい場合は、<em>Ctrl</em> + <em>C</em> を押してください。

# ２．ホームページを表示する
次に、ホームページを作り、アクセスできるようにしましょう。下記の順で、やっていきます。

①ホームページのビューファイル（app/views/basic_pages/home.html）を作る
②ルートパスをホームページに設定する
③erbファイルに対応させる

## ①ホームページのビューファイル（app/views/basic_pages/home.html）を作る
```html:app/views/basic_pages/home.html
<html>
　<head>
    <meta charset="utf-8">
  </head>
  <body>
    <h1>ホームページ</h1>
    <p>Hello, World</p>
  </body>
</html>
```
サーバを立てアクセスすると、下記のようになっているはずです。
![Screenshot from 2020-11-05 20-12-18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/642882/0b4c760b-217b-26db-9fb3-aa90ba9ac0ae.png)
ここから、"app/"→"views/"→"basic_pages/"→"home.html"の順でクリックしていくか、http://localhost:3000/app/views/basic_pages/home.html に直接アクセスすると、ホームページを表示できます。
![Screenshot from 2020-11-05 20-25-38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/642882/22923ddf-0452-f718-4def-08b072fa33ad.png)

## ②ルートパスをホームページに設定する
ホームページのURLをhttp://localhost:3000 にしていきましょう。

```rb:srv.rb
require 'webrick'

op = {
    BindAdress: "127.0.1",
    Port: 3000,
    DocumentRoot: "app/views/basic_pages/home.html"
    # ルートパスを変更(以後、ルートパスの変更は、ここの記述の変更を意味する) 
}

s = WEBrick::HTTPServer.new(op)
s.start
```
これでルートパスへアクセスすると、ホームページが表示されます。
## ③erbファイルに対応させる
試しにホームページのファイル名の拡張子を.htmlから.html.erbに変更してみましょう。それに伴い、ルートパス、ホームページのファイルの中身を下記のようにします。

```rb:srv.rb
require 'webrick'

op = {
    BindAdress: "127.0.1",
    Port: 3000,
    DocumentRoot: "app/views/basic_pages/home.html.erb"
    #　ルートパスの変更
}

s = WEBrick::HTTPServer.new(op)
s.start
```
```erb:app/views/basic_pages/home.html.erb
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <h1>ホームページ</h1>
    <p>Hello, World</p>
    <%= 1 + 4 %> <!-- 追加 -->
  </body>
</html>
```
erbファイルが反映されるなら、"Hello, World"の下は"5"になるはずです。しかし、"<%= 1 + 4 %>"になります。

つまり、erbファイルはhtmlファイルとして扱われるわけです。

拡張子erbを反映させるには、設定（srv.rb）を変える必要があります。

```rb:srv.rb
require 'webrick'

op = {
    BindAdress: "127.0.1",
    Port: 3000,
    DocumentRoot: "app/views/basic_pages/home.html.erb"
}

# 拡張子erbに対応
WEBrick::HTTPServlet::FileHandler.add_handler("erb", WEBrick::HTTPServlet::ERBHandler)

s = WEBrick::HTTPServer.new(op)
s.start
```
これで、拡張子erbが反映されているはずです。サーバを立て直し、ルートパスにアクセスしてみましょう。

"<%= 1 + 4 %>"ではなく、"5"になっているはずです。

参考↓↓↓
https://www.kkaneko.jp/pro/rubydb/webrick.html

# まとめ
今回は、ビュー編ということで、WEBRickを利用したサーバ構築と、ホームページの表示を実装しました。

今後は、コントローラー編やモデル編もやっていこうと思います。