Antigravity × Elixir/Phoenix LiveView 開発ガイド — AI補完でリアルタイムWebアプリを最速で構築する

# asdf でElixirをインストール
asdf plugin add erlang
asdf plugin add elixir
asdf install erlang 26.2
asdf install elixir 1.16.2-otp-26
asdf global erlang 26.2
asdf global elixir 1.16.2-otp-26
 
# Phoenixのインストール
mix local.hex --force
mix archive.install hex phx_new --force
 
# バージョン確認
elixir --version
# Erlang/OTP 26 [erts-14.2.2] [source] [64-bit] [smp:10:10] ...
# Elixir 1.16.2 (compiled with Erlang/OTP 26)

// .antigravity/settings.json
{
  "elixirLS.fetchDeps": true,
  "elixirLS.dialyzerEnabled": true,
  "antigravity.ai.contextFiles": ["lib/", "test/", "config/"]
}

# LiveView有効化でプロジェクト作成
mix phx.new realtime_demo --live
cd realtime_demo
 
# 依存関係のインストール
mix deps.get
cd assets && npm install && cd ..
 
# データベース作成
mix ecto.create

# Antigravityでプロジェクトを開く
antigravity .

# lib/realtime_demo_web/live/counter_live.ex
defmodule RealtimeDemoWeb.CounterLive do
  use RealtimeDemoWeb, :live_view
 
  @topic "counter"
 
  @impl true
  def mount(_params, _session, socket) do
    if connected?(socket) do
      # 全クライアント間でカウント状態を共有
      Phoenix.PubSub.subscribe(RealtimeDemo.PubSub, @topic)
    end
 
    {:ok, assign(socket, :count, 0)}
  end
 
  @impl true
  def handle_event("increment", _params, socket) do
    new_count = socket.assigns.count + 1
    # 全クライアントに変更を通知
    Phoenix.PubSub.broadcast(RealtimeDemo.PubSub, @topic, {:count_updated, new_count})
    {:noreply, assign(socket, :count, new_count)}
  end
 
  @impl true
  def handle_event("decrement", _params, socket) do
    new_count = max(socket.assigns.count - 1, 0)
    Phoenix.PubSub.broadcast(RealtimeDemo.PubSub, @topic, {:count_updated, new_count})
    {:noreply, assign(socket, :count, new_count)}
  end
 
  @impl true
  def handle_info({:count_updated, new_count}, socket) do
    {:noreply, assign(socket, :count, new_count)}
  end
 
  @impl true
  def render(assigns) do
    ~H"""
    <div class="flex flex-col items-center gap-6 p-12">
      <h1 class="text-3xl font-bold">リアルタイムカウンター</h1>
      <p class="text-6xl font-mono tabular-nums"><%= @count %></p>
      <div class="flex gap-4">
        <button phx-click="decrement"
          class="px-6 py-3 bg-red-500 text-white rounded-lg text-xl hover:bg-red-600">
          −
        </button>
        <button phx-click="increment"
          class="px-6 py-3 bg-green-500 text-white rounded-lg text-xl hover:bg-green-600">
          ＋
        </button>
      </div>
      <p class="text-sm text-gray-500">
        接続中の全ユーザーにリアルタイムで同期されます
      </p>
    </div>
    """
  end
end

# lib/realtime_demo_web/router.ex に追記
scope "/", RealtimeDemoWeb do
  pipe_through :browser
 
  live "/", CounterLive, :index
end

mix phx.server
# [info] Running RealtimeDemoWeb.Endpoint with cowboy 2.11.0 at 0.0.0.0:4000 (http)
# [info] Access RealtimeDemoWeb.Endpoint at http://localhost:4000

# PostgreSQL起動確認
pg_ctl status -D /usr/local/var/postgresql@15
 
# 起動していない場合
brew services start postgresql@15
 
# config/dev.exs のDB設定を確認
# username: "postgres", password: "postgres", hostname: "localhost"

# mix.exs
defp deps do
  [
    {:phoenix, "~> 1.7"},
    {:phoenix_pubsub, "~> 2.1"},  # 明示的に追加
    # ...
  ]
end

{
  "files.associations": {
    "*.ex": "elixir",
    "*.exs": "elixir",
    "*.heex": "html-eex"
  }
}