diff --git a/src/.vuepress/public/images/sponsors/laravel.png b/src/.vuepress/public/images/sponsors/laravel.png index 9f2576b5..543f6bb1 100644 Binary files a/src/.vuepress/public/images/sponsors/laravel.png and b/src/.vuepress/public/images/sponsors/laravel.png differ diff --git a/src/.vuepress/public/images/sponsors/storyblok.png b/src/.vuepress/public/images/sponsors/storyblok.png deleted file mode 100644 index 6d1df875..00000000 Binary files a/src/.vuepress/public/images/sponsors/storyblok.png and /dev/null differ diff --git a/src/.vuepress/public/images/sponsors/storyblok.svg b/src/.vuepress/public/images/sponsors/storyblok.svg new file mode 100644 index 00000000..b80e8fe3 --- /dev/null +++ b/src/.vuepress/public/images/sponsors/storyblok.svg @@ -0,0 +1,18 @@ + + + + colored-full + Created with Sketch. + + + + + \ No newline at end of file diff --git a/src/.vuepress/theme/data/patreon-sponsors.js b/src/.vuepress/theme/data/patreon-sponsors.js index 6a87bd99..2d23d08c 100644 --- a/src/.vuepress/theme/data/patreon-sponsors.js +++ b/src/.vuepress/theme/data/patreon-sponsors.js @@ -36,7 +36,7 @@ export default { }, { "url": "https://www.storyblok.com", - "img": "storyblok.png", + "img": "storyblok.svg", "name": "Storyblok" } ], diff --git a/src/guide/migration/attribute-coercion.md b/src/guide/migration/attribute-coercion.md index 1980ad6b..a598fdf2 100644 --- a/src/guide/migration/attribute-coercion.md +++ b/src/guide/migration/attribute-coercion.md @@ -34,10 +34,10 @@ badges: | バインディング式 | `foo` 通常の属性 | `draggable` 列挙された属性 | | ------------------- | --------------------------- | ------------------------------------- | -| `:attr="null"` | / | `draggable="false"` | -| `:attr="undefined"` | / | / | +| `:attr="null"` | - | `draggable="false"` | +| `:attr="undefined"` | - | - | | `:attr="true"` | `foo="true"` | `draggable="true"` | -| `:attr="false"` | / | `draggable="false"` | +| `:attr="false"` | - | `draggable="false"` | | `:attr="0"` | `foo="0"` | `draggable="true"` | | `attr=""` | `foo=""` | `draggable="true"` | | `attr="foo"` | `foo="foo"` | `draggable="true"` | @@ -60,8 +60,8 @@ badges: | バインディング式 | `foo` 通常の属性 | `draggable` 列挙された属性 | | ------------------- | --------------------------- | ------------------------------------- | -| `:attr="null"` | / | / * | -| `:attr="undefined"` | / | / | +| `:attr="null"` | - | - * | +| `:attr="undefined"` | - | - | | `:attr="true"` | `foo="true"` | `draggable="true"` | | `:attr="false"` | `foo="false"` * | `draggable="false"` | | `:attr="0"` | `foo="0"` | `draggable="0"` * | diff --git a/src/guide/migration/migration-build.md b/src/guide/migration/migration-build.md index 571a7a58..487b5a1e 100644 --- a/src/guide/migration/migration-build.md +++ b/src/guide/migration/migration-build.md @@ -2,13 +2,13 @@ ## 概要 -`@vue/compat` (別名「移行ビルド」)は、Vue 2 と互換性のある動作を設定できる Vue 3 のビルドです。 +`@vue/compat`（別名「移行ビルド」）は、Vue 2 と互換性のある動作を設定できる Vue 3 のビルドです。 移行ビルドは、デフォルトで Vue 2 モードで動作します。ほとんどのパブリック API は、ほんの少しの例外を除いて Vue 2 とまったく同じように動作します。Vue 3 で変更されたり、非推奨となった機能を使用すると実行時に警告が表示されます。機能の互換性は、コンポーネントごとに有効/無効を設定することもできます。 ### 想定される使用例 -- ([制限事項](#既知の制限事項)ありでの) Vue 2 アプリケーションの Vue 3 へのアップグレード +- （[制限事項](#既知の制限事項)ありでの）Vue 2 アプリケーションの Vue 3 へのアップグレード - ライブラリを Vue 3 に対応させるための移行作業 - また、Vue 3 をまだ試していない Vue 2 の経験豊富な開発者は、移行ビルドを Vue 3 の代わりに使用してバージョン間の違いを学ぶことができます。 @@ -26,19 +26,19 @@ 今回の移行ビルドでは、公開されている Vue 2 の API と動作のみをカバーすることを目的としていることに注意してください。ドキュメント化されていない動作に依存しているために移行ビルドでアプリケーションが動作しなかったとしても、そのようなケースへの対応として移行ビルドを調整する可能性は低いでしょう。問題となっている動作への依存を排除するためのリファクタリングを検討してください。 -注意点としては、アプリケーションの規模が大きく複雑な場合は、移行ビルドを使用しても移行が困難な場合があります。残念ながらアップグレードできない場合は、Composition API やその他の Vue 3 の機能を 2.7 のリリース(2021 年第 3 四半期後半予定)でバックポートする予定であることを覚えておいてください。 +注意点としては、アプリケーションの規模が大きく複雑な場合は、移行ビルドを使用しても移行が困難な場合があります。残念ながらアップグレードできない場合は、Composition API やその他の Vue 3 の機能を 2.7 のリリース（2021 年第 3 四半期後半予定）でバックポートする予定であることを覚えておいてください。 移行用のビルドでアプリを動作させることができた場合、移行が完了する前に本番環境にリリースすることが**可能**です。パフォーマンスや容量に若干のオーバーヘッドが発生しますが、本番環境の UX には目立った影響はありません。Vue 2 の動作に依存している依存関係があり、アップグレードや置き換えができない場合にはそうする必要があるかもしれません。 -移行用のビルドは 3.1 から提供され、3.2 のリリースラインと並行して引き続き公開されます。移行ビルドの公開は、将来のマイナーバージョン(2021 年の年末以降)で終了する予定ですので、それまでに標準ビルドへの切り替えを目指してください。 +移行用のビルドは 3.1 から提供され、3.2 のリリースラインと並行して引き続き公開されます。移行ビルドの公開は、将来のマイナーバージョン（2021 年の年末以降）で終了する予定ですので、それまでに標準ビルドへの切り替えを目指してください。 ## アップグレードのワークフロー -以下のワークフローは、実際の Vue 2 アプリ(Vue HackerNews 2.0)を Vue 3 に移行する手順を示しています。完全なコミットは[こちら](https://github.com/vuejs/vue-hackernews-2.0/compare/migration)から確認できます。なお、実際に必要な手順はプロジェクトによって異なるため、これらの手順は厳密な指示ではなく一般的なガイダンスとして扱ってください。 +以下のワークフローは、実際の Vue 2 アプリ（Vue HackerNews 2.0）を Vue 3 に移行する手順を示しています。完全なコミットは[こちら](https://github.com/vuejs/vue-hackernews-2.0/compare/migration)から確認できます。なお、実際に必要な手順はプロジェクトによって異なるため、これらの手順は厳密な指示ではなく一般的なガイダンスとして扱ってください。 ### 準備 -- まだ [非推奨の named/scoped スロット構文](https://vuejs.org/v2/guide/components-slots.html#Deprecated-Syntax) を使用している場合は、まず最新の構文にアップデートしてください(構文は 2.6 ですでにサポートされています)。 +- まだ [非推奨の named/scoped スロット構文](https://vuejs.org/v2/guide/components-slots.html#Deprecated-Syntax) を使用している場合は、まず最新の構文にアップデートしてください（構文は 2.6 ですでにサポートされています）。 ### インストール @@ -46,9 +46,9 @@ - カスタム webpack セットアップを使用している場合: `vue-loader` を `^16.0.0` にアップグレードします。 - `vue-cli` を使用している場合: `vue upgrade` で最新の `@vue/cli-service` にアップグレードします。 - - (代替手段) [Vite](https://vitejs.dev/) + [vite-plugin-vue2](https://github.com/underfin/vite-plugin-vue2)に移行します。[[コミット例](https://github.com/vuejs/vue-hackernews-2.0/commit/565b948919eb58f22a32afca7e321b490cb3b074)] + - （代替手段）[Vite](https://vitejs.dev/) + [vite-plugin-vue2](https://github.com/underfin/vite-plugin-vue2)に移行します。[[コミット例](https://github.com/vuejs/vue-hackernews-2.0/commit/565b948919eb58f22a32afca7e321b490cb3b074)] -2. `package.json` で `vue` を 3.1 にアップデートし、同じバージョンの `@vue/compat` をインストールます。また `vue-template-compiler` (もしあれば) を `@vue/compiler-sfc` に置き換えます。 +2. `package.json` で `vue` を 3.1 にアップデートし、同じバージョンの `@vue/compat` をインストールます。また `vue-template-compiler`（もしあれば）を `@vue/compiler-sfc` に置き換えます。 ```diff "dependencies": { @@ -91,6 +91,7 @@ } } }) + } } ``` @@ -154,7 +155,7 @@ -4. この時点で、あなたのアプリケーションは、いくつかのコンパイル時のエラーや警告に遭遇するかもしれません(例：フィルターの使用)。まずはそれらを修正してください。コンパイラの警告がすべて消えた場合は、コンパイラを Vue 3 モードに設定することもできます。 +4. この時点で、あなたのアプリケーションは、いくつかのコンパイル時のエラーや警告に遭遇するかもしれません（例：フィルターの使用）。まずはそれらを修正してください。コンパイラの警告がすべて消えた場合は、コンパイラを Vue 3 モードに設定することもできます。 [コミット例](https://github.com/vuejs/vue-hackernews-2.0/commit/b05d9555f6e115dea7016d7e5a1a80e8f825be52) @@ -166,7 +167,7 @@ - [compat の設定](#compat-の設定)で特定の非推奨事項を抑制することができます。 - - 警告の中には、使用している依存関係(例: `vue-router`)が原因となっているものがあります。警告のコンポーネントトレースやスタックトレース(クリックで展開)から確認できます。まず、自分のソースコードに起因する警告の修正に集中してください。 + - 警告の中には、使用している依存関係（例: `vue-router`）が原因となっているものがあります。警告のコンポーネントトレースやスタックトレース（クリックで展開）から確認できます。まず、自分のソースコードに起因する警告の修正に集中してください。 - `vue-router` を使用している場合は、`vue-router` v4 にアップグレードするまで、`` と `` は `` で動作しないことに注意してください。 @@ -174,7 +175,7 @@ [コミット例](https://github.com/vuejs/vue-hackernews-2.0/commit/d300103ba622ae26ac26a82cd688e0f70b6c1d8f) -7. [新しいグローバルマウント API](/guide/migration/global-api.html#a-new-global-api-createapp)を使用するようにアプリのエントリを更新します。 +7. [新しいグローバルマウント API](/guide/migration/global-api.html#新しいグローバル-api-createapp)を使用するようにアプリのエントリを更新します。 [コミット例](https://github.com/vuejs/vue-hackernews-2.0/commit/a6e0c9ac7b1f4131908a4b1e43641f608593f714) @@ -242,7 +243,7 @@ export default { ### コンパイラ固有の設定 -`COMPILER_` で始まる機能は、コンパイラ固有のものです。完全なビルド(ブラウザ内コンパイラ付き)を使用している場合は、実行時に設定することができます。しかし、ビルドセットアップを使用している場合は、代わりにビルド設定の `compilerOptions` で設定する必要があります(上記の設定例を参照)。 +`COMPILER_` で始まる機能は、コンパイラ固有のものです。完全なビルド（ブラウザ内コンパイラ付き）を使用している場合は、実行時に設定することができます。しかし、ビルドセットアップを使用している場合は、代わりにビルド設定の `compilerOptions` で設定する必要があります（上記の設定例を参照）。 ## 機能リファレンス @@ -250,8 +251,8 @@ export default { - ✔ 完全な互換性 - ◐ 注意点付きの部分的な互換性 -- ⨂ 互換性なし(警告のみ) -- ⭘ compat のみ(警告なし) +- ⨂ 互換性なし（警告のみ） +- ⭘ compat のみ（警告なし） ### 互換性なし @@ -262,23 +263,23 @@ export default { | GLOBAL_MOUNT_CONTAINER | ⨂ | マウントされたアプリケーションは、マウント先の要素を置き換えません | [link](/guide/migration/mount-changes.html) | | CONFIG_DEVTOOLS | ⨂ | production の devtools がビルド時のフラグになりました | [link](https://github.com/vuejs/vue-next/tree/master/packages/vue#bundler-build-feature-flags) | | COMPILER_V_IF_V_FOR_PRECEDENCE | ⨂ | `v-if` と `v-for` が同じ要素で使われたときの優先順位が変更されました | [link](/guide/migration/v-if-v-for.html) | -| COMPILER_V_IF_SAME_KEY | ⨂ | `v-if` のブランチでは、同じキーを持つことができなくなりました | [link](/guide/migration/key-attribute.html#on-conditional-branches) | -| COMPILER_V_FOR_TEMPLATE_KEY_PLACEMENT | ⨂ | `