▲ コミュニティーセッション:Vercel での Nuxt 活用術

VVercel
Computing/SoftwareAdult EducationInternet Technology

Transcript

00:00:00例えばポートフォリオを作りたい場合、これを使うと言うのはあまり重要ではないかもしれませんが、
00:00:13ええ、欲しいものがすぐに手に入り、プロジェクトを素早く編集できます。
00:00:29エージェントについては今のところ以上ですね。他にアイデアがあるかは分かりませんが。
00:00:38詳細な実装方法を説明しているブログ記事についても触れておくといいでしょう。
00:00:45ソースコードもオープンソースとして公開されています。
00:00:49ウェブサイトの Nuxt エージェントをどう作成したか、どんなコンポーネントを
00:00:55使用して思考プロセスや内部構造を表示しているのか深く知りたい場合や、
00:01:02さらに機能を追加するために貢献したい場合は、
00:01:08そこから学習を始めるのが良いと思います。
00:01:11それだけではありませんよね?
00:01:13Hugo が MCP ツールキットを構築したことで、あらゆる Nuxt サイトが
00:01:22MCP サーバーになり、対応するあらゆる AI に統合できるようになりました。
00:01:30Nuxt.com は本当に多くのことの拠点になっています。
00:01:35このような API があるなんて信じられないでしょう。
00:01:39これは Nuxt DevTools を支えているモジュール API です。
00:01:42多くの MCP サーバーがあり、Nuxt アプリや
00:01:48AI エージェントから接続できます。そして今回、チャット機能も構築されました。
00:01:53誰か Hugo を止める必要がありますね。
00:01:55彼は、彼はあまりにも優秀すぎます。
00:01:59ありがとうございます。
00:02:03彼がやったことで、画面全体を共有してみますが、
00:02:10かなり印象的だと思ったものがあります。
00:02:11私の画面は見えていますか?
00:02:15はい。
00:02:16この管理画面ですが、皆さんは接続できませんが、
00:02:22ウェブサイトにはフィードバックを送れるウィジェットがあります。
00:02:27どのページに注力すべきかを知るために、
00:02:32時間が経つにつれて改善されているかを確認するのに非常に役立ちます。
00:02:37そして彼は最近、会話にプラグインした MCP 管理画面をプッシュしました。
00:02:47間違いなければ、ここで...
00:02:50Nuxt 管理 MCP にアクセスして、404 ページのフィードバックや
00:03:04改善方法を教えて、と頼むことができます。
00:03:09正しく設定されていれば呼び出されるはずですが、これが管理画面ですね。
00:03:16ええ。
00:03:23そう思いました。
00:03:24Nuxt 管理 MCP というエージェントを使って、最も評価の低いページの
00:03:35フィードバックと改善方法について聞く必要があります。
00:03:42おそらくこれが正しいはずです。ええ。
00:03:56このページの平均スコアを教えてくれています。
00:04:00フィードバックは 3 つだけでしたが、このようにして、
00:04:07このページをどう改善すべきか手がかりを理解できます。
00:04:09おそらく 1 週間分のフィードバックしかないからでしょう。
00:04:12もっと詳しく聞くこともできます。
00:04:14ええ、その通りです。
00:04:17他にも取り組んでいることがあります。Nuxt Content について言及されましたが、
00:04:21これはドキュメントを DOM で管理するベース CMS で、
00:04:29Markdown 内でコンポーネントを使用できます。
00:04:32ここ数ヶ月、Comark というプロジェクトに取り組んできました。
00:04:36コンテンツのコア部分を抽出して、オープンに利用したり、
00:04:44Sveltekit チームや Nuxt チームと協力して、
00:04:50ランタイムでコンポーネントを含む Markdown を扱えるようにしました。
00:04:53AI の話に関連して、このプロジェクトはストリーミングと自動終了もサポートしています。
00:05:00現在進行中の機能があり、これは...
00:05:10例えば、バスケットボールのシューズについてのページを生成して、と言えます。
00:05:20現在、AI は基本的に純粋な Markdown をストリーミングしていますが、
00:05:26この構文を使うように AI に教えることで、内部でこれらのコンポーネントを
00:05:33使用したランディングページを生成し始めることができます。
00:05:37まだ非常に初期の段階ですが、かなり有望で、
00:05:44今後数週間以内に V1 として皆に公開できるよう取り組んでいます。
00:05:51それが現在の Markdown の進捗状況です。
00:05:56Daniel も共有したい進捗があるかもしれません。
00:06:01あ、席を外したようですね。
00:06:03戻ってきました。
00:06:04ちょうどいいタイミングです。
00:06:05戻ってきましたね。
00:06:06こんにちは。
00:06:07おかえりなさい。
00:06:08退屈させないようにしているだけですよ。
00:06:17ええ、Comark と Nuxt Content について話していて、
00:06:28Daniel にも何かあるかも、と言っていたんです。
00:06:30それで、あなたが通話の後に何をしていたか分かりました。
00:06:35ええと、はい。
00:06:37非常に興味深いことの一つとして、今何人くらいの人が
00:06:44これを聴いているでしょうか?
00:06:45取り組もうと考えていることの秘密をいくつか明かしましょうか?
00:06:52みんなが望んでいるものを。誰にも言わないでくださいね?
00:06:57今聴いている親しい友人たちと私たちの間だけの秘密ですが、
00:07:12Nuxt をどう改善するかについて話しています。
00:07:14非常に長い間、これは...
00:07:19あの特別な側面とも少し重なりますが、Nuxt は長い間、
00:07:25SEO のためのソリューションでした。
00:07:26人々は Nuxt を使って、設定不要で
00:07:33素晴らしい検索結果を得てきました。
00:07:34実際、かなり長い間、「Next JS」の検索結果で Nuxt がトップだったと思います。
00:07:42Sebastian、あなたも覚えていますよね?
00:07:46「Next」と検索すると Nuxt がリストのトップに来ていましたが、今は違います。
00:07:50もはや Next でランクインすることはありません。
00:07:51...
00:07:53しかし、Nuxt Content などを使って、Nuxt が SEO において
00:07:59驚異的なプラットフォームであることを示せるよう考えています。
00:08:05製品の情報などを探している人々が、
00:08:10エージェントを使ったり、
00:08:16スマートスピーカーなどを使っている場合、
00:08:19どうやってあなたのサイトの情報を得るのでしょうか?
00:08:22それについて多くの計画があります。
00:08:24はっきりさせておくと、私がそのプロジェクトを主導しているわけではありませんが、チームで取り組んでいます。
00:08:28あまり秘密を明かしたくありませんが、Nuxt Content 側で起こるかもしれない
00:08:33クールな新機能について考える価値はあるでしょう。
00:08:37...
00:08:38ええ。
00:08:39ありがとうございます。
00:08:40Nuxt.com のリポジトリや Nuxt UI のドキュメントの
00:08:47最近のプルリクエストを見ると、Benjamin と Hugo が AEO 最適化を進めています。
00:08:53基本的に、エージェントが Nuxt のドキュメントをクロールしようとした際、
00:09:00Accept ヘッダーで Markdown を期待していることを検知したら、
00:09:06直接 Markdown ページを提供します。ユーザーエージェントを検知した場合も同様です。
00:09:13全ページに JSON-LD を追加しようとしています。エージェントがクロール内容を
00:09:19理解しやすくし、コンテンツを直接渡すことでコンテキストウィンドウを
00:09:24節約できるようにするためです。
00:09:26今のところ実験段階で、どの機能をコアや
00:09:31コアモジュールに含めるべきか考えています。しかし、リファクタリングして
00:09:36汎用的なものを考える前に、まずは自分たちで試してみる必要があります。
00:09:42コミュニティがどう受け入れるか、実際に意味があるかを確認するためです。
00:09:48進化が非常に速いですからね。
00:09:49LLMs.txt や MCP、そして今はヘッダーとして Markdown を受け入れる話です。
00:09:562 週間後にはどうなっているでしょうか?
00:09:58後で非推奨にしなければならない機能を直接コアに
00:10:06入れたくはありません。
00:10:07ですから、可能な限り実験を重ねながら、一歩ずつ進めています。
00:10:16Nuxt で気に入っていることの一つは、モジュールエコシステムがあり、
00:10:21拡張が可能だということです。
00:10:24つまり、コアに入らないようなものでも構築可能で、
00:10:28実験として存在させることができるのです。
00:10:31本番環境やウェブサイトで使われるものになり得ますし、
00:10:35概念的なフィードバックや RFC への意見だけでなく、実際のプロジェクトや
00:10:42ユースケースに基づいた実践的なフィードバックを得られます。
00:10:46何かをコアモジュールにするかどうかを
00:10:53決定する前にです。
00:10:56ライブチャットに質問が来ているか見てみましょう。
00:11:07答えられるものはあるでしょうか。
00:11:08私から質問があります。すでに取り組んでいることの秘密は
00:11:15共有していただきましたが、他にも楽しみにしている
00:11:20今後の Nuxt の展開で共有できるものはありますか?
00:11:32楽しみなことはたくさんありますが...
00:11:40一つは、次バージョンの Nuxt 5 に向けて
00:11:44すべてを準備していることです。
00:11:45これについては以前から話してきました。
00:11:47Nitro バージョン 3 が主な目玉機能で、
00:11:55エコシステムをこの移行に備えさせるのは大変な作業ですが、正しい方向性です。
00:12:01...
00:12:02Nitro はウェブ標準へと私たちを導いてくれます。
00:12:05非常に最小限のサーバーラッパーで、可能な限りネイティブに、
00:12:12Bun、Deno、Node など、いかなる環境でも動作するようにします。
00:12:18この移行は、皆さんがすぐに
00:12:24喜びを感じられるものになると思います。ローカルでバージョン 5 の Nightly を使っていますが、
00:12:31...
00:12:36ベータ版やアルファ版ですらないにもかかわらず、すでに使っていて本当に楽しいです。
00:12:38いいですね。
00:12:39コミュニティからのコメントで、V5 をとても楽しみにしているという方がいました。
00:12:45もう一つの質問ですが、Vercel 上で Nuxt のワークロードを
00:12:50最適化するための推奨事項やコツはありますか?
00:12:53Hugo、先に答えますか?Vercel での Nuxt の最適化について。
00:13:07どの意味での最適化かによりますが、
00:13:14速度、ビルド、それとも実行時でしょうか?
00:13:19色々な方法があると思いますが、少なくとも
00:13:28ランタイムの部分についてお話しします。
00:13:29私たちがまだ模索していることの一つは、Nuxt において
00:13:36そのページがキャッシュ可能かレンダリングすべきかをどうユーザーに提案するかです。
00:13:44ページ内でデータ取得を行うコンポーネントがある場合、常に厄介です。
00:13:49アプリケーション全体に直接認証が含まれている場合もあります。
00:13:53その場合、キャッシュはしたくないでしょう。あるいは認証込みで
00:13:58ページをキャッシュし始めると、ヘッダーに認証済みユーザーが表示されてしまいます。
00:14:03ですので、プレースホルダーをプリレンダリングするようにして、
00:14:09クライアント側で認証済みだと判明した際に
00:14:13ハイドレーションエラーが起きないようにする必要があります。
00:14:14Nuxt には Nitro 由来の非常に強力な機能があります。
00:14:21...
00:14:22Route Rules(ルートルール)と呼ばれるものです。
00:14:24これを使えば、パターンを使ってルートの一部を指定できます。
00:14:29例えば、埋め込み管理画面の /admin 以下などは
00:14:35SSR を無効にすると指定できます。
00:14:37そこには必要ありませんから。また、/blog/** などは
00:14:45ブログ記事が数秒おきに更新されるわけではないので、
00:14:50ISR(インクリメンタル静的生成)に設定できます。
00:14:55これらのルートルールを使えば、わずか数行の設定で
00:15:01アプリの一部を最適化できます。
00:15:03本番環境にプッシュする前の、私の一番の推奨事項は、
00:15:10ルートルールを確認することです。
00:15:12素晴らしいですね。
00:15:13ありがとうございます。
00:15:14一つ、どうぞ。
00:15:18あ、すみません。
00:15:20チェックしてみる価値があるものとして、NPMX があります。
00:15:23ご存知ない方のために説明すると、これは npmjs.com の代替となるものです。
00:15:30NPM レジストリのブラウザで、
00:15:36Nuxt で構築され、Vercel でホストされており、パフォーマンスを高度に最適化しています。
00:15:42Vercel でパフォーマンスを最適化する方法を探していて、
00:15:45膨大なページビューに耐えられるよう設計された実戦的なアプリでの
00:15:49実例を見たい場合は、ぜひチェックしてみてください。
00:15:58ルートルールが実際に動作している様子や、キャッシュを確認できます。
00:16:01私たちはインクリメンタル静的生成を使って
00:16:09キャッシュを行っています。必要に応じてペイロードを構築し、キャッシュします。
00:16:17また、Nuxt 4.4 の新機能である、プリレンダリングされていないページでも
00:16:27使えるペイロードキャッシュを使っていますが、これは個人的にとてもクールだと思います。
00:16:28ページに移動する前にデータを取得できるというメリットがあります。
00:16:34そのページで必要になるデータが、フレームワークによって事前に取得されているのです。
00:16:39それによって、非常に高速な体験が可能になります。
00:16:45他にも多くの発見があるはずですので、
00:16:52ご自身のウェブサイトで試してみてください。
00:16:53素晴らしい。
00:16:54ありがとうございました。
00:16:55コメントも届いています。「Nuxtは未経験ですが、
00:17:03試してみる価値がありそうですね」とのことです。
00:17:04視聴者の中にはNuxtに興味津々な方もいるようですが、
00:17:09Nuxtを使い始めるのに最適な方法は何でしょうか?
00:17:12AIツールの話も出ましたが、
00:17:16何かおすすめはありますか?
00:17:17今なら「Nuxt agents」があるので、
00:17:24テンプレートを使うか、ドキュメントを見てゼロから作るか、
00:17:29どこから始めるべきか良いヒントをくれるはずです。
00:17:31Nuxt.comやNuxt UIには多くのテンプレートがありますし、
00:17:39Nuxt.newにも他のテンプレートがあります。
00:17:48エージェントに直接聞いてみるのもいいでしょう。
00:17:51Nuxt UIのドキュメントなら、v0で開くこともできるので、
00:17:57IDEで本格的にコードを書く前に、チャットで試せます。
00:18:08使い始める際、ゼロからでも問題はないのですが、
00:18:12個人的には、最小限のプロジェクトをクローンするのが好きです。
00:18:17GitHubにある自分のテンプレートを使っています。
00:18:23DanielRose/nuxt-site-template です。
00:18:24これをクローンして使えます。
00:18:25最小限の構成ですが、ユニットテストなどが含まれていて、
00:18:31LLMに対して「この方法で構築を続けたい」という
00:18:37ヒントを与えることができます。
00:18:38このような最小限のテンプレートは、LLMにとっての
00:18:44「種結晶」のようなものだと感じています。
00:18:45正しい方向を示し、望ましい形で成長させるための
00:18:50必要な指針を与えてくれます。
00:18:52それ以上に特別なものは必要ありません。
00:18:56何か追加することもできますが、必須ではないのです。
00:19:01テンプレートや基本的なNuxtプロジェクトから始めて、
00:19:09「これを作りたい」と伝えるだけでいいのです。
00:19:10LLMの対応力は驚異的で、
00:19:12全く問題なくこなしてくれます。
00:19:14大事なのは、新しいことに挑戦する際、
00:19:19結果を出すだけでなく、学ぶ機会を作ることです。
00:19:24見た目は良くても、何かが代わりに作ってくれただけで、
00:19:29自分自身でNuxtを試した実感がないかもしれません。
00:19:33ですから、LLMに「ツアーをして」とか
00:19:40「作ったものを使ってNuxtの機能を教えて」と頼むのです。
00:19:45そうすることで知識が繋がり、生成されたコードの
00:19:49レビューにも役立ちます。
00:19:51そして何より、新しいスキルや経験を習得できます。
00:19:56GitHubでCat Hicks博士を調べてみてください。
00:20:02彼女は、学習機会を作るためのClaude skillsを公開しています。
00:20:07コーディング中の10分間のエクササイズで、
00:20:12エージェントが扱っている内容を自分のものにできます。
00:20:17私たちはかつてないほど多くの知識にアクセスでき、
00:20:22半年前には知らなかったこともできるようになっています。
00:20:29重要なのは、人間として成長し続けるために、
00:20:35このような習慣や学習の休憩を取り入れることです。
00:20:41それが、脳を発達させ続けるために非常に大切だと思います。
00:20:46同感です。私もNuxtを使い始めたばかりで、
00:20:56元々はSvelteがメインでしたが、エージェントを使って
00:21:02Svelteの概念をNuxtに置き換えました。学習にAIを活用するのは賛成です。
00:21:08他に付け加える方はいますか? 素晴らしいですね。
00:21:17もう一度画面を共有します。Nuxtは真にプログレッシブな
00:21:26フレームワークです。最小限の構成や、app.vueファイル
00:21:32一つから始められます。それがメインのシェルとなり、
00:21:40徐々にルーティングやデータ取得を追加していけます。
00:21:45「自動インポート」機能は、開発体験における大きな進歩でした。
00:21:51AIが台頭した今、もしコード内に直接インポートを記述したければ、
00:21:56いつでもこの機能を無効にできます。私にとって、これが最良の開始方法です。
00:22:03また、異なるモデルでNuxtのEVALS(評価)も行っています。
00:22:11現時点では、.m skillやagent.mdで調整しなくても、
00:22:21エージェントはNuxtの知識を十分に備えています。さらに、
00:22:28MCPに関心があるなら、どこにあるか確認が必要ですが、
00:22:35VS Codeに直接追加できるMCPサーバーも用意しています。
00:22:49私たちはAIを活用していますが、MCPサーバーなしでも
00:22:57エージェントは優秀です。おすすめは、最小限の設定から始め、
00:23:03機能を一つずつ追加することです。AIを使うなら、
00:23:10「なぜそうなるのか」理由を聞いてください。Danielが言ったように、
00:23:16脳を活性化させ続けることが重要です。それでは、
00:23:25このセクションの最後にいくつか質問を。
00:23:30「ドイツのEC業界でNuxtが多く使われているのを見かけますが、
00:23:36米国よりも欧州で人気があるのでしょうか?」
00:23:42私はエジンバラ、SebastianとHugoはロンドン、
00:23:51Mayaも欧州拠点ですよね。米国での人気について聞く相手として
00:23:57私たちは適任ではないかもしれませんが、欧州の方が人気がある気はします。
00:24:02北米ではReact、その他の地域ではVueが人気という
00:24:09傾向があるようで、Nuxtも同様かもしれません。
00:24:15ですが、それを変えていきたいですね。米国でも利用者を増やし、
00:24:19米国のコアチームメンバーも必要かもしれません。
00:24:25Nuxtを世界中に広めましょう。次の質問はXからです。
00:24:35「Nuxt 3、4、5と進化が早いですが、本番環境の移行を安全に行う、
00:24:41特にSSRやNitroの変更に対応する最良の戦略は何ですか?」
00:24:50まだ分かりませんが、Nuxt 3から4への
00:24:58アップデートでは、破壊的変更はほぼなかったか、
00:25:03詳細にドキュメント化されていました。AIにページを読み込ませて
00:25:11サポートを求めることもできますし、AIなしでも移行は簡単でした。
00:25:17かなり高度な特定機能を使っている場合にのみ、
00:25:21破壊的変更が起こり得ました。Danielはアップグレードを円滑にしました。
00:25:272から3への移行は大変でしたね。Vue 2から3への
00:25:33アップグレードもあり、フレームワークの仕組み自体が異なり、
00:25:40Composableの時代になりました。またサーバーエンジンも一新し、
00:25:46サーバーレス環境で高性能に動作するようにしました。これらを経て、
00:25:53次のメジャーアップデートはより親しみやすくなる予定です。
00:26:01私たちが構築した「ポート互換性」により、v5への移行や、
00:26:08新機能、破壊的変更への対応を事前に行えるようになります。
00:26:15Daniel、続けてください。
00:26:22それが鍵ですね。私たちが重視しているのは、
00:26:26前方互換性と後方互換性の両立です。3から4への
00:26:34アップグレードでは、破壊的変更やメジャーアップデートを
00:26:39恐れる必要がないことを証明したかったのです。
00:26:45「メジャー版は出せない」と停滞してしまうこともありますが、
00:26:50私たちは少なくとも年に一度、新版を出す計画です。
00:26:57これは他の多くのプロジェクトとも一致しています。Node.jsも
00:27:01毎年メジャー版を出すリリーススケジュールを採用しており、
00:27:09私たちともうまく合致しています。一般的にNuxtを使うことは、
00:27:15家を建てるようなプロジェクトを構築することです。
00:27:21プロジェクトは生きています。家と同じで塗り替えや手入れが必要です。
00:27:28ウェブサイトは常に、作成時ではなく「今日」の
00:27:33ベストプラクティスを採用すべきです。だからこそ、Nuxtは進化し続け、
00:27:38優れたサイト構築に必要なものを備えていなければなりません。
00:27:46ここ数ヶ月、NPMでのサプライチェーン攻撃も目にしました。
00:27:52全ての依存関係を常に最新の状態に保ち、
00:27:57追跡し続けることの重要性が再認識されました。そして、
00:28:03パッケージ作成者やメンテナーとしての私たちの責任は、
00:28:08アップグレードの手順を可能な限り苦痛のないものにすることです。
00:28:14もしNuxtのアップグレードで苦労しているなら、それは問題です。
00:28:21ぜひ私に苦情を言ってください。そんな状況は望んでいません。
00:28:25「どうやって上げるの?」ではなく、「メジャーアップデートが
00:28:292ヶ月ではなく半日で終わった、最高だ」と言ってもらいたいのです。
00:28:36サイトのためだけでなく、エコシステム全体のために最適化したいのです。
00:28:42アップグレードを恐れないでほしいと思います。
00:28:47Danielへ連絡したい場合は、BlueSkyの @roe.dev まで。
00:28:54どこにでもいますよ。素晴らしいお話をありがとうございます。
00:29:01最後にコミュニティについて。先日、ある写真を見ました。
00:29:07どのカンファレンスか忘れましたが、皆さんの誰かが登壇していて、
00:29:11コミュニティの画像に「Nuxtは人々についてだ」という言葉が添えられていました。
00:29:16素晴らしいコミュニティをお持ちのようですが、参加や貢献の
00:29:20方法について詳しく教えてください。
00:29:30Danielが固まったかな。Vue.js AmsterdamでのDaniel Turkの話ですね。
00:29:40参加したい方は、非常に活発なDiscordサーバーがあります。
00:29:47そこで多くのニュースを共有していますし、GitHubの
00:29:54IssueやPull Requestは、実際にコードが書かれる場所です。
00:30:00アイディアの実装や共有もここで行われます。
00:30:07Issueの解決を助けたり、アイディアを出したり、経験やデモを
00:30:15共有したりと、協力できることはたくさんあります。Twitterや
00:30:20BlueSky、nuxt.com、Mastodon、LinkedInの
00:30:26ショーケースページもあります。Instagramや
00:30:31SoundCloudはありませんが、Discordは交流に最適です。
00:30:39質問があればチャットしてください。私たちもそこにいます。
00:30:46モジュール作成者など、多くの人たちと共有しています。
00:30:51コアに直接貢献する必要はありません。そこがNuxtの良さで、
00:30:54共有したいテンプレートや、自分で作った機能の
00:31:00モジュールから始めることができます。
00:31:05現在のNuxtには、300以上のメンテナンスされたモジュールと、
00:31:101,000人以上の貢献者がいます。ぜひ遊びに来てください。
00:31:17きっと楽しめますよ。Daniel、聞こえませんか?
00:31:27SoundCloudもあると言っていますね。コミュニティについて
00:31:51何か付け加えたいことがあるようです。最初の曲を準備中かな。
00:31:55コミュニティの話、触れてくれて嬉しいです。
00:32:05Nuxtにおいて、コミュニティは最高の部分だと思っています。
00:32:13オープンソースの本質はコミュニティにあります。
00:32:17誰かが何かを作り、「これ、どう思う? 気に入ったら
00:32:21もっと良くするのを手伝ってくれない?」と誰かに言うこと。
00:32:26その繋がりこそがオープンソースを価値あるものにし、
00:32:32私たちが活動する目的でもあります。
00:32:38contributing.mdはagent.mdよりも重要だと強く信じています。
00:32:44エージェントだけで人がいないより、エージェントなしで人が多い方がいい。
00:32:50価値があるのは、大切に思う人々がプロジェクトの一部であること。
00:32:56これはNuxtだけでなく、Vueコミュニティ全体にも言えることです。
00:33:00全てはコミュニティのために。新しい人が加わり、貢献し、
00:33:06仲間になるのを見るのはいつだって素晴らしいことです。
00:33:12助けを求めるだけでも十分です。私も最初は、Discordで
00:33:18人々に質問しまくって、答えを探すところから始まりました。
00:33:23人間とコミュニティに万歳。作ったものを世界に共有しましょう。
00:33:28楽しみにしています。では、そろそろまとめに入りましょう。
00:33:34皆さんのリリースの速さと質には、いつも刺激を受けています。
00:33:40Nuxtの今後の歩みと、次に来るものがとても楽しみです。
00:33:45お三方、そしてNuxtチーム、貢献者、コミュニティの皆さん、
00:33:50本当にありがとうございました。Sebastian、Daniel、Hugo、
00:33:55今日はありがとうございました。
00:33:56ありがとうございました。
00:33:57ありがとう。
00:33:58さようなら。
00:33:59視聴者の皆さん、まだ終わりではありません。Vercel Academyの
00:34:07Eveをお呼びしましょう。
00:34:08こんにちは、Maya。
00:34:09Eve、おかえりなさい。
00:34:11ありがとう! 会えて嬉しいです。コースを公開して、
00:34:18皆の話をのんびり聞くのが、一ヶ月で一番楽しい時間です。あのチームは
00:34:25本当に「GOAT(史上最高)」揃いですね。あなたもその一人です。
00:34:36新しいコースの内容をぜひ教えてください。
00:34:40はい、本日新コースを公開します。画面を共有しました。
00:34:48「Nuxt on Vercel」です。Reactの世界に慣れている方向けで、
00:34:55ReactとNuxtプロジェクトの橋渡しをするようなコースです。
00:35:03新しい仕事で使うことになったり、サイドプロジェクトで
00:35:08使いたいけど、何から始めればいいか分からない方に最適です。
00:35:12エージェントも助けになりますし、あらゆるツールを使うべきですが、
00:35:16このコースでは実際に「温泉検索アプリ」を構築します。
00:35:24お気に入りのハイキングコースや温泉を見つけるアプリです。ぜひチェックを。
00:35:30Vercel Academyでは他にも新コースが続々登場予定です。
00:35:34Eve、ありがとう。彼女のコースは最高で、
00:35:40「作って学ぶ」姿勢が素晴らしいんです。皆さんがアクセスしやすいよう、
00:35:45リンクも追加しておきます。私も自分で受講して、
00:35:50Nuxtを使いこなせるようになりたいです。今日はありがとうございました。
00:35:59コミュニティセッションの終了です。参加してくださった
00:36:03コミュニティの皆さん、ありがとうございました。楽しんでいただけたなら幸いです。
00:36:09今後の詳細は、[community.vercel.com/live](https://community.vercel.com/live) で確認できます。
00:36:16また、多くのイベントも準備中です。オンラインや
00:36:20お住まいの地域のミートアップ情報をチェックしてください。そして最後に、
00:36:26世界各地で開催される「Vercel Ship」のチケット販売が開始されました。
00:36:32楽しみですね! [vercel.com/ship](https://vercel.com/ship) からチケットを申し込んでください。
00:36:37デザインや演出を見るだけでも価値があります。チーム渾身の出来です。
00:36:43私からは以上です。皆さん、ありがとうございました。
00:36:47良い一日を。さようなら。

Key Takeaway

NuxtはAEOやMCPサーバー対応などのAIネイティブな機能を強化しつつ、Nitro v3によるウェブ標準への準拠と、ルートルールを活用したVercel上のパフォーマンス最適化を推進しています。

Highlights

  • Nuxt ContentとComarkの統合により、ストリーミング中にMarkdown内のコンポーネントを直接実行してランディングページを生成できます。

  • Vercel上のNuxtサイトをModel Context Protocol (MCP) サーバーとして機能させ、AIエージェントから直接接続することが可能です。

  • 検索エンジンとAIエージェントの両方に最適化するため、リクエストヘッダーがMarkdownを要求している場合に専用のMarkdown出力を提供するAEO(AI Engine Optimization)を試験運用しています。

  • Nuxt 5の主要機能となるNitro v3は、最小限のサーバーラッパーでNode.js、Bun、Denoなどの環境を問わないネイティブな動作を実現します。

  • ルートルール(Route Rules)の設定により、特定のディレクトリでSSRを無効化したり、ISR(インクリメンタル静的生成)を適用したりする最適化が数行のコードで完結します。

Timeline

AIエージェントとMCPサーバーの統合

  • MCPツールキットの使用により、あらゆるNuxtサイトをMCPサーバーとしてAIに統合できます。
  • Nuxt管理MCPエージェントは、ウェブサイトのフィードバックウィジェットから収集したデータを分析し、改善案を提示します。
  • 特定のページの平均スコアやユーザーからの具体的な不満点を、チャット形式で即座に把握可能です。

プロジェクトの編集や情報の取得を迅速化するため、エージェント機能が導入されています。Nuxt DevToolsを支えるモジュールAPIを活用することで、外部のAIエージェントからサイト内部の構造やデータにアクセスできる仕組みが構築されています。実際のデモでは、管理画面から低評価のページを特定し、フィードバックに基づいた具体的な修正方法をAIが提案する様子が示されています。

ComarkによるMarkdownとAIの融合

  • Comarkプロジェクトは、Markdown内でコンポーネントをランタイムで扱えるようにする新しい標準を目指しています。
  • AIに特定の構文を教えることで、Markdownのストリーミング出力から直接コンポーネントを含む動的なページを構築します。
  • この機能は数週間以内にV1として公開される予定であり、SvelteKitチームとも協力体制を築いています。

ドキュメントをDOMで管理するNuxt Contentの強みを活かし、静的なテキスト以上の表現力をMarkdownに持たせる試みが進んでいます。AIが純粋なテキストだけでなくコンポーネントコードをストリーミング生成する際、自動終了処理や実行環境の制御をComarkが担います。これにより、ユーザーのプロンプトからリッチなUIを持つランディングページを即座に生成する体験が可能になります。

AIエンジン最適化(AEO)と検索の未来

  • AIエージェントがサイトをクロールする際、Acceptヘッダーの内容に応じてMarkdownページを直接提供する手法を導入しています。
  • 全ページにJSON-LDを追加することで、AIのコンテキストウィンドウの消費を抑えつつ正確な情報を伝達します。
  • これらの機能はコアモジュールに含める前に、Nuxt.comやNuxt UIのドキュメントで試験的に運用し効果を検証しています。

従来のSEO(検索エンジン最適化)がGoogleなどの検索結果を重視していたのに対し、AEOはスマートスピーカーやAIエージェントによる情報の読み取りを重視します。クローラーが人間用のHTMLではなく構造化されたデータを要求した際に、最適な形式を動的に返すことで、AIによる引用精度を高めます。急激な技術変化に対応するため、まずはコミュニティによる実践的なフィードバックを得る実験段階として位置づけられています。

Nuxt 5とNitro v3によるサーバー革新

  • 次期バージョンであるNuxt 5の核となるNitro v3は、完全なウェブ標準準拠を目指しています。
  • ランタイム環境に依存しない設計により、Bun、Deno、Node.jsといった多様なサーバー環境で一貫した動作を保証します。
  • Nightlyビルドでの検証において、開発体験の向上とシステムの安定性が確認されています。

エコシステム全体を新しい移行に備えさせるための大規模な作業が進行中です。Nitro v3は、サーバー層を可能な限り薄くネイティブに保つことで、ポータビリティを最大化します。これは、将来的なインフラの変更や多様なエッジコンピューティング環境への適応を容易にするための戦略的な移行です。

VercelでのNuxt最適化戦略

  • ルートルール(Route Rules)を利用することで、管理画面のSSR無効化やブログ記事のISR設定を個別に行えます。
  • 認証が必要なページでは、ハイドレーションエラーを避けるためにプレースホルダーのプリレンダリングを活用します。
  • NPMXのような高度に最適化された実例を参考に、ペイロードキャッシュやデータの事前取得を実装することが推奨されます。

パフォーマンスを最大化するためには、アプリケーション全体で一律の設定を行うのではなく、ルートごとに最適なレンダリング手法を選択することが重要です。Nuxt 4.4で導入されたペイロードキャッシュにより、ユーザーがページを移動する前に必要なデータをフレームワーク側で取得し、高速な遷移を実現できます。具体的な最適化手法については、Vercelでホストされている実際のオープンソースプロジェクトを参考にすることが学習の近道として提案されています。

学習習慣とコミュニティへの貢献

  • 最小限のテンプレートを「種結晶」として使い、LLMにコードの解説を求めることで自身のスキル向上に繋げます。
  • Nuxtには300以上のモジュールと1,000人以上の貢献者が存在し、DiscordやGitHubで活発な交流が行われています。
  • アップデートの苦痛を最小限にするため、Nuxtは前方互換性と後方互換性の両立を開発の最優先事項としています。

AIによる自動生成に頼り切るのではなく、生成されたコードの理由を問うことで人間としての学習機会を作ることが強調されています。オープンソースの本質は人間同士の繋がりにあり、ドキュメントの改善や質問への回答も重要な貢献とみなされます。Nuxt 3から4への移行が容易であったように、今後のメジャーアップデートも年に一度のペースで、ユーザーに負担をかけない形での進化が計画されています。

Community Posts

View all posts