Tweet
Tweet

Slide 1

Slide 1 text

YouTube Live (2020.07.09 Thur. 21:00~) CTO と VPoE が初学者向けに講義する オンライン勉強会です。 随時質問なども受け付けていますので、 お気軽にどうぞ。 ハッシュタグ #mu_zaru

Slide 2

Slide 2 text

今日話す事とゴール 話す事 - React が解決する事と解決方法 - React 簡単なコンポーネントの作り方 ゴール - React が何に役立つのか理解している - 見た後に React を書ける気がする・書きたくなる状態 話さない事 - Vue や Angular との違い - Redux や Recoil などのステート管理ライブラリ

Slide 3

Slide 3 text

作るサンプル いいねボタン

Slide 4

Slide 4 text

話す人 現役のエンジニア二人 赤貝が好きな CTO と デザイン勉強中のエンジニア @mu_vpoe エンジニアリングMgr。 チームづくり、採用。 Twitter 担当。 数学が好き。 ムー zaru @zaru CTO, Love 赤貝, JavaScript, Firebase, Web Components. Twitter フォロー お願いします！

Slide 5

Slide 5 text

React が解決するもの

Slide 6

Slide 6 text

インタラクティブな UI と ロジックの複雑性から 生じる苦痛を取り除く

Slide 7

Slide 7 text

どうやって解決するのか

Slide 8

Slide 8 text

コンポーネント指向 と 宣言型 UI

Slide 9

Slide 9 text

コンポーネント指向

Slide 10

Slide 10 text

ボタンコンポーネント コンポーネント指向とは 機能単位でまとめる HTML JavaScript クリックした処理 別々のファイ ルに書かれ距 離が遠い 普通の作り方 UI とロジックを分離させるスタイル HTML JavaScript クリックした処理 コンポーネント UI とロジックを集めるスタイル 同じファイル に書かれて距 離が近い

Slide 11

Slide 11 text

コンポーネント指向とは 機能単位でまとめる HTML JavaScript クリックした処理 別々のファイ ルに書かれ距 離が遠い 普通の作り方 UI とロジックを分離させるスタイル HTML ファイルは UI の構造のみにし、 操作のロジックは JavaScript ファイル に分離する。構造の依存度を下げるよう にしている。 悪くない方法だが UI とロジック・デー タ構造は、実際には密に結合されている ことが多いため、結局は依存してしまう ことが多い。

Slide 12

Slide 12 text

ボタンコンポーネント コンポーネント指向とは 機能単位でまとめる HTML JavaScript クリックした処理 コンポーネント UI とロジックを集めるスタイル 同じファイル に書かれて距 離が近い UI とロジック・データ構造を一つのコン ポーネントという単位でまとめることで 高凝集にし保守しやすくする。 またコンポーネント同士は疎結合にする ことで再利用性を高める。

Slide 13

Slide 13 text

高凝集 機能 A 1つの機能を実現させるための コード群の距離が近い事。 集まっているコードは、その機能 を実現させるために協調して動 く。 疎結合 機能 A それぞれの機能が独立し合い、依 存度が低い状態。 結合度が低いと、他の機能を気に することがなく修正が加えやす い。 機能 B 設計 Tips

Slide 14

Slide 14 text

宣言型 UI

Slide 15

Slide 15 text

宣言型 UI は状態を書くと 自動で構築される JavaScript 命令型 UI 命令を積み立てていって組み立てる HTML React 宣言型 UI 状態を宣言して自動で構築する HTML 背景 赤くして 太字 にして 文字を 白にして 背景: 赤 文字色: 白 フォント: 太字 宣言を元に HTML を作るよ

Slide 16

Slide 16 text

命令型 UI のコード例 もし、まだいいねしていない 状態だったら、like クラスを 取り除いて、liked クラスを 追加する処理 命令型の場合は、今どういう UI になっているかを 気にしながら UI 構築コードを書いていく必要がある。

Slide 17

Slide 17 text

