Add Japanese version (preactjs#587)

Japanese translations by the amazing @38elements and @eiiches 😍

.gitignore

@@ -3,3 +3,4 @@
 /build
 .DS_Store
 dist
+*.sw[op]

CONTRIBUTING.md

@@ -0,0 +1,7 @@
+# Contributing
+
+## Japanese Version
+
+* Changes to the Japanese Version are approved by @38elements.
+* For easy review, place each sentence on a new line.
+* Cosmetic changes are not accepted.

content/ja/404.md

@@ -0,0 +1,5 @@
+# エラー
+
+おっと、このページは消えたみたいです。
+
+[ホーム](/)に向かいましょう。

content/ja/about/browser-support.md

@@ -0,0 +1,15 @@
+---
+name: ブラウザのサポート
+permalink: '/about/browser-support'
+description: "Preactはそのままですべてのモダンブラウザ(Chrome, Firefox, Safari, Edge)とIE11をサポートします。"
+---
+
+# ブラウザのサポート
+
+Preactはモダンブラウザ(Chrome, Firefox, Safari, Edge)とIE11をサポートします。polyfillを追加することなくそのままで動作します。
+
+<center>
+    <a href="https://saucelabs.com/u/preact">
+        <img src="https://saucelabs.com/browser-matrix/preact.svg" alt="Browser List" style="background: #fff">
+    </a>
+</center>

content/ja/about/project-goals.md

@@ -0,0 +1,29 @@
+---
+name: プロジェクトの目的
+permalink: '/about/project-goals'
+description: "Preactプロジェクトの目的について詳しく知る"
+---
+
+# Preactの目的
+
+## 目的
+
+Preactは以下の目的を達成することを目指しています。
+
+- **パフォーマンス** 高速で効率的なレンダリング
+- **サイズ** 軽量で小さいサイズ _(約3.5kB)_
+- **効率** 効率的なメモリの使用法 _(GCスラッシングの回避)_
+- **分かりやすさ** 数時間以内にコードベースを理解することができる
+- **互換性** PreactはReact APIとほとんど互換性があることを目指します。 [preact/compat]は可能な限りReactとの互換性を実現しようとしています。
+
+## 目的に含まれない物
+
+Reactの機能の一部は意図的にPreactでは提供されていません。
+なぜなら、上記のプロジェクトの目的を達成する上で障害となる機能やPreactのコア機能の範囲に収まらないからです。
+
+意図的な[Reactとの違い](/guide/v10/differences-to-react):
+- `PropTypes`は、外部のライブラリを使用できるので、本体にはいれていません。
+- `Children`は標準のArrayに置き換えることができます。
+- `Synthetic Events`はPreactがIE8のような古いブラウザに対応しないのでサポートされません。
+
+[preact/compat]: /guide/v10/switching-to-preact

content/ja/about/we-are-using.md

@@ -0,0 +1,15 @@
+---
+name: Preactを使っている企業
+title: 誰がPreactを使っていますか?
+permalink: '/about/we-are-using'
+description: 'Preactを使っている企業'
+---
+
+Preactはオープンソースから大きな多国籍企業まで幅広いウェブサイトに使われています。
+以下は一般公開しているプロジェクトでPreactを使用している組織の例です。
+
+あなたの会社はPreactを使っていますか？ それなら、[リストに加えましょう!](https://github.com/preactjs/preact-www/blob/master/src/components/we-are-using/index.js)
+
+<div class="breaker">
+  <we-are-using></we-are-using>
+</div>

content/ja/cli.md

@@ -0,0 +1,37 @@
+---
+name: CLI
+permalink: '/cli'
+description: 'Preact CLIの説明'
+---
+
+# Preact CLI
+
+[Preact CLI](https://github.com/preactjs/preact-cli/)を使えばたった数秒で超高速のPreact PWAの開発を始めることができます。
+
+Preact CLIは新しいプロジェクトを始める際の手間を省くことができます。そして、理解しやすい小さいプロジェクト構成で即座に開発を進めることができます。
+Preact CLIはWebpack、Babel、Terserなど定番のオープンソースのツールで構成されています。そして、それを設定なしで使うことができます。
+そして、ホットリロードからクリティカルCSSのインライン化まですべてが最適になるように用意されます。
+
+Preact CLIに沿って開発すればハイパフォーマンスなアプリケーションを開発することができます。
+Preact CLIが作成したできたてのプロジェクトのJavaScriptはProductionビルドでわずか4.5kBです。
+これは遅い端末と遅いネットワークでさえ3秒以内で操作可能になります。
+
+## 機能
+
+Preact CLIは以下の機能をデフォルトで使うことができます。
+
+- デフォルトで100/100 Lighthouseスコア([証拠](https://googlechrome.github.io/lighthouse/viewer/?gist=142af6838482417af741d966e7804346)).
+- 完全自動なrouteごとのcode-splitting(コード分割)
+- asyncを付けるだけでcode-splittingします
+- JavaScriptの変更を検知しオートリロードする
+- Workboxベースのオフラインキャッシュを可能にするService Workerの自動生成
+- 効率的なロードを実現するPRPLパターンのサポート
+- 設定なしでプリレンダリング/サーバサイドレンダリングで生成されたDOMのhydrationの実行
+- Autoprefixerを適用したCSS Modules、LESS、Sass、Stylusのサポート
+- bundle/chunkサイズを監視するトラッキング機能
+- 自動的なアプリケーションのマウント、デバックヘルパー、Hot Module Replacement
+- Preact
+- preact-router
+- 必要に応じてロードされる1.5kbのfetchとPromiseのpolyfill
+
+詳しく知りたい場合は[はじめに](/cli/getting-started)を読んでください。

content/ja/cli/getting-started.md

@@ -0,0 +1,96 @@
+---
+name: はじめに
+permalink: '/cli/getting-started'
+description: 'Preact CLIを始める'
+---
+
+# はじめに
+
+最初にPreact CLIを[npm](https://npmjs.com/package/preact-cli)からインストールします。
+
+```shell
+npm i -g preact-cli
+```
+
+これで`preact`コマンドがグローバルにインストールされます。
+これを使用して新しいプロジェクトを作成していきます。
+
+## プロジェクトの作成
+
+### テンプレート
+
+プロジェクトを作成するために以下の公式テンプレートがあります。
+
+- **Default**
+
+ほとんどのアプリケーションには、このテンプレートが適しています。
+これには`preact-router`とデフォルトで仮のrouteが付属しています。そして、routeベースのcode-splittingになっています。
+
+- **Simple**
+
+"Hello, World"アプリケーションから始めるような骨組だけのテンプレートです。
+自分でツールを選択したい場合や既に構成が決まっている場合はこれで始めると良いでしょう。
+
+- **Material**
+
+このテンプレートには[preact-material-components](https://material.preactjs.com)が付属していて、さらに例として小さいアプリケーションが用意されているので手軽に開発を始めることができます。
+
+- **Netlify CMS**
+
+ブログを始めたいと思っていますか？ここに良いものがあります。
+このテンプレートは[Netlify CMS](https://www.netlifycms.org/)を使って編集することができるシンプルでエレガントなブログを提供します。
+
+これらのテンプレートを使うには以下のように`preact create`コマンドでテンプレートを指定して新しいプロジェクトを作成します。
+
+```sh
+preact create <template-name> <app-name>
+```
+
+これでプロジェクトが作成されました。
+以下のように、新たに作成されたディレクトリに`cd`で移動します。そして、開発サーバを起動します。
+
+```sh
+cd <app-name>
+npm run dev
+```
+
+エディタを開いて編集を始めましょう。
+ほとんどのテンプレートでは`start/index.js`か`src/components/app/index.js`から編集し始めると良いでしょう。
+
+## Productionビルド
+
+`npm run build`コマンドはアプリケーションをProductionビルドします。そして、それをプロジェクトルートの下の`build`ディレクトリに配置します。
+
+Productionビルドはフラグをセットすることによって必要に応じて微調整することができます。フラグの完全なリストは[こちら](https://github.com/preactjs/preact-cli#preact-build)を見てください。
+
+**使用例**
+
+例えば、以下のコマンドでは[webpack analyzer](https://chrisbateman.github.io/webpack-visualizer/)用のwebpackのアセットのJSONを生成します。
+
+```sh
+preact build --json
+```
+
+## index.htmlを編集する
+
+`preact-cli`によって生成されるマークアップのメタタグやカスタムスクリプトやフォントを編集したい場合は、`src/template.html`を編集します。
+この機能は`preact-cli` v3で利用可能です。レンダリングに[EJS](https://ejs.co/)を使っています。
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title><% preact.title %></title>
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <meta name="mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <% preact.headEnd %>
+  </head>
+  <body>
+    <% preact.bodyEnd %>
+  </body>
+</html>
+```
+
+> 古いバージョンからアップグレードした時は`src/template.html`を作成することで次回以降、アプリケーションをビルドした時や開発サーバを起動した時にそれが使われます。

content/ja/cli/pre-rendering.md

@@ -0,0 +1,170 @@
+---
+name: 'Preact CLI: Pre-rendering'
+permalink: '/cli/pre-rendering'
+description: 'Preact CLIを使ってページを自動的にプリレンダリング(Pre-rendering)する'
+---
+
+# ページをプリレンダリング(Pre-rendering)する
+
+Preact CLIは自動的にページをプリレンダリング(Pre-rendering)して静的なHTMLに変換します。これによって、高速なロードが可能になります。
+
+Productionビルドする場合、Preact CLIはコンポーネントをレンダリングして、その結果を静的なHTMLとして保存します。
+これによって、サイトの閲覧者はJavaScriptのロードが完了する前でも、すぐにプリレンダリングされたHTMLを見ることができます。
+
+> **⚠️ 注意:** プリレンダリングはNodeJS環境で実行されるため、ほとんどのWeb APIは使用できません。NodeJS環境かどうか判断するには`if (typeof window !== 'undefined')`のようなコードを使います。
+
+## URLとカスタムデータの設定
+
+デフォルトでは`/`にrouteされたページのみプリレンダリングします。
+他のURL(route)を追加するには、以下のような`prerender-urls.json`ファイルを作成する必要があります。
+このファイルを使用して、各URLの`<App />`コンポーネントのpropsに追加のデータを渡すことも出来ます。
+
+```json
+[
+  {
+    "url": "/", // 必須
+    "title": "All About Dogs",
+    "breeds": ["Shiba", "Golden", "Husky"]
+  },
+  {
+    "url": "/breeds/shiba", // 必須
+    "title": "Shibas!",
+    "photo": "/assets/shiba.jpg"
+  }
+]
+```
+
+### 動的プリレンダリング
+
+`prerender-urls.json`だけでなく、JavaScriptファイルを使用して同様の設定を行うことができます。
+そのJavaScriptファイルではプリレンダリングで使用する設定データを返す関数を定義する必要があります。
+その関数はPreact CLIで実行されます。
+
+動的プリレンダリングを行う場合は、以下のようにPreact CLIにJavaScriptファイルを指定する必要があります。
+
+`preact build --prerenderUrls ./prerender-urls.js`
+
+例えば、`prerender-urls.js`は以下のようにします。
+
+```js
+const breeds = ["Shiba", "Golden", "Husky"];
+
+module.exports = function() {
+  return [
+    {
+      url: "/",
+      title: "All About Dogs",
+      breeds
+    },
+    {
+      url: "/breeds/shiba",
+      title: "Shibas!",
+      photo: "/assets/shiba.jpg"
+    }
+  ];
+};
+```
+
+#### マークアップ内でプリレンダリングの設定データを使う
+
+以上で設定したデータは`html`ファイルを生成する際に使用する`src/template.html`ファイル内で使用することができます。
+このデータを使ってmetaタグ等の有用なデータをすべてのページに加えることができます。
+値を使用するにはマークアップ内で`htmlWebpackPlugin.options.CLI_DATA.preRenderData.<key>`を使います。
+
+```html
+  <html>
+    <head>
+      <meta name="demo-keyword" content="<%= htmlWebpackPlugin.options.CLI_DATA.preRenderData.blah %>">
+    </head>
+  </html>
+```
+
+### 外部のデータソースを使う
+
+Preact CLIのカスタムプリレンダリングを使用することでCMSのような外部のデータソースと連携することができます。
+CMSからデータを取得して、URLごとにプリレンダリングするには、以下のように`prerender-urls.js`ファイルからasync関数を`export`します。
+
+```js
+module.exports = async function() {
+  const response = await fetch('https://cms.example.com/pages/');
+  const pages = await response.json();
+  return pages.map(page => ({
+    url: page.url,
+    title: page.title,
+    meta: page.meta,
+    data: page.data
+  }));
+};
+```
+
+## プリレンダリング用のデータを使う
+
+プリレンダリングで生成されたページには、以下のようにプリレンダリング用のデータがインラインスクリプトとして含まれます。
+
+```html
+<script type="__PREACT_CLI_DATA__">{
+  "preRenderData": {
+    "url": "/",
+    "photo": "/assets/shiba.jpg"
+  }
+}</script>
+```
+
+このプリレンダリング用のデータを使って"rehydrate"することができます。
+これは、特にReduxのようなステート管理ソリューションやGraphQLを使う場合に役立ちます。
+HTMLに出力されたJSONデータは常に`url`キーを含みます。これはrouteされたページをhydrateすることに役立ちます。
+
+> **💡 メモ:** ユーザが最初にアプリケーションにアクセスした時、ダウンロードサイズを節約するためにページのマークアップにはそのrouteのプリレンダリングのデータのみが含まれます。ユーザがブラウザを操作して他のrouteに遷移した場合はマークアップにはそのページのプリレンダリング用のデータはありません。そのrouteのプリレンダリングのデータを取得したい場合は`/<routeのパス>/preact_prerender_data.json`にリクエストをしてください。Preact CLIはビルド時に、プリレンダリングされた各ページと同じディレクトリに`preact_prerender_data.json`ファイルを生成します。
+
+### `@preact/prerender-data-provider`を使う
+
+Preact CLIでプリレンダリングデータを簡単に扱うために、hydrationとデータの取得を行うラッパーライブラリを用意しています。
+このラッパーライブラリは、URLとプリレンダリングデータの`url`が一致する場合は、インラインスクリプトタグからプリレンダリングデータを取得します。
+ユーザがブラウザ上でページ遷移した場合など、URLとプリレンダリングデータの`url`が一致しない場合は、サーバにリクエストを行ってプリレンダリングデータを取得します。
+
+最初に以下のようにnpmからライブラリをインストールします。
+
+`npm i -D @preact/prerender-data-provider`
+
+これでライブラリをインストールできました。
+次にAppコンポーネント(`components/app.js`)にそれを`import`して使います。
+
+```jsx
+import { Provider } from '@preact/prerender-data-provider';
+
+export default class App extends Component {
+  // ...
+  render(props) {
+    return (
+      <Provider value={props}>
+        // アプリケーションをここに置きます。
+      </Provider>
+    )
+  }
+}
+```
+
+これで、routeされているコンポーネントは`prerender-data-provider`を通じてプリレンダリングのデータにアクセスすることが可能になりました。
+
+```jsx
+import { usePrerenderData } from '@preact/prerender-data-provider';
+
+export default function MyRoute(props) {
+
+  // usePrerenderData(props, false)とするとこのフックが自動的にデータ取得リクエストを送信することを無効にします。
+  const [data, loading, error] = usePrerenderData(props);
+
+  if (loading) return <h1>Loading...</h1>;
+
+  if (error) return <p>Error: {error}</p>;
+
+  return (
+    <div>
+      // データはここで使う。
+    </div>
+  );
+}
+```
+
+`usePrerenderData`の第2引数にfalseを渡すと`preact_prerender_data.json`を自動的に取得しません。
+`usePrerenderData`フックと同じ役割を持つ`<PrerenderData>`もあります。