lagoon React Redux 勉強会

2. React 入門

3. シマブー
・琉球大学 産業経営学科
・CODEBASE 1期
・趣味：アニラジ、ランニング
・最近JSが好き
・雑魚だけど、フロントもバッ
クもインフラもやってみたい

4. しまぶーの目標
・Reactをフワっと理解してもらう。
・Reactに興味を持ってもらう。

5. もくじ
1. Reactとは
2. Reactの特徴
3. プロジェクトを作ろう
4. JSXとは
5. componentとは
6. Reduxとは

6. 1. Reactとは
2. Reactの特徴
3. プロジェクトを作ろう
4. JSXとは
5. componentとは
6. Reduxとは

7. Reactとは
Facebookが開発した
アプリケーションのUIを実装するための
JSライブラリー
Facebook, slack, Qiitaなどで使われているよ！

8. 1. Reactとは
2. Reactの特徴
3. プロジェクトを作ろう
4. JSXとは
5. componentとは
6. Reduxとは

9. Reactの特徴
1. コンポーネント指向
2. 仮想DOM

10. コンポーネント指向とは
コンポーネント = UIを部品化したもので
ページを構成する
← つまり、こういうこと

13. でも、見た目は今までと一緒じゃん！
って思うかもしれませんが

14. コンポーネント（部品）ごとに別のファイ
ルで作って、使いたいところで呼び出すと
いった使い方ができる。
今までと違うところ

15. コンポーネント指向のメリット
・コードが切り分けられているので
小さな単位でコードを考えられる
・見るべきところがハッキリするので
コードを理解しやすく保持しやすい
・デザインの再利用が簡単

16. 仮想DOMとは
・JSのオブジェクトにより
仮想的に作られたDOM
・変更に強く構築が速いので、表示が速い

17. なんで仮想DOMは速いの？

18. 変更
変更(ページの遷移とか)
表示
表示
DOM
仮想DOM DOM
再構築
変更部分だけ構築

19. もっと仮想DOMを知りたい人は
リアルなDOMはなぜ遅いのか
VirtualDOMの仕事ってなに？
あと一つの資料にリンク載っています

20. ここまでで何か質問ありますか？
（答えられるとは言っていない..）

21. 1. Reactとは
2. Reactの特徴
3. プロジェクトを作ろう
4. JSXとは
5. componentとは
6. Reduxとは

22. HackMDの資料へ！

23. 1. Reactとは
2. Reactの特徴
3. プロジェクトを作ろう
4. JSXとは
5. componentとは
6. Reduxとは

24. JSXとは
• JavaScriptXMLの略で、JSの拡張言語。
• Reactを用いてHTMLを出力する際に、書き
手が直感的に書きやすいようにカスタマイズ
された言語。

25. 言葉で言っても分かりづらいので
コードを見比べてみよう！

26. ここでさらに便利な機能！
JSをJSXの中に含められる！

27. 注意事項！
・タグにclassをつけるときは
ClassNameで指定する
・returnで返せる親タグは一つ

28. JSXを使うとHTML風に書くことができるので
見やすい、書きやすい、すごい嬉しい
JSXのまとめ

29. ここまでで何か質問ありますか？
（答えられるとは..）

30. 1. Reactとは
2. Reactの特徴
3. プロジェクトを作ろう
4. JSXとは
5. componentとは
6. Reduxとは

31. Componentとは
• Reactで表示する部品のこと。
• 表示する内容、必要なデータ、処理
をひとまとめにしたもの。

32. コンポーネントの種類
•Classコンポーネント
•関数コンポーネント

33. コンポーネントの種類
•Classコンポーネント
•関数コンポーネント

34. コンポーネントの種類
•Classコンポーネント
•関数コンポーネント

35. コンポーネントを使う上で押さえておくべき概念
•コンポーネントの属性props
•コンポーネント内の値の保管庫state

36. props
•親子コンポーネント間のデータ受け渡し
•読み取り専門で変更はできない

