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