ViteConf のイノベーション、発表、今後の展開

こんにちは ^_~ ;
私は Lmine です。ViteConf 2024 のハイライトを探る初めての技術記事を共有できることを嬉しく思います。技術文書の作成に取り組む技術愛好家として、今後のコンテンツの改善に役立つフィードバックや提案を楽しみにしています。

カンファレンスの詳細に入る前に、Vite と ViteConf とは何なのか見てみましょう。

Vite は、Evan You (Vue.js の作成者) によって作成された次世代フロントエンド ビルド ツールです。ネイティブ ES モジュールを使用した開発サーバーを通じて超高速のホット モジュール交換 (HMR) を提供することで、Web 開発エクスペリエンスを大幅に強化します。 Vite はシンプルな構成で、Rollup を使用してコードをバンドルし、SWC (Speedy Web Compiler) を活用して効率的なコード変換を実現します。
ViteConf は、Vite コミュニティを魅力的でインタラクティブな形式で結集する年に一度の無料オンライン イベントです。専門家や愛好家が集まり、知識を共有し、新機能を紹介します。今年 (2024 年 10 月 3 日～4 日) は 3 回目の開催となり、12 時間のマラソンで 43 のワークショップが開催されました。

多くの技術的な詳細を含む 12 時間のコンテンツを要約するのは困難です。ただし、重要な情報を省略することなく、最大限に要約するように努めました。記事を簡略化するために、ほとんどの ViteConf 講演の元のタイトルをそのままにして、8 つの主要なセクションに整理しました。

• ViteConf24 からの主なお知らせ
• Vite 統合の強化。
• Vite を使用したフレームワーク固有の開発
• パフォーマンスと効率が向上します。
• 開発者ツールとデバッグの機能強化。
• 実際のケーススタディと成功事例。
• 将来のトレンドとコミュニティの成長
• フレームワーク設計の新たなフロンティアを探索します。

私たちのイベントでは、Vite の将来への道を切り開く重大な発表がいくつかありました。先見の明のある講演者は、Web 開発を再構築する可能性を秘めた革新的なツールとプラットフォームを紹介しました。ハイライトを見ていきましょう!

ボイド (⌀):

Evan You は、次世代の JavaScript ツールの構築に焦点を当てた新会社 Void Zero を発表しました。同社は、Accel と Amplify Partners が主導し、開発者ツール分野の経験豊富な創設者らの参加により、シード資金で 460 万ドルを調達しました。 Void Zero は、JavaScript 開発においてランタイムに依存しない、統合された高性能で構成可能なツールチェーンを作成するという Evan のビジョンを実現するために取り組んでいます。 Evan は、Void Zero での現在の進捗状況についても話し、きっと驚かれるであろう印象的なテスト ベンチマークをいくつか共有しました。

ボルト.新しい:

StackBlitz の共同創設者

Eric Simons は、StackBlitz の WebContainer テクノロジーの確立された機能を活用して、Web 開発環境を再構築する準備ができている革新的なツールである Bolt.new を発表しました。 Bolt.new は、開発者にフルスタックのブラウザ内環境を提供し、プロジェクトの即時作成、デバッグ、エラー修正、デプロイメントを可能にし、すべて最先端の大規模言語モデル Claude および V0 を利用しています。
Eric は、セットアップ時間を短縮するために、Bolt.new がどのように設計されているかを説明しました。簡単なプロンプトを入力するだけで、開発者は完全に構成されたアプリケーションをブラウザから直接生成できます。これはまさに革新的です。統合されたパッケージ管理と依存関係の処理により、彼の講演で実証された力は比類のないものでした。その可能性を理解する最良の方法は、Bolt.new を自分で試してみることです。
この発表にとどまらず、Eric は別のメジャー アップデートも明らかにしました。Bolt.new Core は現在オープンソースであり、github で入手可能です。

OXC とロールダウン:

Evan が OXC と Rolldown、および今後の Vite 環境との統合について紹介した後、Oxc プロジェクトの作成者である Boshen Chen が、Rust で書かれた野心的で高性能、完全に統合された JavaScript ツールチェーンである OXC を紹介しました。パフォーマンスと開発者のエクスペリエンスを向上させます。内容は次のとおりです:

• パーサー: SWC や Babel などの既存のツールを上回る高性能パーサー。
• リンター (OxLint): 大規模なコードベースを効率的に分析できる超高速リンター。ESLint の 400 のルールが含まれていますが、50 ～ 100 倍優れたパフォーマンスを発揮します。
• リゾルバー: webpack や他の既存のツールよりも 28 倍高速なモジュール解決システム。
• トランスフォーマー (進行中): TypeScript や JSX などのさまざまな JavaScript 言語を処理できる強力なトランスフォーマーは、現在 TypeScript と React JSX の変換をサポートしています。

将来計画されているコンポーネントには次のものが含まれます:

• フォーマッター: Prettier との互換性があるように設計されています。
• ミニファイア: 高速化と圧縮の強化を目指しています。

Boshen は、OXC をコア エンジンとして使用する Vite の将来のバンドラーである Rolldown も紹介しました。ロールダウンは高いパフォーマンスを提供し、ツリーシェイキング、コード分割、プラグイン互換性などのさまざまな機能をサポートします。
次のステップには、Vite と OXC および Rolldown のより深い統合が含まれます。これにより、パフォーマンスが大幅に向上し、より一貫した開発者エクスペリエンスが得られ、さらに大規模で複雑な Web アプリケーションを処理できるようになります。

新しい環境 API: 新時代の柔軟性:

Matias (Patak) は、Vite の柔軟性とパフォーマンスを強化するために設計された大幅な進化である、Environment API を発表しました。この API を使用すると、開発者は単一の Vite プロジェクト内で複数の環境 (例: クライアント、サーバー、エッジ) を定義でき、開発および展開プロセスを合理化できます。彼は、ViteConf の初年度以来、Nuxt、Remix、TanStack などのメタ フレームワークが流入していることを指摘しました。
講演から得られる重要なポイントは次のとおりです:

