2. My First React
自己紹介
● 黒岩 卓誠（くろいわ たくみ）入社1年目
● エンジニア歴6年目（エンジニア挫折経験あり）30歳
● 趣味（ライフワーク） : ももクロ等、アイドル活動
● Java好き。JavaScriptは…
● 息子（0歳）絶賛子育て中！
12. My First React
・りあクト https://oukayuka.booth.pm/
読み物としてGood! React全体を押さえる
・React開発 現場の教科書
https://book.mynavi.jp/ec/products/detail/id=88735
手元にあると安心。教科書として。（図がGood!）
・開眼！JavaScript : JS言語仕様を学ぶ
https://www.oreilly.co.jp/books/9784873116211/
・改訂新版JavaScript本格入門
https://gihyo.jp/book/2016/978-4-7741-8411-1
現在進行形でお世話になっている技術書です！
技術書買うためにお小遣い
貯めてます・・・ｗ
13. My First React
1. Reactをざっくり理解する
What’s React?
- 「JavaScript library for building user interfaces」
- 「ユーザーインターフェース構築のためのJavaScriptライブラリ」
- ”UIを構築する”ためのライブラリであり、それ以外は関与しない
- React = UIライブラリ / フレームワークではない
- 「データを画面に表示する」のが主な仕事
15. My First React
宣言的View
- 手続き型（jQuery）
- DOM（Document Object Model）を直接いじって動的ページ
を生成する。※ DOMの詳細はMDN のDOMの紹介ページ参照
- 見た目（HTML）と操作（JavaScript）が分離していて、何をや
ったら何がどう変更されるか把握しにくい。
- あちこちから画面が参照・更新され、どこでどのような影響が出
るかが分かりにくい傾向がある。
- codesandboxサンプル
- https://codesandbox.io/s/lt-sample-1-forked-
pk90o?file=/src/sample1.html
16. My First React
宣言的View
- 宣言的なView
- codesandboxサンプル
- https://codesandbox.io/s/lt-sample-1-forked-pk90o?file=/src/App.js
- HTML の中に JavaScript が書かれていて、見た目と動作が同じ場所に
書かれている
- アプリの内部状態がこの状態だったら、この見た目になるべし
- 見た目と動作の分離を防ぐソースコードが書ける
- 仮想DOM：DOMの状態を擬似的に表現したデータを持つ。
- 画面の変更が発生するたびに「仮想DOM」を作って差分を検知し、その
差分だけを実DOMに反映
17. My First React
コンポーネントベース
- Webページやアプリケーションの構成単位を細かい部品単位で作成し、
作成した部品を組み合わせていくのが構築手法。
- コンポーネント化することで再利用が可能
- codesandboxサンプル
- https://codesandbox.io/s/lt-sample-2-6izcd?file=/src/App.tsx
18. My First React
そのほかにも…
- Redux：Reactでよく使われる状態管理のライブラリ
- 全体で大きな1つの状態を持ち、その状態に応じて画面全体を描画する
仕組み
- React Hooks: React v16.8から導入された比較的新しい状態管理方法
- 等々・・・
20. My First React
2. React習得に向けての自己分析
1. ECMAScript（エクマスクリプト）の復習
- React = 「あくまでJavaScript」基本はJS構文
let arrowFunc = (y) => console.log(y); // アロー関数
let a, b, rest;
[a, b] = [10, 20];
console.log(a); // 分割代入
// expected output: 10
21. My First React
2. React習得に向けての自己分析
2. ブラウザレンダリングの仕組みをしっかり理解する
React = UIを構築するライブラリ
DOM操作の最適化
パフォーマンスチューニング
https://gihyo.jp/book/2017/978-4-7741-8967-3
27. No.1 手続き型サンプル（html + JavaScript）
https://codesandbox.io/s/lt-sample-1-forked-pk90o?file=/src/sample1.html
No.2 宣言的 Reactサンプル
https://codesandbox.io/s/lt-sample-1-forked-pk90o?file=/src/App.js
No.3 コンポーネントベース
https://codesandbox.io/s/lt-sample-2-6izcd?file=/src/App.tsx
No.4 マークダウンエディタ
https://codesandbox.io/s/markdown-editor-2e2yd?file=/src/index.tsx
Editor's Notes ざっくり DOM とは、HTML の文書構造を表現するプログラミングインターフェースで、プログラミング言語から参照・操作できます。きちんと管理していけば対応していくことは理論上可能ですが、相応の管理コストがかかります。画面が複雑になるにつれて、その管理コストが指数関数的に増えていくでしょう。これが手続き型のデメリットです。
条件と結果が明快で予測しやすく、デバッグ等のことを考慮しても原因の特定が容易である、というメリットがある。 Reactの重要なキーワードの1つ。 Reactの重要なキーワードの1つ。 アロー関数式は、より短く記述できる、通常の function 式の代替構文です。また、this, arguments, super, new.target を束縛しません。アロー関数式は、メソッドでない関数に最適で、コンストラクタとして使うことはできません。
分割代入 (Destructuring assignment) 構文は、配列から値を取り出して、あるいはオブジェクトからプロパティを取り出して別個の変数に代入することを可能にする JavaScript の式です。 Web Storage とは、ブラウザに実装されているキーバリューストアです。
localStorage は永続的にデータを保存します。（ページを閉じても消されない）
const [値, 値をセットする関数] = useState<扱う状態の型>(初期値)
