Vuenionの状況 — Vue Amsterdam Conference 2022の要約シリーズ — 第一部

こんにちは！Vue.js Amsterdam Conference 2022の要約シリーズの第一部にお越しいただき、ありがとうございます。このシリーズでは、すべてのトークの要約を皆さんと共有します。

JSWorld Conference 2022の要約シリーズ（全四部）はこちらで読むことができます。ここでは初日のすべてのトークをまとめています。

（繰り返しの）導入部

2年半ぶりに、6月1日から3日までTheater AmsterdamでJSWorldとVue Amsterdam Conferenceが戻ってきました。私もこのカンファレンスに初めて参加する機会を得ました。多くのことを学び、素晴らしい人々に会い、素晴らしい開発者と話し、とても楽しい時間を過ごしました。初日はJSWorld Conferenceが開かれ、2日目と3日目はVue Amsterdamでした。

カンファレンスでは、素晴らしいスピーカーたちが多くの情報を提供し、私たちに価値あることを教えてくれました。彼らはみんな、知識と情報を他の開発者と共有したいと思っていました。だから私もそれを共有し続けて、他の人がそれを活用できるようにするのは素晴らしいと思いました。

最初は、いくつかのメモやスライドを共有しようと試みましたが、十分ではないと感じました。少なくともスピーカーが私に共有してくれたことと同じほどではありませんでした。そこで、各スピーチをもう一度見直し、それらにもっと深く没頭し、検索し、メモを取り、スライドやスピーチでの彼らの正確な言葉と組み合わせて、私が彼らから学んだことと同じレベルであるように共有することを決めました。

非常に重要な点

これらの記事に書かれているすべては、スピーカー自身の努力と時間の結果であり、 私はそれらを学び、これらの記事に変えることだけを試みたものです。これらの文の多くは、彼らが言ったことやスライドに書いてあることと全く同じものです。 つまり、新しいことを学べたら、それは彼らの努力のおかげです。（だからもし間違った情報があったら彼らを責めて、私を責めないでくださいね、ね？xD）

最後に、いくつかのスピーチにおける全ての技術的詳細やライブコーディングには深く立ち入らないかもしれません。しかし、興味があり、より多くの情報が必要な場合は、お知らせください。詳細な記事を別途書くように努めます。また、彼らのTwitterやLinkedInもチェックしてみてください。

こちらでカンファレンスのプログラムを見ることができます：

JSWORLD Conference

Evan You - Vue.jsのクリエイター

このトークはエコシステムと新しいことがらが起こっていることすべての概要でした。2022年2月7日、Vue 3は新しいブランドのVuejs.orgウェブサイトと共に、デフォルトバージョンになりました。

EvanはコミュニティーによるVue3の採用、2021年4月21日から始まったNuxt3 RCのリリース、2022年5月19日にリリースされたVuetify 3 Beta、VitePress 1.0 Alphaと3.0に向けてのプログレスについて説明しました。

Vuenionの状況 2022 - Evan You

Vue 3の採用

現在、Vue 3は週間npmダウンロード数が約800,000回（@vue/runtime-coreのnpmダウンロード数による測定）で、デフォルトバージョン開始時から+70%増加しました。1年前を振り返ると、過去1年で4倍に増え、すべてのVueダウンロードの25%以上を占めています。そして今年の終わりまでにはこの数字は大幅に増加するでしょう。

エコシステムのアップデート

Nuxt 3

https://twitter.com/nuxt_js/status/1516888137716449280

Nuxt 3はRCになりました。たくさんの作業が投入され、コアとしてもNuxt 3と一緒になって残りの部分を安定させるために活動しています。3.3でのsuspenseを願っています。

Vuetify 3

多くの人たちにとって、NuxtとVuetifyはVue 2からVue 3へのアップグレードを妨げる主要な部分の2つです。しかし、Vuetify 3も5月19日にベータ版が公開され、これは良いニュースです。

VitePress

VitePressは最近1.0アルファをリリースし、新しいVueドキュメントで使用されています。

彼らはもっと下層の詳細に焦点を当てていましたが、今はVitePressのデフォルトテーマを完全にオーバーホールする作業に取り組んでいます。今回はダークモードを備え、公式のVueドキュメントと一貫したデザイン言語を持ちながらも、VitePressサイトであることを知らせるための差異があります。

小さな変更がありますが、VitePressは公式ドキュメントの作業時には本当に使い心地が良いことが証明されており、非常に柔軟で強力です。まだ公式にVuePressを置き換えるべきか、ただVuePress 3を呼ぶべきか、あるいは別のプロジェクトとして残すべきか議論中ですが、Vue 3が搭載された静的サイトジェネレータを探している場合、VitePressが公式のおすすめになります。

Volar

もしv3を使っているなら、おそらく新推奨のVSCode拡張機能であるVolarを知っているでしょう。

