2019/02/22に行われた勉強会で発表されたものです。

1. Reactに触れてみた
作成者：トビウオ

2. Reactとは？
• 三大Webフレームワークの一角(最大手)
ソース：npm trends

3. Reactとは？
JSX記法、コンポーネント指向、仮想DOM、単方向データフ
ロー、リアクティブプログラミング、関数型プログラミング
、Props、State、SFC、HOC、React Hooks、Redux……
• 新しい概念が多く、学習が大変そうなイメージ
• でもいきなり全部を学ぶ必要はない
• 関数型っぽくないアプローチでもコードは書ける
• 自作したTODOアプリを例に解説します

4. 基本はコンポーネント
• Webページをパーツ(コンポーネント)に分けて考えたい
• パーツは再利用できるし、考える範囲も狭くなる
入力部分
出力部分
画面全体

5. 一番外側もコンポーネント
• 全ての大本となるのがAppコンポーネント
• それ以下に他のコンポーネントがぶら下がる
export default class App extends React.Component {
public render() {
return (<>
<h1>タイトル</h1>
<p>文章</p>
<OutputTag />
</>);
}
} 定義
ReactDOM.render(
<App />,
document.getElementById('root') as HTMLElement
);
使用方法
普通のタグや
独自タグを使える

6. 出力部分を作成しよう
• コンポーネントをclassで表現してみる
• まずは1つのタグだけ返すものを……
export default class OutputTag extends React.Component {
public render() {
return (
<h1>TODO一覧：</h1>
);
}
}
<OutputTag />
定義
使用方法 レンダリング結果

7. 出力部分を作成しよう
• 独自タグの属性値はPropsから受け取れる
export default class OutputTag extends React.Component
<{list: string[]}> {
public render() {
return (
<h1>TODO一覧：</h1>
<ul>{this.props.list.map((w,i)
=>(<li key={i}>{w}</li>))}</ul>
);
}
}
<OutputTag list={dataList}/>
定義
使用方法
レンダリング結果

8. 状態を管理しよう
• classで作るコンポーネントの場合、その状態をLocal
Stateと呼ばれる仕組みで管理する
• Propsと同様、ただの連想配列と考えればいい
export default class App extends React.Component<{},
{data: string}> {
constructor(props:{}){
super(props);
this.state = {data: “タイトル”};
}
public render() {
return (
<h1>{this.state.data}</h1>
);
}
}

9. 状態を管理しよう
• PropsやLocal Stateは、中身を直接書き換えることができないこ
とに注意(Stateは「全上書き」だけできる)
data1: 3
data2: “abc”
Local State
data1: 4
data2: “abc”×
data1: 4
data2: “abc”
○
※赤枠と青枠は
違うインスタンス

10. 入力部分を作成しよう
• 入力部分のコンポーネントにLocal Stateを作成する
• 入力部分で操作した際のイベントでStateを更新する
• 本当にこれぐらいしかやることがない
• 変更内容の伝播は、関数オブジェクトをPropsで渡して
バケツリレーさせて対処する
ソースコードは省略

11. どこまで説明したっけ？
• 仮想DOM→実装アルゴリズ
ムの話なので気にしなくても
一応書ける
• 単方向データフロー→Viewは
Modelの内容表示に徹し、
Modelの変更は別ルートで対
処する手法
• SFC、HOC、Hooks、Redux→関数型プログラミングで書く場合に
よく使う概念。ただしオブジェクト指向とノリがかなり違うので、
ついていけない場合は無難にclass Componentで書こう