Phoenix LiveViewによる動的サーバーサイドレンダリング１

Phoenix LiveView の始め方を記述します。
3回に分けて記述していきます。

1. Phoenix LiveViewのセットアップ方法(この記事)
2. Phoenix LiveViewを使用しないカウンターの実装
3. Phoenix LiveViewを使用したカウンターの実装

Phoenix LiveView とは、ページの動的な更新を Phoenix 上から行えるようにするための新たな仕組みです。
ここでの「動的な更新」とは、ページの再読み込みなしで必要な箇所だけを再レンダリングさせることを意味しています。 上記をJavaScriptの記述無しで可能にします。
この仕組みを利用すれば SPA(Single Page Application) のような事も Phoenix だけで実現可能になるようです。

この仕組みは、2018年9月にElixirConfにて紹介され2019年3月に一般公開されました。

おおまかな仕掛けは以下の様になります。
以下は要素をクリックされたらブラウザ側の状態が変化する例です。

この中で、開発者が実装するところは黄色の部分のみです。
これらをJavaScriptの記述なしで実現することができます。 この事により、上記が必要な最近のWebアプリケーションの開発をしたい場合にPhoenix側で完結できる事になります。

LiveViewの機能を実装するのに、以下を参考にしました。

• Programming Phoenix 1.4
• LiveViewのリポジトリ
• HexDocsの説明ページ

※ Programming Phoenix 1.4 では、Chapter14 の What's Next に記載があります。

以下の手順に従って作成していきます。

• プロジェクトの作成
• LiveView のセットアップ
• LiveView ページの作成

LiveView の説明に特化するため、DB を使用しない構成にします。
プロジェクト名を lv_demo とします。

$ mix phx.new lv_demo --no-ecto

依存関係も取得しておきます。 これでプロジェクトの作成は終わりです。

LiveView を使用可能にするための記述を行っていきます。
LiveView は発展途上のため、この手順は将来的に変更され単純化される可能性があります。
極端な話、必要なくなるかも知れません。
現状は前述の参考資料に記載されている手順を行います。

記述は Phoenix 側と JavaScript 側両方で行います。

パッケージのインストールと組み込みが主な内容です。

依存関係を取得した直後ではありますが、まず LiveView のパッケージを取得します。
まずは mix.exs に取得するパッケージを記述します。

# mix.exs
def deps do
  [
    ...
    {:phoenix_live_view, "~> 0.1.0"},    ...
  ]
end

記述したら以下のコマンドでパッケージを取得します。

$ mix deps.get

LiveView ではソルト用にランダムな文字列を必要とします。
以下のコマンドで生成します。

$ mix phx.gen.secret 32
1zGMTCWyaWPceXSgA1FTw1TyCeFEHzqa

生成したソルトを config.exs にて以下のように指定します。

# config/config.exs
config :lv_demo, LvDemoWeb.Endpoint,
  live_view: [
    signing_salt: "1zGMTCWyaWPceXSgA1FTw1TyCeFEHzqa"
  ]

LiveView を表示するパイプラインに、プラグインを追加します。

# lib/lv_demo_web/router.ex
pipeline :browser do
  ...
  plug :fetch_flash  plug Phoenix.LiveView.Flashend

controller/view/router で live_render 等関数が使用できるように、記述を追加します。

# lib/lv_demo_web.ex

def controller do
  quote do
    ...
    import Phoenix.LiveView.Controller, only: [live_render: 3]  end
end

def view do
  quote do
    ...
    import Phoenix.LiveView, only: [live_render: 2, live_render: 3, live_link: 1, live_link: 2]  end
end

def router do
  quote do
    ...
    import Phoenix.LiveView.Router  end
end

WebSocket関連の動作の定義を行います。

# lib/lv_demo_web/endpoint.ex
defmodule LvDemoWeb.Endpoint do
  use Phoenix.Endpoint

  socket "/live", Phoenix.LiveView.Socket
end

こちらもパッケージのインストールと組み込みが主な内容です。

以下を実行してブラウザ側に必要なライブラリをインストールします。

$ cd assets && npm i --save phoenix_live_view

すんなり入らなかった場合は、出力された案内に従って対処します。

ライブラリの初期化と有効化を行います。

// assets/js/app.js
import LiveSocket from "phoenix_live_view"

let liveSocket = new LiveSocket("/live")
liveSocket.connect()

cssの読み込みを行います。 .phx-disconnected 周りの記述があります。

/* assets/css/app.css */
@import "../../deps/phoenix_live_view/assets/css/live_view.css";

ファイルを編集したら、ブラウザ側で自動的に再読み込みする設定を行います。

# config/dev.exs
config :demo, MyAppWeb.Endpoint,
  live_reload: [
    patterns: [
      ...,
      ~r{lib/my_app_web/live/.*(ex)$}
    ]
  ]

上の記述では、live ディレクトリ以下の ex ファイルに対して行っています。

ここまでで、LiveView を利用できるようになるための記述は終わりました。

LiveViewが使用可能になるまでのセットアップを記述しました。
次は、「もしLiveViewを使わなかったらどのような実装になるか？」というのをテーマにしています。
「そんなのいいからLiveViewの実現方法を見たい！」という方はこちらへどうぞ。