Upgrade to Pro — share decks privately, control downloads, hide ads and more …

基礎から学ぶ React入門

mu_zaru
July 09, 2020

基礎から学ぶ React入門

配信動画はこちら
https://www.youtube.com/watch?v=cmyXjhk6IU4

もし良かったらムーザルちゃんねるのチャンネル登録お願いします!
https://www.youtube.com/channel/UCLPHXwLp90A5R69Eltxo-sg

Twitter でもプログラミングネタをつぶやいているのでフォローお待ちしております。
ムー
https://twitter.com/mu_vpoe
zaru
https://twitter.com/zaru

mu_zaru

July 09, 2020
Tweet

More Decks by mu_zaru

Other Decks in Programming

Transcript

  1. YouTube Live (2020.07.09 Thur. 21:00~) CTO と VPoE が初学者向けに講義する オンライン勉強会です。

    随時質問なども受け付けていますので、 お気軽にどうぞ。 ハッシュタグ #mu_zaru
  2. 今日話す事とゴール 話す事 - React が解決する事と解決方法 - React 簡単なコンポーネントの作り方 ゴール -

    React が何に役立つのか理解している - 見た後に React を書ける気がする・書きたくなる状態 話さない事 - Vue や Angular との違い - Redux や Recoil などのステート管理ライブラリ
  3. 話す人 現役のエンジニア二人 赤貝が好きな CTO と デザイン勉強中のエンジニア @mu_vpoe エンジニアリングMgr。 チームづくり、採用。 Twitter

    担当。 数学が好き。 ムー zaru @zaru CTO, Love 赤貝, JavaScript, Firebase, Web Components. Twitter フォロー お願いします!
  4. ボタンコンポーネント コンポーネント指向とは 機能単位でまとめる HTML <button> JavaScript クリックした処理 別々のファイ ルに書かれ距 離が遠い

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

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

    同じファイル に書かれて距 離が近い UI とロジック・データ構造を一つのコン ポーネントという単位でまとめることで 高凝集にし保守しやすくする。 またコンポーネント同士は疎結合にする ことで再利用性を高める。
  7. 高凝集 機能 A 1つの機能を実現させるための コード群の距離が近い事。 集まっているコードは、その機能 を実現させるために協調して動 く。 疎結合 機能

    A それぞれの機能が独立し合い、依 存度が低い状態。 結合度が低いと、他の機能を気に することがなく修正が加えやす い。 機能 B 設計 Tips
  8. 宣言型 UI は状態を書くと 自動で構築される JavaScript 命令型 UI 命令を積み立てていって組み立てる HTML <button>

    React 宣言型 UI 状態を宣言して自動で構築する HTML <button> 背景 赤くして 太字 にして 文字を 白にして 背景: 赤 文字色: 白 フォント: 太字 宣言を元に HTML を作るよ
  9. HTML と JSX の違い HTML JSX CSS などで使う class は

    JSX では className と言う属性名になる
  10. HTML と JSX の違い HTML JSX JSX では { }

    で囲むことで JavaScript のコードを実行できる
  11. イベントは関数オブジェクトを渡す onClick={ () => alert() } JS で書くよ宣言 処理したい本体 無名アロー関数

    処理したい本体の関数を囲って 関数オブジェクトを onClick に渡す onClick={ alert() } 直接、実行したい関数をここで書く と、クリック時ではなく表示時に実行 されてしまう ✖ onClick={ function() { alert() }} function hoge() { alert() } onClick={ hoge } こう言う書き方でも OK
  12. コンポーネント コンポーネントは内部で状態を保持することができる。これを React では state と呼ぶ。state を更新することで UI の表現や挙動を変えられる。 このことをデータバインディングや単方向データフローなどと表現したりする。

    React では基本、この state を良い感じに管理・設計するのがポイント。 状態(=state)が変わると UI も変わる いいね済み 名前 お気に入り 最終アクセス日 HTML いいね済みの state を更新すると UI 表 示が変わる 変換 反映