2023年末のElixir③Elixir本体／Phoenix／LiveView編（最新Elixirのキャッチアップや、アドカレのネタ探しに読んでください）

この記事は、[Elixir Advent Calendar 2023 シリーズ9](https://qiita.com/advent-calendar/2023/elixir) の3日目です

昨日は、 @Yoosuke さんで [「自衛官からエンジニアへ Elixirから始める Web開発 裏コラム vol.1」](https://qiita.com/Yoosuke/items/1d0debf55cf0cae214b1) でした

---

[piacere](https://twitter.com/piacere_ex) です、ご覧いただいてありがとございます :bow:

2023年末の時点で、Elixirにいったい何が出来るのかを紐解いていくシリーズで、[前回は「② 2023年に更新されたライブラリ／FW編」](https://qiita.com/piacerex/items/0c6ffb235e1146c38302)でしたが、今回は「③ Elixir本体／Phoenix／LiveView編」です

それぞれに対して、下記3点についてまとめました

- 昨年までの出来ること
- 今年、出来るようになったこと
- これらによって可能となること

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155423/f49e1715-c869-2187-eee1-7fdbe3f3dab3.png)

本シリーズの全体像は、下記になります

:::note warn
[①2023年の新たなライブラリ／FW編](https://qiita.com/piacerex/items/774dd91c67184bec6df1)
[②2023年に更新されたライブラリ／FW編](https://qiita.com/piacerex/items/0c6ffb235e1146c38302)
[③Elixir本体／Phoenix／LiveView編](https://qiita.com/piacerex/items/8cd483159c93d0f05bd7)
[④Web／スマホ開発ライブラリ編](https://qiita.com/piacerex/items/40ec656513be75a996c0)
[⑤AI・LLM前編【Nx／Bumblebee】](https://qiita.com/piacerex/items/f6a73a8252a3f6093b1a)
[⑥AI・LLM後編【Scholar／Explorer／Evison／EXGBoost】](https://qiita.com/piacerex/items/fd19820bc0befe52b156)
[⑦Livebook＋プラグイン編](https://qiita.com/piacerex/items/bcdcb7bc6c998335a406)
[⑧クラウドライブラリ編](https://qiita.com/piacerex/items/0ce1f05990a502a26ed7)
[⑨マイクロサービスライブラリ編](https://qiita.com/piacerex/items/7e4b15e4dd9a94e58b3b)
[⑩データ操作ライブラリ編](https://qiita.com/piacerex/items/2e19fd1df6ef2d7cf150)
[⑪2023年末までのElixirができることを振り返る](https://qiita.com/piacerex/items/4ef28623d898450c0dcf)
:::

なお、プロダクション開発に頻出するものや定番データ操作／クラウド向け／マイクロサービス向けのライブラリ／FWは、続編コラムで別途紹介します

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155423/1d38b5f3-9f65-9cb5-80d5-68cf0524416c.png)

あと、このコラムが、面白かったり、役に立ったら、![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155423/907a8695-4d83-1b5c-8052-d0ce52de5f66.png) をお願いします :bow:

# Elixir 1.14 → 1.16

https://github.com/elixir-lang/elixir

## Elixir 1.14までの出来ること

- パイプと関数パターンマッチ、Enum／Map等による強力で柔軟なデータ処理
- エッジコンピューティング向きクラウド級機能群
- 強力な分散サポート（イミュータブルによる副作用抑制、ノード間を跨ぐプロセス分離）
- 大量データ処理に有利なStream遅延処理
- 言語に標準搭載のインメモリDB（ETS／Mnesia）
- 可搬性高いマイクロサービス構築／解体支援（Umbrella、軽量プロセス）
- アクターモデルによるロック無し分散／並行・並列の実現
- 耐障害性（Supervisor）
- 大量アクセス下における低レイテンシ安定性能
- 少ないノード数で済むヘルシーなメモリ利用メカニズム（イミュータブル）
- ダウン率の低さ

詳細を知りたい方のために、全量は下記配下にあります

https://hexdocs.pm/elixir/changelog.html

## 今年、出来るようになったこと

- エラー箇所が分かりやすいコンパイルエラーメッセージ改善
- アプリケーション起動時間を5～30%短縮
- コンパイル時間の短縮
- ログローテーション／コンパクション
- マップが順番を保証

全量は下記にあります

https://github.com/elixir-lang/elixir/blob/v1.14/CHANGELOG.md

## これらによって可能となること

Elixir自体は、1.14以前の段階で、もう完成したクオリティであり、今年のアップデートはさほどありません

とは言え、コンパイル時間の短縮や、アプリケーション起動時間短縮、コンパイルエラーメッセージが分かりやすくなった等の改善は、開発体験の快適さに地味に効きます

今後ますます増え続ける以下のような需要に対し、唯一無二の王者的ポジションで出迎え、広まっていく未来をただ迎え撃つのみです

- 世の中のあらゆるデータを扱うアプリケーション／システム
- 大量ユーザーアクセスにおける安定した低レイテンシ
- イミュータブルに裏付けられたヘルシーなシステム構築
- 柔軟なマイクロサービス、もしくはデマイクロサービスの実現
- 分散／並行・並列においてロックから解放された世界
- 数年という単位でダウンしないサービス＋ダウンしても安全に復旧できる

# Phoenix 1.6 → 1.7

https://github.com/phoenixframework/phoenix

## Phoenix 1.6までの出来ること（Ectoも含む）

- RailsライクなMVC＋ルータ
- 超高速なWebSocketサーバ（Channel）
- マルチユーザ同時接続（Presence）やWebSocketサーバのみの自動生成も可能
- ファイル更新するだけで自動ビルドされ、アプリケーションが最新化できる
- LiveViewによるSPA／リアルタイムフロント開発を標準搭載
- esbuild（高速なアセットビルダ）を標準装備
- DB接続／認証／メール送信等のWeb開発で必要性高い標準搭載
- `mix phx.gen.～` でCRUD LiveViewとCRUD SSR画面、CRUD APIを自動生成できる
- `mix phx.gen.auth` で認証用CRUDも自動生成できる
- コンテキスト（DBアクセッサ、DBスキーマ、メール送信）のみの自動生成も可能
- 独自TLS証明書も発行可能
- Prometheus等へのログ連携も標準搭載
- Elixir／Phoenixのリソース状態をモニターできるダッシュボードが標準装備
- Elixirのデータ変換の強みを活かしたBFF（Backend For Frontend）開発が容易
- スマホ上やIoTデバイス上で動かしても軽快に動作するほどの軽量Webサーバ

詳細を知りたい方のために、全量は下記配下にあります

https://github.com/phoenixframework/phoenix/blob/v1.6/CHANGELOG.md

## 今年、出来るようになったこと

- ピュアElixir高速Webエンジン「Bandit」も利用可能に
- `~p` によるコンパイル時のルータ検証（Verified Routes）
- Streamベースの非同期遅延コレクション「LiveViewStream」を利用可能に
- Tailwind CSSとheroiconsが標準装備化
- Web開発時に定番のUIコンポーネントがcore_componentsとして標準装備

上記の整理には、@Alicesky2127 さんの下記コラムも参考にさせていただきました、ありがとございます :bow:

https://qiita.com/Alicesky2127/items/aea43e68e8d9c03ef121

全量は下記にあります

https://hexdocs.pm/phoenix/changelog.html

## これらによって可能となること

Phoenixも、バージョン1.6時点でLiveView統合やScaffoldフォルダ構造最適化、認証（PhxGenAuth）／メール送信（Swoosh）等の標準搭載、不要実装の除去も終え、IoT／スマホ上Webサーバとしても、大規模Webサーバとしても高い完成度を誇っており、もはやドラスティックな改修が必要無い安定状況に入り始めています※

そんな中で、ピュアElixir高速Webエンジン「Bandit」対応は、かなり大きな分岐点で、これまでPhoenixのWebエンジンであったErlangベースの「Cowboy」だけで無い選択肢と速度向上、その先にある更なる高速化を予感させます

また、「検証済みルータ（Verified Routes）」は、これまでランタイム時しか確定できなかったルータを、コンパイル時に確定することで、無効なルータを検出できるという、より宣言的な造りへとアップグレードされました

Streamベースの非同期遅延コレクション「LiveViewStream」も、これまで `assigns` による即時処理のみだった `mount` や `handle_params` 等から、JavaScriptベースのSPAフレームワーク同様、非同期遅延処理が可能となり、処理負荷が分散できるようになり、ユーザビリティが向上しました

Tailwind CSSとheroicons、core_componentsによる定番UIコンポーネントの標準搭載により、よりWebアプリケーションを気軽に開発できるようになり、今後ますますElixir／Phoenixによる開発が捗りそうです

<font color="blue">**※純粋なWebサーバとしての方向性は安定路線に入ったが、分散Nx用Webサーバのような他プラットフォームで見ないアグレッシブ路線が今後、控えています**</font>

# LiveView 0.18 → 0.20

https://github.com/phoenixframework/phoenix_live_view

## LiveView 0.18までの出来ること

- JavaScriptを書くことなくリアルタイムWebフロント／CSS操作をElixirのみで開発可能
- ReactやVue.js、Svelte等のフレームワークと同様のSPAをより手軽に構築
  - サーバサイドでのデータ更新をAPI無にフロントサイドに自動連携・反映
  - フロントサイドでのデータ入力をAPI無にサーバサイドに自動連携・反映
- 表示更新箇所のDOM差分のみをフロント／サーバ間でやり取りするので経済的
- フロントサイドのイベントハンドラをElixir関数として実装できる
- フロントサイドからはReactライクなイベントハンドラ呼出記述
- LiveView Upload：インタラクティブな進捗状況／停止／ファイル選択のアップロード
- ボタンクリック等のイベントだけで無く、キーボード／マウスイベントも取得可能
- JavaScriptとの連携を実現する `phx-hook` により、canvas更新やJSライブラリ併用も可能

詳細を知りたい方のために、全量は下記配下にあります

https://github.com/phoenixframework/phoenix_live_view/blob/main/CHANGELOG.md#0180-2022-09-20

## 今年、出来るようになったこと

- heexデバッグ：ブラウザ上で対象コンポーネント定義をしているサーバサイドコード特定
- DOM差分更新の速度が3～30倍向上
- Streamによる非同期遅延処理に対応

全量は下記にあります

https://hexdocs.pm/phoenix_live_view/changelog.html

## これらによって可能となること

元々LiveViewは、サーバサイドであるElixirのみで、JavaScriptとAPIを一切使わず、ReactやVue.js、Svelte等と遜色無いSPAやリアルタイムWebフロントを構築できる、素晴らしい仕組みです

一方で、ReactやVue.js、SvelteのようなJavaScript系SPAフレームワークと異なり、ブラウザ上からUIコンポーネント実装の定義をデバッグすることが出来ませんでした

ここがheexデバッグにより、対象コンポーネントのサーバサイドコードが特定可能となったことで解消され、生産性が高まりました

これにより、LivebookのようなOSSプロダクトもデバッグしやすくなり、LiveViewアプリケーションのハッキングも捗ります

また、2021年時点でもプロダクション開発に充分なレベルの実践的性能が備わっていたLiveViewですが、DOM差分更新の速度が3～30倍向上し、Streamによる非同期遅延処理に対応したことで、より高く快適なユーザビリティが実現しました

# 終わりに

ElixirとPhoenix、LiveViewの魅力と現状、そして成長が伝わったでしょうか？

中規模以上ないしはハードなWebサービス構築やアプリケーション開発に苦しんだ人ほど、Elixirスタックがもたらす圧倒的な威力／魅力に強く惹かれます

アジャイル開発やチーム開発にも非常に相性が良く、市場リリース速度を最高速にしたいスタートアップや、徹底的なコスト削減を行いたいIT企業にとっても、まさに「蘇りの飛躍」「不死鳥」という名前通りのリターンをもたらすでしょう

ぜひこの機会に、下記エリクサーチ等からElixirに触れてみてください

https://elixir-lang.info/topics/entry_colum
[![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155423/7363900d-51cb-40c5-c039-2f211d20c5b4.png)](https://elixir-lang.info/topics/entry_colum)

[次回は、「④ Web／スマホ開発ライブラリ編」](https://qiita.com/piacerex/items/40ec656513be75a996c0)をお送りします

---

明日は、 @zacky1972 さんで [「AtCoder Beginner Contest 332 C T-shirts を Elixir と C で解いてみた」](https://qiita.com/zacky1972/items/40b738408520362624ae) です

# p.s.このコラムが、面白かったり、役に立ったら…

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155423/907a8695-4d83-1b5c-8052-d0ce52de5f66.png) にて、どうぞ応援よろしくお願いします :bow: