00:00:00皆さん、こんにちは！Baselコミュニティセッションへようこそ。
00:00:29BaselでDXエンジニアを務めている、Maya Avendanoです。
00:00:32初めて参加される方で、もしチャットが表示されていない場合は、
00:00:35コミュニティプラットフォーム（[community.basel.com/live](https://www.google.com/search?q=https://community.basel.com/live)）からご参加ください。
00:00:41そちらではチャットや質問が可能です。質問は大歓迎ですよ。
00:00:45Xなどの他のプラットフォームで視聴されている方は、そちらからでも構いません。
00:00:49さて、今日のセッションは私自身とても楽しみにしています。実は、
00:00:53私は数年間Svelteの開発者で、多くの個人プロジェクトをSvelteで作成してきました。
00:00:58大ファンなので、専用のTシャツも持っているくらいです。
00:01:01Svelteファン、そしてSvelteに興味をお持ちの皆さんのために、
00:01:06本日はSvelteチームのメンバーをお招きしました。ようこそ！
00:01:12こんにちは！皆さん、自己紹介をお願いできますか？
00:01:21もちろんです。Richといいます。
00:01:24Svelteに携わって10年になります。プロジェクトを始めたのは2016年でした。
00:01:32当初は、ジャーナリストとしての本業であるビジュアル・ジャーナリズムで、
00:01:38JavaScriptを使ってニュースを伝えるために作り始めました。そして4年ちょっと前に、
00:01:44Baselに移ってからはフルタイムの仕事として、ずっと開発を続けています。
00:01:53ええ、Richほど長く関わっている人は他にいないでしょうね。
00:01:57私はSvelteのメンテナーになって5年ほどだと思います。
00:02:02Simonです。私もBaselでSvelteの開発を担当しています。
00:02:08Svelteを知ったきっかけは、前の会社でのハッカソンでした。
00:02:13当時は主にAngularを使っていましたが、何か違うものを試したかったんです。
00:02:18ハッカソンでSvelteを使い、すぐに虜になりました。ただ、同時にこうも思いました。
00:02:22「今の仕事でこれを使うのは無理だ。どうすればSvelteに関わり続けられるだろう？」
00:02:29かなりオタク気質ですよね。そうしてパートタイムのメンテナーになりました。
00:02:34数年後、Baselに参加してフルタイムで働く機会を得ることができ、
00:02:39今もとても幸せです。
00:02:43Elliotです。Richに時々思い出させるんですが、
00:02:46彼がSvelteを始めた年に、私は高校を卒業したばかりでした。
00:02:49なので、メンテナーとしての歴はそれほど長くありません。
00:02:54始めたのは、2021年末か2022年初頭だったと思います。
00:02:59SvelteKitのベータ版の頃にSvelteコミュニティを見つけ、参加しました。
00:03:04その後、Richとそれほど変わらない時期にVercelに入社しました。
00:03:09確か、同じ年の秋頃だったと記憶しています。
00:03:12当時はVercelのウェブサイトに関連する様々な業務を担当していました。
00:03:16そして驚くべきことに、1年数ヶ月前に――体感ではもっと短いですが、
00:03:23Svelteチームへ異動となりました。それ以来、フルタイムで開発しています。
00:03:27最近の面白いトピックとしては、Svelteの非同期SSR（サーバーサイドレンダリング）の実装を任されたことです。
00:03:36そういったマニアックでクールなソフトウェア開発の側面が、
00:03:43昔からSvelteの好きなところなんです。
00:03:48素晴らしいですね。皆さん、お越しいただきありがとうございます。
00:03:51まだ詳しくない視聴者の方のために、SvelteとSvelteKitについて簡潔に説明していただけますか？
00:04:00やってみましょう。Svelteには、多くの側面があります。
00:04:04コミュニティであり、生き方でもありますが、宣言的なコンポーネントフレームワークでもあります。
00:04:11ReactやVueなどを使っている方なら、基本的なコンセプトは馴染みがあるでしょう。
00:04:15document.createElementやsetAttributeなどを延々と書く代わりに、
00:04:21宣言的なコンポーネントとしてアプリを記述します。
00:04:25フレームワークの役割は、その宣言された意図を読み取り、画面上の実際の動作に変換することです。
00:04:33Svelteが他のフレームワークと少し違うのは、「コンパイラ・ファースト」という設計です。
00:04:40本質的には、非常にパフォーマンスの高いバニラJavaScriptに変換される言語なのです。
00:04:48使い勝手は他のフレームワークと似ていますが、その設計のおかげで、
00:04:53他のフレームワークよりも少しスマートでコンパクトに記述できます。
00:04:58そして、基盤レイヤーであるSvelteに加えて、
00:05:02その上に構築されたSvelteKitというフレームワークがあります。
00:05:08Reactの世界でいうところの、Next.jsのような存在です。
00:05:13ルーティング、SSR、データ読み込み、ビルドツールなど、
00:05:18アプリ構築に必要なあらゆる機能を提供します。これがあれば、
00:05:24自分で細々とした設定に煩わされることもありません。
00:05:28素晴らしい、ありがとうございます。
00:05:29舞台裏では色々と準備を進めてこられたようですね。
00:05:32ここ数ヶ月間、どのようなことに取り組まれてきたのか詳しく伺いたいです。
00:05:37デモも用意されているとか？
00:05:41ええ、いくつかデモがあります。
00:05:43まずは私から始めてもいいでしょうか？
00:05:44順序として、まずは非同期Svelte（Async Svelte）の開発について話し、
00:05:51その後に、それをベースに構築しているものへと進むのが分かりやすいと思います。
00:05:55いいですね。
00:05:55分かりました。この1年以上取り組んできたのは、
00:06:02私たちが「Async Svelte」と呼んでいるものです。画面を共有して、
00:06:12それが何なのかをデモで見せたいと思います。その後、Async Svelteの活用例に移りましょう。
00:06:20ええと、画面共有のボタンはどこだったかな…。
00:06:26権限のダイアログが色々出てきますね。
00:06:28少々お待ちを。
00:06:30「全画面を共有」と。
00:06:33よし。
00:06:34共有できているはずです。
00:06:35画面は見えていますか？ まだバックステージですかね？
00:06:38はい、見えています。
00:06:40ご存知ない方のために説明すると、これは Svelte.dev です。
00:06:43私たちの公式サイトですね。
00:06:44ここはプレイグラウンドになっていて、インストールやコマンドラインの操作なしで
00:06:49Svelteを試すことができます。
00:06:51ここに直接コードを書くことができるんです。
00:06:53これがデフォルトのプレイグラウンドの状態です。
00:06:55見やすいように、少し拡大しましょうか。
00:06:58ここにはいくつかの「状態（state）」があります。
00:07:03この不思議な記法は「ルーン（runes）」と呼ばれます。
00:07:05Svelteコンポーネント内で、何らかの値が変化することを宣言するもので、
00:07:10値が変われば再レンダリングが必要であることを示します。
00:07:12ここでは `name` と `count` があります。
00:07:15そして、その `name` をここに表示しています。
00:07:17さらに、その値をこの入力内容にバインド（同期）させています。
00:07:21こうして動かすことができますし、
00:07:24ボタンをクリックすれば数値を増やすこともできます。
00:07:27どのフレームワークでも何らかの形で実現できる、
00:07:29ごく基本的な機能ですね。
00:07:35Async Svelteで追加されるのは、`await` キーワードを
00:07:41コンポーネント内で直接使用できる機能です。
00:07:45では、`name` などのコードは一旦消してしまいましょう。
00:07:49これを `id` に変えて、1から始めることにします。
00:07:56外部ソースから JSON データを
00:08:01取得してくる例をお見せします。
00:08:04まずは `id` から派生（derived）する値を作ります。
00:08:10この `URL` は、`id` が変わるたびに再計算されます。
00:08:16ここに `URL` を表示してみると、IDの変化に合わせて
00:08:22URLも変わるのが分かりますね。
00:08:24次に、その URL を使ってデータを取得します。
00:08:28`my data = derived` と書いて、
00:08:30その中で `await fetch(URL)` を実行します。
00:08:36レスポンスを受け取って JSON に変換します。
00:08:41開発をされている方なら、
00:08:43数えきれないほど見てきたお決まりの処理でしょう。
00:08:47では、下の方に引用（blockquote）要素を作って、
00:09:00取得したデータを表示させてみます。
00:09:03実際のデータを詳しく見てみると……
00:09:06あ、壊れてる。
00:09:13取得したいのはこのデータで、それを表示したいわけです。
00:09:16中身を `data.quote` としましょう。
00:09:21おや、何かおかしいですね。
00:09:23Simon、Elliott、何が悪いか分かったら教えてください。
00:09:28ああ、ただの遅延でした。
00:09:30よし。
00:09:31その下に、引用の作者も追加しましょう。
00:09:40作業中は遅延設定を外したほうがいいかもしれませんね。
00:09:44どうでしょう。
00:09:46中括弧で囲むのを忘れていました。
00:09:50これでボタンをクリックすると、データがクリアされ、
00:09:55新しいデータがフェッチ（取得）され、レンダリングされます。
00:09:58非常に基本的で単純なことに聞こえるかもしれませんが、
00:10:01他のほとんどのフレームワークでこれを実現しようとすると、
00:10:08あっという間に恐ろしく複雑になります。
00:10:10ローカルの状態を持ち、副作用（effect）――
00:10:13Reactなら `useEffect` でしょうか――を定義して、
00:10:16その中でフェッチを行う必要があります。
00:10:20フェッチが完了したらローカルの状態に値を代入し、
00:10:25さらにエラーハンドリングなども考慮しなければなりません。
00:10:27かなり複雑なコードになってしまいます。
00:10:32しかし、これなら自然に動作します。
00:10:36遅延が発生したとしても、
00:10:43そのまま動き続けます。
00:10:45ただ、こう思うかもしれません。
00:10:46「ボタンを連打した場合、
00:10:49最終的な結果だけが表示されてほしい。
00:10:51途中のリクエストをいちいち処理したくない」と。
00:10:53それも可能です。
00:10:54`get abort signal from self` という
00:10:58ヘルパーをインポートして、フェッチ関数にそのシグナルを渡します。
00:11:11すると、ボタンをクリックした際に、
00:11:15途中のリクエストはすべて破棄され、
00:11:19最後のリクエストの結果に直接ジャンプします。
00:11:21古いリクエストが完了したときには
00:11:26すでに ID が変わっているため、
00:11:28既存のシグナルをキャンセルしているのです。
00:11:33さて、他には何ができるでしょう？
00:11:34ボタンの表示を即座に更新したいとします。
00:11:38その場合は `state.eager` を使って、
00:11:43非同期による待ち状態を解除できます。
00:11:47これも非常に便利です。
00:11:49スタイルも追加してみましょう。
00:11:51`data loading = effect.pending > 0` と定義します。
00:11:58これで読み込み中かどうかが分かります。
00:11:59読み込み状態にある間は、
00:12:04要素をフェードアウトさせる、といったことができます。
00:12:11繰り返しますが、これらを自分で制御しようとすると、
00:12:13同期をとるのが
00:12:15とてつもなく難しくなります。
00:12:17さらに進んでみましょう。
00:12:19引用に合わせて画像も追加したいとします。
00:12:28こんな感じになるでしょう。
00:12:37ID を変えると、
00:12:41様々な画像が表示されます。
00:12:42なぜかノートパソコンの画像ばかりですね。
00:12:46あ、いい写真がありました。
00:12:48ただ、少し表示にラグがあるのが分かりますか？
00:12:50まず引用文が表示され、その後に画像がパッと出てきます。
00:12:52これは、画像をレンダリングしてから
00:12:57ネットワーク経由で画像を取得しに行っているためで、
00:12:58ユーザー体験としてはあまり良くありません。
00:12:59そこで、プリロード用の
00:13:02ヘルパー関数を使ってみます。
00:13:07自作のユーティリティモジュールからインポートして……
00:13:17すると今度は、画像と引用文が
00:13:24同時に表示されるようになります。
00:13:27おっと、小さなバグを見つけてしまいましたね。
00:13:28後で直しておきます。
00:13:30でも、コンセプトは伝わったかと思います。
00:13:31計算処理（computations）の中でも、テンプレートの中でも、
00:13:34`await` を自由に使うことができます。
00:13:36これらすべてが完璧に同期され、
00:13:40複数のコンポーネントが同じイベントに対して
00:13:44独立して動作している場合でも機能します。
00:13:47サーバーサイドレンダリング（SSR）にも対応しています。
00:13:49Async Svelte がなければ、
00:13:52これらを実現するのは
00:13:55苦痛以外の何物でもなかったでしょう。
00:13:58この強力な基盤があるからこそ、
00:14:02さらにクールなものを構築できるのです。ここからは、
00:14:05二人にバトンタッチして詳しく話してもらいましょう。
00:14:09はい。
00:14:10私からは、この仕組みの上に構築される
00:14:17これはその上に構築されることになります。
00:14:19Svelteで非同期処理が使えるようになったのは、非常に強力なことです。
00:14:24しかし、その上のメタフレームワークであるSvelteKitは、
00:14:27いわばまだ「旧世界」に留まっています。
00:14:30別のファイルに記述するload関数というものがあり、
00:14:34それがあるために、先ほど見たような新しい機能を
00:14:38十分に活用することができないのです。
00:14:41そこで現在取り組んでいるのが「リモート関数」です。
00:14:45これらはすでにSvelteKitで利用可能です。
00:14:48実験的な機能ではありますが、今すぐ使うことができます。
00:14:50時間の都合上、ここではリモート関数の
00:14:55最もシンプルな使い方をお見せしましょう。
00:14:59これから行うのは、ごく単純な
00:15:01カウンターの作成です。
00:15:04ボタンをクリックするたびにカウントが増えますが、
00:15:08その数値はサーバー側で保持されます。
00:15:10これをこの counter.remote.ts ファイルに実装します。
00:15:16まずは count 変数から始めましょう。
00:15:18そして getCount を定義します。
00:15:20$app/server から query をインポートして使用します。
00:15:26これがリモートクエリになります。
00:15:29ここでは単に count を返します。
00:15:31これを利用する側では、
00:15:37インポートしたファイルから getCount を await して呼び出します。
00:15:44このインポートは、TypeScriptの通常のインポートに見えます。
00:15:48関数をインポートして呼び出しているだけで、
00:15:52それが Promise を返すので、
00:15:54await しているというわけです。
00:15:56しかし実際には、これはクライアントとサーバーの境界を越えています。
00:16:01この getCount は、実はサーバー上で動作しているのです。
00:16:05つまり、実際にはクライアントが
00:16:08隠されたエンドポイントにリクエストを送信し、
00:16:14そこからデータを受け取っているのです。
00:16:17もちろん、サーバーサイドレンダリングにも対応しています。
00:16:19初回の読み込み時には、バックエンドにリクエストするのではなく、
00:16:23直接処理が行われます。
00:16:25さて、カウントを取得できましたが、まだ何も
00:16:29操作することができません。
00:16:29値を増やせるようにしたいですね。
00:16:31そこで、もう一つのリモート関数を実装します。
00:16:34Copilotを使わずに素早く実装しましょう。
00:16:38あ、コマンドを間違えました。
00:16:40$app/server から command を使います。
00:16:45この中で、サーバーの状態を更新します。
00:16:49しかし、これだけでは不十分です。
00:16:52これは「コマンド」なので、
00:16:55更新の通知も一緒に送る必要があるからです。
00:16:58そこで、リモート関数である getCount を呼び出し、
00:17:03その refresh を実行します。
00:17:05これによって、基本的には
00:17:08シングルフライトのミューテーション（更新）を指示しています。
00:17:10呼び出されたらカウントを1増やし、
00:17:14その後、クライアントに対して
00:17:19このページで getCount が使われている箇所は
00:17:221増やすべきだ、という情報を返します。
00:17:24つまり「新しい状態が利用可能である」と伝えるのです。
00:17:27これをここに追加すると、
00:17:29on:click でカウントを増やす処理になります。
00:17:37やることはこれだけです。
00:17:38通常の関数呼び出しのように見えますが、
00:17:40実際にはサーバーを呼び出しています。
00:17:43これでクリックすると、カウントが増えていきます。
00:17:49これはリモート関数の非常に
00:17:53ざっくりとしたプレビューに過ぎません。
00:17:55これを使えばもっと多くのことが可能です。
00:17:58また、AIとの相性も抜群です。
00:18:01例えば、セッションが始まる5分前に、
00:18:06私はコードCopilotにこう頼みました。
00:18:12「Portalテーマの基本的なブログを作って、
00:18:18リモート関数の機能をいくつか披露したい」と。
00:18:20「Svelte 5とSvelte MCPを使ってほしい」とも伝えました。
00:18:25MCPについては後ほどエリオットが話してくれます。
00:18:29リモート関数とasyncを使って、と頼んだところ、
00:18:32ほぼ一発で（one-shot）書き上げました。
00:18:34これはプリレンダリングされています。
00:18:35このブログはプリレンダリング済みです。
00:18:37ここで入力をすると……
00:18:42この辺に保存します。
00:18:43すると更新されます。
00:18:49裏側では、基本的には同じことをしています。
00:18:53コードを素早く見てみると、
00:18:56await getPosts を使っています。
00:18:59getPosts はプリレンダー関数です。
00:19:01つまり、実行時（runtime）ではなく
00:19:05ビルド時に実行されることを意味します。
00:19:06下の方にはコメントセクションがあり、
00:19:12コメントを読み込んだり、フォームを使って
00:19:15新しいコメントを投稿したりしています。
00:19:19これらはすべてリモート関数を使っており、load関数は
00:19:23どこにも使われていません。
00:19:24AIが一発でこれを仕上げたのです。
00:19:27この詳細については、エリオットが
00:19:32これから話してくれると思います。
00:19:34ええ、いいですね。
00:19:37リッチ・ハリスが冒頭でやったのと同じ
00:19:41画面共有の手順を踏まないといけませんね。
00:19:46よし、できました。
00:19:52さて、私たちが最近取り組んでいる
00:19:57AI開発について少しお話しします。
00:19:59「私たち」と言いましたが、私個人のことではありません。
00:20:02主にパオロという男と、Svelteの
00:20:06他のコントリビューターたちのことです。
00:20:09実際、最近行ったAI関連の開発のほとんどは
00:20:13彼らによるものです。
00:20:14彼らには本当に感謝しています。
00:20:15素晴らしい仕事をしてくれました。
00:20:18では、ここをズームしますね。
00:20:24はい、これでよし。
00:20:27実現のために何を構築したか説明し始めると長くなります。
00:20:28というのも、MCPサーバーがあり、
00:20:31非常にクールな機能が備わっているからです。
00:20:32いくつかの「スキル」も公開しています。
00:20:36ですが、ありがたいことに、その詳細を
00:20:38すべて知る必要はありません。
00:20:41Open CodeやCloud Codeのプラグインも
00:20:43同時に公開しているからです。
00:20:47これからOpen Codeプラグインをインストールしてみます。
00:20:48具体的には、この設定をコピーして、
00:20:52ライブラリ内にある Open Code.json ファイルに
00:20:55貼り付けるだけです。
00:20:58それを使って、Open Codeにサイトを構築させてみましょう。
00:21:00どうなるか見てみましょう。
00:21:06こう指示してみます。
00:21:10「assetsフォルダに画像をいくつか用意しました」
00:21:11ここもズームしますね、あいにくですが。
00:21:17残念ながら、これ以上はズームできないようです。
00:21:28あ、できました。
00:21:34OK。
00:21:34（入力中）
00:22:00これで何が起こるか見てみましょう。
00:22:06「間違いはなしで」と。
00:22:09ええ、その通り。
00:22:11それはとても重要です。
00:22:12プロンプトの最後にそう書かないと、
00:22:13うまく動かないことがありますからね。
00:22:15処理が進んでいる間に、彼らが取り組んできたことについて
00:22:18少し補足しておきましょう。
00:22:21Svelteのサイトの
00:22:25AIドキュメントに行くと、全容を把握できます。
00:22:28私たちはMCPを公開しており、それには専用のCLIツールも含まれています。
00:22:32そして、いくつもの……
00:22:36おや、この5分の間に彼が修正したようですね。
00:22:405分前とは見た目が変わっています。
00:22:43とにかく、マシン上で有効になるツールがいくつかあります。
00:22:46その多く、あるいは最初の2つは、
00:22:51Svelteに関する正確な情報を取得するためのものです。
00:22:53AIエージェントに対して、ドキュメントの読み方を教え、
00:22:58特に、ドキュメント全体を読み込ませたり
00:22:58探索させて時間やコンテキストを浪費したりせずに、
00:23:03求めている特定の情報をピンポイントで
00:23:05取得できるようにします。
00:23:08また、非常に優れた「Svelteオートフィクサー」も構築されました。
00:23:11これは、LLMが使いがちな良くないパターンを検知して
00:23:12修正してくれるものです。
00:23:15さらに、こちらのプレイグラウンドとの
00:23:17統合機能も備わっています。
00:23:21もう一つ、私たちがこうしたAI関連の
00:23:26開発を進める上で重視している設計上の決定事項があります。
00:23:33それは「エージェントだけでなく人間にとってもいかに有益にするか」です。
00:23:37エージェントが魔法のように何かを知っていて、
00:23:39人間にはその理由が分からず、
00:23:44調べようがない、といった不透明なものにはしたくありません。
00:23:46そのため、基本的にはすべての取り組みを
00:23:52ドキュメントにも統合するようにしています。
00:23:55公開している「スキル」についても、
00:23:59（これらはOpen CodeやCloud Codeプラグインに含まれていますが）
00:24:00その内容はすべてドキュメントとしても公開されています。
00:24:01LLMに対してどのようなベストプラクティスを教えているのか
00:24:04気になったときは、いつでも自分で確認できます。
00:24:07それらは常に私たちのサイトに掲載されています。
00:24:09さて、戻って進捗を見てみましょう。
00:24:12まだあまり進んでいないようですね。
00:24:15いや、結構進んでいるかもしれません。
00:24:18ええ、スタイリングがたくさん行われています。
00:24:20ローカルホストを開いて、
00:24:25何ができたか見てみますね。
00:24:27何もありません。
00:24:31OK、まあ、処理が終わるのを待って
00:24:34皆さんを引き止めるわけにはいきません。
00:24:35少し時間がかかるかもしれませんし。
00:24:39もし最後に時間があれば、LLMが私たちの「手作りポテトキャノン」ビジネスのために
00:24:45どんな案を出したか確認しましょう。
00:24:56以上が、ここ数ヶ月で行ってきた
00:25:00AI開発の状況です。
00:25:03素晴らしい。
00:25:07まさに今の時代に非常に重要ですね。
00:25:10次はどうなるのか、とても気になります。
00:25:12皆さんが楽しみにしていることは何ですか？
00:25:13次のリリースは SvelteKit 3 になります。
00:25:15現在、鋭意制作中です。
00:25:19ただ、新機能が目白押しの
00:25:20巨大なアップデートというわけではありません。
00:25:25基本的には、古いものを廃止（デプレケート）して
00:25:26整理整頓する機会です。
00:25:32エキサイティングな新機能を構築するための土台作りですね。
00:25:37最大の変更点は、Vite 6が2時間前にリリースされたことを受けて、
00:25:40環境API（Environment API）を使用することです。
00:25:46また、最新バージョンとして Svelte 5 が必須になります。
00:25:51Svelte 4 も引き続き十分お使いいただけます。
00:25:53その後は、async Svelte やリモート関数の安定化に注力していく予定です。
00:25:56新機能が目白押しというわけではなく
00:25:57基本的には古いものを廃止する機会であり
00:25:59デッキを整理して
00:26:02エキサイティングな新機能を構築できるようにするものです
00:26:06最大の変更点は、Environment APIを使用することです
00:26:09ちょうど2時間前にVite 6がリリースされたばかりですからね
00:26:15そして最新バージョンとしてSvelte 5が必要になります
00:26:21Svelte 4を使っている方なら、移行は十分に可能です
00:26:25その後は、async Svelteの安定化と
00:26:29Remote Functionsの安定化に注力する予定です
00:26:33いいですね
00:26:37噂によると
00:26:41エリオットに交代するそうですね、LLMが
00:26:44準備を終えたようですから
00:26:46何ができたか見せてもらえますか？
00:26:47よくあることですが、次のスポットに
00:26:49切り替わった直後の1ミリ秒後に完了したようです
00:26:55では、こちらを見てみましょう
00:26:59はい、これが職人技のポテトキャノン・ストアフロントです
00:27:03およそ1ドル分のトークンで作成しました
00:27:07コードをざっと見たところ
00:27:13変なことは一切しておらず
00:27:17Svelteのベストプラクティスと言える手法を使っています
00:27:22ぜひ試してみてください
00:27:25感想を聞かせていただければと思います
00:27:27パオロたちが取り組んできた
00:27:29これら一連のAI機能には本当に感銘を受けています
00:27:33今後も改善を続けていきたいので
00:27:35ぜひフィードバックをお願いします
00:27:38ありがとうございます
00:27:40最高ですね、今日はデモの神様が味方してくれました
00:27:45では、質問を受け付けましょうか？
00:27:47チャットにいくつか質問が来ていますね
00:27:51私から始めましょうか
00:27:53Remote Functionsについての質問です
00:27:57Remote Functionsでストリーミングは可能になりますか？
00:28:00Remote FunctionsのDXは本当に素晴らしいので
00:28:03どこでも使いたいと思っています
00:28:05リチャード、君の担当分野だから
00:28:06答えてもらえるかな？
00:28:10ええ、その話を振ってもらえて良かったです
00:28:12実はちょうど今、この機能を
00:28:15切実に必要としているアプリを構築しているところなんです
00:28:17以前、サイモンがプルリクエストを出して
00:28:22一部を実装してくれました
00:28:23その後、私たちのデザインに関する考えも
00:28:28少し進化しました
00:28:31これは私たちが早く取り掛かりたいと思っている機能です
00:28:35もしこのイベントが1週間後だったら
00:28:40「これがプルリクエストです」と言えたかもしれません
00:28:43まだそこまでは至っていませんが
00:28:44非常に優先順位が高いことは間違いありません
00:28:47この機能にはとても期待しています
00:28:49馴染みのない方のために説明すると
00:28:51要するにクエリ機能のリアルタイム版のことで
00:28:55サーバーにデータをリクエストすると
00:28:59非同期イテラブルを返し
00:29:04新しいデータが発生するたびに
00:29:09そのデータをクライアントに提供します
00:29:12ポーリングなどを使わずにリアルタイムデータを取得でき
00:29:15非常にスムーズです
00:29:16ページでそのデータが表示されなくなるとすぐに
00:29:21リクエストは切断され
00:29:23非同期イテラブルも自身をクリーンアップします
00:29:26リアルタイムの課題を解決する上で
00:29:28非常に優れた考え方だと思います
00:29:31ええ、とても楽しみです
00:29:33明確にしておきたいのですが
00:29:35リッチが言う「もうすぐ取り掛かる」というのは
00:29:38現在、私がエリオットの作業待ちで
00:29:40ブロックされている状態だということです
00:29:41彼が終わるのを待っているところです
00:29:43今取り組んでいることが終わり次第
00:29:45すぐ着手します
00:29:46いいですね
00:29:50別の質問です
00:29:52「なぜ他のフレームワークではなくSvelteを選ぶべきか？」
00:29:55もちろん、私たちはSvelteが最高で最も有能だと思っていますが
00:30:07今の時代、どのフレームワークを
00:30:11選ぶべきかという本当の理由は
00:30:13正直なところ、他のものより楽しいと感じるからです
00:30:18その多くは、他の何よりも
00:30:20個人の好みの問題です
00:30:22特に今は、フレームワーク間の
00:30:24切り替えが非常に容易な時代です
00:30:28魔法使いのようなAIがいて、例えば
00:30:32「Vueではこうやっているけど
00:30:35Angularなどではどうやるの？」と聞けば
00:30:37すぐに教えてくれます
00:30:38学習曲線は、現代においては
00:30:43実質的に平坦化されています
00:30:45ですから、自分が最も生産的になれて
00:30:49使っていて最も幸せなツールを使うべきです
00:30:53その一部はプロジェクトを囲むコミュニティであり
00:30:57また一部はプロジェクトの全体的な哲学です
00:31:02しかし、この時代において不要なのは
00:31:05「どのフレームワークならそれが可能か」で選ぶことです
00:31:11なぜなら、どれも同じことができますし
00:31:13エコシステムの大きさで選ぶ必要もありません
00:31:16それはもはや懸念事項ではないからです
00:31:18とにかく、一番楽しいフレームワークを選んでください
00:31:21私たちは、それが明らかにSvelteだと思っているわけですが
00:31:26素晴らしい回答ですね
00:31:27大好きです
00:31:29次は、キャッシュに関する新機能はありますか？という質問です
00:31:35これは恐らくRemote Functions関連のことでしょう
00:31:38Remote Functionsの文脈では
00:31:41まだキャッシュAPIはありません
00:31:45内部的な提案はあります
00:31:48活発に進めている作業ですが
00:31:51進行中の他の多くのタスクの中で、一旦脇に置かれています
00:31:55しかし、すぐに再開される予定です
00:31:58そうすれば、Remote Functionsと統合された
00:32:01非常に優れたキャッシュAPIが手に入ります
00:32:05素晴らしい
00:32:06少し軽い質問です
00:32:08「理想のSvelte Summitの開催地はどこですか？」
00:32:10おっと、これは
00:32:13この場で順に答えていきましょうか？
00:32:16エリオット、ミュートになってるよ
00:32:22「サミット（山頂）」の話なら
00:32:24エベレストやK2がありますが…
00:32:28冗談はさておき、私にとって場所はそれほど重要ではありません
00:32:34基本的には他の
00:32:36Svelte開発者たちと一緒に過ごすわけですから
00:32:38ありきたりですが、みんながいればどこでも最高です
00:32:43でも、ヨーロッパはいいですね
00:32:46あちらの方ならどこでも
00:32:48まだ行ったことがないので、ぜひ行ってみたいです
00:32:51海外に行く口実ができるのはいつでも嬉しいです
00:32:56Svelteの世界では
00:33:01何にでも「SV」という接頭辞をつける傾向があります
00:33:04ライブラリやコンセプトなど
00:33:06何を作ろうとしているにせよ
00:33:08ただ頭に「SV」をつけるんです
00:33:11もしそれを突き詰めるなら
00:33:12カンファレンスはスヴァールバル（Svalbard）で開催すべきでしょうね
00:33:15いいですね
00:33:20ノルウェーの諸島のことですよね
00:33:23今、その場でググったんですか？
00:33:27実は先日、たまたま会話に
00:33:31出てきたんですよ
00:33:35ええ、偶然にも
00:33:38そうですね
00:33:41完全に夢を語っていいなら、理想の場所は
00:33:45実は船の上がいいですね
00:33:47海のど真ん中で
00:33:49天気の良い日に
00:33:52船の上で3日間過ごすんです、楽しそうでしょう
00:33:55どれも素敵そうですね
00:33:57次回のSvelte Summitがいつになっても楽しみです
00:34:00コミュニティとイベントに関して
00:34:03こんな質問が来ています。「Svelteに参加するには
00:34:05どうすればいいですか？イベントやコミュニティでの
00:34:07機会はありますか？」
00:34:11イベントは常に開催されています
00:34:13sveltesociety.devに行けば
00:34:15イベントカレンダーを見ることができます
00:34:16また、参加するための最良の方法についてのリソースも豊富です
00:34:19特に自分の地域に活動がない場合で
00:34:22Svelte Societyの支部を立ち上げることに
00:34:25興味があるなら、sveltesociety.devが
00:34:28情報を得るための場所になります
00:34:33ええ、あと初心者の方はDiscordに入って
00:34:36いろいろなチャンネルで挨拶してみてください
00:34:41各支部や地域ごとの
00:34:47専用チャンネルもあります
00:34:49それらの多くは、それぞれの言語の
00:34:55別のDiscordチャンネルへの案内になっています
00:34:57例えば、ドイツのSvelte Societyの
00:35:00Discordチャンネルもあります
00:35:01ですから、とにかくDiscordチャンネルに飛び込んでみれば
00:35:06そこから道が開けます
00:35:08それ以外でも、Svelte関連のチャンネルは
00:35:12どこも居心地の良い場所ですよ
00:35:16ええ、Svelteの人たちは素敵な人ばかりです
00:35:18ぜひチェックしてみてください
00:35:22AIに関する質問がもう一つあります
00:35:24エリオット、君がさっき話していたことですが
00:35:26「フレームワークがエージェントやAIの世界に
00:35:29適応していくのを見るのは素晴らしいです」とのことです
00:35:31「エージェントがデフォルトでSvelteを選ぶ割合などの統計はありますか？」
00:35:36いいえ、特にありません
00:35:37v0のようなサービスを通じて
00:35:44ある程度のシグナルを
00:35:46テレメトリとして確認できるかもしれませんが
00:35:49Svelteに関しては一般的に…
00:35:53というか、Svelteの開発に携わっている人々は
00:35:57テレメトリ（利用状況データ）の収集に対して
00:36:01比較的否定的なアプローチを取っています
00:36:06ですから、私たちが持っているデータのほとんどは
00:36:08公開されている情報だけです
00:36:10NPMのダウンロードトレンドは見ることができますが
00:36:14今はなぜか異常な数値を示しているので
00:36:18あまり鵜呑みにしないほうがいいでしょう
00:36:20ええ、お気になさらず
00:36:22とにかく、私たちはプライバシーの観点から
00:36:25ユーザーのデータを一切収集していません
00:36:27皆さんのマシンを監視するようなことはしたくないですから
00:36:30得られるデータは、公開情報か
00:36:35また、Vercelのいくつかのチャネルを通じて有益なデータが得られることもあります。
00:36:43逸話的ですが、LLMに「何を選ぶべきか」「何がベストか」と聞くと
00:36:46Svelteがよく挙げられます。
00:36:51それは少なくとも、嬉しいことですね。
00:36:53ただ、それが実際にSvelteを選ぶことにつながるか、
00:36:56プロンプトで指定しなかった場合にどうなるかは、また別の問題です。
00:37:01ええ、とても興味深いですね。
00:37:03「理想的なツールは何か」と考えるようプロンプトを出すと、
00:37:06彼らはしばしばSvelteだと答えます。
00:37:08しかし、「このフレームワークを使ってほしい」とか
00:37:11「最高のフレームワークを使ってほしい」と言わずに
00:37:12「アプリを作って」と言うと、大抵はデフォルトでReactになります。
00:37:17それを変えるために私たちができることは、それほど多くありません。
00:37:21ですので、私たちは、
00:37:23実際にSvelteを選んでくれたチームに対して、
00:37:27最高の体験を提供することに注力してきました。
00:37:29そして、エージェントがドキュメントを読み込み、
00:37:31間違いを解決できる能力を最大限に引き出せるようにしています。
00:37:36ええ、PortalテーマのブログやPotato Cannonのウェブサイトを見れば分かる通り、
00:37:42彼らはコンテキストや
00:37:46MCPなどの扱いに非常に長けてきています。
00:37:50ですから、今ではかなり短期間で、かなりのところまで到達できます。
00:37:56いいですね。
00:37:57ええ、皆さんが取り組んでいる素晴らしい仕事や、
00:37:58人間とエージェントの両方のユーザーに
00:38:01対応している様子を見られるのは素晴らしいことです。
00:38:04さて、Svelteの機能について、
00:38:06より具体的な質問がいくつか届いています。
00:38:08一つ目は、「マークアップ内で同じリモート関数を
00:38:11複数回呼び出しても大丈夫でしょうか？
00:38:14それともscriptタグ内で一つの参照にまとめるべきでしょうか？」というものです。
00:38:17ええ、大丈夫ですよ。
00:38:20あなたが今まさにこれに取り組んでいるので、答えてください。
00:38:24現在、Richがライブクエリへの着手を妨げている要因は、
00:38:26実はこの質問に関連しています。
00:38:29はい、同じリモート関数を複数回呼び出したり、
00:38:35異なる場所で複数回参照したりすることは
00:38:39全く問題ありません。
00:38:41リモート関数を使用する際、
00:38:44クエリに対するメンタルモデルは、
00:38:46「引数を指定してクエリを呼び出すと、
00:38:50そのクエリへの参照を取得している」
00:38:54という風に考えるべきです。クエリはデータそのものとは異なります。
00:38:57ですから、アプリのどこかでID 1を指定してgetUserを呼び出せば、
00:39:04実際には、アプリ全体で
00:39:07そのクエリの同じインスタンスを取得することになります。
00:39:08つまり、クエリの呼び出しはアプリ全体で重複排除されるため、
00:39:11一連の引数に対して最大で1回の呼び出ししか行われません。
00:39:16引数が異なれば、異なる結果が生成されます。
00:39:19引数が同じなら、同じクエリになります。
00:39:21アプリ全体で重複が排除される仕組みです。
00:39:24現時点では、いくつか奇妙な注意点がありますが、
00:39:28ここ数週間、私はそれを修正し、体系化して、
00:39:33より分かりやすくするための作業を
00:39:37進めてきました。
00:39:39近いうちにリリースできると思います。
00:39:41非常に短い答えとしては、はい、大丈夫です。
00:39:44好きな場所で呼び出して使ってください。
00:39:47ええ、それを補足すると、
00:39:48私たちがawaitキーワードなどを使って
00:39:51これら全ての作業を行っている理由は、
00:39:54可能な限り、そのコンポーネントが必要とする全てを
00:39:57そのコンポーネントの内部で
00:39:59表現できるようにしたいからです。
00:40:00ですから、上の方でデータをフェッチして、
00:40:04それを必要とする全てのものに注意深く受け渡していくという時代は、
00:40:08もう終わりを告げようとしています。
00:40:10しかし、その一環として、もしクエリへの参照を保持し、
00:40:14それをあちこちに渡さなければならないとしたら、
00:40:15それは目的を達成したとは言えません。
00:40:17理想は、このコンポーネントがあるデータを必要とし、
00:40:20別のコンポーネントもたまたま同じデータを必要とする場合に、
00:40:22それらが互いに通信する必要がない状態です。
00:40:24ただシステムに対して、クエリインターフェースを通じて
00:40:28データを要求すればいいのです。
00:40:29そしてシステムが、確実に
00:40:32リクエストを1回だけにまとめ、
00:40:342つのコンポーネント間でデータの不整合が
00:40:36起きないように管理します。
00:40:40素晴らしい、ありがとうございます。
00:40:42次はアニメーションとトランジションAPIについてです。
00:40:47これらについてもオーバーホールの計画はありますか？
00:40:49「attachmentsを介してサイズを反転させるのは
00:40:54少し面倒だと感じました」とのことです。
00:40:57これについては、今すぐにでも取り掛かりたいと思っています。
00:41:02ずっと楽しみにしていました。
00:41:04やるべきことが山ほどあります。
00:41:06ええ、他のことが色々と邪魔をしていますが。
00:41:09本質的に、私たちがattachments APIを設計したとき、
00:41:12まさにこのことを念頭に置いていました。
00:41:16トランジションやアニメーションは素晴らしいものです。
00:41:19そして、特定のことを非常に簡単に行えるように
00:41:21フレームワークに統合されています。
00:41:25しかし、ある閾値を超えると、
00:41:28それだけでは対応できなくなります。
00:41:29よりプログラム的な制御が必要になります。
00:41:33そこで、トランジションやアニメーションを定義するための
00:41:36プログラム的なAPIが役立つのです。
00:41:42そしてattachments APIは――
00:41:46将来的には、attachments APIと、
00:41:49次のような指示を出すためのAPIを組み合わせる構想です。
00:41:52「DOMから引き抜かれるときは、
00:41:54フェードアウトやちょっとした動きができるまで、
00:41:58少しの間だけ待って。
00:42:00それからDOMから削除していいよ」と。
00:42:02これによって、より高度なトランジションや
00:42:06アニメーションのシナリオが可能になります。
00:42:09ただ、まだそこまでは到達していません。
00:42:11計画はあります。
00:42:12必ず実現させます。
00:42:13ですが、時期をお約束することはできません。
00:42:16少なくとも、今後2、3ヶ月以内ということはないでしょう。
00:42:22良かったです。
00:42:22少なくとも検討課題には入っているということですね。
00:42:24それを聞けて嬉しいです。
00:42:25いいですね。
00:42:25あと一問くらいお答えできそうですね。
00:42:27では最後の質問です。
00:42:29Svelteはデータベースを問いませんが、チームの皆さんの
00:42:32お気に入りのデータベースは何ですか？
00:42:34順番に聞いていきましょう。
00:42:37SQLiteですね。
00:42:37以前、簡単な実験でNeonを使ったことがありますが、
00:42:47とても良かったです。
00:42:50ええ、SQLiteはいいですね。
00:42:53私が本当に待ち望んでいるのは、
00:42:59同期エンジンが非常に優れ、広く普及することです。
00:43:02そうすれば、ローカルファーストの仕組みが実現できます。
00:43:05そうなれば、正直なところ、
00:43:09バックエンドでどのデータベースを使っているかは気になりません。それが私の短い答えです。
00:43:13ええ、私は――
00:43:15特定の「お気に入り」があるわけではないと思います、というのも――
00:43:18単に「お気に入りのデータベースは？」と聞かれても、
00:43:22選択肢は非常に多く、それぞれに
00:43:24得意な分野が異なるからです。
00:43:26ですから、お気に入りを選ぶには、
00:43:28なぜそのデータベースを選ぶのかという理由を知る必要があります。
00:43:31ローカルファーストの同期エンジンの点では、Convexなどは非常に興味深いですね。
00:43:36彼らはとてもクールで、
00:43:38素晴らしい要素がたくさんあると思います。
00:43:41（続き）
00:43:42汎用的なデータベースで一番のお気に入りを強いて挙げるなら、
00:43:45実はDynamoDBです。
00:43:47慣れるまでは少しイライラすることもありますが、
00:43:49本当に、本当に速いです。
00:43:51そして非常に、非常に、非常によくスケールします。
00:43:55でも、SQLも本当に好きなんです。
00:43:58プロジェクトでSQLデータベースが使えるなら、
00:44:04おそらくそれを選ぶでしょう。私のキャリアは
00:44:07データ分析などから始まったので。
00:44:09SQLは基本的には私の「育ち」の言語なんです。
00:44:14ですので、一つのお気に入りがあるわけではないですが、
00:44:16そういった考え方を持っています。
00:44:20いいですね。
00:44:20Paoloからコメントが届いています。
00:44:23先ほども彼を紹介しましたね。
00:44:24「色が多すぎますね。Rich、Simon、Elliotが
00:44:27Vercelで働いているというのは本当ですか？私の椅子は黒ですよ」と言っています。
00:44:32ええ、PaoloからVercelのパーカーを着るようにプレッシャーをかけられたんですが、
00:44:35ここは暑すぎるんですよ。
00:44:38（笑）
00:44:40ええ、皆さん。
00:44:45でもクローゼットにはちゃんと入っていますよ。
00:44:48寒い日には着ています。
00:44:51それは良かったです。公式グッズを活用していますね。
00:44:54素晴らしい。
00:44:55ええ、Svelteの未来にとてもワクワクしていますし、
00:44:58舞台裏での皆さんの懸命な努力と、
00:45:01今日こうして参加してくれたことに本当に感謝しています。
00:45:03ライブには参加していない他のSvelteチームの皆さん、
00:45:05そしてSvelteメンテナーの皆さんにも感謝します。
00:45:09そして、素晴らしいSvelteコミュニティの皆さんにも拍手を送ります。
00:45:11Rich、Simon、Elliot、今日はありがとうございました。
00:45:16ありがとうございました。
00:45:17さようなら。
00:45:18こちらこそ、楽しかったです。
00:45:20さて、視聴者の皆さん、まだ行かないでください。
00:45:23終わる前に、特別なゲストをお呼びしています。
00:45:26Vercel EducationチームのEveです。
00:45:31こんにちは。
00:45:32調子はどうですか？
00:45:33こんにちは、Eve。
00:45:33元気です。
00:45:34そちらはどうですか？
00:45:35最高です。
00:45:36ありがとうございます。
00:45:36本当に史上最高のチームですね。
00:45:40ええ。
00:45:41本当に贅沢な時間でした。
00:45:44さて。
00:45:45Academyのことや、今準備していることについて
00:45:47教えていただけますか？
00:45:49はい、ぜひ。
00:45:50ご存知ない方のために、Vercelには今「Academy」があります。
00:45:55現在、11のコースが公開されています。
00:45:57その中で最も新しいものが本日公開されました。
00:46:03それがこちら、Svelte on Vercelコースです！
00:46:10（拍手）
00:46:13チームの皆さんの協力のおかげで、無事に完成させることができました。
00:46:15このコースでは、スキーアラートアプリを作ります。
00:46:18もしあなたがスキーヤーなら――
00:46:23ああ、そうですね。
00:46:25画面を共有しているので、表示しますね。
00:46:28いいですね。
00:46:29ああ、出ましたね。
00:46:30出ました。
00:46:31こちらの方が分かりやすいですね。
00:46:34Svelte on Vercelコースが公開中です。
00:46:36このコースでは、スキーアラートアプリを構築します。
00:46:40今の時代、スキーヤーの方ならご存知の通り、
00:46:43今年はかなり厳しいシーズンでした。
00:46:47記録的な少雪で。
00:46:48どこもかしこも暖かかったですから。
00:46:50ですから、いつが滑り時なのかを
00:46:52通知してもらうことが非常に重要です。
00:46:54そこで、このコースを通じて、それを実現するアプリを構築します。
00:46:58（続き）
00:46:59探している様々なコンディションに合わせて
00:47:02異なるアラートを設定できるので、
00:47:06絶好のスキー日和になったらすぐに駆けつけることができ、
00:47:10貴重な一日を無駄にすることはありません。
00:47:13このコースでは、Svelteの基礎から、
00:47:17Vercelへのデプロイ方法、
00:47:19AI SDKの使い方、
00:47:21Workflowsの使い方、
00:47:23そして実践的なヒントまでを網羅しています。
00:47:27素晴らしい。
00:47:28見事ですね。
00:47:29私は「作って学ぶ」ことが一番だと固く信じています。
00:47:31ですから、これは最高ですね。
00:47:33本当にありがとうございました。
00:47:34コースへのリンクも、
00:47:36ライブのリソースに追加しておきますね。
00:47:38Eve、今日は参加してくれてありがとうございました。
00:47:41最高でした。
00:47:41ありがとうございました。
00:47:42さてさて。
00:47:46これで今回のライブセッションは終了です。
00:47:49貴重な時間を共に過ごしてくださった
00:47:51コミュニティの皆さんに心から感謝します。
00:47:52正直なところ、今日のチャットは大盛り上がりでしたね。
00:47:54それを見られて最高でした。
00:47:56楽しんでいただけたなら幸いです。
00:47:58Rich Harrisの言葉を借りれば、「Svelteは生き方」です。
00:48:02ぜひ触ってみてください。
00:48:03もっとたくさんのSvelte作品を作ってください。
00:48:05今後のコミュニティセッションに参加したい方は、
00:48:08コミュニティプラットフォームの
00:48:11[community.vercel.com/live](https://community.vercel.com/live) ですべての詳細を確認できます。
00:48:13皆さん、ありがとうございました。
00:48:15それでは、また。
00:48:16さようなら。