はじめてのReact 黒岩 卓誠　2021/03/16 My First React

My First React 自己紹介 ● 黒岩 卓誠（くろいわ たくみ）入社1年目 ● エンジニア歴6年目（エンジニア挫折経験あり）30歳 ● 趣味（ライフワーク） : ももクロ等、アイドル活動 ● Java好き。JavaScriptは… ● 息子（0歳）絶賛子育て中！

はじめてのReact Reactと仲良くなる為にやっていること

My First React 今日お話すること 1. Reactをざっくり理解する 2. React習得に向けての自己分析 3. とにかく作る！（考えるより、慣れろ！）

1. Reactをざっくり理解する

キーワード 「大まかに」 「ざっくりと」

全体像を先に理解する

My First React 大まかに全体像を把握しておくと・・・ 1. やるべきことが明確になってくる React難しそう（絶望） → “Redux”は難しい 1. 親近感が生まれる （少しでも）わかる → 楽しい！もっとやろう

全体像把握 = 情報が必要

技術書を複数用意する

今回選んだ書籍・情報源

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 現在進行形でお世話になっている技術書です！ 技術書買うためにお小遣い 貯めてます・・・ｗ

My First React 1. Reactをざっくり理解する What’s React? ● 「JavaScript library for building user interfaces」 ● 「ユーザーインターフェース構築のためのJavaScriptライブラリ」 ● ”UIを構築する”ためのライブラリであり、それ以外は関与しない ● React = UIライブラリ / フレームワークではない ● 「データを画面に表示する」のが主な仕事

My First React React公式で掲げられている3大コンセプト https://ja.reactjs.org/ ※ 今回は①と②のみ説明 1 2 3

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

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に反映

My First React コンポーネントベース ● Webページやアプリケーションの構成単位を細かい部品単位で作成し、作成 した部品を組み合わせていくのが構築手法。 ● コンポーネント化することで再利用が可能 codesandboxサンプル https://codesandbox.io/s/lt-sample-2-6izcd?file=/src/App.tsx

My First React そのほかにも… Redux：Reactでよく使われる状態管理のライブラリ 全体で大きな1つの状態を持ち、その状態に応じて画面全体を描画する仕組 み React Hooks: React v16.8から導入された比較的新しい状態管理方法 等々・・・

2. React習得に向けての 自己分析

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

My First React 2. React習得に向けての自己分析 2. ブラウザレンダリングの仕組みをしっかり理解する React = UIを構築するライブラリ DOM操作の最適化 パフォーマンスチューニング https://gihyo.jp/book/2017/978-4-7741-8967-3

3. とにかく作る！ （考えるより、慣れろ！）

My First React アプリを作ってみた（実装中！）ので紹介します！ ・マークダウンエディタ https://codesandbox.io/s/markdown-editor-2e2yd?file=/src/index.tsx 絶賛実装中　※ マークダウン内容の保存（履歴）、ページ遷移 未実装 ＜使用技術＞ ● Node.js, React, TypeScript ● Web Storage（localStorage） ● React Hooks （React 内で状態を管理するための機能）

最後に

React 楽しい！ 手を動かしながら覚える！ Try ＆ Error！

ご清聴ありがとうございました

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