Skip to content

Migration > Global API Treeshaking の翻訳 #139

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Oct 30, 2020
+37 −37
Merged

Migration > Global API Treeshaking の翻訳 #139

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
74 changes: 37 additions & 37 deletions src/guide/migration/global-api-treeshaking.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,21 +3,21 @@ badges:
- breaking
---

# Global API Treeshaking <MigrationBadges :badges="$frontmatter.badges" />
# グローバル API の Treeshaking <MigrationBadges :badges="$frontmatter.badges" />

## 2.x Syntax
## 2.x での文法

If you’ve ever had to manually manipulate DOM in Vue, you might have come across this pattern:
手動で DOM 操作を行う必要があった場合に、このようなパターンを目にしたと思います:

```js
import Vue from 'vue'

Vue.nextTick(() => {
// something something DOM-related
// DOM に関連した処理
})
```

Or, if you’ve been unit-testing an application involving [async components](/guide/component-dynamic-async.html), chances are you’ve written something like this:
あるいは、[非同期コンポーネント](/guide/component-dynamic-async.html) に関わるアプリケーションのユニットテストを行う場合、次のように書いていたことでしょう:

```js
import { shallowMount } from '@vue/test-utils'
Expand All @@ -26,33 +26,33 @@ import { MyComponent } from './MyComponent.vue'
test('an async feature', async () => {
const wrapper = shallowMount(MyComponent)

// execute some DOM-related tasks
// DOM 関連の処理を実行

await wrapper.vm.$nextTick()

// run your assertions
// アサーションの実行
})
```

`Vue.nextTick()` is a global API exposed directly on a single Vue object – in fact, the instance method `$nextTick()` is just a handy wrapper around `Vue.nextTick()` with the callback’s `this` context automatically bound to the current instance for convenience.
`Vue.nextTick()` は、個々の Vue オブジェクトに直接公開されるグローバルな API です - 実際に、インスタンスメソッドである `$nextTick()` は、まさに `Vue.nextTick()` を利便性のため `this` のコンテキストをそのインスタンスに自動的にバインドされたコールバックと共にラップしたものです。

But what if you’ve never had to deal with manual DOM manipulation, nor are you using or testing async components in our app? Or, what if, for whatever reason, you prefer to use the good old `window.setTimeout()` instead? In such a case, the code for `nextTick()` will become dead code – that is, code that’s written but never used. And dead code is hardly a good thing, especially in our client-side context where every kilobyte matters.
しかし、もし手動で DOM 操作を行う必要がなかったり、アプリケーション内で非同期コンポーネントを扱ったり、テストすることがない時はどうでしょうか？もしくは、どんな理由であれ、代わりに古き良き `window.setTimeout()` を使いたい時は？そのような場合に、`nextTick()` を使うコードはデッドコードになります。 - すなわち、書かれてあっても使われないということです。そして、とりわけファイルサイズが大切になるクライアント側においては、デッドコードは少なくともいいものではありません。