• エコシステムの拡張: Vite は、ESM ベースのバンドルレス設計と Rollup プラグイン API が成功の核となり、Angular、Redwood、Remix、TanStack Start、Waku、Ember、Meteor をサポートするようになりました。
• 合理化された SSR と統合構成: Vite は Rollup のプラグイン API と SvelteKit からインスピレーションを得た SSR 構造を採用することで、セットアップを簡素化し、一貫した開発環境と運用環境を確保します。環境 API を使用すると、開発者はクライアント、SSR、または Edge 環境を 1 か所で構成できます。
• 環境 API のハイライト: 各環境 (クライアント、SSR など) には独自のモジュール グラフがあり、新しいコマンド vite build app を使用して単一の構成で複数の環境を有効にします。主な利点には、マルチ環境構成のサポート、ツール統合の改善 (Miniflare など)、フレームワークのプラグイン サポートの強化が含まれます。 Patak 氏は、Vite 6 が下位互換性を重視していることと、Environment API をさらに改良するためのコミュニティからのフィードバックの重要性について議論して締めくくりました。

チュートリアルキット:

Tomek は、JavaScript エコシステムにおけるインタラクティブなチュートリアルの作成を再定義する革新的なオープンソース ツール セットである TutorialKit を導入しました。現在のドキュメントの制限に対処する TutorialKit は、ユーザー ガイドと構造化されたデモや演習を統合した、厳選された実践的な学習体験を提供します。
WebContainers を利用した TutorialKit は、Svelte、Angular、Nuxt などのフレームワークからの洞察に基づいて構築されています。開発者は、npm create チュートリアルという 1 つのコマンドを使用して、レッスンの説明、コード スニペット、ライブ プレビューを含む完全なチュートリアル プロジェクトを 1 分以内にすばやく生成できます。
TutorialKit は高度にカスタマイズ可能で、暗いテーマと明るいテーマ、およびインタラクティブなターミナルを提供し、学習者が教材に完全に取り組むことができます。このツールを使用すると、開発者、教育者、コミュニティは同様に、より魅力的な教育リソースをブラウザで直接作成できます。

pkg.pr.new:

Mohammad は、npm ライブラリのメンテナとユーザーが複雑なセットアップを行わずに未リリースのブランチ、修正、または機能をプレビューできるツールである pkg.pr.new を導入しました。次のような簡単なコマンドを使用します:
npm i https://pkg.pr.new/${owner}/${repo}/${package}@{commit}
開発者は、継続的リリースなどの面倒な方法を回避して、特定のバージョンを即座にテストできます。
次のステップには、CDN サポートおよびカスタム UI のための ESM.sh との統合が含まれ、pkg.pr.new の機能を Deno や Vue Playground などの環境に拡張します。

このセクションでは、Vite の適応性をさらに高める新しい統合について説明します。 Angular サポートから強化されたテストや CI ワークフローに至るまで、これらのアップデートにより、Vite がどのようにその範囲を拡大し、開発者エクスペリエンスを簡素化しているかが明らかになります。

Storybook と Vitest を使用したコンポーネントのテスト:

Chromatic の Storybook メンテナーである Yann Braga は、Vite および Vitest との重要な新しい統合を発表し、UI コンポーネントの開発とテストを変革しました。これらのアップデートでは、Storybook ストーリーを機能テストに変換する Vitest プラグインが導入され、追加のテスト ケースを必要とせずにコード カバレッジを簡単に増やすことができます。このプラグインの視覚的なデバッグ機能により、開発者は CI 環境からリアルタイムで失敗したテストを検査でき、シームレスなチーム コラボレーションを促進できます。
Storybook のバージョン 9 では、ビジュアル、アクセシビリティ、機能のテストを統合された UI に統合し、ESM のみのビルドに移行して、インストール サイズを削減し、パフォーマンスを向上させる予定です。これらの進歩により、効率的で合理化されたフロントエンド ワークフローと包括的なコンポーネント テストに対する Storybook の取り組みが強化されます。

Nx で Vite プロジェクトを成功させましょう

Nx のシニア エンジニア、Katerina Skroumpelou 氏は、Nx が Vite プロジェクトにもたらす効率性を強調しました。彼女はまず、Nx がどのように CI ワークフローを最適化し、複雑なタスクを自動化し、ビルド プロセスをより高速かつ合理化するかについて説明しました。
次に、彼女は React Vite プロジェクトで Nx を使用するデモンストレーションを行いました。デモでは、Nx がキャッシュや Nx クラウド統合などの機能を通じてどのようにパフォーマンスを向上させるかを紹介しました。 Nx Cloud はスケーリングとタスクの再生を可能にし、並列実行を提供して速度を向上させます。また、コードベースの変更された部分に対してのみタスクをインテリジェントに実行する「nx inspired」コマンドも搭載されており、CI がさらに最適化されます。
Katerina 氏は、ESLint や Vite 用のプラグインと同様、Nx プラグインは移行を簡素化し、既存の構造を中断することなくコードをシームレスに維持できることを強調しました。最後に、CI 用の GitHub Actions のセットアップ方法を示し、エージェント間で効率的にタスクを分散する Nx の機能を実証しました。

Vite Rubyの使用

コンサルティング会社 Evil Martians を経営する Irina Nazarova 氏は、Vite Ruby が Rails アプリケーションの開発者エクスペリエンスをどのように変革し、Rails の「No Build」アプローチに代わるより良い代替手段を提供したかを共有しました。 Vite Ruby は、Power Home Remodeling Group や ClickFunnels などの企業に導入され、Rails の開発者に優しい理念を維持しながら、より複雑なフロントエンドのセットアップを可能にしました。

Node API を介して Vite と Vitest を実践する

Bit のソフトウェア エンジニアであり、Vue.js Conf チームのメンバーでもある Zhao Jinjiang 氏が、Bit の Webpack/Jest から Vite/Vitest への移行について説明しました。この切り替えにより、統合テストを備えたカスタム開発環境、最適化されたビルドとテストのワークフロー、およびノー​​ド API による柔軟性の強化が可能になり、コンポーネント駆動型の開発が容易になりました。

このセクションでは、Vite が SolidJS、Svelte、Remix などの主要なフレームワークをどのように強化しているかを見ていきます。これらの開発は、Vite が各フレームワークのニーズに合わせて新機能とパフォーマンスの向上をどのように推進しているかを示しています。

ネットワークキャズムを越える

