2024年のElixir⑤Web／スマホ／マイクロサービス編（最新Elixirのキャッチアップや、アドカレのネタ探しに読んでください）

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

昨日は、@t-yamanashi さんで、[「Elixirで作る『DDJ-FLX4のジョグ対応ブロックくずし』　その5 対策をする、そしてプロジェクトを3分割で 」](https://qiita.com/piacerex/items/3450ac62a03da69b3327) でした

---

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

2024年末の時点で、Elixirにいったい何が出来るのかを紐解いていくシリーズで、[前回は「④2024年のクラウドライブラリ編」](https://qiita.com/piacerex/items/3450ac62a03da69b3327) でしたが、今回は「⑤2024年のWeb／スマホ／マイクロサービス編」です

`hex.pm` の[「Recently Created」](https://hex.pm/packages?sort=inserted_at)、もしくは [「Recently Updated」](https://hex.pm/packages?sort=updated_at) の今年分で上がっていたWeb／スマホ／マイクロサービス向けライブラリのうち、キャッチーなものを40本、7カテゴリに分けて紹介します

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

:::note warn
[①2024年の新たなライブラリ／FW編](https://qiita.com/piacerex/items/17c5cab114f89f11ff68)
[②2024年に更新されたライブラリ／FW編](https://qiita.com/piacerex/items/78fc907c0b44cf3dda15)
[③2024年のLivebook＋プラグイン編](https://qiita.com/piacerex/items/9f2d465af90f76d08ade)
[④2024年のクラウドライブラリ編](https://qiita.com/piacerex/items/3450ac62a03da69b3327)
[⑤2024年のWeb／スマホ／マイクロサービス編](https://qiita.com/piacerex/items/67ebb6d5979e6a3cc34f)
[⑥2024年のAI・LLMトレンドから2025年のElixirを占う](https://qiita.com/piacerex/items/4f905750861da27589b7)
[⑦2024年末までのElixirができることを振り返る](https://qiita.com/piacerex/items/1c0debb82a60f35258b9)
:::

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

### :xmas-tree: There are 13 Elixir Advent Calendar, making for a hot winter! :xmas-tree:

[Over the past 7 years, Elixir has consistently been a top-ranking language](https://speakerdeck.com/piacerex/7nian-jian-sok-ke-totupurankaru-risitaelixirniyoukoso?slide=13) in the programming category of the Advent Calendar, [claiming the #1 spot last year](https://qiita.com/advent-calendar/2023/ranking/feedbacks/categories/programming_languages). This year, too, Elixir is sure to stay at the top.

We’re feeling the excitement again this year… Please support or subscribe! :bow:

https://qiita.com/advent-calendar/2024/elixir
https://qiita.com/advent-calendar/2024/ranking/feedbacks/categories/programming_languages
[![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155423/272a1a34-c2d9-6716-d88f-46076bdb9557.png)](https://qiita.com/advent-calendar/2024/ranking/feedbacks/categories/programming_languages)

# ①Web／スマホ関連

Web／スマホ開発に役立つライブラリ／FWです

なお、初歩的なライブラリは、[昨年Web／スマホライブラリコラム](https://qiita.com/piacerex/items/40ec656513be75a996c0#mix-testwatch)、ないしは、BrightのElixirの [クラス1](https://app.bright-fun.org/skill_select/01HA663FMC0SM4AX1D56750QAN?class=1) で示しているので、ElixirにおけるWeb／スマホ用ライブラリが初めての方は、これらをご覧いただいてから本コラムを読むと良いかと思います

[![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155423/b7b1df69-731e-510f-c251-ddd7a4d1f627.png)](https://app.bright-fun.org/skill_select/01HA663FMC0SM4AX1D56750QAN?class=1)

## ａ）LiveView向けUIコンポーネント系

今年は、LiveView向けのUIコンポーネントが幾つも出てきた豊作の1年でした

### LiveInspect

LiveViewでPHPのvar_dumpのようなデータ構造をデバッグ（複数階層にも対応）

https://github.com/schrockwell/live_inspect

### Live UI

LiveView用にDB操作のためのCRUD自動生成やページネーション／ソート付きテーブル、高度な検索フォーム、レコードバージョン管理、ダーク／ライトモードの切り替えなど、モダンなアプリ構築のためのポピュラーなUIが揃えられたライブラリ

https://github.com/damir/live_ui

### DataTable

高機能な検索とソート、行選択、ページネータが装備されたデータテーブルコンポーネント

https://github.com/hansihe/data_table

### Scrivener Components

Phoenixでページネーターを実現する「scrivener」のLiveComponent版

https://github.com/Tricote/scrivener_components

### LiveMotion

LiveView上でスムースなアニメーションを実現するコンポーネント

https://github.com/benvp/live_motion

### Plox

LiveView用のSVGプロットコンポーネント

https://github.com/gridpoint-com/plox

### Daisy UI Components

Daisy UIコンポーネント

https://github.com/phcurado/daisy_ui_components

### SaladUI

Reactのshadcn/uiライクなUIコンポーネント

https://github.com/bluzky/salad_ui

### Tremorx

ReactのTremorライクなUIコンポーネント

https://github.com/briankariuki/tremorx

### LiveSelect

動的な絞り込みができるコンボボックスコンポーネント

https://github.com/maxmarcon/live_select

### PhoenixLiveProps

LiveViewにステートを提供するコンポーネント

https://github.com/coingaming/live_store

### PhoenixLiveProps

LiveViewにpropsとステートを提供するコンポーネント

https://github.com/mbreuer23/phoenix-live-props

### PhoenixLiveProps

LiveViewにpropsとスロット、ステート、ステート変化時関数呼出を提供

https://github.com/schrockwell/live_assign

## ｂ）LiveViewと別フロント連携、JSONデータ連携

### LiveReact

LiveView内でReactと連携するためのライブラリ

https://github.com/mrdotb/live_react

### LiveView Responsive

react-responsiveに影響を受けたLiveViewレスポンシブハンドラ

https://github.com/arturz/live_view_responsive

### LiveSvelete

LiveView内でSveleteと連携するためのライブラリ

https://github.com/woutdp/live_svelte

### LiveVue

LiveView内でVue.jsと連携するためのライブラリ

https://github.com/Valian/live_vue

### LiveData

LiveViewの動的データ生成の反映を伴うJSONデータ返却エンドポイントを簡単に作るライブラリ

https://github.com/hansihe/live_data

### LiveAdmin

LiveViewでDB管理UIを提供

https://github.com/tfwright/live_admin?tab=readme-ov-file#development

# ②マイクロサービス関連

マイクロサービス構築に役立つライブラリ／FWです

なお、初歩的なWeb／スマホ／マイクロサービス向けライブラリは、[昨年マイクロサービスライブラリコラム](https://qiita.com/piacerex/items/7e4b15e4dd9a94e58b3b)、ないしは、BrightのElixirの [クラス2](https://app.bright-fun.org/skill_select/01HA663FMC0SM4AX1D56750QAN?class=2) および [クラス3](https://app.bright-fun.org/skill_select/01HA663FMC0SM4AX1D56750QAN?class=3) で示しているので、Elixirにおけるマイクロサービス用ライブラリが初めての方は、これらをご覧いただいてから本コラムを読むと良いかと思います

[![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155423/4f549e8e-c2a4-17f3-4d28-ff6772a5efeb.png)](https://app.bright-fun.org/skill_select/01HA663FMC0SM4AX1D56750QAN?class=2)

## ｃ）分散クラスタ系

[昨年コラム](https://qiita.com/piacerex/items/7e4b15e4dd9a94e58b3b#libcluster) でも紹介している、ElixirでIPアドレス／DNSベースの分散クラスタ環境（オートスケール対応）を構成する [Libcluster](https://github.com/bitwalker/libcluster) の応用系や、その他分散クラスタを実現するライブラリです

### Horde

Delta CRDTに基づいて分散ダイナミックスーパーバイザーと分散レジストリを提供するライブラリ

https://github.com/derekkraan/horde

### Mnesiac

オートスケール分散Mnesiaを叶えるLibclusterストラテジー

https://github.com/beardedeagle/mnesiac

### Libcluster EC2

EC2用Libclusterストラテジー

https://github.com/kyleaa/libcluster_ec2

### Libcluster Postgres

PostgreSQL用Libclusterストラテジー（Elixirを活用するプロダクト [「Supabase」](https://supabase.com/) で使われている）

https://github.com/supabase/libcluster_postgres

## ClusterBot

ノードが切断された場合に自動的に再接続（ノード情報はCachex上に保持）し、ノードプールサイズを一定に維持する分散ライブラリ

https://github.com/micartey/cluster-bot

## Distributed Stream

Task.async_streamがローカルマシンでのプロセスプールによるストリーム処理をするのに対し、Distributed Streamはクラスタ上の複数マシン

https://github.com/pguillory/distributed_stream

### Shards

ETSテーブルのロック競合をコントロール可とすることでスケールアウトを実現するシャーディング／パーティション

https://github.com/cabol/shards

### DBCluster

Libcluster等を使わずにオートスケール分散DBを実現するライブラリ

https://github.com/Teifion/db_cluster

## ｄ）オーケストレーション系

### Pipeline Flow

業務フローをパイプラインで規定するためのフレームワーク

https://github.com/dkln/pipeline_flow

### Kraken

JSON DSLでパイプライン定義とサービス定義ができるフレームワーク

https://github.com/antonmi/kraken

### SwarmEx

OpenAIが提唱するマルチエージェントAIオーケストレーションのフレームワーク「Swarm」をElixirで使うためのライブラリ

https://github.com/nrrso/swarm_ex

## ｅ）オブザーバビリティ系

ここで紹介した以外のOpenTelemetry関連は、[`hex` で「opentelemetry」で検索](https://hex.pm/packages?search=opentelemetry&sort=total_downloads) することでも探せます

### O11y

ElixirでのOpenTelemetry利用を便利にするライブラリ

https://github.com/marcdel/o11y

### OpenTelemetry LiveView

LiveViewイベントをOpenTelemetryでトラッキング（OpenTelemetryスパンを生成）するためのフック

https://github.com/qdentity/opentelemetry_liveview

### OpenTelemetry Phoenix

Phoenix挙動をOpenTelemetryでトラッキング（OpenTelemetryスパンを生成）するためのフック

https://github.com/open-telemetry/opentelemetry-erlang-contrib/tree/main/instrumentation/opentelemetry_phoenix

### OpenTelemetry Ecto

EctoクエリーをOpenTelemetryでトラッキング（OpenTelemetryスパンを生成）するためのフック

https://github.com/open-telemetry/opentelemetry-erlang-contrib/tree/main/instrumentation/opentelemetry_ecto

### OpenTelemetry Req

Req挙動をOpenTelemetryでトラッキング（OpenTelemetryスパンを生成）するためのフック

https://github.com/open-telemetry/opentelemetry-erlang-contrib/tree/main/instrumentation/opentelemetry_req

### OpenTelemetry Telemetry

OpenTelemetryスパンをTelemetryイベントから生成してくれるライブラリ

https://github.com/open-telemetry/opentelemetry-erlang-contrib/tree/main/utilities/opentelemetry_telemetry

### Aten

適応型障害検知を分散ノードで行うライブラリで、[Raft（分散合意アルゴリズム）実装のRa](https://github.com/rabbitmq/ra) を土台に作られています

https://github.com/rabbitmq/aten

## ｆ）ビッグデータ系

### Csv2Sql

巨大CSVのDBロードを自動化できるライブラリ

https://github.com/Arp-G/csv2sql

#### Csv2Sql UI

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155423/5a0874af-c3cd-0307-24b6-64481351f959.png)

Csv2Sqlを画面上で操作するためのライブラリ

https://github.com/kreeti/csv2sql-ui

### ReqBigquery

Bigquery向けクエリーを簡単に作れるライブラリ

https://github.com/livebook-dev/req_bigquery

## ｇ）QoS系

### Hammer

APIリクエストやファイルアップロードにレートリミッターをかけられるライブラリ（ETS／Mnesia／Redisをバックエンドに選択可能）

https://github.com/ExHammer/hammer

### OffBroadwayMemory

[Broadway](https://github.com/dashbitco/broadway) のプロデューサ側をインメモリで持てるようにするライブラリ

https://github.com/elliotekj/off_broadway_memory

# 終わりに



次回は、[「⑥2024年のAI・LLMトレンドから2025年のElixirを占う」](https://qiita.com/piacerex/items/4f905750861da27589b7) をお送りします 

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

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

---

明日は、 私で 「2024年末のElixir⑥AI・LLMトレンドから2025年のElixirを占う」です