Skip to content

Commit

Permalink
docs: modify styles and wordings to adhere to consensus
Browse files Browse the repository at this point in the history
  • Loading branch information
@sato11
sato11 committed Feb 3, 2019
1 parent 119d967 commit 2518464
Showing 1 changed file with 26 additions and 26 deletions.
52 changes: 26 additions & 26 deletions content/docs/add-react-to-a-website.md
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
id: add-react-to-a-website
title: ウェブサイトに React を導入する
title: 既存のウェブサイトに React を追加する
permalink: docs/add-react-to-a-website.html
redirect_from:
- "docs/add-react-to-an-existing-app.html"
Expand All @@ -16,18 +16,18 @@ React は段階的に導入することができるように最初からデザ

---

- [1分で React を導入する](#add-react-in-one-minute)
- [オプション：React で JSX を使う](#optional-try-react-with-jsx) (バンドルツールは不要です！)
- [1 分で React を追加する](#add-react-in-one-minute)
- [オプション：React で JSX を使う](#optional-try-react-with-jsx) （バンドルツールは不要です！）

## 1分で React を導入する

このセクションでは、既存の HTML ページに React コンポーネントを導入する方法を説明します。以下の部分では自分のウェブサイトを利用して進めてもいいですし、練習用に空っぽの HTML ファイルを用意するのもいいでしょう。

複雑なツール類や事前にインストールしておかなければいけないものはありません。**インターネットへの接続さえあれば、1分間でこのセクションを終わらせることができます。**
複雑なツール類や事前にインストールしておかなければいけないものはありません。**インターネットへの接続さえあれば、1 分間でこのセクションを終わらせることができます。**

オプション：[お手本をダウンロードする (2KB ZIP圧縮)](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605/archive/f6c882b6ae18bde42dcf6fdb751aae93495a2275.zip)

### ステップ1：HTML に DOM コンテナを追加する
### ステップ 1：HTML に DOM コンテナを追加する

まずは編集したい HTML ファイルを開きましょう。React で描画したい箇所を決めて、空っぽの `<div>` 要素を追加しましょう。例えばこんな感じです。

Expand All @@ -45,9 +45,9 @@ React は段階的に導入することができるように最初からデザ
>
>「コンテナ」としての `<div>` 要素は `<body>` タグの中であれば**どこにでも**置くことができます。また空っぽの `<div>` はひとつのページにひとつだけでも、あるいは必要なだけたくさんあっても大丈夫です。`<div>` 要素は空っぽのことが多いですが、それはたとえ `<div>` の中に他の要素があったとしても、React が結局その中身を置き換えてしまうからです。
### ステップ2：script タグを追加する
### ステップ 2：script タグを追加する

次に、同じ HTML ファイルの `</body>` タグの直前に、3つの `<script>` タグを追加しましょう。
次に、同じ HTML ファイルの `</body>` タグの直前に、3 つの `<script>` タグを追加しましょう。

```html{5,6,9}
<!-- ... other HTML ... -->
Expand All @@ -65,17 +65,17 @@ React は段階的に導入することができるように最初からデザ

最初のふたつのタグは React を読み込んでおり、最後のタグはこれから書くコンポーネントのコードを読み込んでいます。

### ステップ3：React コンポーネントを作成する
### ステップ 3：React コンポーネントを作成する

`like_button.js` という名前の新しいファイルを作成し、HTML ファイルのすぐ隣に置きましょう。

**[サンプルコード](https://cdn.rawgit.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js)** を開いて、自分のファイルにコピーアンドペーストしてください。
**[サンプルコード](https://cdn.rawgit.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js)**を開いて、自分のファイルにコピーアンドペーストしてください。

>ヒント
>
>このコードは `LikeButton` という React コンポーネントを定義しています。まだわからなくても心配しなくて大丈夫です。こういった React の構成要素については、[チュートリアル](/tutorial/tutorial.html) と [Hello World](/docs/hello-world.html) のページで後ほどみていくことにして、まずはサンプルコードを画面に表示させてみましょう！
>このコードは `LikeButton` という React コンポーネントを定義しています。まだわからなくても心配しなくて大丈夫です。こういった React の構成要素については、[チュートリアル](/tutorial/tutorial.html) と [Hello World](/docs/hello-world.html) のページで後ほど見ていくことにして、まずはサンプルコードを画面に表示させてみましょう！
**[サンプルコード](https://cdn.rawgit.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js)**の末尾に次の2行を追加してみましょう。
**[サンプルコード](https://cdn.rawgit.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js)**の末尾に次の 2 行を追加してみましょう。

```js{3,4}
// ... コピーアンドペーストしたサンプルコード ...
Expand All @@ -84,11 +84,11 @@ const domContainer = document.querySelector('#like_button_container');
ReactDOM.render(e(LikeButton), domContainer);
```

この2行のコードは、ステップ1で追加した空っぽの `<div>` 要素を見つけてきて、その中に React コンポーネントの「いいね」ボタンを表示します。
この 2 行のコードは、ステップ 1 で追加した空っぽの `<div>` 要素を見つけてきて、その中に React コンポーネントの「いいね」ボタンを表示します。

### これだけです！

ステップ4はありません。**これであなたは自分のウェブサイトにはじめての React コンポーネントを導入できました**。
ステップ 4 はありません。**これであなたは自分のウェブサイトにはじめての React コンポーネントを導入できました**。

React の導入についてもっと知るには、次のセクションも見てみてください。

Expand All @@ -106,7 +106,7 @@ React コンポーネントを HTML ページの一箇所だけではなくい

>補足
>
>このようなやり方は、主に React を利用する DOM コンテナがページ内でお互いに干渉していない場合において便利な手段です。 React 単体のコードとしては、[コンポーネントを組み合わせる](/docs/components-and-props.html#コンポーネントを組み合わせる) やり方のほうが手軽です。
>このようなやり方は、主に React を利用する DOM コンテナがページ内でお互いに干渉していない場合において便利な手段です。 React 単体のコードとしては、[コンポーネントを組み合わせる](/docs/components-and-props.html#composing-components) やり方のほうが手軽です。
### ヒント：本番環境用に JavaScript を圧縮する

Expand All @@ -123,7 +123,7 @@ React コンポーネントを HTML ページの一箇所だけではなくい

## オプション：React で JSX を使う

今までのお手本は、ブラウザにもともと備わっている機能に沿ってきました。React コンポーネントを表示するために次のような JavaScript の関数を呼び出していたのはそのためです。
今までの例では、ブラウザにもともと備わっている機能のみ使ってきました。React コンポーネントを表示するために次のような JavaScript の関数を呼び出していたのはそのためです。

```js
const e = React.createElement;
Expand All @@ -147,7 +147,7 @@ return (
);
```

これらふたつのスニペットはまったく同じ内容です。**JSX の使用は[いっさい強制されません](/docs/react-without-jsx.html)**が、React はもちろん他のライブラリで UI を記述する際にも、JSX は多くの人に支持されています。
これらふたつのスニペットはまったく同じ内容です。**JSX の使用は[完全にオプションです](/docs/react-without-jsx.html)**が、React はもちろん他のライブラリで UI を記述する際にも、JSX は多くの人に支持されています。

[このコンバーター](http://babeljs.io/repl#?babili=false&browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=Q&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&sourceType=module&lineWrap=true&presets=es2015%2Creact%2Cstage-2%2Cstage-3&prettier=true&targets=Node-6.12&version=6.26.0&envVersion=)上で JSX を使って遊んでみてください。

Expand All @@ -159,24 +159,24 @@ return (
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
```

この状態で、任意の `<script>` タグに `type="text/babel"` を持たせることで、その `<script>` タグの中では JSX が使えるようになります。[サンプル用 HTML ファイル](https://raw.githubusercontent.com/reactjs/reactjs.org/master/static/html/single-file-example.html)をダウンロードして遊んでみてください。
この状態で、任意の `<script>` タグに `type="text/babel"` 属性を持たせることで、その `<script>` タグの中では JSX が使えるようになります。[サンプル用 HTML ファイル](https://raw.githubusercontent.com/reactjs/reactjs.org/master/static/html/single-file-example.html)をダウンロードして遊んでみてください。

こういったやり方で学習したりシンプルなデモを作成してみることはいいことですが、これをそのまま使うとウェブサイトは重くなってしまい、**本番環境には向きません**。次のレベルに進む準備ができたら、先ほど追加した `<script>` タグと `type="text/babel"` は削除してしまいましょう。そして次のセクションに進み、JSX プリプロセッサを設定して `<script>` タグを自動変換する方法を学びましょう。
この方法は学習やシンプルなデモの作成にはいいですが、これをそのまま使うとウェブサイトは重くなってしまい、**本番環境には向きません**。次のレベルに進む準備ができたら、先ほど追加した `<script>` タグと `type="text/babel"` 属性は削除してしまいましょう。そして次のセクションに進み、JSX プリプロセッサを設定して `<script>` タグを自動変換するようにしましょう。

### JSX をプロジェクトに追加する

JSX をプロジェクトに追加するためには、バンドルツールや開発用サーバーといった複雑なツールは必要ありません。つまるところ、JSX を追加するとは **CSS プリプロセッサを追加することにとてもよく似ています**。唯一必要となるのは、コンピューターに [Node.js](https://nodejs.org/) がインストールされていることだけです。
JSX をプロジェクトに追加するためには、バンドルツールや開発用サーバーといった複雑なツールは必要ありません。つまるところ、JSX を追加することは **CSS プリプロセッサを追加することにとてもよく似ています**。唯一必要となるのは、コンピューターに [Node.js](https://nodejs.org/) がインストールされていることだけです。

ターミナルを開き、プロジェクトのディレクトリに移動した上で、次のふたつのコマンドを実行してください。

1. **ステップ1：** `npm init -y` (うまくいかなければ[こうやってみてください](https://gist.github.com/gaearon/246f6380610e262f8a648e3e51cad40d))
2. **ステップ2：** `npm install babel-cli@6 babel-preset-react-app@3`
1. **ステップ 1：** `npm init -y` (うまくいかなければ[こうやってみてください](https://gist.github.com/gaearon/246f6380610e262f8a648e3e51cad40d))
2. **ステップ 2：** `npm install babel-cli@6 babel-preset-react-app@3`

>ヒント
>
>ここでは**JSX プリプロセッサをインストールするためだけに npm を使っています**。それ以外の用途では必要ありません。React のソースコードもアプリケーションコードも引き続き `<script>` タグの中に書くことができますし、今までのやり方となんら変わりありません。
>ここでは **JSX プリプロセッサをインストールするためだけに npm を使っています**。それ以外の用途では必要ありません。React のソースコードもアプリケーションコードも引き続き `<script>` タグの中にそのまま書くことができます。
お疲れ様です！これで**本番環境用の JSX の設定**をプロジェクトに追加することができました。
お疲れ様です！　これで**本番環境用の JSX の設定**をプロジェクトに追加することができました。


### JSX プリプロセッサを実行する
Expand All @@ -195,8 +195,8 @@ npx babel --watch src --out-dir . --presets react-app/prod
このコマンドは JSX を継続的に監視するため、実行が完了するのを待つ必要はありません。

**[このお手本の JSX コード](https://cdn.rawgit.com/gaearon/c8e112dc74ac44aac4f673f2c39d19d1/raw/09b951c86c1bf1116af741fa4664511f2f179f0a/like_button.js)**を参考に `src/like_button.js` というファイルを作成すると、先ほど起動したコマンドがブラウザの仕様にあった `like_button.js` に変換してくれます。JSX ファイルをさらに編集したとしても、何度でも自動的に変換してくれます。
**[このお手本の JSX コード](https://cdn.rawgit.com/gaearon/c8e112dc74ac44aac4f673f2c39d19d1/raw/09b951c86c1bf1116af741fa4664511f2f179f0a/like_button.js)**を参考に `src/like_button.js` というファイルを作成すると、先ほど起動したコマンドがブラウザでの実行に適した `like_button.js` に変換してくれます。JSX ファイルを編集したら、自動的に再変換してくれます。

さらにこの変換コマンドのおかげで、古いブラウザの互換性を気にすることなく、クラス構文などといったモダンな JavaScript の機能を使うこともできるようになります。このツールは Babel というもので、もっと詳しく知りたければ[公式ドキュメント](http://babeljs.io/docs/en/babel-cli/)をご覧になってみてください。
さらにこの変換コマンドのおかげで、古いブラウザの互換性を気にすることなく、クラス構文といったモダンな JavaScript の構文を使うこともできるようになります。このツールは Babel というもので、もっと詳しく知りたければ[公式ドキュメント](http://babeljs.io/docs/en/babel-cli/)をご覧になってみてください。

ビルドツールの便利さを体感して、もっとたくさんのことをツールに任せて快適な環境を手に入れたいと思っていただけたなら、[次のセクション](/docs/create-a-new-react-app.html)ではさらにいくつかの人気で扱いやすいツールチェーンを紹介しています。あまり興味が持てないようでしたら、それでも大丈夫です。`<script>` タグだけでも十分な機能を果たせますから。
ビルドツールの便利さを体感して、もっとたくさんのことをツールに任せたいと思っていただけたなら、[次のセクション](/docs/create-a-new-react-app.html)ではさらにいくつかの人気で扱いやすいツールチェーンを紹介しています。そうでもない場合は… `<script>` タグだけでも十分な機能を果たせます！

0 comments on commit 2518464

Please sign in to comment.