本の感想や質問をお気軽にコメントしてください。

内容の誤り、行番号の誤り、誤字・脱字などのご指摘も歓迎します。

https://zenn.dev/tkrd/books/live_view_primer_1

Chapter 07の記述ですが、/root ではなく、/robot ではないでしょうか。

この結果、ブラウザで /root パスにアクセスしたときに RobotLive モジュールが応答し、

Chapter 06の「要素の形状をボタン化する」のファイルがrobot_live.html.heexになっていますが、おそらくindex.html.heexのことだと思います。

Chapter 05の「hello アクションの改造」の”hello アクションのための HEEx テンプレートを次のように書き換えてください。”についてですがindex.html.heexに<%= @name %>を指定するとlocalhost:4000にアクセスした際にエラーが発生します。
恐らく<%= @name %>の記述が必要なのはhello.html.heexではないかと思います。

Chapter12のライブナビゲーションについて質問なのですが、
link/1コンポーネントを利用して各ボタンを修正した際に
これを処理するイベントハンドラは必要ないのでしょうか？

自分の環境ではそのままでは動作しなかったため以下のようなハンドラを追加しました

def handle_params(%{"step" => step}, _uri, socket) do
    {step, ""} = Integer.parse(step)
    socket = assign(socket, :wizard_step, step)
    {:noreply, socket}
  end

def handle_params(_params, _uri, socket) do
    socket = assign(socket, :wizard_step, 0)
    {:noreply, socket}
end

これで動作するようにはなったのですが、何か考慮漏れしていますでしょうか？

また、ウィザードの状態を管理する にRootLiveモジュールと
記載がありますがRobotLiveのことでしょうか

いくつかご質問させてください。

1. Chapter 05 インデックスページの改造のソースコード
   誤：<a href="/hello" class="underline text-blue-700">Greeting</a>
   正：<a href={~p(/hello)} class="underline text-blue-700">Greeting</a>
   ではないでしょうか。
   

2. Chpter 09 LiveViewプロセスの状態を変更する
   以下の文章の2行目（LiveView プロセスからをデータを受け取ることが…）は誤りだと思われます。
   

3. Chapter 09 LiveViewプロセスの状態を変更する
   以下の文章の3行目（そてい、このパラメータを受け取るために…）は誤りだと思われます。
   

Chapter14 静的ファイルの提供
音声
Ubuntu シェル B で以下のコマンドを順に実行し、「Audio」タブが選択された時に表示する音声ファイルをダウンロードしてください。

mkdir -p priv/static/audios
wget ${BASE_URL}/kenne.png -O priv/static/audios/kenne.png

上記のコマンドを実行しましたが、音声ファイルが見つかりませんでした。
（画像と動画のファイルは見つかりました。）

Chapter12について質問させてください。

ウィザードの状態を変更する関数を用意する
の説明についてですが、handle_eventのコードスニペットでは
以下のように記載されている箇所が

{step, ""} = Integer.parse(step)

さて、追加された関数節の本体 1 行目をご覧ください：

以下の部分では

{step, _} = Integer.parse(step)

と記載されています。

前者のコードではタプルの2つ目の要素が空文字であることを期待している記載になり
後者のコードでは要素が何であってもパターンマッチする処理になると思うのですが、
認識に相違はありますでしょうか？

またここで記載されている処理の場合、後者が適切なコードになるのでしょうか？

Chapter14
フィンガープリンティングによるキャッシュ制御

ブラウザで画像、音声、動画が正常に表示されることを確認した後、Chrome DevTools を用いて画像の URL パスを確認してください。今度は /images/letter_a-a144cdbd2afa39fd2cb2cfe92ce43712.png となっているはずです。

上記について、URLパスを確認したところ、 /images/letter_a-a144cdbd2afa39fd2cb2cfe92ce43712.png?vsn=dとなっていました。
（音声、動画のURLパスも同様）

これについて簡単に解説していただけませんでしょうか。

Chapter12の関数コンポーネントに関して質問させてください。

冒頭で次に、3つのボタンを作り変えていきます。という記載がありますが。
こちらの項目ではStart、Cancel、Back、Nextの4つのボタンを関数コンポーネントとして切り出しているようです。
また、Finishボタンは関数コンポーネントに変換されていませんが、
関数コンポーネント化したほうが一貫性があるように感じました。
Finishボタンに触れられていないのは意図があるのでしょうか？

Chapter17 表を描く
lib/jaunty_greeter_web/live/cyborg_live.ex (New)
上記のファイルに+で表記されているコードが必要かと思われます。

 defmodule JauntyGreeterWeb.CyborgLive do
   use JauntyGreeterWeb, :live_view
+  alias JauntyGreeterWeb.Shared
 end

Chapter18 グラフを描く
lib/jaunty_greeter_web/live/cyborg_live.ex
(84-87 行)

凡例のタイトルを消すためには以下のように修正する必要があると思われます。

 |> VegaLite.encode_field(:color, "max_or_min",
  type: :nominal,
- title: "Legend"
+ title: ""
 )

筆者より読者の皆様へ

2024年12月4日に Phoenix LiveView の 1.0.0 がリリースされたことを受けて、本書全体を書き直しました。

もっとも目立つ変更点は、これまで HEEx テンプレート内で <%= @value %> のように書いていたところを {@value} と書き直したことです。

次に重要な点は、Chapter 18 で vega_lite ライブラリと同時に vega_lite_convert ライブラリを導入したこと、廃止予定の VegaLite.Export.to_svg/1 の代わりに
VegaLite.Convert.to_svg/1 を使ったことです。

その他、ソースコードの折返し位置などを変更しています。

また、各章末に「コミット履歴」という節を設けました。コミットIDを用いて git checkout すれば本書の途中から学習を再開できます。詳しくは Chapter 01 内の「コミット履歴について」をご覧ください。

なお、これまで Chapter 01 内にあった「Elixir チートシート」は別記事「Elixir チートシート」として独立させました。