SolidJS の作成者である Ryan Carniato 氏は、SolidStart (5 月にバージョン 1.0 に到達) がクライアントとサーバーの開発を統合するためにどのように進化したかを共有しました。 Vite、Vinxi、Nitro 上に構築された SolidStart はサーバー機能を導入し、簡素化されたルーターレス アーキテクチャを備えた初の JavaScript フレームワークとなり、4.7KB という驚異的な軽量バンドル サイズを実現しました。
Chrome チームからの資金提供を受けて、Ryan と Alexis は、非同期データとストリーミングを処理できる強力なシリアル化ツールである Seroval を開発しました。これにより、アクションとデータの取得を 1 つのシームレスなリクエストに効率的に組み合わせるシングルフライト ミューテーションという重要なブレークスルーがもたらされました。彼らはこのコンセプトをインタラクティブな Trello ボード デモで実証し、パフォーマンスの向上を示しました。
Ryan 氏はまた、ラピッド プロトタイピングを可能にする Vite のエコシステムの重要性を強調し、それが Solid 2.0 の開発にどのような影響を与えたかを強調しました。

ロールアップの進化: パフォーマンスと最新の構文への焦点

Lukas Taegert-Atkinson 氏は、ロールアップの最近および今後の機能強化について説明しました。

• Rust 移行によるパフォーマンスのアップグレード: Rollup と Rust の統合により、バンドル速度が 20% 向上し、メモリ使用量が 5% 削減されました。次のステップには、読み込みを高速化するためのバイナリ キャッシュと、非同期プラグイン解析 API が含まれます。
• 最適化されたツリーシェイキング: ロールアップのツリーシェイキングは、関数の引数、動的インポート、オブジェクトプロパティの最適化により、未使用のコードをより効果的に削除するように改良されました。
• 構文サポートの拡張: ロールアップは、明示的なリソース管理、デコレーター、ネイティブ JSX をサポートするようになり、TypeScript もサポートされる予定です。 Rollup のパフォーマンス、最新の構文サポート、シームレスな開発者エクスペリエンスに対する取り組みにより、主要な JavaScript バンドラーとしての地位が強化されています。進化するにつれて、さらに強力な機能と最適化が期待できます。

Vite がどのようにリミックスを改善したか

Pedro Cattori と Mark Dalgleish は、Remix から Vite への移行によってもたらされた改善点を発表しました。
Pedro 氏はサーバー コードの分離に焦点を当て、クライアント バンドルからサーバー コードを削除するためにツリーシェーキングに依存することからどのように脱却したかについて説明しました。代わりに、明示的な Remix 変換を実装し、.server ファイル サフィックスを導入しました。これにより、サーバー コードがクライアントに漏洩する可能性がある場合に明確なビルド時エラーが発生します。
Mark は CSS 処理の改善について取り上げ、Remix のオリジナルの URL ベースの CSS インポートから Vite の組み込み機能を活用するためにどのように進化したかを示しました。これには、Rollup による CSS チャンクの改善と、CSS インポートに Vite の URL クエリ文字列を使用する開発モードのソリューションが含まれており、スタイルのフラッシュを回避しながら開発と運用の間で一貫した動作を保証します。
これらの変更により、Remix フレームワークに開発者エクスペリエンスの向上、より堅牢なコード分離、より効率的な CSS 処理がもたらされ、Vite の移行によってコア アーキテクチャの改善がどのように促進されたかを示しています。

Qwik - 魔法の裏側

シャイ・レズニクは、楽しく遊び心のある導入で講演を開始し、自身の技術的能力について印象的な主張をする「伝説のショーマン」であると説明します。
Shai 氏は講演の中で、ハイドレーションの必要性を排除することでアプリのパフォーマンスを最適化するように設計された JS フレームワークである Qwik に焦点を当てます。クライアント上で JS を再実行することでアプリをインタラクティブにするハイドレーションに依存する従来のサーバーサイド レンダリング フレームワークとは異なり、Qwik は「JavaScript ストリーミング」を使用します。このプロセスでは、アプリを小さなセグメントに分割し、サーバー側のレンダリング中にアプリの構造とイベント リスナーをエンコードします。これらのセグメントはクライアントに送信され、Qwik は必要なコードをバックグラウンドでバッファリングします。その結果、アプリは、JS の読み込みを待たずに、ユーザーが操作するとすぐにインタラクティブになります。
Shai 氏は、Qwik がこのプロセスを自動的に処理するため、動的インポートや遅延読み込みなどの手動による最適化の必要性がなくなると説明しています。これにより、読み込み時間が短縮され、ユーザー エクスペリエンスと SEO が向上します。また、Qwik がシームレスに拡張できるため、単純なマーケティング サイトと複雑なアプリの両方に適していることも強調しています。 Shai 氏は、Qwik は安定しており、認証、テスト、展開のための統合を含むコミュニティとエコシステムが成長していることを聴衆に安心させます。
さらに、Shai は、開発プロセスをさらに合理化し、アプリのパフォーマンスを向上させることを目的とした、予測バッファリング、デッド コードの削除などの AI 主導の最適化、自動リファクタリングなどの将来の機能を紹介します。

Volar.js: その仕組みと今後の展開

Volar.js の作成者である Johnson Chu は、Vue.js、React、Svelte、Vite エコシステム内に統合されたツールなど、さまざまな環境で組み込み言語をサポートする言語ツールを構築するための画期的なフレームワークを導入しました。現在広く採用されている Volar.js は、効率性とモジュール性を重視しており、特に Vite で構築されたプロジェクトにおいて、開発ワークフローの最適化に不可欠な部分となっています。
Johnson 氏は Volar のアーキテクチャを分析し、次の点を強調しました。

• 重要な操作を処理する言語コア モジュール。
• 言語サービス モジュール。埋め込みコードを管理し、Vite を利用したプロジェクト内で効果的に使用される API を公開します。
• Vite のようなフレームワークにとって重要な、カスタマイズと効率的なコード変換を可能にするプラグイン レイヤー。 Volar と Astro の中心メンバーである Erika は、Vite ユーザーに利益をもたらした改善点を強調しながら、過去 1 年間の Volar の進歩について話し合いました。チームは新機能の導入、パフォーマンスの強化、バグの解決を行い、Volar の安定性に貢献し、Vite ベースの開発用の堅牢なツールにしました。

Svelte 5: コンポーネントを超えて

Svelte チームの Rich は、開発者の間で人気がある Svelte のリアクティブ システムの中核的な制限に対処することを目的として、Svelte 5 での大幅な書き換えを発表しました。彼は Svelte の現在の構造を 4 つのポイントで概説しました:

