Phoenix 1.7のverified_routeを使ってみた

はじめに

本記事は Qiita AdventCalendar2022 Elixir vol7 3日目の記事です
Phoenix1.7で導入されるverified_routeを紹介します

セットアップ

Phoenixのバージョンを1.7にあげていきます

実行時のバージョンは以下で行いました
erlang 25.0.4
elixir 1.14.1-otp-25

こちらに沿って行います
https://github.com/phoenixframework/phoenix/tree/master/installer

git clone https://github.com/phoenixframework/phoenix.git
cd phoenix/installer
mix archive.uninstall phx_new
MIX_ENV=prod mix do archive.build, archive.install

これで　phx_newが　1.7になったのでプロジェクトを作成していきます

mix phx.new blog

これで準備が整いました

※ 10/21日現在 phoenixの masterブランチは絶賛開発中のためちょくちょくライブラリの依存関係が壊れるのでご注意ください　

verified_routeの概要

verified_routeですがパスを記述する際には

Routes.blog_index_path(BlogWeb.Endpoint, :index)

と長々と書かないといけなかったものを

~p"/blogs"

と新しく導入された~pを使うことでとてもスマートにパスを書くことができます

使い方

いくつか使い方を紹介します

routerに以下のパスが定義されているとして

live "/posts", PostLive.Index, :index
live "/posts/new", PostLive.Index, :new
live "/posts/:id/edit", PostLive.Index, :edit

live "/posts/:id", PostLive.Show, :show
live "/posts/:id/show/edit", PostLive.Show, :edit

それぞれ以下のように書きます

~p"/posts"
~p"/posts/new"
~p"/posts/#{@post}/edit"

~p"/posts/#{@post}"
~p"/posts/#{@post}/show/edit"

ネストした場合もシンプルにかけます

live "posts/:id/comments/:comment_id", CommentShowLive,:show
-> ~p"/posts/#{@post}/comments/#{comment}"

長くなりがちな静的パスも以下のようにかけます

# before
Routes.static_path(BlogWeb.Endpoit, "phoenix.png")
# after
~p"/images/phoenix.png"

今まで冗長的だったパスの記述がとても楽になりました！

仕組み

コードをしっかりと読み込んでいないのでざっくりとですが

blog_web.exのverified_routeの設定で以下のようなコードがあります

blog_web.ex

  def verified_routes do
    quote do
      use Phoenix.VerifiedRoutes,
        endpoint: BlogWeb.Endpoint,
        router: BlogWeb.Router,
        statics: BlogWeb.static_paths()
    end
  end

https://github.com/phoenixframework/phoenix/blob/0cec3cd6cb554f82cebba5794300a54c7e850daa/lib/phoenix/verified_routes.ex#L196-L233
ここらへんに

 defp inject_path(
         {%__MODULE__{} = route, static?, _endpoint_ctx, _route_ast, path_ast, static_ast},
         env
       ) do
    if static? do
      static_ast
    else
      Module.put_attribute(env.module, :phoenix_verified_routes, route)
      path_ast
    end
  end

staticのパスにふくまれているのならstatic、そうでないならRoutesで探すぽいみたいな処理がかかれています

なので、static_pathとRouteのすべてを精査してマッチするものがあればそのパスに変換する処理を行うのが sigil_pのようですね

最後に

Phoenix1.7ですがverified_routeの他に
phx.gen.authがLiveViewになったり
デフォルトcssがtailwindになり、デザインが一新され
Phoenix.ComponentがReact + Typescriptのようにインターフェース情報や型情報をつけれるようになったり
.form以外のデフォルトコンポーネントが多く入っていたり
と大きな変更がいくつか入っているようです

追従や変更は大変ですが素晴らしい機能が目白押しで正式リリースが待ち遠しいです
本記事は以上になりますありがとうございました

参考サイト

https://www.erlang-solutions.com/blog/what-you-need-to-know-phoenix-framework-1-7/
https://www.youtube.com/watch?v=9-rqBLjr5Eo
https://github.com/phoenixframework/phoenix/blob/master/CHANGELOG.md