37. 1. Userという関数コンポーネント(親)を作る
2. Userにname属性、email属性を持たせる
3. Userを描画する関数コンポーネントAppを作る
4. Appコンポーネント内で、Userコンポーネント
（子）を呼び出し、描画の際にname属性、email
属性に具体的な値を持たせる。
やること

38. state
•コンポーネント内での情報保持
•変更可能（但し、直接変更はNG）
•変更する際はコツがいる（setState）

39. やること
1. Counterクラスコンポーネントを作る
2. CounterをConstructorで初期化
3. 初期化の際にstateの設置
4. countUpというstateを更新するメソットを作る
5. renderでstateの値を表示する
6. countUpメソットを実行するボタンを作る

40. Counterを別ファイルに！
1. App.jsと同じ階層にCounter.jsを作る
2. Counter.jsにCounter Classを移動
3. Counter Classをexport
4. App.jsでCounter Classをimport

41. ここまでで何か質問ありますか？
（答えられ..）

42. 休憩(10分)

43. 1. Reactとは
2. Reactの特徴
3. プロジェクトを作ろう
4. JSXとは
5. componentとは
6. Reduxとは

44. Redux Set Up

45. Reduxとは
そのアプリケーション内で
共通で扱う値の総合管理システム

46. component
componentcomponent
componentcomponentcomponent
component
Reduxがないとき…

47. component
componentcomponent
componentcomponentcomponent
component
Reduxがあるとき！！
store

48. Reduxの仕事
1. 共通の値の保存場所storeの管理。
2. 管理というのは、
• storeの用意
• 各componentでのstoreの呼び出し
• storeの更新

49. ここから新しい単語がガンガン出てくるので
その役割と書き方をしっかり覚えてね ^_^

50. Reduxの構成要素
A. state … storeに入っている値
B. store … 共通データの保管庫
C. provider … storeを各componentに受け
渡す仕組み
D. reducer … stateを変更する仕組み
E. Action … アプリケーションで何が起きたか
を示すデータ

51. これからやること
さっき作ったcounterを
Reduxに置き換える

52. これからの流れ
1.Actionを用意
2.reducerの用意
3.storeの用意
4.stateとActionの紐付け

53. 1.Actionを用意
2.reducerの用意
3.storeの用意
4.stateとActionの紐付け

54. アプリケーションで何が起きたかを示すデータ
※実際の処理ではなくそのデータです。
正直こう言われても意味わからないと思うので
書いて覚えていきましょう！
Actionとは

55. Actionの用意手順
1. src/actionsを作る
2. actions/index.jsを作る
3. index.jsにactionを書いていく
4. countUp,coutDownのActionを書く
5. それぞれのActionをexportする

56. 1.Actionを用意
2.reducerの用意
3.storeの用意
4.stateとActionの紐付け

57. reducerとは
Action発生の際に
そのActionのtypeに応じて、
stateをどのように変化させるか
を定義する場所。

58. reducerの用意の手順
1. src/reducers/index.jsの作成
(アプリ全体のreducerを結合する場所)
2. src/reducers/Count.jsを作成
(COUNTUP/COUNTDOWNが行うstateの変更を記述)

59. 1.Actionを用意
2.reducerの用意
3.storeの用意
4.stateとActionの紐付け

60. storeとは
• 共通データの保管庫
• アプリケーションに一つしかないもの
• どのコンポーネントからも呼び出せる

61. storeの用意の手順
1. src/index.jsを編集
2. createStoreをimport
3. prodiverをimport
4. reducerをimport
5. createStoreを使って、storeを定義
6. Providerを使って、storeを各コンポー
ネントから参照できるようにする。

62. 1.Actionを用意
2.reducerの用意
3.storeの用意
4.stateとActionの紐付け

63. 紐付けの手順
connect関数を使って、state、action、
componentの紐付けを行う。
それによって、view上のイベント(countup/
down)でstateを変更し、その変更を画面上に
再描画する

64. 描画できたら、おわり！

65. 最後が雑になってすみません。
ご協力ありがとうございました。