Slide 1

Slide 1 text

2021年新春 Reactが怖くなくなる話 1 1

Slide 2

Slide 2 text

⽬標：Reactが怖くなくなくなる社内での再利⽤性を考慮して初⼼者向けに寄せた資料です。すでに実務でReactを使われている⽅には物⾜りないかもしれませんが、なるべく2020年末の最新状況に合わせた記述を意識しましたので、情報収集の⼊り⼝にしていただければ幸いです。 2 2

Slide 3

Slide 3 text

アジェンダ 3 3

Slide 4

Slide 4 text

導⼊「Reactってこんなもの」のイメージを共有します。 Reactってどんなイメージですか？ 2020年末のReactエコシステム 4 4

Slide 5

Slide 5 text

やってみよう create-react-appでテンプレートを⽣成して観察してみましょう。 Start with create-react-app ★Hands On 各ディレクトリの役割コンポーネント志向 5 5

Slide 6

Slide 6 text

コンポーネントとReact hooks 実装する際にまず知っておく必要がある要素について紹介します。関数コンポーネントとクラスコンポーネント基本のフック - useState(), useEffect(), useContext() ★Hands On 6 6

Slide 7

Slide 7 text

React開発における「React以外」の話実際にWebアプリケーションを作る際に必要になる「React以外のもの」の紹介です。スタイリング - CSS in JS vs CSS Module 7 7

Slide 8

Slide 8 text

おまけ：成果物紹介 Next.js x firebaseでつくる俳句管理アプリ「季語別俳句帖」※未完成 8 8

Slide 9

Slide 9 text

Reactってどんなイメージですか？ 9 9

Slide 10

Slide 10 text

1 0 1 0

Slide 11

Slide 11 text

アサヅは最初こんな印象を持ちました SPAを作れるやつなんか難しそうフロントエンドのつらみをいろいろ解消してくれる？部品単位で開発できて効率よさそう AndroidのViewとかに相当するものを作っていくイメージかな？ 1 1 1 1

Slide 12

Slide 12 text

遠からず 1 2 1 2

Slide 13

Slide 13 text

例えばこんな「部品」 const MyComponent = () => (

Hello, World!

) export default MyComponent 1 3 1 3

Slide 14

Slide 14 text

