diff --git a/docs/docs/static-folder.md b/docs/docs/static-folder.md index f6fe4d2ac..b51e5a19c 100644 --- a/docs/docs/static-folder.md +++ b/docs/docs/static-folder.md @@ -1,29 +1,28 @@ --- -title: Using the Static Folder +title: static フォルダーを使う --- -In general, every website needs assets: images, stylesheets, scripts, etc. When using Gatsby, we recommend -[Importing Assets Directly](/docs/importing-assets-into-files/) in JavaScript files, because of the benefits it provides: +通常、すべてのウェブサイトにはアセット(画像・スタイルシート・スクリプトなど)が必要です。Gatsby を使うときは、JavaScript ファイルで[アセットを直接インポートする](/docs/importing-assets-into-files/)ことをおすすめします。それは次のような利点があるためです。 -- Scripts and stylesheets are minified and bundled together to avoid extra network requests. -- Missing files cause compilation errors instead of 404 errors for your users. -- Result filenames include content hashes so you don’t need to worry about browsers caching their old versions. +- スクリプトやスタイルシートが最小化されバンドルされます。これにより、余分なネットワークリクエストを防ぐことができます。 +- 存在しないファイルはコンパイルエラーを引き起こすので、ユーザーに 404 エラーを引き起こしません。 +- ファイル名にハッシュが付加されるので、ブラウザーの古いバージョンのキャッシュについて心配する必要がなくなります。 -However, there is an **escape hatch** that you can use to add an asset outside of the module system. +しかし、モジュールシステムを使わずにアセットを追加することもできます。 -## Adding assets outside of the module system +## モジュールシステムを使わずにアセットを追加する -You can create a folder named `static` at the root of your project. Every file you put into that folder will be copied into the `public` folder. E.g. if you add a file named `sun.jpg` to the static folder, it'll be copied to `public/sun.jpg` +あなたのプロジェクトのルートに `static` という名前のフォルダーを作成すると、その中のすべてのファイルは `public` フォルダーにコピーされます。例えば、`sun.jpg` というファイルを static フォルダーに追加すると、それは `public/sun.jpg` にコピーされます。 -### Referencing your static asset +### static アセットを参照する -You can reference assets from the `static` folder in your code without anything special required: +`static` フォルダーのアセットはそのまま参照できます。 ```jsx render() { - // Note: this is an escape hatch and should be used sparingly! - // Normally we recommend using `import` for getting asset URLs - // as described in the “Importing Assets Directly Into Files” page. + // 注意: これは非推奨の方法なので、節度を持って利用されるべきです。 + // 通常は、`import` を利用してアセットURLを取得することをおすすめします。 + // その方法は、"アセットをファイルに直接インポートする"ページで説明されています。 return Logo; } ``` @@ -33,24 +32,21 @@ render() { lessonTitle="Use a local image from the static folder in a Gatsby component" /> -### Downsides +### デメリット -Keep in mind the downsides of this approach: +この方法には以下のようなデメリットがあることを念頭に置いてください。 -- None of the files in the `static` folder will be post-processed or minified. -- Missing files will not be called at compilation time, and will cause 404 errors for your users. -- Result filenames won’t include content hashes, so you’ll need to add query arguments or rename them every time they change. +- `static` フォルダーの中のファイルは後処理されたり最小化されることはありません。 +- 存在しないファイルはコンパイルエラーを起こすことなく、ユーザーに対して 404 エラーを発生させます。 +- 最終的なファイル名には内容に基づくハッシュが含まれないので、中身が変わるたびにクエリ引数を加えたり、ファイル名を変更する必要があります。 -## When to use the `static` folder +## いつ `static` フォルダーを使うべきか -Normally we recommend importing [stylesheets, images, and font assets](/docs/importing-assets-into-files/) from JavaScript. The `static` -folder is useful as a workaround for a number of less common cases: +通常、私たちは [スタイルシート・画像・フォントアセット](/docs/importing-assets-into-files/)を JavaScript からインポートすることを推奨します。 +しかし、 `static` フォルダーは多くのあまり典型的でないケースにおいて、抜け道として有効です。 -- You need a file with a specific name in the build output, such as - [`manifest.webmanifest`](https://developer.mozilla.org/en-US/docs/Web/Manifest). -- You have thousands of images and need to dynamically reference their paths. -- You want to include a small script like - [`pace.js`](http://github.hubspot.com/pace/docs/welcome/) outside of the - bundled code. -- Some libraries may be incompatible with Webpack and you have no other option but to include it as a `