React

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連携お願いします