宣言型 UI のコード例 現在のクラスを気にせず、指 定したいクラスを定義し、後 は React にお任せする 宣言型の場合は、今や過去の状態は気にしなくても あるべき姿を定義すれば自動で構築してくれる。

Slide 18

Slide 18 text

React を使ってみる

Slide 19

Slide 19 text

とりあえずこの3行を HTML に突っ込めば、すぐに React が使える！ 実際に React をガッツリ使っていくにはビルドシステムを導入した方が良 かったりするけど、それはまた別の機会に。今回は React が使えるようにな るところまで。 React を使ってみる

Slide 20

Slide 20 text

要件 ボタンをクリックすると、色が反 転する。再度クリックすると元に 戻る。 いいねボタンを作ってみる

Slide 21

Slide 21 text

その1. 関数コンポーネント コンポーネントと言っても実は普通の JavaScript の関数で作れる。 また React.Component を継承したクラスでもコンポーネントが作れる。 どちらが良いかというと現時点では関数ベースで作っていく方が推奨されている。 が、クラスが非推奨というわけではないので、最初は好みで試してみてください。 コンポーネントの作り方は2種類ある その2. クラスコンポーネント

Slide 22

Slide 22 text

HTML
React ボタンコンポーネント コンポーネントを DOM に変換をして HTML に埋め込む 出力は ReactDOM.render にお任せ ReactDOM.render

Slide 23

Slide 23 text

コンポーネントを作って表示する いいねと文字を表示するだけのコンポーネントを作る。

Slide 24

Slide 24 text

コンポーネントを作って表示する この関数がコンポーネント 関数名は大文字で始める必要がある

Slide 25

Slide 25 text

コンポーネントを作って表示する ここで React がコンポーネ ントを DOM に変換して、 HTML に挿入する コンポーネント名は関数名と同じ。呼び出す ときは HTML タグと同じように や のカッコで囲む

Slide 26

Slide 26 text

JSX を使ってみる HTML タグを使ってボタンを表示する

Slide 27

Slide 27 text

JSX を使ってみる これが JSX HTML のタグのように見える けど実態は少し違う。

Slide 28

Slide 28 text

HTML と JSX の違い HTML JSX JSX でも HTML のタグを使うことができる 属性もそのまま使える

Slide 29

Slide 29 text

HTML と JSX の違い HTML JSX CSS などで使う class は JSX では className と言う属性名になる

Slide 30

Slide 30 text

HTML と JSX の違い HTML JSX JSX では { } で囲むことで JavaScript のコードを実行できる

Slide 31

Slide 31 text

HTML と JSX の違い HTML JSX 独自のコンポーネント（タグ）を作 ることができる。大文字で始まるも のは独自コンポーネント。

Slide 32

Slide 32 text

HTML と JSX の違い HTML JSX HTML と同じようにコンポーネント を入れ子にすることができる

Slide 33

Slide 33 text

JSX は JavaScript を拡張した構文。 React.createElement() という関数に変換されて実行される。 JSX は JavaScript の拡張構文

Slide 34

Slide 34 text

クリックイベントを設定してみる onClick イベントに関数を設定する

Slide 35

Slide 35 text

UI のイベントは HTML と同じ感じ HTML と同じようにクリック時の挙動 を JavaScript で書くことができる

Slide 36

Slide 36 text

イベントは関数オブジェクトを渡す onClick={ () => alert() } JS で書くよ宣言 処理したい本体 無名アロー関数 処理したい本体の関数を囲って 関数オブジェクトを onClick に渡す onClick={ alert() } 直接、実行したい関数をここで書く と、クリック時ではなく表示時に実行 されてしまう ✖ onClick={ function() { alert() }} function hoge() { alert() } onClick={ hoge } こう言う書き方でも OK

Slide 37

Slide 37 text

まだいいねしてない いいね済み ボタンをクリックしたら、ボタンタグに like / liked クラスを付け替えるようにする。 見た目は CSS で切り替え