JSの中にHTML…? 不気味これと何が違うんだろう… function createMyComponent() { return '

Hello, World!

' } Reactの怖さ（Vanilla JSとの⼤きな違い）= JSX 1 4 1 4

Slide 15

Slide 15 text

JSX ≠ HTML ⽂字列ではありません HTMLそのものでもありません JSXはJSにコンパイルされます 1 5 1 5

Slide 16

Slide 16 text

ex. Babelによるコンパイル結果 const MyComponent = () => (

Hello, World!

) ↓ import {jsx as _jsx} from 'react/jsx-runtime'; const MyComponent = () => ( _jsx('p', { children: 'Hello World!' }) ) ※React 17〜 FYI: https://ja.reactjs.org/blog/2020/09/22/introducing-the-new- jsx-transform.html ※16以前は React.createElement() が呼ばれてました 1 6 1 6

Slide 17

Slide 17 text

なんだ、ただのJavaScriptじゃん。怖くないですね 1 7 1 7

Slide 18

Slide 18 text

ちなみに JSXそのものは、Reactとは全く別の仕様として存在しています。 FYI: https://facebook.github.io/jsx/ 専⽤のbable plugin等を利⽤すれば Vue.js等でもJSXを利⽤することができます。 1 8 1 8

Slide 19

Slide 19 text

で、こいつはどうやったら表⽰できるのよこいつ↓ const MyComponent = () => (

Hello, World!

) 1 9 1 9

Slide 20

Slide 20 text

ReactDOM.render() の引数に渡す

import ReactDOM from 'react-dom' import MyComponent from './components/MyComponent' const element = ReactDOM.render(element, document.getElementById('hello-world')) ※ react-dom は react コアとは切り離されたパッケージとして提供されている →React Native等への応⽤が可能となっている 2 0 2 0

Slide 21

Slide 21 text

実⾏結果

Hello, world!

※だいぶ省略しています 2 1 2 1

Slide 22

Slide 22 text

Reactには他にもこんな特徴があります宣⾔的UI 「あるべき姿」を宣⾔し表現する（対：命令的）仮想DOM DOM構成をJSのオブジェクトで表現し、仮想DOMツリーの変更差分をレンダリングする関数型プログラミングとの親和性 UI=f(state) という考え⽅詳しくはggってください、、、 2 2 2 2

Slide 23

Slide 23 text

2020年末のReactエコシステム 2 3 2 3

Slide 24

Slide 24 text

2 4 2 4

Slide 25

Slide 25 text

いっぱいあってよくわからないというか書ききれていないですまだある無限にある 2 5 2 5

Slide 26

Slide 26 text

2 6 2 6

Slide 27

Slide 27 text

Start with create-react-app ※せっかくなのでTypeScriptも触りましょう Android経験者なら強⼒な型補完に良さを感じると思います $ npm i -g create-react-app $ create-react-app sample-app --template typescript 2 7 2 7

Slide 28

Slide 28 text

各ディレクトリの役割実際にモノを⾒ながら説明します 2 8 2 8

Slide 29

Slide 29 text

「コンポーネント志向」という考え⽅ 2 9 2 9

Slide 30

Slide 30 text

コンポーネントとは「部品」、「構成要素」構造、⾒た⽬、振る舞いを1つのセットとして捉える → HTML, CSS, JavaScript 3 0 3 0

Slide 31

Slide 31 text

（フロントエンドにおける）コンポーネント志向とはコンポーネントをいっぱいつくってページを構築しよう！という考え⽅ 3 1 3 1

Slide 32

Slide 32 text

コンポーネント志向のメリット（私⾒） 1コンポーネント1ファイルなので読みやすいテストしやすい変更に強い再利⽤性が⾼いローカルな状態管理がしやすい OOPの基本知識が設計に活かしやすい 3 2 3 2

Slide 33

Slide 33 text

コンポーネント志向の課題（私⾒）コンポーネント内でのUIとロジックの密結合 →ロジックの使いまわしが難しい多くのコンポーネント志向ライブラリはView層にしか関⼼を持たず、「それ以外」は実装者にゆだねられがち・ビジネスロジックをどう実装するか・コンポーネント間の状態管理をどうするか → 多くのコンポーネント志向SPAライブラリは、これらの課題を個別に解消するエコシステムを持っている 3 3 3 3

Slide 34

Slide 34 text

3 4 3 4

Slide 35

Slide 35 text

コンポーネントとReact hooks 3 5 3 5

Slide 36

Slide 36 text

コンポーネントクラスコンポーネント class Welcome extends React.Component { render() { return

Hello, {this.props.name}

; } } 関数コンポーネント const Welcome: React.VFC = (props) => { return

Hello, {props.name}

; } ※ React.VFC ＝ VoidFunctionalComponent （関数コンポーネントの型の⼀種 @types/react 18^ ） 3 6 3 6

Slide 37

Slide 37 text

2020年末、どちらを選択するか？記述的にシンプルな関数コンポーネントが第⼀候補クラスコンポーネントの優位性であった state 、 Lifecycle はhooksの登場で関数コンポーネントでもほぼ実現可能に基本的に関数コンポーネントでよさそう 3 7 3 7

Slide 38

Slide 38 text

関数コンポーネントの表現⼒を⾼めてくれた「hooks」とは？ 3 8 3 8

Slide 39

Slide 39 text

hooks導⼊の経緯 https://ja.reactjs.org/docs/hooks-intro.html#motivation 典型的な React アプリを React DevTools で⾒てみると、おそらくプロバイダやらコンシューマやら⾼階コンポーネントやらレンダープロップやら、その他諸々の抽象化が多層に積み重なった『ラッパー地獄』を⾒ることになるでしょう。フックを使えば、ステートを持ったロジックをコンポーネントから抽出して、単独でテストしたり、また再利⽤したりすることができます。フックを使えば、ステートを持ったロジックを、コンポーネントの階層構造を変えることなしに再利⽤できるのです。 3 9 3 9

Slide 40

Slide 40 text

ルール呼び出しは関数コンポーネントのトップレベル or カスタムhooksのトップレベルのみカスタムhooksを⾃作する場合、命名規則 useXXX 遵守 4 0 4 0

Slide 41

Slide 41 text

useState const [state, setState] = useState(initialState) ステートフルな値とそれを更新するための関数を返却する 4 1 4 1

Slide 42

Slide 42 text

ボタンを押してカウントアップするコンポーネント import { useState, useEffect } from 'react' const Counter:React.VFC = () => { const [count, setCount] = useState(0) return ( <>

{count}回クリックされました︕

setNumber(count + 1)}>ボタン > ) } ボタンを押される →stateが更新される →stateの変更にもとづいて再レンダリングされる 4 2 4 2

Slide 43

Slide 43 text

※ <>> = 「レンダリングされない括る専⽤要素」と思っておけばひとまずOK 4 3 4 3

Slide 44

Slide 44 text

useEffect useEffect(functionWhenUpdated) 副作⽤（再レンダリング等）を契機に実⾏する処理第⼆引数を⽤いて実⾏タイミングを制御可能（説明略） 4 4 4 4

Slide 45

Slide 45 text