Module bundlers like [webpack](https://webpack.js.org/) support [tree-shaking](https://webpack.js.org/guides/tree-shaking/), which is a fancy term for "dead code elimination." Unfortunately, due to how the code is written in previous Vue versions, global APIs like `Vue.nextTick()` are not tree-shakeable and will be included in the final bundle regardless of where they are actually used or not.
[webpack](https://webpack.js.org/) のようなモジュールバンドラーは、[tree-shaking](https://webpack.js.org/guides/tree-shaking/) と呼ばれる、聞こえの良い "不要コード削除" をサポートします。残念ながら Vue の過去のバージョンではコードの作りに起因して `Vue.nextTick()` のようなグローバル API は tree-shaking 可能ではなく、実際にどこで使われているかそうでないかに関わらず、最終成果物の中に含まれてしまいます。

## 3.x Syntax
## 3.x での文法

In Vue 3, the global and internal APIs have been restructured with tree-shaking support in mind. As a result, the global APIs can now only be accessed as named exports for the ES Modules build. For example, our previous snippets should now look like this:
Vue 3 では、グローバル API と内部 API は tree-shaking のサポートを念頭に置いて作り直されました。その結果、グローバル API は ES Modules ビルドの名前付きエクスポートとしてのみアクセスすることができます。例えば、以前のスニペットは次のようになります:

```js
import { nextTick } from 'vue'

nextTick(() => {
// something something DOM-related
// DOM に関連した処理
})
```

and
そして

```js
import { shallowMount } from '@vue/test-utils'
Expand All @@ -62,40 +62,40 @@ import { nextTick } from 'vue'
test('an async feature', async () => {
const wrapper = shallowMount(MyComponent)

// execute some DOM-related tasks
// DOM 関連の処理を実行

await nextTick()

// run your assertions
// アサーションの実行
})
```

Calling `Vue.nextTick()` directly will now result in the infamous `undefined is not a function` error.
`Vue.nextTick()` を直接呼び出すと、忌まわしい `undefined is not a function` エラーになるでしょう。

With this change, provided the module bundler supports tree-shaking, global APIs that are not used in a Vue application will be eliminated from the final bundle, resulting in an optimal file size.
モジュールバンドラーが tree-shaking をサポートしているなら、この変更によって、Vue アプリケーション内で使用されていないグローバル API は最終成果物から削除され、最適なファイルサイズになります。

## Affected APIs
## 影響を受ける API

These global APIs in Vue 2.x are affected by this change:
この変更により、次の Vue 2.x のグローバル API が影響を受けます:

- `Vue.nextTick`
- `Vue.observable` (replaced by `Vue.reactive`)
- `Vue.observable` (`Vue.reactive` に置き換えられます)
- `Vue.version`
- `Vue.compile` (only in full builds)
- `Vue.set` (only in compat builds)
- `Vue.delete` (only in compat builds)
- `Vue.compile` (完全ビルドのみ)
- `Vue.set` (互換ビルドのみ)
- `Vue.delete` (互換ビルドのみ)

## Internal Helpers
## 内部ヘルパー

In addition to public APIs, many of the internal components/helpers are now exported as named exports as well. This allows the compiler to output code that only imports features when they are used. For example the following template:
公開 API に加え、多くの内部コンポーネントや内部ヘルパーも同様に、名前付きエクスポートされるようになります。これにより、コンパイラは機能が使われたときにのみインポートするコードを生成できるようになります。例えば、次のテンプレートは:

```html
<transition>
<div v-show="ok">hello</div>
</transition>
```

is compiled into something similar to the following:
次のようなコードにコンパイルされます:

```js
import { h, Transition, withDirectives, vShow } from 'vue'
Expand All @@ -105,17 +105,17 @@ export function render() {
}
```

This essentially means the `Transition` component only gets imported when the application actually makes use of it. In other words, if the application doesn’t have any `<transition>` component, the code supporting this feature will not be present in the final bundle.
これは `Transition` コンポーネントが、実際にアプリケーションで使われた時のみインポートされるということを本質的に意味します。言い換えると、もしアプリケーション内に `<transition>` がない場合は、その機能をサポートするコードは最終成果物の中には存在しなくなります。

With global tree-shaking, the user only "pay" for the features they actually use. Even better, knowing that optional features won't increase the bundle size for applications not using them, framework size has become much less a concern for additional core features in the future, if at all.
グローバルな tree-shaking によって、ユーザは実際に使う機能についてのみ "支払い" ます。更に良いことに、オプションな機能はそれらが使われていないアプリケーションのバンドルサイズを増加させないということは、将来的に追加される機能がどんなものであれ、フレームワークのサイズによる懸念はずっと小さくなります。

::: warning Important
The above only applies to the [ES Modules builds](/guide/installation.html#explanation-of-different-builds) for use with tree-shaking capable bundlers - the UMD build still includes all features and exposes everything on the Vue global variable (and the compiler will produce appropriate output to use APIs off the global instead of importing).
::: warning 重要
上記は、tree-shaking が可能な [ES Modules ビルド](/guide/installation.html#explanation-of-different-builds) の利用についてのみ適用されます - 依然として、UMD ビルドはすべての機能を含み、すべてがグローバル Vue 変数上に公開されます(そして、コンパイラはインポートに代えて、グローバルの API を使用して適切な成果物を生成します。)
:::

## Usage in Plugins
## プラグインでの用途

If your plugin relies on an affected Vue 2.x global API, for instance:
例えば、もし影響を受ける Vue 2.x のグローバル API にプラグインが依存していた場合:

```js
const plugin = {
Expand All @@ -127,7 +127,7 @@ const plugin = {
}
```

In Vue 3, you’ll have to import it explicitly:
Vue 3 では、明示的にインポートしなければいけません:

```js
import { nextTick } from 'vue'
Expand All @@ -141,7 +141,7 @@ const plugin = {
}
```

If you use a module bundle like webpack, this may cause Vue’s source code to be bundled into the plugin, and more often than not that’s not what you'd expect. A common practice to prevent this from happening is to configure the module bundler to exclude Vue from the final bundle. In webpack's case, you can use the [`externals`](https://webpack.js.org/configuration/externals/) configuration option:
webpack のようなモジュールバンドラーを使っている時、プラグインに Vue のソースをバンドルされてしまう可能性があり、これは大抵の場合に望まれた結果ではありません。これを防ぐ一般的な方法は、最終成果物から Vue を除外するようにモジュールバンドラーを設定することです。webpack の場合、 [`externals`](https://webpack.js.org/configuration/externals/) という設定のオプションが利用できます:

```js
// webpack.config.js
Expand All @@ -153,9 +153,9 @@ module.exports = {
}
```

This will tell webpack to treat the Vue module as an external library and not bundle it.
これは、Vue モジュールを外部ライブラリとして扱い、バンドルしないように webpack に伝えます。

If your module bundler of choice happens to be [Rollup](https://rollupjs.org/), you basically get the same effect for free, as by default Rollup will treat absolute module IDs (`'vue'` in our case) as external dependencies and not include them in the final bundle. During bundling though, it might emit a ["Treating vue as external dependency"](https://rollupjs.org/guide/en/#warning-treating-module-as-external-dependency) warning, which can be suppressed with the `external` option:
もし選んだバンドラーがたまたま [Rollup](https://rollupjs.org/) であったなら、Rollup はデフォルトで絶対モジュール ID(この場合には`'vue'`)を外部依存として扱い、それらを最終成果物に含めないため、元から設定無しに同じ効果が得られます。バンドル中、 ["Treating vue as external dependency"](https://rollupjs.org/guide/en/#warning-treating-module-as-external-dependency) という注意が出ることがありますが、これは `external` オプションで抑制できます:

```js
// rollup.config.js
Expand Down