Slide 38

Slide 38 text

いいね済みかどうかの状態を持つ 「いいね前」と「いいね済み」のトグルにする

Slide 39

Slide 39 text

コンポーネント コンポーネントは内部で状態を保持することができる。これを React では state と呼ぶ。state を更新することで UI の表現や挙動を変えられる。 このことをデータバインディングや単方向データフローなどと表現したりする。 React では基本、この state を良い感じに管理・設計するのがポイント。 状態（=state）が変わると UI も変わる いいね済み 名前 お気に入り 最終アクセス日 HTML いいね済みの state を更新すると UI 表 示が変わる 変換 反映

Slide 40

Slide 40 text

いいね済みかどうかの状態を持つ useState() を使うことで state 管理ができる [状態の変数, 状態を変更する関数] = useState(状態の初期値)

Slide 41

Slide 41 text

いいね済みかどうかの状態を持つ liked : state の変数 setLiked : state を変更する関数 (*) 名前は何でも良い false: state 変数の初期値

Slide 42

Slide 42 text

いいね済みかどうかの状態を持つ state の変更は、state 変数を直接修正しても変更は 反映されない。反映させるには変更関数を使う必要が ある。 NG : liked = true OK : setLiked(true)

Slide 43

Slide 43 text

いいね済みかどうかの状態を持つ ボタンをクリックしたら、setLiked() を使って状態を変更 する。 ! を使って true -> false ・ false -> true という ように Bool を反転させている

Slide 44

Slide 44 text

いいね済みかどうかの状態を持つ 今の状態によって className が変わる。 「いいね済み」だったら、liked クラス、そう じゃないなら like クラスを付ける条件式 指定のクラスでボタンタグを描画してねと宣言す る

Slide 45

Slide 45 text

コンポーネントの値を外から与える ボタンのテキストを変更する

Slide 46

Slide 46 text

コンポーネントの値を外から与える コンポーネントに属性値を使って自 由に値を与えることができる

Slide 47

Slide 47 text

コンポーネントの値を外から与える コンポーネント関数の引数に props と言う名前で受け取れる props.属性名 で値にアクセスできる

Slide 48

Slide 48 text

2つのコンポーネントを協調させる

Slide 49

Slide 49 text

要件 ボタンをクリックし、いいねをし たら合計のいいね数が増える。再 度クリックして、いいねを外すと 合計のいいね数が減る。 いいねボタンを改造する

Slide 50

Slide 50 text

まずは完成のコード

Slide 51

Slide 51 text

LikeButtonComponent 一つの大きなコンポーネントを作ることもできるが、細かく役割ごとに分けて 作った方が保守性が高まる。コンポーネントが複数の役割をもっていないか検 討しながら書くと良い。 React では一番上に1つのコンポーネントしか持てないので、分割した際には親 子ツリーのように、まとめる親コンポーネントを作る。 コンポーネントは役割ごとに作る LikeButton LikeSummaryText いいねするだけのボタン いいね数を表示するだけ 2つをまとめる親

Slide 52

Slide 52 text

2つのコンポーネントをまとめる親コンポーネント

Slide 53

Slide 53 text

LikeButtonComponent コンポーネントの中に別のコンポーネントを埋め込み親子関係にすることがで きる。コンポーネント同士のデータ連携は props（プロパティの略）で行う。 props には数値などのデータ以外にも関数を渡すこともできる。 コンポーネント間のやり取りは props LikeButton LikeSummaryText いいね数 props いいね数 このコンポーネント自身はいいね数は持って いないが、親コンポーネントから props 経由 でもらって使うことができる。

Slide 54

Slide 54 text

コンポーネントの属性に指定した値 を、子コンポーネント関数の引数で 受け取ることができる

Slide 55

Slide 55 text

ありがとうございました！ 次回は… Linux コマンドやターミナルについてやります。 質問感想など呟いていただけると嬉しいです！ ハッシュタグ #mu_zaru