ボタンを押してカウントアップするコンポーネント② import { useState, useEffect } from 'react' const Counter():React.VFC = () => { const [count, setCount] = useState(0) useEffect(() => { document.title = `${count}回クリックされたページ`; }) return ( <>

{count}回クリックされました︕

setCount(count + 1)}>ボタン > ) } 再レンダリング（副作⽤）を契機に、ページのタイトルが変更される 4 5 4 5

Slide 46

Slide 46 text

※ 副作⽤がある関数 ≒ 純粋でない関数 ≒ 同じ引数を渡しても同じ結果が返ってくるとは限らない関数レンダリングが発⽣した＝結果が前回と異なる＝副作⽤が⽣じている → 副作⽤フックが実⾏される 4 6 4 6

Slide 47

Slide 47 text

useContext const contextValue = useContext(contextKey) Context API（後述）から値を取得 4 7 4 7

Slide 48

Slide 48 text

Contextの値をもとに表⽰⾊を設定するボタン import {useContext} from 'react' import ThemeContext from '../contexts/theme-context' // context定義ファイル const ThemedButton():React.VFC = () => { const theme = useContext(ThemeContext) return ( テーマカラーで配⾊されたボタンです︕ ) } 4 8 4 8

Slide 49

Slide 49 text

ContextAPIによる Theme の提供 React.createContext() Context.Providerコンポーネント const themes = { light: { foreground: "#000000", background: "#eeeeee" }, dark: { foreground: "#ffffff", background: "#222222" } } const ThemeContext = React.createContext(themes.light) // 初期値 export default ThemeContext 4 9 4 9

Slide 50

Slide 50 text

import ThemeContext from './contexts/ThemeContext' import ThemeButton from './components/ThemeButton' const App: React.VFC = () => { return ( ) } の⼦孫要素として表現されたコンポーネントは、 value に設定された値をContext APIを通じて参照できる value の値が変更されると再レンダリングされる 5 0 5 0

Slide 51

Slide 51 text

きみだけのhooksを作ろうのコーナー例えば、boolean値をtoggleさせることができる useBool import {useState} from 'react' const useBool = () => { const [bool, setBool] = useState(false) const toggleBool = setBoolean(!bool) return [bool, toggleBool] } export default useBool ちょっとだけ使い勝⼿がよくなる・安全になる薄いhooksも全然OKだと思います 5 1 5 1

Slide 52

Slide 52 text

React開発におけるReact以外の話 ※状態管理の話も⼊れたかったんですが、今回は未完です。。すみません 5 2 5 2

Slide 53

Slide 53 text

スタイリング 2020年末現在、有⼒な選択肢は⼤きく分けて2つ CSS in JS CSS Modules どちらも「モノリシックなCSSからコンポーネントごとのCSSへ」の動き 5 3 5 3

Slide 54

Slide 54 text

CSS in JS 代表的なライブラリ： styled-components import {styled} from 'styled-components' type Props = { text: string } const Component: React.VFC = (props) => { return {props.string} } const StyledButton = styled(Component)` > button { background-color: black; } ` export default StyledButton 5 4 5 4

Slide 55

Slide 55 text

CSS Module button.module.css .button { background-color: black; } import Styles from './button.module.css' type Props = { text: string } const Component: React.VFC = (props) => { return {props.string} } export default Component 5 5 5 5

Slide 56

Slide 56 text

両者の⽐較（どちらも有⼒。。） CSS in JS JSの変数が使えるので状態に応じた表現⼒が⾼いロジックと層を分ければ保守性アップが⾒込める CSS Modules JSとCSSファイルを分けることができるので分業しやすい（かも）クラス名にスタイリングを⼀任できるので⾒通しが良い 5 6 5 6

Slide 57

Slide 57 text

スタイリングの基本指針コンポーネント単位でスタイリングしようロジックと切り離そうコンポーネントは外部からのレイアウトを（なるべく）意識しないスタイリングにするよう⼼がけよう (使われる側が使う側を知るのは良くない、関⼼の分離) ⾊定義などグローバルに使いまわせる定数は別ファイルに切り分けよう 5 7 5 7

Slide 58

Slide 58 text

まとめ Reactの怖さはJSXに拠るところが⼤きいけど、仕組みを理解するとただのJSだと分かります。ｺﾜｸﾅｲﾖ Reactはエコシステムが肥⼤化しているので把握が難しいけど、それって実は「React以外」をどうにかするための試⾏錯誤でしかない。ｺﾜｸﾅｲﾖ React基礎知識をある程度⾝に付けた後は、結局、設計パターンをどうするかが問題になると思います。⼀般的な開発と⼤差ありませんし、OOPわかれば普通に戦えます。 5 8 5 8

Slide 59

Slide 59 text

おまけ：成果物紹介 https://kigo-betsu-haiku-cho.vercel.app/ https://zenn.dev/asazutaiga/articles/2046b0fbb1e934 5 9 5 9