• バニラ JavaScript を生成するコンパイラーとして機能します。
• 暗黙的なコンポーネントベースのコンパイラ駆動の反応性を使用します。
• 関数内の反応性を追跡できない、大きなオブジェクトの非効率的な処理、手動の配列変更更新の必要性などの制限があります。
• リアクティブ変数は、コンポーネントのトップレベルでのみ機能します。 次に、彼は Svelte 5 で 5 つの重要な変更を導入しました:
• 明示的で普遍的な、ランタイム主導のきめ細かい反応性のための「ルーン」を導入します。
• コンポーネント間でのリアクティブ状態の共有を有効にします。
• コンパイルにより改善された人間工学を備えた信号ベースの反応性を採用します。
• 他のフレームワークよりもパフォーマンスが優れていると主張します。
• 学習曲線を簡素化し、コードを削減することを目指しています。 さらに、Rich は、Vite 6 の環境 API を使用した今後の SvelteKit の改良点をプレビューしました。これにより、開発者はローカル開発中にプラットフォーム固有の API (Bun SQLite など) を利用し、単一のアプリ内でさまざまなサーバー ランタイムを混在させることができます。

Ember の Vite を使った構築の旅

Chris Manson が、13 年前のフロントエンド フレームワークである Ember.js が Vite の統合によってどのように進化しているかについて語ります。 Ember のレガシー ビルド システムである Broccoli は、コード分割などの最新の最適化に課題をもたらしました。これを修正するために、Embroider は Ember の従来のビルド システムと最新のバンドラーの間のギャップを埋めるために導入されました。 Ember の伝統的なブロッコリー ツリーを、新しいバンドラーで処理できるよりクリーンな構造に前処理します。 Embroider の初期バージョンは Webpack で動作しましたが、安定していなかったので、Vite と互換性を持たせるためのさらなる作業が行われました。
主な課題は、Vite のモジュールファーストのアプローチを Ember の古い AMD ベースのモジュールと連携できるように適応させることでした。この解決策には、Vite を実行する Ember CLI ではなく、Vite が Ember プラグインを使用してビルドを駆動するビルド プロセスの再設計が含まれていました。 Embroider Vite プラグインは、モジュールの解決とメタデータを処理し、よりスムーズな統合を保証するために作成されました。
その結果、Ember アプリが Vite で構築できる実用的なシステムが完成し、これを新しいプロジェクトのデフォルトのエクスペリエンスにするための取り組みが継続されています。

このセクションでは、Vite のパフォーマンスを新たな高みに押し上げるツールとテクニックについて説明します。 Nitro v3、Rollup での Rust 統合、ローカルファースト SQLite アプリに関する講演では、より高速で効率的なアプリケーションを構築するための戦略が明らかになります。

Rustの力: WebをTaurify

CrabNebula の X リーダーであり、Tauri ワーキング グループと SolidJS DX チームの主要な貢献者である Atila は、Tauri テクノロジを使用して Web アプリケーションをネイティブのデスクトップおよびモバイル アプリケーションに変換するように設計された新しい SDK Taurify を紹介しました。
5 つの主な機能:

1. シンプルな統合: 開発モードではパッケージ/クレートとしてシームレスに動作します。
2. 最適化されたビルド: 無線アップデートにより、ビルド時間を数分から数秒に短縮します。
3. 開発者ツール: デバッグ機能とホット モジュール交換が付属しています。
4. クラウド統合: 自動展開と包括的なリリース管理をサポートします。
5. 実稼働対応: バンドル サイズを最適化し、アプリのアップデートを効率的に管理します。

ライブデモ:

• シンプルなアプリ (Solid Hacker News): Atila は、JSON 構成、リアルタイム開発機能、デプロイメントプロセスを含む、基本的な Taurify 統合をデモしました。
• 複雑なアプリ (Mastodon クライアント): 彼は Taurify の機能を紹介し、複雑なコードベースとのスムーズな統合と効率的なクラウド展開を実証しました。

魔法のようにフォントを最適化する

Nuxt コアチームリードの Daniel Roe 氏は、Vite と Nuxt を使用して Web フォントのパフォーマンスを最適化する革新的な方法を紹介しました。彼は、レイアウトの変更やパフォーマンスの問題など、Web フォントの課題について説明しました。 Roe は 3 つのツールを紹介しました:

• Fontaine: ビルド時にフォント メトリクスを CSS に挿入する既存のツール。
• Unifont: フォント プロバイダー API に均一にアクセスするための新しいオープンソース ツールです。
• Nuxt Fonts: フォントの最適化を自動的に処理し、フォントをローカルで提供することでプライバシーとパフォーマンスを確保する、両方に基づいて構築された構成不要のモジュールです。

ダニエルはまた、Vite の強み、特に Nuxt のようなフレームワークと Vite チーム間のシームレスなコラボレーションを可能にする多態性の性質を強調しました。

Angular 用の次のメタフレームワークをアナログで構築する

AnalogJS の作成者であり、NgRx メンテナーである Brandon Roberts が、Vite 上に構築された Angular のメタフレームワークである AnalogJS を紹介します。彼は、フルスタック ソリューション用の Vite、Nitro、Nx などのツールを使用して Angular エコシステムを強化することを目的とした AnalogJS V1.8 のリリースを発表しました。 Analog は、スタンドアロン コンポーネントや強化されたサーバーサイド レンダリング (SSR) などの最新の Angular 機能を活用し、ファイルベースのルーティング、静的サイト生成、統合 API ルートを提供します。
主な機能と統合:
• SSR および静的生成: さまざまなプラットフォーム (Node、Edge、Vercel など) をサポートします。
• API ルート: コンポーネントと一緒にサーバー エンドポイントを簡単に定義します。
• テスト ツール: Vitest および Playwright との統合により、Angular を最新のテスト手法と調整します。
• Storybook など: Vite は Storybook などのコンポーネント ライブラリとの統合を強化します。
Roberts 氏はまた、クライアント/サーバー間のデータ処理を簡素化することを目的とした、アナログ シングル ファイル コンポーネント (SFC) やフォーム アクションなどの実験的な機能についても示唆しました。

パフォーマンス！パフォーマンス！パフォーマンス！

Bjorn Lu は、Web アプリのパフォーマンスを向上させるための戦略に入る前に、ユーモアを交えて「パフォーマンス神話」について冗談を言いながら始まりました。彼らは 3 つの重要な側面を強調しました:

