1.
フロントエンド開発入門
React

2.
目次
1. 発表者紹介
2. 発表の概要

3.
発表者紹介
趣味：高校野球観戦・映画鑑賞・パワプロくん
マイブーム：ドラクエモンスターズ(イル/ルカSP)
目標：田舎に引っ越して犬(複数？)と生活

4.
発表の概要
● Reactの基本概念
● Reactの基本的な使い方

5.
Reactとは？

6.
Reactとは？ (1)
● Facebookが2013年にリリースしたJavaScriptのViewライブラリ
Reactってなんだ？

7.
Reactとは? (2)
State of JS 2021

8.
Reactとは? (3)
● フロントエンドロードマップ
● Reactロードマップ

9.
Reactの基本概念を学ぶ

10.
Reactの根本の概念を抑えたい理由
● フレームワークは便利であるからこそ、実際の挙動がブラックボックスのように感
じるケースがある
● ReactはJavaScriptのライブラリでありそれ以上でもそれ以下でもない
● JavaScriptで動的にUIを変化させるということは、
DOM要素をJavaScriptで操作
するということ

11.
DOMとは？？？
● ざっくり：DOMはDocument Object Modelの頭文字を取った言葉
で、HTML等のリソースをツリー状の構造で表現して JavaScript等で
操作可能にした物
○ getElementById(‘id’)
DOM Visualizer
DOMとは(mdn)
何度調べてもわからない DOMに決着をつける

12.
Reactで重要な概念
● 宣言的UI (Declarative)
● 仮想DOM(Virtual DOM )
● コンポーネントベース(Component Based)
○ JSX
Why did we build React
これからReactを勉強する人が最初に見るべきスライド 7選
なぜ仮想DOMという概念が俺達の魂を震えさせるのか
React公式

13.
宣言的UI

14.
宣言的UIとは？
● 宣言的にUIを定義する..........？？
宣言的UIって何なん？ 〜日本昔ばなし「やめ太郎」〜
宣言的UI (そな太さん)

15.
例えばこんなページを作りたい時
宣言的UIって何なん？ 〜日本昔ばなし「やめ太郎」〜

16.
命令的に書く場合
リンク

17.
Reactで同じものを作成する場合
リンク

18.
仮想DOM

19.
仮想(Virtual)DOMとは？
● JavaScriptのオブジェクトでDOMを表現したもの
○ イメージ
● JavaScriptで直接DOMを書き換える場合
○ リンク
● 仮想DOMを使用する場合
○ 次のスライドへ

20.
仮想(Virtual)DOMを使用した
基本的なUI更新の仕組み
Incremental vs Virtual DOM より
● UIを仮想DOMとして保持
● 変更前後の仮想DOMを比較し違いを探す
● 違い部分の通りリアルな DOMを更新する
【React】仮想DOMって何！？コンポーネントのレンダリングと描画について理解しよう！

21.
仮想(Virtual)DOMを使用してUI更新の仕組み
Incremental vs Virtual DOM より

22.
仮想(Virtual)DOMの例 ②
livoras/simple-virtual-dom
実際のコード例

23.
コンポーネント

24.
Reactのコンポーネントとは？
● ReactのUIを構築する部品のこと
○ UIの表示に必要なデータや処理を１つのオブジェクトにまとめたもの

25.
Reactコンポーネントの例
リンク

26.
JSXとは？
Introducing JSX
JSXはJavaScript を拡張して、UI 要素を記述するのにHTMLのような
タグ構文が使えるようにしたもの
(React入門「ReactのJSXとは？」より)

27.
結論

28.
Reactだと
宣言的UIと仮想DOMで
「設計とパフォーマンスが両立できる」

29.
Reactの基本的な使い方

30.
Reactを試してみる
● Hello World!
● Classコンポーネント？関数コンポーネント？
● State管理・更新・Props(useState)
● データバインディング(Todoリスト)
○ isCompletedを自分でやってみよう
○ 関数の渡し方
● APIリクエスト(useEffect)
● 取得したリストの表示
● ルーティング
https://github.com/K-Sato1995/react-example
https://stackblitz.com/

31.
Classコンポーネント？関数コンポーネント？
結論
新しくReactを始める場合は基本的に関数コンポーネントを使用する
React今昔物語
Function and Class Components

32.
State・Propsとは？
● State: 各コンポーネント内部でもつ、コンポーネントの状態を管
理するもの
● Props: 親コンポーネントから子コンポーネントに値を渡すため
の仕組み

33.
Hooksとは？
● React16.8で導入された
● Reactの多くの機能を関数型コンポーネントでも使用可能にした

34.
基本的なHook(useState)
● 関数コンポーネントでStateを管理する為のHook

35.
基本的なHook(useEffect)
● 関数コンポーネントで副作用(side-effect)(関数外に影響を与える・引数
以外要因で結果が変わる)を実行するためのHook

36.
告知
● 11月にgitについての勉強会があります！！！！！
● 本日の資料は別途公式の方から共有します
○ その場でLine連携お願いします