Successfully reported this slideshow.
Your SlideShare is downloading. ×

フロントエンド開発入門(React).pdf

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Loading in …3
×

Check these out next

1 of 36 Ad

More Related Content

Recently uploaded (20)

Advertisement

フロントエンド開発入門(React).pdf

  1. 1. フロントエンド開発入門 React
  2. 2. 目次 1. 発表者紹介 2. 発表の概要
  3. 3. 発表者紹介 趣味:高校野球観戦・映画鑑賞・パワプロくん マイブーム:ドラクエモンスターズ(イル/ルカSP) 目標:田舎に引っ越して犬(複数?)と生活
  4. 4. 発表の概要 ● Reactの基本概念 ● Reactの基本的な使い方
  5. 5. Reactとは?
  6. 6. Reactとは? (1) ● Facebookが2013年にリリースしたJavaScriptのViewライブラリ Reactってなんだ?
  7. 7. Reactとは? (2) State of JS 2021
  8. 8. Reactとは? (3) ● フロントエンドロードマップ ● Reactロードマップ
  9. 9. Reactの基本概念を学ぶ
  10. 10. Reactの根本の概念を抑えたい理由 ● フレームワークは便利であるからこそ、実際の挙動がブラックボックスのように感 じるケースがある ● ReactはJavaScriptのライブラリでありそれ以上でもそれ以下でもない ● JavaScriptで動的にUIを変化させるということは、 DOM要素をJavaScriptで操作 するということ
  11. 11. DOMとは??? ● ざっくり:DOMはDocument Object Modelの頭文字を取った言葉 で、HTML等のリソースをツリー状の構造で表現して JavaScript等で 操作可能にした物 ○ getElementById(‘id’) DOM Visualizer DOMとは(mdn) 何度調べてもわからない DOMに決着をつける
  12. 12. Reactで重要な概念 ● 宣言的UI (Declarative) ● 仮想DOM(Virtual DOM ) ● コンポーネントベース(Component Based) ○ JSX Why did we build React これからReactを勉強する人が最初に見るべきスライド 7選 なぜ仮想DOMという概念が俺達の魂を震えさせるのか React公式
  13. 13. 宣言的UI
  14. 14. 宣言的UIとは? ● 宣言的にUIを定義する..........?? 宣言的UIって何なん? 〜日本昔ばなし「やめ太郎」〜 宣言的UI (そな太さん)
  15. 15. 例えばこんなページを作りたい時 宣言的UIって何なん? 〜日本昔ばなし「やめ太郎」〜
  16. 16. 命令的に書く場合 リンク
  17. 17. Reactで同じものを作成する場合 リンク
  18. 18. 仮想DOM
  19. 19. 仮想(Virtual)DOMとは? ● JavaScriptのオブジェクトでDOMを表現したもの ○ イメージ ● JavaScriptで直接DOMを書き換える場合 ○ リンク ● 仮想DOMを使用する場合 ○ 次のスライドへ
  20. 20. 仮想(Virtual)DOMを使用した 基本的なUI更新の仕組み Incremental vs Virtual DOM より ● UIを仮想DOMとして保持 ● 変更前後の仮想DOMを比較し違いを探す ● 違い部分の通りリアルな DOMを更新する 【React】仮想DOMって何!?コンポーネントのレンダリングと描画について理解しよう!
  21. 21. 仮想(Virtual)DOMを使用してUI更新の仕組み Incremental vs Virtual DOM より
  22. 22. 仮想(Virtual)DOMの例 ② livoras/simple-virtual-dom 実際のコード例
  23. 23. コンポーネント
  24. 24. Reactのコンポーネントとは? ● ReactのUIを構築する部品のこと ○ UIの表示に必要なデータや処理を1つのオブジェクトにまとめたもの
  25. 25. Reactコンポーネントの例 リンク
  26. 26. JSXとは? Introducing JSX JSXはJavaScript を拡張して、UI 要素を記述するのにHTMLのような タグ構文が使えるようにしたもの (React入門「ReactのJSXとは?」より)
  27. 27. 結論
  28. 28. Reactだと 宣言的UIと仮想DOMで 「設計とパフォーマンスが両立できる」
  29. 29. Reactの基本的な使い方
  30. 30. Reactを試してみる ● Hello World! ● Classコンポーネント?関数コンポーネント? ● State管理・更新・Props(useState) ● データバインディング(Todoリスト) ○ isCompletedを自分でやってみよう ○ 関数の渡し方 ● APIリクエスト(useEffect) ● 取得したリストの表示 ● ルーティング https://github.com/K-Sato1995/react-example https://stackblitz.com/
  31. 31. Classコンポーネント?関数コンポーネント? 結論 新しくReactを始める場合は基本的に関数コンポーネントを使用する React今昔物語 Function and Class Components
  32. 32. State・Propsとは? ● State: 各コンポーネント内部でもつ、コンポーネントの状態を管 理するもの ● Props: 親コンポーネントから子コンポーネントに値を渡すため の仕組み
  33. 33. Hooksとは? ● React16.8で導入された ● Reactの多くの機能を関数型コンポーネントでも使用可能にした
  34. 34. 基本的なHook(useState) ● 関数コンポーネントでStateを管理する為のHook
  35. 35. 基本的なHook(useEffect) ● 関数コンポーネントで副作用(side-effect)(関数外に影響を与える・引数 以外要因で結果が変わる)を実行するためのHook
  36. 36. 告知 ● 11月にgitについての勉強会があります!!!!! ● 本日の資料は別途公式の方から共有します ○ その場でLine連携お願いします

×