1. 効率: 不要な操作を削減します。たとえば、map/filter/reduce の代わりに単純なループを使用します。
2. ミニマリズム: 必要なライブラリ部分のみを使用し、よりシンプルな場合はカスタム コードを記述します。
3. リソースフルネス: タスクを並列化するためのワーカー スレッドなどのシステム リソースを活用します。 ボトルネックを特定するために、講演者は「あいまいな」ユーザーレポートを具体的で実行可能な問題に変えることを推奨しました。彼らは、Chrome DevTools や npmgraph などのプロファイリング ツールを使用してデモンストレーションを行いました。 講演では、いくつかの最適化ケーススタディが紹介されました。
4. ターゲットを絞ったプロファイリングによりパッケージ速度を 4 倍に向上
5. ワーカー スレッドを使用して CSS 処理を高速化する
6. 動的計算によるRollupのメモリ使用量の削減 講演者は、小さな漸進的な改善は時間の経過とともに大きくなる可能性があることを強調しました。しかし、彼らはパフォーマンスの向上と保守性のバランスについて警告しました。

Vite を使用して Web ポリリスを構築する

Cloudflare のソフトウェア エンジニアであり、Angular の元寄稿者である Igor は、従来のモノリシック Web アプリケーションの代替としての「Web ポリリス」の概念について説明します (ポリリシック アプリケーションは多くのコンポーネントで構成され、柔軟性と堅牢性を向上させるために独立して機能します)。同氏は、異なるコンテキストで動作できる複数の独立したコンポーネントで構成されるポリリシック アプリケーションの利点を強調し、通常単一のエントリ ポイントを持ち、パフォーマンスの問題、非効率性、セキュリティ リスクを引き起こす可能性があるモノリシック アプリケーションと対比させています。
重要なポイントは次のとおりです:
• モノリシック アプリケーションの現状: SPA や Node.js アプリなど、今日の多くのアプリケーションはモノリシックであるため、パフォーマンスの低下や脆弱性の増加など、さまざまな欠点が生じています。
• ポリリシック アーキテクチャの利点: これらのアプリケーションは、個別のデプロイメントと共有状態の減少を可能にし、攻撃対象領域を減らすため、より高速で、より安全で、理解しやすくなります。
• 複雑さに関する考慮事項: ポリリスには明らかな利点がありますが、構成、構築、展開が複雑になります。ただし、特にフルスタック アプリケーションでは、開発者が意図せずポリリスを作成してしまうことがよくあります。
• Vite v6 の役割: Vite v6 の新しい環境 API は、圧倒的な複雑さを伴うことなく複数の環境と独立したビルドを可能にし、ホット モジュール交換 (HMR) などの機能を提供することで、ポリリシック アプリケーションの作成を簡素化します。

Nitro v3 の概要

UnJS と Nitro の作成者である Pooya Parsa は、強力な API を備えた展開に依存しないサーバーを構築するためのサーバー ツールキットである Nitro v3 を紹介しました。 Nitro は、あらゆるプロバイダー向けのアプリケーションのコンパイルとバンドルを簡素化します。
主要コンポーネント:

• ランタイム機能: ファイル システム構造、SSR 用の組み込みレンダー レイヤー、ストレージ システム、タスク ランナー、キャッシュ、組み込みデータベースを介した API ルート。
• Builder API: Rollup を利用して、本番環境向けにアプリケーション ロジックと Nitro の機能をバンドルします。また、迅速な再構築を備えた開発サーバーも含まれており、パフォーマンスを向上させるために Vite に切り替える予定です。

Nitro v3 は、Node.js のサポートを維持しながら、Web 標準およびエッジ プラットフォームとの互換性を優先します。新しい API はサーバー定義を簡素化し、構成可能性、可観測性、テスト容易性を強化します。
Pooya は、Nitro v3 とともにリリースされた H3 v2 も発表しました。これは、完全に Web 標準に基づいた、より小さいバンドル サイズとより高速な応答処理を特徴としています。今後のアップデートでは、エッジ プラットフォームでの互換性とパフォーマンスを向上させるために、Vite の統合とハイブリッド ネイティブのポリフィルが検討される予定です。

このセクションでは、デバッグとテストの合理化を目的とした更新について説明します。 Chrome DevTools、Vitest、Vue Devtool Kit の新機能により、開発者はより詳細に制御できるようになり、開発プロセスが簡素化されます。

あなたが気に入る 4 つの素晴らしい DevTools アップデート

Chrome DevTools チームの Jecelyn は、デバッグをより迅速かつ効果的に行うための 4 つの必須ツールを紹介しました。

1. 永続的な要素の検査: 検査中にドロップダウンなどの要素を表示したままにするには、「フォーカスされたページのエミュレート」を使用します。その他のテクニックについては、リンクされたビデオでご覧いただけます。
2. AI を活用したエラー解決策: Gemini を使用すると、エラー上の新しい電球アイコンをクリックすると、AI が生成した説明とカスタマイズされた修正が表示されます。
3. 強化されたパフォーマンス パネル: コアの Web 重要指標が記録することなくリアルタイムで更新されるようになり、開発者はローカルと現実世界のユーザー データを比較できます。
4. ネットワーク オーバーライドを使用した API モック: バックエンドの準備ができる前に、API 応答をモックして UI をテストします。オーバーライドはローカルに保存され、簡単に編集できます。

Vitest: JavaScript テストに革命を起こす

一連の 3 回の技術的な詳細説明で、Vitest コア チーム メンバー、Vladimir (Vitest および Vite チーム メンバー)、Ari (Vitest コア チームおよび StackBlitz エンジニア)、Misha Kaletsky (expect-type の作者) が Vitest に関する最新情報を共有しました。は、JavaScript 用の高速で最新のテスト フレームワークであり、週間ダウンロード数が過去 1 年間で 3 倍の約 600 万件に達しました。

Vitest 2.1 のハイライト:

• ブラウザ モード: ブラウザでテストを実行するための大幅な改善と新しい UI により、実際のブラウザ環境でフロントエンド コードのテストが可能になりました。
• カバレッジ: ブラウザ モードの V8 カバレッジを含む強化されたカバレッジ機能により、より高速で正確なカバレッジ レポートが提供されます。
• 型テスト: コンパイル時の型チェックのための Expect-type の統合。
• VS コード拡張機能: パフォーマンス、デバッグ、カバレッジの視覚化を高速化するために書き直された拡張機能。 主な機能と改善点:
• より高速なテスト実行: 最適化されたパフォーマンスとキャッシュ メカニズム。
• デバッグ エクスペリエンスの向上: VS Code 拡張機能のデバッグ機能が強化されました。
• 包括的なカバレッジ レポート: 粒度の高い洞察を含む詳細なカバレッジ レポート。
• シームレスな型チェック: 堅牢な型検証のための Expect-type の統合。
• ユーザーフレンドリーな UI: 視覚的に魅力的で直感的なユーザー インターフェース。

