はじめてのReact

自分が所属している会社と外部の会社と合同勉強会をした時のプレゼン資料です。

当時、案件で初めて「React」をやることになり、自分がReactを取得する中でどう勉強をしたのかをまとめて発表しました。（所要時間15分）

Transcript

1. はじめてのReact 黒岩 卓誠　2021/03/16 My First React
2. My First React 自己紹介 • 黒岩 卓誠（くろいわ たくみ）入社1年目 • エンジニア歴6年目（エンジニア挫折経験あり）30歳 • 趣味（ライフワーク） : ももクロ等、アイドル活動 • Java好き。JavaScriptは… • 息子（0歳）絶賛子育て中！
3. はじめてのReact Reactと仲良くなる為にやっていること
4. My First React 今日お話すること 1. Reactをざっくり理解する 2. React習得に向けての自己分析 3. とにかく作る！（考えるより、慣れろ！）
5. 1. Reactをざっくり理解する
6. キーワード 「大まかに」 「ざっくりと」
7. 全体像を先に理解する
8. My First React 大まかに全体像を把握しておくと・・・ 1. やるべきことが明確になってくる React難しそう（絶望） → “Redux”は難しい 1. 親近感が生まれる （少しでも）わかる → 楽しい！もっとやろう
9. 全体像把握 = 情報が必要
10. 技術書を複数用意する
11. 今回選んだ書籍・情報源
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ライブラリ / フレームワークではない • 「データを画面に表示する」のが主な仕事
14. My First React React公式で掲げられている3大コンセプト https://ja.reactjs.org/ ※ 今回は①と②のみ説明 1 2 3
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.ht ml
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から導入された比較的新しい状態管理方法 等々・・・
19. 2. React習得に向けての 自己分析
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
22. 3. とにかく作る！ （考えるより、慣れろ！）
23. My First React アプリを作ってみた（実装中！）ので紹介します！ ・マークダウンエディタ https://codesandbox.io/s/markdown-editor-2e2yd?file=/src/index.tsx 絶賛実装中　※ マークダウン内容の保存（履歴）、ページ遷移 未実装 ＜使用技術＞ • Node.js, React, TypeScript • Web Storage（localStorage） • React Hooks （React 内で状態を管理するための機能）
24. 最後に
25. React 楽しい！ 手を動かしながら覚える！ Try ＆ Error！
26. ご清聴ありがとうございました
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