2025年09月11日

やってみよう！Elixir / Phoenix 関数型プログラミングの基礎④

webアプリ開発

コントローラーとアクション

ブラウザに「Hello World！」を表示させる機能を作っていきましょう。コントローラー、アクション、HEExテンプレート、レイアウトなどの概念について復習していきます。

Hello World!

HomeControllerモジュールをつくる

phx_sampleをブラウザで開くと、デフォルトのスタートページが表示されています。ここに「Hello World」と表示されるように書き換えていきましょう。

lib/phx_sample_web/controllersディレクトリに新規ファイルhome_controller.exを作成して中身を編集しましょう。

defmodule PhxSampleWeb.HomeController do
  use PhxSampleWeb, :controller
  
  def hello(conn, _params) do
    render(conn, :hello, layout: false)
   end
end

HomeController という名前のコントローラモジュールを定義し、それに属する関数 hello/2 を定義しました。前章で述べたように、この関数をアクションと呼びます。

HomeHTMLモジュールを作る

次に、同じディレクトリに新規ファイル home_html.ex を作成し、中身を次のように編集します。

defmodule PhxSampleWeb.HomeHTML do
  use PhxSampleWeb, :html

  embed_templates "home_html/*"
end

4行目の embed_templates "home_html/*" に着目してください。この記述により、lib/phx_sample_web/controllers/home_html ディレクトリにあるテンプレートファイルが、HomeController モジュールのために使われるようになります。

ルーティングの変更

続いて、lib/phx_sample_web ディレクトリにある router.ex を開きます。20行目を次のように書き換えてください。

 get "/", HomeController, :hello

router.ex は Phoenix アプリケーションのルーティングを設定するファイルです。ルーティングとは、HTTP リクエストの種類やパスのパターンによって、どのアクションに処理を任せるのかを決めるルールの集合です。

上記のように編集した結果、GET メソッドで / というパスに対する HTTP リクエストが届いたとき、PhxSampleWeb.HomeController モジュールの hello アクションが HTML 文書を作って返すようになります。

HEExテンプレートの作成

lib/phx_sample_web/controllers ディレクトリの下に新たに home_html ディレクトリを作成してください。そして、その下に新規ファイル hello.html.heex を作成し、中身を次のように編集します。

<p>Hello, world!</p>

appレイアウトの適用

helloアクションの書き換え

home_controller.exを次のように編集します。

render(conn, :hello)

オプション引数layout: falseを除去した結果、appレイアウトがテンプレートに適用されてブラウザの画面が変化します。

appレイアウトの書き換え

画面の上部にあるphoenixのロゴ、バージョン番号などを除去しましょう。

app.html.heexを次のように編集してください

（1-32行を削除）
<main class="px-4 py-20 sm:px-6 lg:px-8">
  <div class="mx-auto max-w-2xl">
    {@inner_content}
  </div>
</main>

<.flash_group flash={@flash} /> は、フラッシュメッセージを埋め込むためのタグですが。それも削除します。

不要なファイル群の除去

PhxSampleのページに「Hello World!」の文字が表示されるようになったので、PageController関連のファイル群が不要となりました。以下のコマンドを実行して不要なファイルを削除してください。

rm -rf lib/phx_sample_web/controllers/page_*

結果として、以下のファイルが削除されます。

lib/phx_sample_web/controllers/page_controller.ex
lib/phx_sample_web/controllers/page_html.ex
lib/phx_sample_web/controllers/page_html/home.html.heex