3月からVueはVolarの作者であるJohnson Chuをフルタイムで支援し、それを改善する作業に取り組んでいます。

Johnsonはリリースとバグ修正に勢いよく取り組んでおり、内部コードベースを改善してより効率的にし、さらに多くの機能をカバーするためのリファクタリング作業を行っています

Vite 3.0（作業中）

新しいエコシステムの重要な部分はViteで、チームはバージョン3の作業に取り組んでいます。

ご存知の通り、node 12は寿命が終わりました。それがVite 3の初期の動機であり、node 12のサポートを終了しました。

これは大幅な書き換えではありませんが、いくつかの比較的小さな変更点を伴います。

私たちは常に、Viteの上でより高度なツールを構築しているエコシステムのパートナーたちと一緒に、これらの変更に対する合理的なアップグレードの必要性を確実にするために積極的に取り組んでいます。

もしあなたがViteの基本的な機能を使っているだけなら、たぶんあまり影響されないでしょう。また、Nuxt 3やそれ以外のViteの上に構築されたフレームワークを使っているなら、このアップグレードの道のりは、フレームワークがViteからの下層の変更を吸収するために、かなり透明になる可能性が高いです。

しかし、大きな利益のために潜在的に変化をもたらす可能性があります：

• Vite自体を完全なESMに移行

• SSRビルドのデフォルトはESM出力になります

  これらは、JSエコシステム全体を純粋なESMに向かって推し進めるための私たちの全体的努力の一部です。なので、これらは全体的にESMへの移行過程を少し速めることを願っています。

• 依存関係発見と最適化の非ブロッキング化

  巨大な依存関係があるにも関わらず、Viteが非常に速く起動する理由の一つは、コードベースをスキャンして依存関係を探し、それから事前に最適化するためです。

  しかし、最初の実装には2つの制約があります：

  1. コードベースが大きい場合、スキャンフェーズはコストがかかる場合があります。
  2. スキャンフェーズはプラグインによって変換されたコードが依存関係を導入する場合、依存関係を発見できないことがあります。そのため、アプリがロードされるまで待たなければなりません。

  2.9では、依存関係が発見されるのを待つことなく、発見されるにつれて非ブロッキングで最適化するための改善が導入されました。

  3.0では、この全プロセスをシームレスにするつもりです。スキャンフェーズはもう必要ありませんし、発見されるのを待つ依存関係もありません。

  Viteはあなたのモジュールを提供するときに依存関係を発見し、すべてが最終化されるのを待ちます。そして、一度に一つの最適化実行をするだけです。

• 開発サーバと本番ビルドの両方に対するEsbuildによる依存関係最適化。開発/本番のより一貫した振る舞い

  通常JSで書かれたパッケージのために、Viteは開発時の依存関係処理にesbuildを使用し、本番のアプリケーションビルドにはrollup commonJSプラグインを使用してきました。これは開発と本番の間で一貫性を欠く結果になります。

  3.0では、特にcommonJSに対して同じ結果を確実にするために、両フェーズにesbuildを使用することでこれを解消することを目標としています。特にcommonJSに対しては、次の1ヶ月以内にリリースされる見込みです。

Vue Core

4月と5月に、v3コアのバグスカッシュにおそらく1ヶ月全体を費やし、3.2.24〜26の大量のパッチリリース、70件以上のPRマージ、約140件の問題が閉鎖されました。

これらはすべて、新機能の次世代を構築するための安定した基礎を確実にするための、3.3に向けた準備のためです。

SFC Playground

SFC Playgroundはv3のバグ再現のための推奨される方法になっていますが、SFC Playgroundで再現するのが難しい2つのカテゴリーのバグがあります：

• <script setup>の本番と開発モード間の振る舞いの違い：

  私たちはこのカテゴリーのバグが過去にかなりあり、そのほとんどがSFC Playgroundでは再現できませんでした。なぜならSFC Playgroundはデフォルトで本番モードだったからです。なので、本番/開発モード間で振る舞いの違いがある場合にバグを実際に示せるように、切り替えることができるトグルを追加しました。

  ですので、SFC Playgroundは今 <script setup>のコンパイルにおいて本番/開発モードのスイッチが可能です。

• SSR hydration mismatchバグ：

  過去には、通常、単純なバグを見せるだけに全SSRセットアップと共に完全なリポジトリを作成しなければなりませんでした。

  しかし、今はSFC PlaygroundはSSR再現をサポートしています。つまり、全 - 完全コンパイル → レンダリング → ハイドレーションのパイプラインがブラウザ内で完全に実行される - パイプラインがブラウザ内で全部起こり、あなたがすることはボタンを切り替えるだけです。

Vue 2.7

Vue 2

こちらの記事はdev.toの良い記事を日本人向けに翻訳しています。
https://dev.to/mohsen_vaziri/state-of-the-vuenion-vue-amsterdam-conference-2022-summary-series-first-talk-i6b