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

目次

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

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

Hello World!

HomeControllerモジュールをつくる

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

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

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/jaunty_greeter_web/controllers/page_*

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

  • lib/jaunty_greeter_web/controllers/page_controller.ex
  • lib/jaunty_greeter_web/controllers/page_html.ex
  • lib/jaunty_greeter_web/controllers/page_html/home.html.heex