Skip to content
This repository was archived by the owner on Jan 20, 2025. It is now read-only.

translate docs/localization-i18n #149

Merged
merged 2 commits into from
Feb 3, 2020
Merged

translate docs/localization-i18n #149

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e0c3ed9
docs: translate docs/localization-i18n
Imamachi-n Feb 2, 2020
8ab26d2
Update docs/docs/localization-i18n.md
Imamachi-n Feb 3, 2020
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
42 changes: 21 additions & 21 deletions docs/docs/localization-i18n.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,52 +1,52 @@
---
title: Localization and Internationalization with Gatsby (i18n)
title: Gatsby のローカライゼーションと国際化対応（i18n）
---

Serving users content in a way that is adapted to their language & culture is part of a great user experience. When you make an effort to adapt web content to a user's location, that practice is called internationalization (i18n).
言語と文化に合わせてユーザーコンテンツを提供することは、優れたユーザーエクスペリエンスのための 1 つの手段です。Web コンテンツをユーザーのロケーションに合わせる努力をするとき、それを実践することを国際化対応（i18n）と呼びます。

In practice i18n involves translating text and formatting dates, numbers, and strings based on the user's detected location. For example, a date displayed for a user in the United States would follow the mm/dd/year date format, but for a user in the UK the date format would change to dd/mm/year.
実際に、i18n ではユーザーのいるロケーションに基づき、テキストを変換したり、日付や数値、文字列をフォーマットしたりすることが含まれます。たとえば、米国のユーザーに表示する日付は mm/dd/year の日付フォーマットに従いますが、英国のユーザーの日付形式は dd/mm/year に変更されます。

This guide is a brief look at the options that exist for enhancing your Gatsby project for internationalization.
このガイドでは、国際化対応のために Gatsby プロジェクトを強化するオプションについて簡単に説明します。

## Choosing a package
## パッケージの選択

