Madogiwa Blog

主に技術系の学習メモに使っていきます。

Rubyで作るオレオレWebフレームワーク「第4回 Viewのレンダリング機能を作る🌌」

RubyでオレオレWebフレームワークを作っているのですが、だいぶ形になってきたので知識の整理がてら色々まとめてみる✍ 今回は第4回目です💪

👇第3回 クエリ文字列を含んだGETに対応したRouting機能作る🛣はこちら

madogiwa0124.hatenablog.com

今回のゴール

前回は、クエリ文字列を受け取れるようRouting機能を作成しました。今回は渡されたクエリ文字列をViewファイルに埋め込んで表示するようなViewのレンダリング機能を作っていこうと思います👍

実際の実装イメージはこちら、インスタンス変数を定義してrenderメソッドで指定のViewを呼び出すような形です。動きはちょっとRailsっぽいですね🚃

require_relative './lib/main.rb'

router.get '/hello' do |params|
  @body = params['word']
  render :index
end

ちなみにViewに使うファイルは./views配下にindex.erbという形で下記のように配置されるものとします。

<!-- ./vires/index.erb -->
<html>
<head>
  <meta charset="UTF-8">
  <title>sample</title>
</head>
<body>
  <%= @body %>
</body>
</html>

処理の流れ

実際にViewをレンダリングする処理の流れを記載しておきます。

  1. app.rbにroutingが定義される。
  2. routingの中でインスタンス変数を定義する。
  3. DSLとして定義したrenderメソッドにViewのファイルパスを引数として渡す
  4. renderメソッド中でViewファイルの内容をもとにERBレンダリング結果を返却
  5. 結果をレスポンスのボディに入れて返す。

というわけで今回作るのは、下記のような機能です👩‍💻

  • DSLとしてrenderを提供する
  • Viewファイルのパスを受け取ってERBレンダリング結果を返却する

DSLとしてrenderを提供する

まずDSLとしてメソッドをapp.rbを呼び出せるようにするにはrenderメソッドをmain.rbに追加します。

# lib/main.rb

def render(path)
  file_path = "./views/#{path}.erb"
  # Viewファイルの内容をもとに`ERB`のレンダリング結果を返却
end

とりあえず、これでapp.rbrender :indexを呼び出したときに./views/index.erbというレンダリングするファイルパスを取得することが出来るようになりました🙌

Viewファイルのパスを受け取ってERBレンダリング結果を返却する

それでは、実際にERBレンダリング処理を実装していきます。しかし、これはrubyERBライブラリがよくできているのでシンプルです✨

下記のようにFile.readでファイルパスから実際のファイルの内容を取得して、ERBオブジェクトを生成して結果を返却するだけです。

# lib/main.rb

def render(path)
  file_path = "./views/#{path}.erb"
  template_file = File.read(file_path)
  ERB.new(template_file).result
end

これで、下記のようなroutingと定義したときにrender :indexの結果がインスタンス変数を含めて解決された状態で返却されます🎉

require_relative './lib/main.rb'

router.get '/hello' do |params|
  @body = params['query']
  render :index
end

こんな感じ🙋

<html>
<head>
  <meta charset="UTF-8">
  <title>sample</title>
</head>
<body>
  hoge
</body>
</html>

おわりに

今回は、ERBを使ったViewのレンダリング機能を作成しました。ここまで来る特定のURLに遷移したさいに特定のViewをレンダリングするようなところまで出来るようになったので、だんだんフレームワークとしての形をなしてきましたね✨

次回は、routing機能をPOSTに対応させるようなところを書いていければと思います👩‍💻

参考

docs.ruby-lang.org