講演ではこれらの機能の実践的なデモンストレーションも披露され、Vitest の使いやすさと効率性が強調されました。講演者は、最新の JavaScript および TypeScript 開発に Vitest を使用する利点、特に開発ワークフローを加速し、コードの品質を確保できる機能を強調しました。

Vue.js エコシステムの開発ツール キット

Vue.js コア チーム メンバーの Guillaume Chau は、Vue.js、Nuxt、およびその他のフレームワークにわたるデバッグ ツールの開発と互換性を合理化し強化するための統合フレームワークである Devtool Kit を紹介しました。 Nuxt および Vue Devtools は機能は豊富ですが互換性がないため、Devtool Kit の作成が促されました。これは、それらを共通のユーティリティと API セットの下で統合することを目的としています。

主な目標は、ユーティリティと API を標準化して、Devtool 間のシームレスな相互運用性を可能にし、ブラウザ、Node.js サーバー、スタンドアロン アプリケーション。

開発ツール キットには 4 つのモジュールがあります:
メインモジュール: ページモジュールを登録し、全体的な機能を制御します。
ページ モジュール: ユーザー アプリケーション コンテキスト内で動作し、アプリの状態との対話を可能にします。
View Module: 表示インターフェイスを管理し、ユーザーに情報を表示します。
サーバー モジュール: 開発中にサーバー側の対話を処理します。
Devtool Kit は、postMessage や WebSocket などのテクノロジーを使用した双方向の型付き通信システムを特徴としており、コンテキストに関係なく、モジュール間のシームレスな対話を可能にします。

モジュール式の「アプレット」を忘れないでください。これは、高度にカスタマイズされた Devtools エクスペリエンスを提供し、Vue.js、Nuxt、さらには Pinia や Tailwind などのサードパーティ ツールの機能を統合します。

Node.js モジュール ローダーの新機能と今後の機能

Node.js のコントリビューターである Joyee は、ESM サポートと開発者エクスペリエンスの向上に焦点を当てて、Node.js モジュール読み込みシステムの最近および今後の改善点を紹介します。

リリースされた機能:

1. require() の ESM (実験的)
   o CommonJS モジュールは ES モジュールを require() できるようになりました。
   o 制限: トップレベルの待機サポートはありません。
   o Node.js 23 安定版に移行予定。

2. 開発者の改善
   o .js ファイル内の ES モジュールの自動検出。
   o 読み込みを高速化するためのモジュール コンパイル キャッシュ。
   o トップレベル待機なしの組み込みモジュール検出。
   o 問題のあるトップレベルの await コードを特定するツール。

今後の機能

1. パッケージ管理:
   o 二重パッケージの問題を防ぐための新しい輸出条件
   o CommonJS から ESM への移行サポートの向上

2. 開発者ツール:
   o 同期モジュールローダーフック
   o 環境セットアップ用のランタイム構成ファイル

下位互換性と開発者のエクスペリエンスを維持しながら、ESM サポートを改善することに重点を置いています。

このセクションでは、Vite の実際のアプリケーションについて詳しく説明します。 Excalidraw、Shopify、その他のプロジェクトのケーススタディは、Vite のスピード、柔軟性、開発者のエクスペリエンスが実稼働環境にどのような違いをもたらすかを強調しています。

Excalidraw を CRA から Vite に移行する

Excalidraw のメンテナーである Aakansha が、ビルドと HMR 時間の短縮、柔軟性の向上、メンテナンスの改善の必要性を理由に、Create React App (CRA) から Vite にプロジェクトを移行した経験について語ります。
移行プロセスは、2021 年に Patak が Vite を Excalidraw に統合した後に開始され、これがチームの注目を集めました。彼らは、Vite のビルド時間の短縮、ホット モジュールの交換の改善、コミュニティの成長を理由に移行を決定しました。課題は次のとおりです。

• テスト: キャンバスベースのテストに vitest-canvas-mock を使用して、コミュニティ サポート付きの Vitest に移行しました。
• PWA サポート: vite-plugin-pwa を使用してロケールとフォントのキャッシュを実装し、カスタム ロールアップ構成の問題を解決しました。

しかし、チームは展開後に大きな問題、つまり大きなファイルに対する HMR のパフォーマンスの大幅な低下に遭遇しました。これは開発者のエクスペリエンスに悪影響を及ぼし、元に戻すことになりました。調査してプラグインを削除した後、問題を解決し、正常に導入することができました。
Excalidraw の Vite 移行は、コミュニティの多大な支援によって完了し、開発者のエクスペリエンスが向上し、ビルドが合理化されました。

Shopify での Vite のスケーリング:

Jason Miller Shopify 最大の React コードベース (500 万行の TypeScript と 800 のルート) に取り組んでいる開発者である Jason は、Webpack から Vite への移行のメリットを強調しました。この移行により、起動時間は 15 秒になり、HMR パフォーマンスは 12 秒から 5 ミリ秒に短縮され、モジュール数は 18,000 から 2,300 に最適化されました。これらの改善により、チームはクラウドベースの IDE に依存するのではなく、ローカル開発に移行することができました。

Vite を使用したビデオゲーム開発

クリストフ・ナカザワ、ゲーム開発者 クリストフは、Vite によって 214,000 行の JavaScript を含むクロスプラットフォーム ゲームである Athena Crisis をどのように構築できるようになったのかを説明しました。 Vite は、vite-plugin-pwa を介した 30 ミリ秒のホットリロードとオフライン サポートを提供し、フロントエンド コードとバックエンド コードの両方のシームレスなバンドルを可能にし、複数のプラットフォームにわたる 3 分の高速導入サイクルを実現しました。

Viteconf 3D パズルの構築方法

Storyblok の開発者エクスペリエンス エンジニアであり、TresJS ライブラリの作成者である Alvaro Sabu が、ViteConf ランディング ページで 3D パズルを構築する過程を共有しました。このインタラクティブなパズルは、ユーザーが統合されたコード エディターを介して解くことができ、Vue ベースの 3D ライブラリである TresJS を使用して作成されました。
Alvaro 氏は、パズルの設計における主要な手順について説明しました。つまり、四面体と八面体のピースを作成し、四元数とアニメーション フレームを使用して回転ロジックを実装し、それを Web ページにシームレスに統合しました。際立った機能は、WebContainers を使用して Vite 開発サーバーをページ内に埋め込み、ユーザーがパズルの背後にある JavaScript をリアルタイムで編集できるようにすることでした。
Alvaro 氏は、連続的なローテーションでの一時的なグループの使用やパフォーマンスの最適化など、課題の克服に関する洞察も提供しました。このプロジェクトは、没入型で編集可能な 3D Web エクスペリエンスを作成するための TresJS と WebContainers の機能に焦点を当てています。

