0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

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

Last updated at Posted at 2020-11-05

はじめに

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

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

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

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

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

環境

・ruby 2.7.1
・Ubuntu 20.04.1 LTS

対象となる読者

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

ポイント

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

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

1.サーバを立てる

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

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

①サーバを立てるスクリプトファイル(srv.rb)を作る
②srv.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を実行する

ターミナルで下記コマンドを打ち込みましょう。

ターミナル
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
こんな感じの画面になるはずです。これで、サーバは立ちあがりました。

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

2.ホームページを表示する

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

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

①ホームページのビューファイル(app/views/basic_pages/home.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
ここから、"app/"→"views/"→"basic_pages/"→"home.html"の順でクリックしていくか、http://localhost:3000/app/views/basic_pages/home.html に直接アクセスすると、ホームページを表示できます。
Screenshot from 2020-11-05 20-25-38.png

②ルートパスをホームページに設定する

ホームページのURLをhttp://localhost:3000 にしていきましょう。

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に変更してみましょう。それに伴い、ルートパス、ホームページのファイルの中身を下記のようにします。

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
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)を変える必要があります。

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を利用したサーバ構築と、ホームページの表示を実装しました。

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

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?