There are a few React i18n packages out there. Several options include [react-intl](https://github.com/yahoo/react-intl), the community [Gatsby plugin](https://www.npmjs.com/package/gatsby-plugin-i18n) and [react-i18next](https://github.com/i18next/react-i18next/). There are several factors to consider when choosing a package: Do you already use a similar package in another project? How well does the package meet the needs of your users? Are you or your team already familiar with a certain package? Is the package well documented and maintained?
React には i18n 用パッケージがいくつかあります。そのオプションとして、[react-intl](https://github.com/yahoo/react-intl)、コミュニティーの作成した [Gatsby plugin](https://www.npmjs.com/package/gatsby-plugin-i18n) および [react-i18next](https://github.com/i18next/react-i18next/) があります。パッケージを選択するにあたり、考慮すべき要点がいくつかあります：別のプロジェクトで同様のパッケージをすでに使用したことがありますか？パッケージはユーザーのニーズをどの程度満たしますか？あなたもしくはあなたのチームは、すでに特定のパッケージに精通していますか？そのパッケージは適切にドキュメント化され、メンテナンスされていますか？

### gatsby-plugin-i18n

This plugin helps you use `react-intl`, `i18next` or any other i18n library with Gatsby. This plugin does not translate or format your content, but rather it creates routes for each language, allowing Google to more easily find the correct version of your site, and if you need to, designate alternative UI layouts.
このプラグインは、Gatsby で `react-intl`、`i18next`、または他の i18n ライブラリーを使用する際に役立ちます。このプラグインはコンテンツを翻訳したりフォーマットしたりするのではなく、各言語へのルーティングを作成し、Google がサイトの正しいバージョンをより簡単に見つけられるようにし、必要に応じて、代わりとなる UI レイアウトを指定します。

The naming format follows .**languageKey**.js for files and /**languageKey**/path/fileName for URLs.
命名フォーマットは、ファイルの場合は .**languageKey**.js、URL の場合は /**languageKey**/path/fileName に従います。

**Example:**
**例：**

File - src/pages/about.**en**.js

URL - /**en**/about

[gatsby-plugin-i18n on GitHub](https://github.com/angeloocana/gatsby-plugin-i18n)
[gatsby-plugin-i18n の GitHub](https://github.com/angeloocana/gatsby-plugin-i18n)

### react-intl

React-intl is a part of the FormatJS set of i18n libraries and provides support for over 150+ languages. It builds on JavaScript's [Internationalization API](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl) providing enhanced APIs and components. React-intl uses React context and HOCs (Higher Order Components) to provide translations allowing you to dynamically load language modules as you need them. There are also polyfill options available for older browsers that do not support the base JavaScript i18n API.
React-intl は i18n 用ライブラリーの FormatJS セットの 1 つであり、150 以上の言語のサポートを提供します。JavaScript の [Internationalization API](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Intl) をもとに構築されており、強化された API とコンポーネントを提供します。React-intl は、React context と HOC（高階コンポーネント）を使用して翻訳機能を提供し、必要に応じて言語モジュールを動的にロードできるようにします。また、基本的な JavaScript i18n API をサポートしていない古いブラウザーで使用可能なポリフィルのオプションもあります。

More detailed information about react-intl's [APIs](https://github.com/formatjs/react-intl/blob/master/docs/API.md) and [components](https://github.com/formatjs/react-intl/blob/master/docs/Components.md), including [demos](https://github.com/formatjs/react-intl/tree/master/examples), are available in the [documentation](https://github.com/formatjs/react-intl/tree/master/docs).
react-intl の [APIs](https://github.com/formatjs/react-intl/blob/master/docs/API.md) および、[デモ](https://github.com/formatjs/react-intl/tree/master/examples)を含む[コンポーネント](https://github.com/formatjs/react-intl/blob/master/docs/Components.md)に関するより詳細な情報は、[ドキュメント](https://github.com/formatjs/react-intl/tree/master/docs)から入手できます。

### react-i18next

React-i18next is an internationalization library built on the i18next framework. It uses components to make sure translations render correctly or to re-render your content when the user language changes.
React-i18next は、i18next フレームワーク上に構築された i18n 用ライブラリーです。このライブラリーでは、翻訳内容をただしくレンダリングするために、もしくはユーザーが使用言語を変更したときにコンテンツを再レンダリングするためにコンポーネントを使用します。

React-i18next is more extensible than other options with a variety of plugins, utilities, and configurations. Common plugins allow for detecting a user's language or adding an additional layer of local caching. Other options include caching, a backend plugin to load translations from your server, or bundling translations with Webpack.
React-i18next は、さまざまなプラグイン、ユーティリティー、設定を備えており、他のライブラリーよりも拡張性があります。共通プラグインを使用すると、ユーザーの言語を検出したり、ローカルキャッシュの追加レイヤーを追加したりできます。その他のオプションには、キャッシュ、サーバーから翻訳内容をロードするバックエンドプラグイン、または Webpack を使った翻訳内容のバンドルなどがあります。

This framework also has experimental support for the React suspense API and React hooks.
このフレームワークには、React Suspense API および React Hook に対する実験的なサポートもあります。

## Other resources
## その他の参考資料

- [Building i18n with Gatsby](https://www.gatsbyjs.org/blog/2017-10-17-building-i18n-with-gatsby/)
- [Gatsby で国際化対応を行う](https://www.gatsbyjs.org/blog/2017-10-17-building-i18n-with-gatsby/)

- [Building Eviction Free NYC with GatsbyJS + Contentful](https://www.gatsbyjs.org/blog/2018-04-27-building-eviction-free-nyc-with-gatsbyjs-and-contentful/)
- [GatsbyJS + Contentful で Eviction Free NYC を作成](https://www.gatsbyjs.org/blog/2018-04-27-building-eviction-free-nyc-with-gatsbyjs-and-contentful/)

- [Gatsby i18n packages](https://www.gatsbyjs.org/packages/gatsby-plugin-i18n/?=i18)
- [Gatsby i18n パッケージ](https://www.gatsbyjs.org/packages/gatsby-plugin-i18n/?=i18)

- [Gatsby i18n articles](https://www.gatsbyjs.org/blog/tags/i-18-n/)
- [W3C's i18n resources](http://w3c.github.io/i18n-drafts/getting-started/contentdev.en#reference)
- [Gatsby i18n に関する記事](https://www.gatsbyjs.org/blog/tags/i-18-n/)
- [W3C の i18n 参考資料](http://w3c.github.io/i18n-drafts/getting-started/contentdev.en#reference)