はじめに

前回、mix phoenix.newで作ったアプリケーションのパスを覗いてみました。
今回は、Phoenix公式ページのAdding Pagesを見ながら、ページを追加していきます。
なお、次回はガイドラインのRoutingです。

追加している書物

New Route

初期状態で、ルーティングを設定するファイルはweb/router.exにあります。
このファイルでは、HTTPメソッドとパスを、ControllerとActionにマッピングすることでルーティングを表します。
前回のデフォルトページの例だと以下のようになります。

get "/", PageController, :index

これは、GETメソッドでルート(/)パスへアクセスを、HelloPhoenix.PageController(web/controllers/page_controller.ex)のindexにマッピングしていることを表します。

では、/helloへのGETアクセスを、HelloPhoenix.HelloControllerのindexにマッピングしてみます。
web/router.exのscopeに、get "/hello", HelloController, :indexを追加します。
scopeやpipelineについては、ひとまずおいておきます。

  scope "/", HelloPhoenix do
    pipe_through :browser # Use the default browser stack

    get "/", PageController, :index
    get "/hello", HelloController, :index
  end

New Controller

Phoenixで言うControllerとはElixirのモジュールであり、ActionはElixirの関数です。
したがって、前項で追加したルーティングのControllerとActionは次のようになります(web/controllers/hello_controller.ex)。

defmodule HelloPhoenix.HelloController do
  use HelloPhoenix.Web, :controller

  def index(conn, _params) do
    render conn, "index.html"
  end
end

index/2関数の最初の引数connは、リクエストに関するさまざまな情報が含まれています。
二つ目の引数_paramsは、リクエストパラメータが格納されます。今回は参照しないので、先頭に"_"を付けておきます。

このアクションの中身render conn, "index.html"は、テンプレートindex.html.eexを探してレンダリングすることを表しています。
このファイルは、テンプレートディレクトリの後にコントローラの名前を追加したディレクトリ(web/templates/hello/)から探されます。

なお、render conn, :indexとアトムを使うこともできますが、この場合は、acceptヘッダ応じてindex.htmlやindex.jsonなどのテンプレートが選択されます。

New View

PhoenixではレンダリングはViewの仕事です。
Viewでは、Controllerからレンダリングに必要なデータを受け取り、表示用に変換し、テンプレートに適用して表示するといった作業を行います。

前述作成したHelloControllerに対してはHelloViewを用意する必要があります。なお、Viewの前の名前(Hello)は、Controllerと一致しておく必要があります。
HelloViewは、web/views/hello_view.exに以下のように作成することにします。

defmodule HelloPhoenix.HelloView do
  use HelloPhoenix.Web, :view
end

New Template

Phoenixでは、標準のテンプレートとしてEExを使用します。
Templateは、テンプレートディレクトリ(web/templates/)に後にControllerの名前(hello)を追加したディレクトリ(web/templates/hello)に配置します。テンプレート名はControllerで定義(index.html)したファイルに拡張し(.eex)を追加したファイルになります(web/templates/hello/index.html.eex)。

<div class="jumbotron">
  <h2>Hello World, from Phoenix!</h2>
</div>

Phoenixサーバを起動(mix phoenix.server)して、ブラウザでlocalhost:4000/helloにアクセスしてみます。なお、Phoenixサーバを起動しっぱなしだった場合でも、再起動する必要はありません。アクセスされたときに必要であれば再ビルドされます。

index.html.eexにはdivしかありません。html本体はweb/templates/layout/app.html.eexにあり、このファイル内の以下の部分にindex.html.eexの内容が差し込まれます。

      <main role="main">
        <%= render @view_module, @view_template, assigns %>
      </main>

もう一つアクション

もう一つ、URLの一部に"messenger"という名前を付けて、パラメータとしてControllerに渡して、そのパラメータを含むページを表示する例を作成します。

New Route2

Routeにパラメータを表すアトム":messenger"を追加した行を追加します。
URLでアトムに対応する部分がパラメータとしてControllerに渡されます。
例えば、以下のRouteに対してlocalhost:4000/hello/Hogehogeを与えると、パラメータ"messenger"に"hogehoge"が割り当てられます。

  scope "/", HelloPhoenix do
    pipe_through :browser # Use the default browser stack

    get "/", PageController, :index
    get "/hello", HelloController, :index
    get "/hello/:messenger", HelloController, :show
  end

New Action2

web/controllers/hello_controller.exはすでに作成済みですので、これにshow Actionを追加します(:showは前項でRouteに追加したAction)。
show関数の第二引数はパターンマッチングで実装しています。

def show(conn, %{"messenger" => messenger}) do
  render conn, "show.html", messenger: messenger
end

Controllerのrender/3は、第三引数にパラメータを渡すことができ、そのパラメータはViewに渡されます。

New Template2

show Actionに対応するTemplate(web/templates/hello/show.html.eex)を作成します。
EExには、<%= %>内にElixirの式を書くことができます。
なお、@messengerは、テンプレートで使用できるメタプログラミングな書き方で、Dict.get(assigns, :messenger)と同じ意味です。これによりシンプルにパラメータを表現することができます。

<div class="jumbotron">
  <h2>Hello World, from <%= @messenger %>!</h2>
</div>

これでlocalhost:4000/hello/hogehogeなどとアクセスすると、"Hello World, from hogehoge!"とブラウザに表示されることになります。