LiveViewとpiyopiyo.ex のススメ 2022/10/24 nako 協力：piacere

自己紹介 ● nako@9時間睡眠 ● Elixir/Phoenix初心者コミュニティ 『piyopiyo.ex』オーガナイザー ● 会社員。Webサービスのサーバサイ ドエンジニア ● Elixir10周年のお祝いにSnapCamera エフェクトを作りました:D

LiveViewとは？

LiveViewとは？ ● JavaScriptをほぼ記述せずにElixirで SPA を開発できるフレームワーク。 ● LiveViewは、全てのフロントとサーバーが WebSocket で接続されます。 SPA？ WebSocket？？ ？？

SPAって何？ ？？

SPAって何？ ● SPAは「Single Page Application」の略。 ● １つのWebページの中だけで、ページ遷移させず、ページ内のパーツの表示や入 力エリアの切替をします。 ● スマホアプリのような、ユーザー体験 を提供するWebアプリケーションが 構築できます。 ● 必要なコード（HTML、CSS、 JavaScript）は、最初にまとめて読み 込むか、ユーザー操作に応じて動的 にサーバーから随時、通信して読み 込みを行います。 従来のWebアプリケーション：画面遷移する SPA：画面遷移させず、ページ内のパーツだけ変える

一般的なSPAの構成 ● SPAを開発する場合、以下２つのパートが必要です。 ○ ブラウザ表示を受け持つフロントエンド（ React、Vue.js等） ○ フロントとデータのやり取りをするバックエンド API（Node.js、Rails、PHP等） ● React、Vue.jsといったJavaScriptフレームワークの場合、axiosというライブラリで HTTP通信を行い、APIとデータの受け渡しを行います。 ● SPAというフロント開発のために、別途APIを開発する必要があります。 ○ ReactやVue.jsだとフロント側でのデータ管理が必要なため、サーバ側データと二重管理 になりがちです。 ○ ReactやVue.jsだとフロント側とサーバ側の両方で似たようなバリデーションを別言語で開 発する必要があります。

WebSocket？ ？？

LiveViewを支える、WebScoketとは？ ● WebSocketとは、WebサーバーとWebブラウザの間で双方向通信できるようにす る技術仕様です。 ● Webコンテンツの配信に使われるHTTPは通常、フロントからの要求（リクエスト）に サーバーが応答（レスポンス）を返すという形でしか通信できないですが、 WebSocketでは一旦接続を確立した後はフロント側からもサーバー側からも能動 的にメッセージを送信することができます。 ○ 通信に使用するTCPポートやプロトコル（通信規約）、メッセージの形式などは HTTPの仕 様をそのまま使い、HTTPで確立したコネクションをWebSocketに切り替え（アップグレー ド）ることでWebSocket用の通信路を確保します。

WebSocketの利用例 ● 前提として、フロントとサーバー間でリアルタイム通信したい場合に使用します。 ● 利用例 ○ チャットアプリ ○ Web会議 ○ オンラインゲーム ○ リアルタイムのアクセス解析 ○ 通知 ○ etc

LiveViewの ススメ

改めてLiveViewとは？ ● JavaScriptをほぼ記述せずにElixirで SPA を開発できるフレームワーク。 ● LiveViewは、全てのフロントとサーバーが WebSocket で接続されます。

LiveViewが叶えること ● ReactやVue.jsのようなフロントエンドFWに劣らないリッチなUI体験 ● フロントエンドとバックエンドの分離の解消 ○ 別々の言語やFWではなく、同じ言語で実装できます ○ バリデーションを二重に実装しなくて済みます ● 双方向通信（WebSocket）の実装がより容易に ● Elixirエコシステムの恩恵をフロントからバックエンドまで ○ テスト ○ Doc作成など ● 特に作り込まなくても、あるフロントで行われた入力／操作が、全てのフロントにシ ンクロされるので、マルチユーザ利用のアプリを作るときに便利 ○ 複数人で一緒に聴いたり、操作できる音楽プレイヤーや動画プレイヤーなど ○ MMORPGやGoogleDoc、Figma、VScodeのようなアプリもカンタンに作れる

LiveViewで叶えるSPA開発 ● SPAを開発する場合でも、以下１つで終わりです。 ○ Elixirが「ブラウザ表示フロント」と「バックエンド」を同時に提供するので、サーバサイド開 発のみで完結します。 ● SPAというフロントの開発をAPI無で済ませます。 ○ SPAのためにAPIを作らなくて良くなります。 ● フロント側も、「axiosでAPIを呼ぶ」といったコードは不要です。 ○ フロント側とサーバ側で、変数を同じにすれば、自動的に同期されます。 ○ つまり、サーバー側のデータ操作だけで、フロント表示切り替えが済み、入力に合わせた リアルタイム処理もサーバー側で簡単に書けます。 ● ReactやVue.jsだとフロント側でのデータ管理が必要ですが、LiveViewは不要で、 サーバとデータが重複しなくなります。 ○ ReactやVue.jsだとフロント側とサーバ側の両方で似たようなバリデーションを別言語で開 発しなければなりませんが、LiveViewは不要です。

LiveViewの おすすめ書籍

LiveViewおすすめ書籍 1/2 WEB+DB PRESS vol.127 2022/2/24発売 Programming Phoenix Liveview 2022/7/19発売 Phoenixの基本から LiveViewまで把握し たい方に。 初心者にも。 LiveViewでのシス テム設計、マルチ パートアップロード などの機能や、ライ ブビューを総合的に テストする方法な ど。

LiveViewおすすめ書籍 2/2 Building Table Views with Phoenix LiveView 2022/08/23 ページネーション、並べ替え、フィル タリング、無限スクロールなどの高 度な機能を使用して、技術者以外 のユーザーがデータをすぐに利用 できるようにする方法を説明。 eBook。 中級者向け。

LiveViewの 関連技術

LiveViewの関連技術 ● ElixirDesktop ○ LiveViewの開発さえすれば、Android／iOSの両対応ネイティブアプリが開発でき るフレームワーク。 ○ 気になる方は、Discordの「elixirスマホ開発」チャンネルをご覧ください。 ■ 以前、ElixirImpで開催したYouTube動画をアップしています。 ■ 今後のイベントもアナウンスするので、ぜひサーバーへ！ ● Nx＋Axon ○ NX：Elixirで行列計算を高速実行できるフレームワーク（GPUやTPUも可）。 ○ Axon：Nxによるディープラーニング開発のためのフレームワーク。 ○ これらを使えば、LiveViewやElixirDesktopでAI・ML開発が体験できます。 ○ 気になる方は、Discordの「elixirで機械学習」チャンネルをご覧ください。 ■ 11/22(火)にLiveView JP#12「はじめてのElixir AI・ML」を開催予定。

さて、LiveViewの 説明ができたので…

今回題材になる、 piyopiyo.ex紹介

piyopiyo.exとは piyopiyo.exは、プログラミング言語Elixirと、Elixirで記述されたWeb開発フレームワーク Phoenixを扱う、初心者向けコミュニティです。 『Elixir／Phoenixをゼロから学び、ちょっとずつ出来ることを増やし、その過程を楽しんで いきましょう！』をモットーに掲げています。

今回のお題：piyopiyo.ex感想投稿サイト ● piyopiyo.exが過去のイベントで作成したポータルサイト。 ● https://piyopiyoex-portal.gigalixirapp.com/ ● 今回のLiveViewJPでは、それをリファインし、誰でも同じものを作成できるようにし てくださったそうです。感謝！

ご清聴ありがとうござ いました！