このセクションでは、Vite のエコシステムの将来とコミュニティの焦点について説明します。ドキュメント、オープンソースの原則、フレームワークの統合に関する話では、協力的で前向きな開発者コミュニティの構築における Vite の役割が強調されています。

ウェブの未来はローカルファーストです

Ben Holmes は、「ローカルファースト」アプリを紹介し、完全にブラウザーで実行できる可能性を示しました。彼は Astro を使用してこれを実証し、SQLocal などのライブラリを使用して SQLite をクライアント側で管理し、データをブラウザに安全に保存する方法を強調しました。重要なポイントは次のとおりです:

1. ドキュメント エディタ: ユーザーがブラウザの SQLite データベースでドキュメントを直接作成、編集、保存できるシンプルなエディタで、外部ストレージなしでデータの永続性を確保します。

2. 検索機能:
   。 基本検索: 最初は SQL の LIKE 演算子を使用したテキスト検索を実装しました。
   。 AI を活用した検索:
   のユニバーサル センテンス エンコーダーを統合 TensorFlow によるインテリジェントな類似性に基づく検索により、ユーザーは曖昧な用語でも関連するドキュメントを見つけることができます。

3. 技術的洞察: ブラウザーでの大規模な AI モデルの読み込みや、パフォーマンス向上のために Web ワーカーを使用する重要性などの課題について説明しました。

4. ユーザー エクスペリエンス: デモでは、アクセシビリティのためのブラウザー ネイティブの要素と、ビューの遷移を伴うスムーズなアニメーションが特徴で、検索エクスペリエンスが向上しました。
   結論として、Ben は、ローカルファースト アプリケーションにおけるオンデバイス AI 計算のエキサイティングな未来を強調しました。

フレームワークからプリミティブへ

Netlify の CEO である Mat Bilmann 氏は、Web 開発におけるモノリシック構造から Jamstack および最新のフレームワークへの移行について概説し、フロントエンドとバックエンドを分離して柔軟性とスケーラビリティを高める利点を強調しました。 Gatsby、Next.js、Nuxt.js などの初期のフレームワークはワークフローを合理化しましたが、同時に複雑さも加えました。
Bilmann 氏は現在、よりカスタマイズされた Web アプリケーションを可能にする、より小さく構成可能なプリミティブへの移行を提唱しています。 Vite はこの変化において重要な役割を果たし、Astro、TanStack Start、Vike などの新しいフレームワークを促進する強固な基盤を提供します。これらのフレームワークは、シンプルさ、モジュール性、パフォーマンスを優先し、開発者が効率的で保守可能な Web アプリケーションを構築できるようにします。

統合された Web フレームワーク

Google の Angular プロダクト リードである Minko Gechev が、Angular と React の類似点と、フロントエンド フレームワークの将来のトレンドについて語ります。彼は、両方のフレームワークが、異なる構文 (テンプレートと JSX) を使用しているにもかかわらず、変更の検出と最適化にどのように同様のアプローチを利用しているかを説明しています。
Minko の講演の中心となるのは、Vue、Solid、Svelte などのフレームワークでも使用されるプリミティブである Signals の紹介です。 Angular の Signals 実装により、データの依存関係を追跡し、不必要な再レンダリングを最小限に抑えることでパフォーマンスが向上しました。
Minko 氏は、パフォーマンスの最適化を共有し、開発者のエクスペリエンスを向上させることを目的とした、Angular と Google の Wiz フレームワークとのコラボレーションを強調します。注目すべき例には、インタラクティブ性のギャップに効率的に対処するイベント リプレイや、ページ読み込みパフォーマンスを向上させる増分ハイドレーションなどがあります。
同氏は、フレームワークは今後も、フレームワークを選択する際に安定性、エコシステム、個人の好みを重視してユーザー エクスペリエンスを向上させるために、きめ細かいコードの読み込みとイベントの再生に収束していくだろうと予測しています。

ヴァイト生態系の文化

OpenSauced プロジェクトの背後にいる重要人物である Brian Douglas (B Dogie) が、Vite エコシステムの文化と成長について語ります。彼は、Vite が現在 1 週間あたり 1,500 万ダウンロードを達成しており、これは素晴らしいマイルストーンであると強調しました。

Dogie はまた、Vite コミュニティの主要な貢献者を特定するために彼のチームが開発したツールである StarSearch も紹介し、Anthony Fu、Patak、Brandon Roberts、Toby などの人物に Vite の開発と採用の推進における役割にスポットライトを当てています。 Dogie は Evan Yu の言葉を引用して締めくくり、偉大な貢献者が Vite の成功の鍵であり、開発者のエクスペリエンスと問題解決に重点を置く Vite がフロントエンド エコシステム全体での成長の中心であることを強調しました。

アンソニーのオープンソースへの道 II: オープンソースにおける進歩的な道

Anthony Fu 氏は講演の中で、オープンソース ツール開発における進歩性の概念を探りました。重要なポイントは次のとおりです:
優れたオープンソース ツールとは何ですか?

• 問題の解決: 優れたツールを使用すると、手動による方法と比較して労力が大幅に削減されます。
• 学習と使用が簡単: 学習曲線が低いため、より幅広い採用が促進されます。
• コミュニティ主導の改善: ユーザーのフィードバックと貢献により、継続的な改善が促進されます。 進歩性の重要性:
• プログレッシブ オンボーディング: ツールは、初心者でも簡単に学習できるようにアクセスできるものである必要があります。
• プログレッシブ統合: さまざまなシナリオに適応して統合する柔軟性が鍵となります。
• プログレッシブ機能: 強力な機能は段階的に導入され、ユーザーが時間をかけて知識を深めることができるようにする必要があります。
• プログレッシブな重大な変更: 重大な変更は、下位互換性のための移行パスとオプションを使用して、スムーズに導入される必要があります。 Anthony はまた、Vue、Nuxt.js、Vite などのツールの進歩性の例を示し、それぞれがユーザー エクスペリエンスと適応性を向上させるためにどのように進歩的な道をたどるかを説明しました。

コミュニティ構築としてのドキュメント

