What's "React.js" ?


よく使い方を忘れるので、必要な時にサッと読み返せるように超完結にまとめておきます。

>勉強中の関連記事まとめ
>[自分用の勉強記事をまとめた目次　~擬似知識体系~](https://qiita.com/oekaki-hoho-ron/items/3194f560efc461ec03b0)

#ロードマップ｜前提スキル・環境構築・目標設定・拡張方針・用語リスト

#React.jsとは

> [React公式サイト](https://ja.reactjs.org/)

ViewレイヤのJavaScriptの[フロントエンド](http://www-creators.com/archives/4327)の[フレームワーク](http://www-creators.com/archives/4327)

###宣言的View

データが変更されたコンポーネント（要素）だけ更新してレンダリングする

レンダリング結果を想像しやすい[JSX記法](https://ja.reactjs.org/docs/introducing-jsx.html)が利用可能

###コンポーネントベース

コンポーネントとは、UIを独立した再利用できるテンプレート部品に分割してそれぞれを分離して考えることができる概念。

HTMLタグが組み込まれた複雑なデータを内包するコンポーネントを、JavaScriptの記述で呼び出したりアプリに渡すことができ、DOMの外側で状態を保持できる。独自のタグを作る機能。コンポーネント名の頭文字は大文字にする（例 `<Layout>`, `<Link>`など）。コンポーネントの定義は`function`で行い、要素の中身を`return`で返す。コンポーネントによってレイアウトをモジュール化することでWEBアプリのUI作成を効率化できる。ReactNativeを使えばiOSアプリやAndroidアプリにも対応できる。

```react
function コンポーネント名() {
  return <div>要素の中身</div>
}
```

###拡張性

#どんなものが作れる？

###簡単なUIを作ってみる

まずはイベントの設定。JSXで記述したhtmlタグの中にイベント名として上で定義したクラスの中のメソッドを渡す。

```react
// コンポーネントの中身
<button イベント名={() => {処理}}>ボタンのラベル</button>
<button onClick={() => {}}>ボタンのラベル</button>
```

###レイアウトテンプレート

###タイマー表示

###ToDoアプリ

###外部プラグインの導入


#【勉強】基礎知識の把握

###ファイル構造

`MyApp.js`のreturnの中身が`MyApp`という名前でモジュール化される。

```react
// MyApp.js
class MyApp extends ReactConponent {
  render() {
    return(        // return()の中身が...
      <div>
        <h1>タイトル</h1>
      </div>
    );
  }
}
export default MyApp;    // MyAppという名前でモジュール化され...
```

`index.js`の`RezctDOM.render()`で`MyApp`の中身を取得し、`id="root"`の要素の中身に書き出す。

```index.js
import MyApp from './components'MyApp;    // MyAppモジュールを読み込み...
ReactDOM.render(<MyApp/>, document.getElementById('root'));    // render()の中身を取得してrootに渡し...
```

`<div id="root">`の中に`MyApp`が表示される。

```index.html
<body>
  <div id="root">    <!-- rootの中身挿入される -->
  </div>
</body>
```

###全体の基本構文

```react
import React from 'react';    // Reactをインポート

class ClassName extends ReactComponent{    // React.Componentを継承するクラス定義
  const text = 'render()の外は普通にjsとして書く';
  render(){    // JSXでコンポーネントの要素の中身を記述
    // ここに処理内容を記述（JSX記法はrenderの中だけ）
    <p>{text}</p>    /// return()の中でjsを読み込むときは{}で囲む
  }
}

export default ClassName;    // クラスをエクスポートしてメソッドを呼び出せるようにしておく
```

###普通にcssを適用

```index.html
  <link rel="stylesheet" href="style.css"> 
```

```style.css
h1{
  color:pink;
}
p{
  color:skyblue;
}
```

```react
// MyApp.js
return(
  <div>
    <h1>タイトル</h1>
    <p>テキスト</p>
  </div>
);
```

###classNameでcssを適用

```index.html
  <link rel="stylesheet" href="style.css"> 
```

```style.css
.title{
  color:pink;
}
.text{
  color:skyblue;
}
```

```react
// MyApp.js
return(
  <div>
    <h1 className='title'>タイトル</h1>
    <p className='text'>テキスト</p>
  </div>
);
```

###JSX

クラス定義の中で宣言した`render(){}`メソッドの`return();`でコンポーネントの要素の中身をJSXで記述する。JSX記法は、JavaScriptコード内にhtmlタグなどを記述でき、一つの親要素でまとめておけば子要素を複数書くことができる。

```react
class ClassName extends ReactComponent{
  render() {
    return(
      <div>
        <h1>コンポーネントの中身を書ける</h1>
        {/* コメントアウトはカッコが必要 */}
        <ul>
          <li>一つの親要素で</li>
          <li>囲っておけば</li>
          <li>複数要素を書ける</li>
        </ul>
        <img src='閉じないタグは最後にスラッシュが必要'/>
      </div>
    );
  }
}
```

>参考文献
>[JSX の導入 - React公式ドキュメント](https://ja.reactjs.org/docs/introducing-jsx.html)
>[ReactやVueのJSXについて曖昧に理解する](https://qiita.com/nabepon/items/87bb3b4f1e7bfa342489)

###render()メソッド

コンポーネントをレンダリングするメソッド。`return`で返り値としてレンダリングする要素を返す。

```react
// MyApp.js
render() {
  return();
}
```








#クラスの理解｜import・export（ファイル分割とデータの流れ）

###export default ComponentName;

エクスポートの意味は、そのjsファイルの中で定義したコンポーネントに名前をつけてテンプレートファイルとして呼び出せるようにすること。エクスポートしたコンポーネントを他のファイルでインポートして`render()`の中で`<ComponentName/>`のように独自のタグを記述すればhtmlにレンダリングできる。

```react
// Layout.js
export default Layout;
```

#コンストラクタの理解｜this・インスタンス

###thisの中身はWindowオブジェクト

```react
console.log(this);
```

```出力結果.
Window {stop: function, open: function, alert: function…}
```

```react
this.sample = 'サンプル';
```

```出力結果.
サンプル
```

###関数の中のthisはWindowオブジェクトを指す

```react
function func(){
  console.log(this);
}

func();
```

```出力結果.
Window {stop: function, open: function, alert: function…}
```

###オブジェクトの中のthisはオブジェクト自身を指す

```react
var obj = {
  name:'山田',
  func:function(){
    console.log(this);
  }
}

obj.func();
```

```出力結果.
Object {name: "山田", func: function}
```

###コンストラクタの中のthisはコンストラクタ自身を指す

```react
function User(name,age){    // {name:name, age,age}というインスタンスを生成するコンストラクタの定義
  this.name = name;
  this.age = age;
}
let yamada = new User('山田',85);    // 引数を渡してインスタンスを生成
 
console.log(yamada);
```

```出力結果.
User {name:'山田', age:85}
```

###コンポーネントのthisはコンストラクタのthis

**コンストラクタ**とは、**インスタンス**（任意のプロパティを持つオブジェクト）を生成する**関数**もしくは**メソッド**のこと。React.jsの**コンポーネント**とはまさにインスタンスを独自タグで呼び出して使い回す仕様。つまりコンポーネント定義の際に記述する`this.props.name`を分かりやすく言語化すると「親コンポーネントのコンストラクタの中で（this）定義されたひな型のオブジェクトの（props）nameプロパティの値（name）」と言う意味になり、もう少し短く表現すると「親コンポーネントのコンストラクタの内のどの値か」ということになる。

```react
// User.js
import React from 'react';

class User extends React.Component {
  render() {
    return (
      <div>
        <div>{this.props.name}</div>    {/* 言語化すると{親コンポーネントであるAppクラスのコンストラクタで定義した.ひな型オブジェクトの.nameプロパティの値}という意味*/}
        <img src={this.props.image} />
      </div>
    );
  }
}

export default User;
```

こっちが親コンポーネントを定義しているApp.js。親コンポーネントの方では`this.props.name`といった記述ではなく、分かりやすい名前のローカル変数`userItem.name`を使っている。

```react
// App.js
import React from 'react';
import User from './User';

class App extends React.Component {
  render() {
    const userList = [
      { name: '山田', image: 'http...png' },
      { name: '田中', image: 'http...png' },
      { name: '山中', image: 'http...png' },
    ]
  }

  return(
    <div>
      <h1>ユーザリスト</h1>
      <div>
        {userList.map((userItem) => {
          return (
            <User name={userItem.name} image={userItem.image} />    // 子コンポーネントである<User/>タグにpropsとして配列userListのオブジェクトのいずれかを当てはめると言う意味
        })}
      </div>
    </div>
  );
}

export default App;
```
















#コンポーネントの理解｜render()・props・state・戻り値・イベント

- コンポーネント名は頭文字を大文字にすること

###propsとはタグの属性に渡すオブジェクト値

Reactがユーザが定義したコンポーネントを検出すると、JSXでタグ内に記述された属性を一塊りのオブジェクトとして扱う。このオブジェクトのことを**props**と呼ぶ。

```react
const element = <div/>;    // これはただの要素
```

```react
const element = <Welcome name="山田"/>;    // これはWelcomeコンポーネントにprops渡したやつ
```

上記のコードだと、ユーザが定義した`<Welcome/>`タグの中の`name`属性を、Reactは`{name:'山田'}`というオブジェクトとして扱う、ということ。

###a

```react
// Welcomeコンポーネント
function Welcome(props) {
  return <h1>こんにちは {props.name}</h1>;
}

const element = <Welcome name="山田" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);
```

1. `<Welcome name="Sara"/>`という要素を引数として ReactDOM.render()を呼び出します。
2. ReactはWelcomeコンポーネントを呼び出し、そのときにprops として{name:'Sara'}を渡します。
3. Welcomeコンポーネントは出力として`<h1>Hello, Sara</h1>`要素を返します。
4. ReactDOMは`<h1>Hello, Sara</h1>`に一致するよう、DOM を効率的に更新します。

###親コンポーネントと子コンポーネントの使い所

コンポーネントには親子関係があり、コンポーネントの中で他コンポーネントを参照できる。子コンポーネントを包括するのが親コンポーネントで、その中に子コンポーネントのタグを記述し、そのタグの属性にオブジェクト値を渡せば、同じレイアウトで異なるデータを表示できる。

例えば下記のコードでは、複数の`<Welcome/>`コンポーネントに個別のユーザ名のオブジェクト値を渡してレンダリングする`<App/>`コンポーネントなども作れる。

```react
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);
```

Reactでは、ボタン、フォーム、ダイアログ、画面などはコンポーネントとして解釈される。既存のアプリにReactを統合する場合は、`<Button/>`のような小さなコンポーネントからボトムアップで始め、徐々にビューの階層構造の頂上に向かって進んでいってもよい。

###コンポーネント化でネストを解消して一括編集を可能にする

下記のコードの例は、SNSなどのコメント欄を実装するもの。このままでは子要素が多すぎてソースが煩わしく、この一部を他のページで再利用したくても不要な要素が多く、そのため変更を加える際には各ページで個々に編集する手間が発生する。

```react
function Comment(props) {
  return (
    <div className="Comment">
      <div className="UserInfo">
        <img className="Avatar"    // この部分をコンポーネント化する
          src={props.author.avatarUrl}
          alt={props.author.name}
        />
        <div className="UserInfo-name">
          {props.author.name}
        </div>
      </div>
      <div className="Comment-text">
        {props.text}
      </div>
      <div className="Comment-date">
        {formatDate(props.date)}
      </div>
    </div>
  );
}
```

しかし、例えば`<Avatar/>`コンポーネントについては`avatarUrl`と`name`というpropsを持っており、このユーザ情報は他でも使いまわせる可能性が高いので、分離してコンポーネントとして管理する方が効率的。そうするためには下記のように、まずAvatar部分を抽出してコンポーネント定義する。

このとき、propsの名前は`author`ではなく`user`に変更しているが、これは`<Avatar/>`コンポーネントは様々なページで使い回す予定なので、`<Comment/>`内で使うことはここでは気にしなくても良く、自身のコンポーネントからの観点でpropsの名前を決めた方が管理しやすいため。

```react
function Avatar(props) {
  return (
    <img className="Avatar"
      src={props.user.avatarUrl}    // propsの名前をauthorからuserに変更している
      alt={props.user.name}
    />
  );
}
```

これによって`className="Avatar"`の部分を`<Avatar/>`に置換できる。

```react
function Comment(props) {
  return (
    <div className="Comment">
      <div className="UserInfo">    {/* 次はここをコンポーネント化する*/}
        <Avatar user={props.author} />    {/* 1行で済む*/}
        <div className="UserInfo-name">
          {props.author.name}
        </div>
      </div>
      <div className="Comment-text">
        {props.text}
      </div>
      <div className="Comment-date">
        {formatDate(props.date)}
      </div>
    </div>
  );
}
```

さらに`className="UserInfo`の部分を抽出してコンポーネント定義する。

```react
function UserInfo(props) {
  return (
    <div className="UserInfo">
      <Avatar user={props.user} />
      <div className="UserInfo-name">
        {props.user.name}
      </div>
    </div>
  );
}
```

するとここまでコードを減らすことができる。

```react
function Comment(props) {
  return (
    <div className="Comment">
      <UserInfo user={props.author} />    {/* 1行で済む*/}
      <div className="Comment-text">
        {props.text}
      </div>
      <div className="Comment-date">
        {formatDate(props.date)}
      </div>
    </div>
  );
}
```







###propsの渡し方

3パターンある。`オブジェクト名.プロパティ名`で渡す方法と、`this.props.プロパティ名`で渡す方法と、`メソッド名.プロパティ名`で渡す方法。`props`はReact.jsによって用意されたデータを管理するための変数。

|用語|意味|詳細|
|---|---|---|
|props|小道具|不変データとして扱われ、`getDefaultProps`で定義されたデフォルト値か、親コンポーネントから渡された値のどちらかを持つ。|
|state|状態|主にUIに関する状態である現在のDOMと変更後のDOMの差分からコンポーネントを際描画するための可変データ。コンポーネントからコンポーネントに渡される。<br><br>`this.setState()`をコンポーネント内で呼び出site更新し、既存stateを新規stateで置換してrender()メソッドが実行される。|

`オブジェクト名.プロパティ名`で渡すとき、同じクラス内で定数を定義してオブジェクト値を代入し、その定数名すなわちオブジェクト名とプロパティを指定して値を渡している。

```react
// オブジェクト名.プロパティ名で渡す方法
const userList = {name:'山田', image:'http...png'};

return(
  <div>
    <p>{userList.name}</p>
    <img src={userList.image}/>
  </div>
);
```

`this.props.プロパティ名`で渡すとき、コンポーネントとして定義するために

```react
// this.props.プロパティ名で渡す方法
<p>{this.props.name}</p>
<img src={this.props.image}/>
```

>参考文献
>[今からはじめるReact.js〜propsとstate、それからrefs〜](https://qiita.com/kuniken/items/a22adda392ccc30011b1)
[React における Stateと Props の違い](https://qiita.com/kyrieleison/items/78b3295ff3f37969ab50)

###stateについて

イベントに対して変化する値のことをstateという。stateは「定義」「表示」「変更」の三段階の処理の記述が必要。

まずはクラス定義の中のコンストラクタでstateにオブジェクト値を代入。stateの定義はクラスの中で`this.state = {};`でできる。

```react
// クラス定義の中身
class ClassName extends ReactComponent{    // ReactComponentクラスを継承したClassNameクラスを定義
  constructor(props){    // propsって？
    super(props);    // 決まり文句（後で調べる）
    this.state = {name: '山田'};    // stateを定義
  }
}
```

次にstateを表示する。定義したstateを`return()`の中でJSXで呼び出す。`console.log()`は動作テスト。

```react
  render() {
    console.log({this.state});    // クラス内で定義したstateの値をコンソールに表示（変化前の値）
    return(
       <h1>こんにちは {this.state.name} さん</h1>    // クラス内で定義したstateの値をブラウザに表示（変化前の値）
    );
  }
```

最後にstateの変更について。定義したstateをイベントハンドラで渡すことで値を変更する。例えば`onClick`したときに`this.setState(変更後の値)`を渡す。stateの値を変更するときは`this.state`への単なる代入ではなく`setState`メソッドを必ず使う。

下記のコードは`<button>`をクリックすると`<h1>`の内容が変更されるようになっている。

```react
<button onClick={() => {this.setState({name: 山田});}}>山田</button>    // ボタンをクリックしたらstateを変更（変化後の値）
<button onClick={() => {this.setState({name: 田中});}}>田中</button>
```

stateの「定義」「表示」「変更」の処理のコード全体はこんな感じ。

```react
class ClassName extends ReactComponent{

  constructor(props){
    super(props);
    this.state = {name: '無名'};    // ①stateを定義
  }

  render() {
    return(
      <h1>こんにちは {this.state.name} さん</h1>    // ②stateを表示
      <button onClick={() => {this.setState({name: 山田});}}>山田</button>    // ③stateを変更
      <button onClick={() => {this.setState({name: 田中});}}>田中</button>
    );
  }

}
```

###イベントハンドラでstateを更新する例

`onClick`に渡していた`setState`の処理を`handoleClick`というメソッドとして定義する。そして`handleClick`メソッドを`onClick`に渡すことで、同じ処理になる。メソッド定義の部分で複雑な部分をテンプレート化できるので、JSX表記の量を削減できるし、管理しやすい。メソッドはクラスの中で定義するので`this`でアクセスする。

```react
class ClassName extends ReactComponent{

  constructor(props){
    super(props);
    this.state = {name: '無名'};
  }

  handleClick(name) {     // クリックした時の処理のメソッド定義。複数の名前に対応させるため引数nameを渡す。
    this.setState({name: name});    // さっきまでonClickに渡してたのと同じ処理
  }

  render() {
    return(
      <h1>こんにちは {this.state.name} さん</h1>
      <button onClick={() => {this.handleClick('山田')}}>山田</button>    // onClickでhandleClickメソッドが実行される
      <button onClick={() => {this.handleClick('田中')}}>田中</button>
    );
  }
}
```












###stateが必要なアプリの例

例えばブラウザで秒刻みタイマーを表示する場合、`ReactDOM.render()`を1000ミリ秒おきに実行する。このソースコードをコンポーネントでカプセル化して、シンプルかつ正しく動作するよう編集していく。

```react
function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>    {/* Dateクラスから取得した時間情報のうち時間の文字列のみを出力 */} 
    </div>
  );

  ReactDOM.render(    // DOMをレンダリングする処理
    element,    // 定数elementの中身の要素を
    document.getElementById('root')    // id="root"の中に
  );
}

setInterval(tick, 1000);    // 1秒後とにtick関数を実行
```

まずは`ReactDOM.render()`でレンダリングする定数elementをコンポーネント化する。

```react
function Clock(props) {    // tick関数の中に含まれていた定数elementを、外部で関数elementとして定義する
  return (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {props.date.toLocaleTimeString()}.</h2>    {/* Dateクラスが入れられる予定の変数dateがpropsにあたる */}
    </div>
  );
}

function tick() {
  ReactDOM.render(
    <Clock date={new Date()} />,    // <Clock/>タグにdate属性を渡してDate()?????
    document.getElementById('root')
  );
}

setInterval(tick, 1000);    // 1秒おきに<Clock/>をレンダリングするtick関数を実行
```

このままでは秒刻みタイマーの動作のためにDOMを毎秒更新させることになってしまう。合理的な動作のためには`<Clock/>`のみを毎秒更新させるべき。

```react
setInterval(tick, 1000);     // こいつを<Clock/>の中で処理したい
```

これを実装するには`<Clock/>`コンポーネントに`state`を追加する。stateは〜

まずClock関数をClockクラスに定義しなおす。propsの表記がthis.propsになっていることに注意。

```react
class Clock extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.props.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}
```



>参考文献
>[state とライフサイクル - React公式ドキュメント](https://ja.reactjs.org/docs/state-and-lifecycle.html)
>[意外と知られていないJavaScriptのnew Date()の使用方法](https://iwb.jp/javascript-new-date-gettime/)




















#【実践】WEBサイトにReact.jsを導入する方法

#【勉強】JavaScriptコーディング

###mapメソッド

mapメソッドは配列全てに対して処理を行うもの。forEachに似ているが、mapには戻り値があるところが違う。

```react
render() {
  const nameList = ['山田', '田中', '中山'];
  return(
    <div>
      {nameList.map((nameItem) => {
        return <p>{nameItem}</p>
      })}
    </div>
  );
}
```

```
> 山田
> 田中
> 中山
```

具体的な使い方の例として、mapメソッドを使ってユーザリストを一覧表示する処理の手順を分解してみる。

1. MyApp.jsの`MyApp`クラスの`render(){}`内で、ユーザ情報のオブジェクトを`userList`という配列で管理
2. User.jsの`User`クラスの`return()`で定義した独自タグ`<User/>`をエクスポート
3. MyApp.jsの`MyApp`クラスの`return()`内で、`<User/>`タグに配列の値を代入
4. MyApp.jsの`MyApp`クラスの`return()`で定義した独自タグ`<App/>`をエクスポート
5. index.jsの`ReactDOM.render()`内で`<App/>`を書き出すhtml要素の`id='root'`を指定
6. index.htmlの`<div id="root">`の中に`<App/>`が書き出される
7. そうして`userList`の数だけ列挙した`<User/>`を包括した`<App/>`をindex.htmlの`id="root"`に書き出せる

```react
// MyApp.js
import React from 'react';
import User from './User';    // User.jsで定義したUserクラスを読み込んで<User/>タグを使えるようにする

class MyApp extends React.Component {
  render() {
    const userList = [    // ユーザ情報のオブジェクトが入った配列
      { name: '山田', image: 'http...png' },
      { name: '田中', image: 'http...png' },
      { name: '山中', image: 'http...png' },
    ]
  }

  return(
    <div>
      <h1>ユーザリスト</h1>
      <div>
        {userList.map((userItem) => {    // userListの配列の全インデックス（ユーザリスト）に対して処理を行う
          return (
            <User name={userItem.name} image={userItem.image} />    // <User/>タグのプロパティ（nameとimage）にuserListのオブジェクト値を代入
          )
        })}
      </div>
    </div>
  );
}

export default MyApp;    // <MyApp/>タグが使えるようになる呪文
```

```react
// User.js
import React from 'react';

class User extends React.Component {
  render() {
    return (    // <User/>タグの中に吐き出すもの一式
      <div>
        <div>{this.props.name}</div>    {// this.propsとは親コンポーネントのMyAppから受け取るための記述方法。}
        <img src={this.props.image} />
      </div>
    );
  }
}

export default User;    // <User/>タグが使えるようになる呪文
```

```react
// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import MyApp from './components/MyApp';

ReactDOM.render(<MyApp />, document.getElementById('root'));
```

```index.html
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="stylesheet.css">
    <title>アプリ名</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="bundle.js"></script>
  </body>
</html>
```


###コンストラクタの処理をメソッド化

`onClick`に渡していた`setState`の処理を`handoleClick`というメソッドとして定義する。そして`handleClick`メソッドを`onClick`に渡すことで、同じ処理になる。メソッド定義の部分で複雑な部分をテンプレート化できるので、JSX表記の量を削減できるし、管理しやすい。メソッドはクラスの中で定義するので`this`でアクセスする。

```react
class ClassName extends ReactComponent{

  constructor(props){
    super(props);
    this.state = {name: '無名'};
  }

  handleClick(name) {     // クリックした時の処理のメソッド定義。複数の名前に対応させるため引数nameを渡す。
    this.setState({name: name});    // さっきまでonClickに渡してたのと同じ処理
  }

  render() {
    return(
      <h1>こんにちは {this.state.name} さん</h1>
      <button onClick={() => {this.handleClick('山田')}}>山田</button>    // onClickでhandleClickメソッドが実行される
      <button onClick={() => {this.handleClick('田中')}}>田中</button>
    );
  }
}
```

#React.js公式チュートリアルの三目並べゲームを作る

#【実践】WEBアプリをNext.jsで作る方法

#【勉強】公式ドキュメント解読