Phoenix LiveView 1.0 の紹介
動画
書き起こし
みなさん、Phoenix LiveViewをご存知でしょうか。これは、ある特定の領域で利用されるソフトウェアライブラリの名前です。とても便利なものですので、この動画で皆様にご紹介したいと思います。
今月の初旬、2024年12月4日に、Phoenix LiveViewのバージョン番号が1.0になりました。
開発が始まったのが2019年ですから、もう5年も経過したのですね。私は発表されてすぐに使い始めたし、1.0になる前から本番環境に実戦投入してきています。
で、このPhoenix LiveViewとは何か、ですけども…
シングルページアプリケーション（SPA）を開発するためのフレームワークです。シングルページアプリケーションとは、デスクトップやスマホ上で動くネイティブアプリのような動きをするWebサイトのことです。
伝統的なSPAではないWebサイトでは、ユーザーがリンクをクリックするたびにページ遷移が発生します。ページ遷移の度にユーザーはコンマ何秒か待たされることになります。
しかし、SPAの場合はページ内を部分的に描画し直すので、ユーザーを待たせません。その結果、ユーザーエクスペリエンスが向上します。
Web開発に携わっている方はSPAというとReactを思い浮かべるかもしれません。なので、Reactと比較しながら、Phoenix LiveViewのメリット・デメリットをお話します。
このイラストをご覧ください。
Phoenix LiveViewの位置づけを説明するための模式図です。
一番下のElixirはプログラミング言語の名前です。Elixir、知らない方もいらっしゃるかとは思いますが、JavaとかPythonとかRubyとかと同格です。
その上のPhoenix FrameworkはElixirで書かれたWeb開発フレームワークです。JavaのSpring、PythonのDjango、RubyのRailsなどと同格です。
そしてPhoenix LiveViewはPhoenix Frameworkのためのアドオンとして作られています。Web開発の一分野であるSPA開発に特化したフレームワークです。
この図からわかるように、Phoenix LiveViewはElixirとPhoenixの存在を前提とする開発フレームワークです。
Elixirは2012年に登場した比較的新しいプログラミング言語です。Version 1.0になったのは、2014年です。10年前の話です。プログラミング言語にとって10年というのは割と短いです。さきほど挙げたJava、Python、Rubyなどは1995年前後に生まれており、約30年が経過しています。Elixirはまだまだ新参者です。
2015年にPhoenix Framework 1.0がリリースされて、ElixirはWeb開発業界で徐々に使われ始めました。Elixirを採用するとWebサーバーの台数を減らせるとか、サイトが落ちにくいとか、開発スピードが速くなるとか、いろいろと利点があります。
そして、今年、満を持していPhoenix LiveViewがリリースされた、ということなのですね。
さて、Phoenix LiveViewのライバルが何かというと、それはReactです。ReactJS とも呼ばれます。Facebookを運営しているMeta社が開発しています。一般公開されたのが2013年です。12年前です。
このイラストをご覧ください。
データベースから取ってきたデータをブラウザの画面に反映させるまでに、Reactではどのような流れとなるのかをざっくりと説明しています。
右側の緑色のAPIを提供するのは、各種Webフレームワークです。SpringとかDjangoとかRailsとかNext.jsとか、何でもいいです。ここがPhoenix LiveViewと違うところです。Reactの方が汎用的です。組むWebフレームワークを選びません。
APIはJSONデータを返すように作ります。ReactはHTTP通信でJSONデータを受け取って、それを解析し、黄色の箱で書かれた状態を更新します。すると、用意されたテンプレートを用いてDOMが書き換えられます。
次のイラストをご覧ください。
Phoenix LiveViewの場合の流れを説明しています。
Reactの場合とは異なり、HTML文書の元になる「状態」はサーバー側にあります。LiveViewがデータベースから受け取っったデータを使って状態を更新すると、用意されたテンプレートを用いてHTML文書が作られます。そして、ブラウザのDOMとの差分データをWebSocket通信に載せてブラウザ側に送ります。
ブラウザ側では、LiveSocketと呼ばれるJavaScriptモジュールが動いていて、その差分データをDOMに適用し、ブラウザの画面を更新します。
Reactの説明にはなかった「WebSocket通信」という用語が登場しました。これは、ブラウザとウェブサーバーの間を常時接続して、双方向通信を行うための通信規格です。常時接続・双方向という点が重要です。この図では右から左に矢印が向いていますけれど、左から右に向かってもデータを送ることが可能です。常時接続なので、サーバーからブラウザへ、ブラウザからサーバーへ任意のタイミングでデータを送れるというわけです。この点は後で説明します。
次のイラストをご覧ください。
さきほどReactの説明に使ったものに①②③という番号を付けたものです。データベースからデータを得る、データをJSON形式に変換する、JSON データを解析して状態を更新するという3つのステップを経て、DOMが書き換わります。点線の矢印で書かれた部分は自動で進みます。
この図を記憶にとどめて、次のイラストをご覧ください。
この図からわかるようにPhoenix LiveViewではDOMが書き換わるまでのステップが2つになっています。点線の矢印で書かれた部分は自動で進みます。
状態が変化すると、Phoenix LiveViewはHTMLの差分データを作ってWebSocket通信でブラウザ側に送ります。その差分データをLiveSocketが受けてDOMを書き換えます。ここまでは全自動です。Webアプリケーションの開発者が意識することはありません。
Reactでは3ステップかかっていたことが、Phoenix LiveViewでは2ステップになっています。私がPhoenix LiveViewを推奨する第一の理由がこれです。Phoenix LiveViewの方がReactよりもデータ変換の回数が少ないので、コード量が減る。つまり、開発が早く終わる、すなわち開発コストが減るということです。
次のスライドに進みましょう。
この図では、ユーザーがブラウザの画面上をクリックしたときの処理の流れを説明しています。
LiveSocketがクリックイベントを検知すると、WebSocket通信でその情報をサーバー側に送ります。もちろんすべてのクリックイベントについて情報を送るわけではなく、開発者が特定のHTML要素に印を付けておくと、その要素がクリックされた時に情報がサーバーに伝わります。
右側のLiveView側ではそのイベント情報を受けて、DBにデータを書き込んだり、DBから追加のデータを取得したりして、状態を更新します。するとWebSocket通信でHTML差分データがブラウザ側に送られて、DOMが更新され、ブラウザの画面が書き換わります。
この図でも点線の矢印で書かれた部分は自動で進む点に着目してください。
Reactの場合、ブラウザ側でJSONデータを作ってHTTP通信でサーバー側のAPIに送る必要があります。ここでもステップが1つ増えることになります。
では、まとめです。
この動画では、Reactと比較しながらPhoenix LiveViewの特徴について解説しました。
根本的な違いは、アプリケーションの状態がどこに存在するか、ということです。Reactはブラウザ側に状態を持ち、Phoenix LiveViewはサーバー側に状態を持ちます。ちょっとした違いのように見えますけれど、この違いが極めて重要です。
Reactはブラウザ側に状態を持つため、HTTP通信でJSONデータを取得し状態を書き換える必要があります。
それに対して、 Phoenix LiveViewはサーバー側に状態を持ち、状態を書き換えた結果として生まれるHTML文書の差分をWebSocket通信でブラウザ側に送る。この差分情報を送る部分は自動的に進みます。
この違いにより、Phoenix LiveViewの方がデータの変換を行う回数がひとつ少なくなります。つまり、コード量が減ります。その結果、開発コストが下がります。
副次的な効果としてPhoenix LiveViewを採用するとJavaScriptのコードを書かなくて済む、ということもあります。これは私個人の意見になりますけれど、Elixirの方がJavaScriptよりも読みやすく書きやすいです。
ただし…
いくつかの留保事項があります。サーバー側に状態を持つので、当然、オフライン環境では使えません。今はだいたいどこでもWebSocket通信が使えますが、使えない環境もあります。
最後のこれはどうしようもないです。新しい言語Elixirを学ぶ必要がある、ということです。Web開発者はほぼJavaScriptを知っているので、Reactの方がとっつきやすいという面は否めません。でも、Elixirは学びやすい言語だと思います。ぜひ、この機会に入門してみることをおすすめいたします。
最後に、宣伝です。『Phoenix LiveView入門①』という自習教材をZennで無料公開しております。zenn liveviewでネット検索すると出てくると思います。こちらを開いていただいて、できれば「いいね」ボタンを押していただけると嬉しいです。
Discussion