Sarah Rainsberger の講演では、ドキュメントがコミュニティの成長にとっていかに強力な、しかし見落とされがちなツールであるかを強調しました。適切に管理されアクセス可能なドキュメントに投資することで、熱心で持続可能なコミュニティが育成され、プロジェクト全体が強化されます。
彼女は、ドキュメントがアクティブなオープンソース コミュニティを育成する方法を次のように説明しています。

• プロジェクトの健全性には強力なコミュニティが不可欠です - ユーザーの増加 =>その他のバグレポート =>フィードバック、および潜在的な貢献者。
• ドキュメントは、コードの貢献に比べて参入障壁が低いため、コミュニティ構築のリソースとして十分に活用されていません。
• ドキュメントは、教育、オンボーディング、マーケティングなど、保守者の負担を軽減できる多くの重要な目的に役立ちます。
• 既存のコミュニティ ヘルパーを特定し、小さな修正であってもドキュメントを直接改善するよう招待します。
• 翻訳者は、説明が必要な不明瞭な箇所を見つけてくれる貴重な貢献者です。
• Doc の貢献者は、将来のコードの貢献者としてオンボーディングされ、プロジェクトの使いやすさを実証できます。
• より多くの参加を促すために、明確な貢献ガイダンス、簡単なタスク、世間での認知度を提供します。
• コミュニティが作成した高品質のドキュメントへの投資は、オープンソース プロジェクトの成長と持続可能性にとって非常に重要です。

このセクションでは、Vite に新しい機能を追加する先駆的なフレームワークについて説明します。 Vike、WebAssembly 統合、および Zero to One に関する講演では、Vite が次世代の Web アプリケーションを形成する革新的なアプローチをどのように実現しているかを紹介します。

フレームワーク設計の新境地を開拓する

ゼロから 1 へのフレームワークの再発明
Nathan Wienert は、次の 2 つの主な機能で際立った新しい React フレームワークである「One」を紹介しました。

1. シームレスなデュアル サービング: 1 つは、Vite が React Native と Web アプリケーションの両方を同時に提供できるようにし、両方の環境でファイル システム ルーティングとホット リロードを提供します。
2. ローカルファーストの統合: Zero と統合することでローカルファーストのアプローチを強調し、Web アプリとネイティブ アプリ間のコード共有をサポートするデータ管理ソリューションを提供します。

セットアップは簡単です。npx one を使用して One アプリを作成すると、簡単な設定のための Vite プラグインとして機能します。 1 つはさまざまなレンダリング モード (サーバー側、静的、またはクライアント側) をサポートし、Tamagui を使用して Web 機能を強化してスタイルを最適化します。

フレームワークは、サーバーとクライアント間のデータの取得と同期を効率的に処理し、SWC を使用して Babel を置き換えてビルド時間を短縮します。プラットフォーム固有の拡張機能により、デバイス間で異なるエクスペリエンスが可能になり、静的アプリケーションと動的アプリケーションの両方に対する多用途性が実証されます。

Nathan のセッションでは、Web とネイティブ アプリの開発をシームレスに橋渡しし、今すぐ利用できるようにするという One の目標が強調され、Zero はパブリック ベータ版に近づきました。

Wasm のソースおよびターゲットとしての JavaScript

Microsoft Azure の JavaScript 開発者エクスペリエンスの主任リーダーである Natalia Venditto が、WebAssembly がクライアント側とサーバー側の両方の JavaScript 環境でどのように高パフォーマンスのコード実行を可能にするかについて説明します。
主要な技術ポイント

1. WebAssembly の基本
   o C /Rust などの言語のコードをポータブル バイナリにコンパイルします。
   o WebAssembly バインディングを介して JavaScript とシームレスに統合します。
   o 計算負荷の高い操作をより効率的に実行します。

2. 開発ツール
   o WebAssembly 統合用の Vite プラグイン。
   o ブラウザと VS Code でのデバッグのサポート。
   o コンパイルされたコードのソースレベルの直接デバッグ。

3. コンポーネントモデル
   o より優れた言語間サポートのための新しいアーキテクチャ。
   o 数値を超えた複雑なデータ型を処理します。
   o JavaScript から WebAssembly へのコンパイルを有効にします。

最後に、彼女は開発における移植性と構成に関する WebAssembly の可能性を強調し、Vite エコシステムで利用可能な進化するツールとプラグインに取り組むよう開発者に勧めています。

Vike - 次世代フロントエンド フレームワーク

Rom Brillout は、柔軟性を考慮して設計された次世代フロントエンド フレームワークである Vike を発表しました。同氏は、Vike は Next.js や Nuxt に似ていますが、開発者が任意の UI フレームワークを使用できるようにする高度にカスタマイズ可能な拡張機能を備えていると説明しました。たとえば、Vike は、同じプロジェクト内で React、Solid、さらには Vue 2 と 3 を組み合わせてアプリを実行できます。すべてのレンダリング戦略 (SPA、SSR、SSG) をサポートし、さまざまなデータ取得メソッド (RPC、REST、GraphQL) と統合します。

主な差別化要因は、MIT ライセンスに基づく Vike のオープンソース モデルです。 Vike は、従来の商業モデルではなく、企業がエンタープライズ用途に選択した金額を支払うことができる独自のアプローチを提供します。目標は、Vike を 100% オープンソースに保ち、すべての開発者のアクセシビリティを確保しながら持続可能なビジネス モデルを提供することです。 Brillout 氏は、その柔軟性とカスタマイズ オプションにもかかわらず、Vike は運用環境での使用に対してすでに安定しており、バージョン 1.0 を間もなくリリースする予定であると強調しました。

結論：

記事を最後まで読んでいただきありがとうございます! ViteConf 2024 でのエキサイティングな展開についての新たな洞察が得られ、有益な内容となったことを願っています。
この記事は土曜日しか執筆できなかったため、予定よりも公開に時間がかかりましたが、良いものには時間がかかりますよね。 ?

コンテンツのレビューと磨き上げを手伝ってくれた親愛なる友人と、出版を奨励してくれた皆さんに特に感謝しています。 ChatGPT と Claude に感謝します?私の英語を磨くのに役立ってくれて、うまく伝われば幸いです。

これは私にとって初めての技術記事ですが、皆様のサポートは私にとって本当に大きな意味があります。もっと記事を書いて、開発者コミュニティと知識を共有し続けることを楽しみにしています。
ご意見やフィードバックをお気軽に共有してください。ぜひお聞かせください。私を見つけるには:
X (Twitter): @Mohamed_LmineF または LinkedIn: mohamedlaminef.

以上がViteConf のイノベーション、発表、今後の展開の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。