{{firstName}} {{lastName}} aka {{alias}}
', data() { @@ -159,12 +159,12 @@ const Profile = Vue.extend({ } } }) -// create an instance of Profile and mount it on an element +// Profile のインスタンスを生成し、要素にマウント new Profile().$mount('#mount-point') ``` ```js -// after - Vue 3 +// 変更後 - Vue 3 const Profile = { template: '{{firstName}} {{lastName}} aka {{alias}}
', data() { @@ -179,21 +179,21 @@ const Profile = { Vue.createApp(Profile).mount('#mount-point') ``` -#### Type Inference +#### 型推論 -In Vue 2, `Vue.extend` was also used for providing TypeScript type inference for the component options. In Vue 3, the `defineComponent` global API can be used in place of `Vue.extend` for the same purpose. +Vue 2 では、`Vue.extend` はコンポーネントオプションの TypeScript 型推論を提供するためにも使用されました。Vue 3 では、同じ目的で `Vue.extend` の代わりにグローバル API の `defineComponent` を使用できます。 -Note that although the return type of `defineComponent` is a constructor-like type, it is only used for TSX inference. At runtime `defineComponent` is largely a noop and will return the options object as-is. +`defineComponent` の戻り値はコンストラクターのような型ですが、TSX 推論にのみ使用されることに注意してください。実行時には、`defineComponent` はほとんど何もせず、オプションオブジェクトをそのまま返します。 -#### Component Inheritance +#### コンポーネントの継承 -In Vue 3, we strongly recommend favoring composition via [Composition API](https://ja.vuejs.org/guide/reusability/composables.html) over inheritance and mixins. If for some reason you still need component inheritance, you can use the [`extends` option](https://ja.vuejs.org/api/options-composition.html#extends) instead of `Vue.extend`. +Vue 3 では、継承やミックスインよりも、[Composition API](https://ja.vuejs.org/guide/reusability/composables.html) によるコンポジションを強く推奨しています。何らかの理由でコンポーネントの継承が必要な場合は、`Vue.extend` の代わりに [`extends` オプション](https://ja.vuejs.org/api/options-composition.html#extends)を使用できます。 -[Migration build flag: `GLOBAL_EXTEND`](../migration-build.html#compat-configuration) +[移行ビルドのフラグ: `GLOBAL_EXTEND`](../migration-build.html#compat-configuration) -### A Note for Plugin Authors +### プラグイン作者への注意事項 -It is a common practice for plugin authors to install the plugins automatically in their UMD builds using `Vue.use`. For instance, this is how the official `vue-router` plugin installs itself in a browser environment: +プラグイン作者は、UMD ビルドの際に `Vue.use` を使ってプラグインを自動的にインストールするのが一般的なやり方です。例えば、公式の `vue-router` プラグインは、以下のようにブラウザー環境にインストールされます: ```js var inBrowser = typeof window !== 'undefined' @@ -203,16 +203,16 @@ if (inBrowser && window.Vue) { } ``` -As the `use` global API is no longer available in Vue 3, this method will cease to work and calling `Vue.use()` will now trigger a warning. Instead, the end-user will now have to explicitly specify using the plugin on the app instance: +Vue 3 ではグローバル API である `use` が利用できなくなったため、このやり方は機能しなくなり、`Vue.use()` を呼び出すと警告が表示されるようになりました。代わりに、エンドユーザーはアプリのインスタンスでプラグインの使用を明示的に指定する必要があります: ```js const app = createApp(MyApp) app.use(VueRouter) ``` -## Mounting App Instance {#mounting-app-instance} +## アプリインスタンスのマウント {#mounting-app-instance} -After being initialized with `createApp(/* options */)`, the app instance `app` can be used to mount a root component instance with `app.mount(domTarget)`: +`createApp(/* オプション */)` で初期化した後、アプリのインスタンス `app` を使って `app.mount(domTarget)` でルートコンポーネントのインスタンスをマウントできます: ```js import { createApp } from 'vue' @@ -222,7 +222,7 @@ const app = createApp(MyApp) app.mount('#app') ``` -With all these changes, the component and directive we have at the beginning of the guide will be rewritten into something like this: +これらの変更により、このガイドの冒頭にあるコンポーネントとディレクティブは、次のようなものに書き直されます: ```js const app = createApp(MyApp) @@ -238,23 +238,23 @@ app.directive('focus', { mounted: (el) => el.focus() }) -// now every application instance mounted with app.mount(), along with its -// component tree, will have the same “button-counter” component -// and “focus” directive without polluting the global environment +// これで、app.mount() でマウントされたすべてのアプリケーションインスタンスと +// そのコンポーネントツリーは、グローバル環境を汚染することなく、 +// 同じ button-counter コンポーネントと focus ディレクティブを持つことになります app.mount('#app') ``` -[Migration build flag: `GLOBAL_MOUNT`](../migration-build.html#compat-configuration) +[移行ビルドのフラグ: `GLOBAL_MOUNT`](../migration-build.html#compat-configuration) ## Provide / Inject -Similar to using the `provide` option in a 2.x root instance, a Vue 3 app instance can also provide dependencies that can be injected by any component inside the app: +2.x のルートインスタンスで `provide` オプションを使用するのと同様に、Vue 3 アプリインスタンスは、アプリ内の任意のコンポーネントによって注入される依存関係を提供できます: ```js -// in the entry +// エントリー内 app.provide('guide', 'Vue 3 Guide') -// in a child component +// 子コンポーネント内 export default { inject: { book: { @@ -265,11 +265,11 @@ export default { } ``` -Using `provide` is especially useful when writing a plugin, as an alternative to `globalProperties`. +`provide` の使用は `globalProperties` の代わりとして、特にプラグインを作成する際に便利です。 -## Share Configurations Among Apps +## アプリ間で設定を共有する -One way to share configurations e.g. components or directives among apps is to create a factory function, like this: +コンポーネントやディレクティブなどの設定をアプリ間で共有する方法のひとつに、次のようなファクトリー関数を作成する方法があります: ```js import { createApp } from 'vue' @@ -287,4 +287,4 @@ createMyApp(Foo).mount('#foo') createMyApp(Bar).mount('#bar') ``` -Now the `focus` directive will be available in both `Foo` and `Bar` instances and their descendants. +これで `focus` ディレクティブは `Foo` と `Bar` の両方のインスタンスとその子孫で利用できるようになりました。 diff --git a/src/ja/new/fragments.md b/src/ja/new/fragments.md index 2254ac2..728328a 100644 --- a/src/ja/new/fragments.md +++ b/src/ja/new/fragments.md @@ -3,15 +3,15 @@ badges: - new --- -# Fragments