Translate ja/guide/assets.md

ja/guide/assets.md

@@ -1,15 +1,26 @@
 ---
-title: Assets
-description: Nuxt uses vue-loader, file-loader and url-loader for Webpack by default for strong assets serving, but you can also use Static directory for static assets.
+title: アセット
+description: Nuxt.js はアセットファイルを配信するために Webpack のローダーとしてデフォルトで vue-loader、file-loader 及び url-loader を使いますが、静的ファイルのためのディレクトリを使うこともできます。
 ---
 
-> Nuxt uses vue-loader, file-loader and url-loader for Webpack by default for strong assets serving, but you can also use Static directory for static assets.
+<!-- title: Assets -->
+<!-- description: Nuxt uses vue-loader, file-loader and url-loader for Webpack by default for strong assets serving, but you can also use Static directory for static assets. -->
 
-## Webpacked
+<!-- \> Nuxt uses vue-loader, file-loader and url-loader for Webpack by default for strong assets serving, but you can also use Static directory for static assets. -->
 
-By default, [vue-loader](http://vue-loader.vuejs.org/en/) automatically processes your style and template files with `css-loader` and the Vue template compiler. In this compilation process, all asset URLs such as `<img src="...">`, `background: url(...)` and CSS `@import` are resolved as module dependencies.
+> Nuxt.js はアセットファイルを配信するために Webpack のローダーとしてデフォルトで vue-loader、file-loader 及び url-loader を使いますが、静的ファイルのためのディレクトリを使うこともできます。
 
-For example, we have this file tree:
+<!-- ## Webpacked -->
+
+## Webpack
+
+<!-- By default, [vue-loader](http://vue-loader.vuejs.org/en/) automatically processes your style and template files with `css-loader` and the Vue template compiler. In this compilation process, all asset URLs such as `<img src="...">`, `background: url(...)` and CSS `@import` are resolved as module dependencies. -->
+
+デフォルトでは [vue-loader](http://vue-loader.vuejs.org/en/) がスタイルやテンプレートファイルを `css-loader` や Vue テンプレートコンパイラを用いて自動的に処理します。このコンパイル処理の中で、`<img src="...">` や `background: url(...)` や CSS `@import` などの全ての URL はモジュールの依存関係のように解決されます。
+
+<!-- For example, we have this file tree: -->
+
+例えば、このようなファイルがあるとします:
 
 ```bash
 -| assets/
@@ -18,28 +29,45 @@ For example, we have this file tree:
 ----| index.vue
 ```
 
-In my CSS, if I use `url('~assets/image.png')`, it will be translated into `require('~assets/image.png')`.
+<!-- In my CSS, if I use `url('~assets/image.png')`, it will be translated into `require('~assets/image.png')`. -->
+
+CSS で `url('~assets/image.png')` と書いていたら、それは `require('~assets/image.png')` に変換されます。
+
+<!-- Or if in my `pages/index.vue`, I use: -->
+
+あるいは `pages/index.vue` の中で下記のように書いていたとします:
 
-Or if in my `pages/index.vue`, I use:
 ```html
 <template>
   <img src="~assets/image.png">
 </template>
 ```
 
-It will be compiled into:
+<!-- It will be compiled into: -->
+
+それは次のようにコンパイルされます:
 
 ```js
 createElement('img', { attrs: { src: require('~assets/image.png') }})
 ```
 
-Because `.png` is not a JavaScript file, nuxt.js configures Webpack to use [file-loader](https://github.com/webpack/file-loader) and [url-loader](https://github.com/webpack/url-loader) to handle them for you.
+<!-- Because `.png` is not a JavaScript file, nuxt.js configures Webpack to use [file-loader](https://github.com/webpack/file-loader) and [url-loader](https://github.com/webpack/url-loader) to handle them for you. -->
+
+`.png` は JavaScript ファイルではないため、Nuxt.js は Webpack が PNG ファイルを扱えるように [file-loader](https://github.com/webpack/file-loader) と [url-loader](https://github.com/webpack/url-loader) を使う設定を行います。
+
+<!-- The benefits of them are: -->
+
+file-loader と url-loader を使うメリット:
+
+<!-- - `file-loader` lets you designate where to copy and place the asset file, and how to name it using version hashes for better caching. -->
+<!-- - `url-loader` allows you to conditionally inline a file as base-64 data URL if they are smaller than a given threshold. This can reduce a number of HTTP requests for trivial files. If the file is larger than the threshold, it automatically falls back to `file-loader`. -->
 
-The benefits of them are:
-- `file-loader` lets you designate where to copy and place the asset file, and how to name it using version hashes for better caching.
-- `url-loader` allows you to conditionally inline a file as base-64 data URL if they are smaller than a given threshold. This can reduce a number of HTTP requests for trivial files. If the file is larger than the threshold, it automatically falls back to `file-loader`.
+- `file-loader` はアセットファイルをどこにコピーし配置すべきか、また、より良いキャッシングのためにバージョンのハッシュ値を使って、なんというファイル名にすべきかを指定します。
+- `url-loader` はもしファイルサイズが閾値よりも小さければ、ファイルを BASE64 データとして埋め込みます。これにより小さなファイルを取得するための HTTP リクエストの数を減らすことができます。もしファイルサイズが閾値よりも大きければ、自動的に `file-loader` にフォールバックします。
 
-Actually, Nuxt.js default loaders configuration is:
+<!-- Actually, Nuxt.js default loaders configuration is: -->
+
+実際には Nuxt.js のデフォルトのローダー設定は次のようになっています:
 
 ```js
 [
@@ -62,37 +90,64 @@ Actually, Nuxt.js default loaders configuration is:
 ]
 ```
 
-Which means that every file below 1 KO will be inlined as base-64 data URL. Otherwise, the image/font will be copied in its corresponding folder (under the `.nuxt` directory) with a name containing a version hashes for better caching.
+<!-- Which means that every file below 1 KO will be inlined as base-64 data URL. Otherwise, the image/font will be copied in its corresponding folder (under the `.nuxt` directory) with a name containing a version hashes for better caching. -->
+
+ファイルサイズが 1KO を下回るファイルはすべて base-64 データとして埋め込まれます。反対に 1KO を上回る画像やフォントは（`.nuxt` ディレクトリ配下の）対応するディレクトリにより良いキャッシングのためのバージョンのハッシュ値を含んだファイル名でコピーされます。
 
-When launching our application with `nuxt`, our template in `pages/index.vue`:
+<!-- When launching our application with `nuxt`, our template in `pages/index.vue`: -->
+
+アプリケーションを `nuxt` コマンドで起動するとき、`pages/index.vue` 内のテンプレートは下記のようになっていて:
 
 ```html
 <template>
   <img src="~assets/image.png">
 </template>
 ```
 
-Will be generated into:
+<!-- Will be generated into: -->
+
+そこから次のように生成されます:
+
 ```html
 <img src="/_nuxt/img/image.0c61159.png">
 ```
 
-If you want to update these loaders or disable them, please take a look at the [loaders configuration](/api/configuration-build#loaders).
+<!-- If you want to update these loaders or disable them, please take a look at the [loaders configuration](/api/configuration-build#loaders). -->
+
+これらのローダーの設定を更新したり、ローダーを使わないようにしたいするには、[ローダー設定](/api/configuration-build#loaders) を参照してください。
+
+<!-- ## Static -->
+
+## 静的なファイル
+
+<!-- If you don't want to use Webpacked Assets from the `assets` directory, you can create and use the `static` directory in your project root directory. -->
+
+もし Webpack で扱う対象となる `assets` ディレクトリを使いたくない場合は、プロジェクトのルートディレクトリに `static` ディレクトリを作成して利用することができます。
+
+<!-- These files will be automatically serve by Nuxt and accessible in your project root URL. -->
+
+これらのファイルは自動的に Nuxt.js により配信され、またプロジェクトのルート URL からアクセス可能になります。
+
+<!-- This option is helpful for files like `robots.txt` or `sitemap.xml`. -->
 
-## Static
+このオプションは `robots.txt` や `sitemap.xml` などのファイルに役に立ちます。
 
-If you don't want to use Webpacked Assets from the `assets` directory, you can create and use the `static` directory in your project root directory.
+<!-- From your code you can then reference those files with `/` URLs: -->
 
-These files will be automatically serve by Nuxt and accessible in your project root URL.
+`/` URL からそれらのファイルを参照できます:
 
-This option is helpful for files like `robots.txt` or `sitemap.xml`.
+<!-- ```html -->
+<!-- <\!-- Static image from static directory -\-> -->
+<!-- <img src="/my-image.png"/> -->
 
-From your code you can then reference those files with `/` URLs:
+<!-- <\!-- Webpacked image from assets directory -\-> -->
+<!-- <img src="/assets/my-image-2.png"/> -->
+<!-- ``` -->
 
 ```html
-<!-- Static image from static directory -->
+<!-- static ディレクトリの静的な画像 -->
 <img src="/my-image.png"/>
 
-<!-- Webpacked image from assets directory -->
+<!-- Webpack が扱う対象となる assets ディレクトリの画像 -->
 <img src="/assets/my-image-2.png"/>
 ```