一口目から美味しいReactのスルメ本🦑

『エンジニアおすすめ本超LT会』で発表したスライドです。
https://engineer-park.connpass.com/event/254244/

Transcript

1. 一口目から美味しい
   Reactのスルメ本🦑
   エンジニアおすすめ本超LT会 2022.08.13(土)
   

   View Slide

2. 自己紹介
   ● taro( @taroro_tarotaro)
   ● Shelfyで建設SaaSを作ってるエンジニア（あと少しで2年）
   ● React, SpringBoot, Django
   ● イカはやったことないです🦑（モンハンやってる）
   

   View Slide

3. はじめに
   

   View Slide

4. ※案件ではないです。
   本のLTってことで、全力で本の良さ語ろうとしたら売り込みみたいになってしまったので（笑）
   

   View Slide

5. スルメ本とは？🦑
   

   View Slide

6. スルメ本とは？🦑
   “最初に読んだときには、別段すばらしいと思ったり感銘を受けたりしなかったが、何度
   か読み返すうちに良さに気づき、味わい深さや読み応えを感じるようになる、といった性
   質の本。読めば読むほど良さがわかる本。”
   引用元：実用日本語表現辞典: https://www.weblio.jp/content/スルメ本
   

   View Slide

7. スルメ本とは？🦑
   “最初に読んだときには、別段すばらしいと思ったり感銘を受けたりしなかったが、何度
   か読み返すうちに良さに気づき、味わい深さや読み応えを感じるようになる、といった性
   質の本。読めば読むほど良さがわかる本。”
   引用元：実用日本語表現辞典: https://www.weblio.jp/content/スルメ本
   

   View Slide

8. スルメ本とは？🦑
   “最初に読んだときには、別段すばらしいと思ったり感銘を受けたりしなかったが、何度
   か読み返すうちに良さに気づき、味わい深さや読み応えを感じるようになる、といった性
   質の本。読めば読むほど良さがわかる本。”
   引用元：実用日本語表現辞典: https://www.weblio.jp/content/スルメ本
   →一口目から美味しいスルメ本🦑
   

   View Slide

9. Reactむずかしい…
   

   View Slide

10. Reactむずかしい…
    ● 公式Doc読んでもいざ使おうとしたら出来ない
    ● わかったようでわからん…
    ● 変化激しくて書籍がない
    

    View Slide

11. Reactむずかしい…
    ● 公式Doc読んでもいざ使おうとしたら出来ない
    ● わかったようでわからん…
    ● 変化激しくて書籍がない
    僕がよくお世話になってる本を紹介したい🦑
    

    View Slide

12. 紹介する本
    

    View Slide

13. 『りあクト！』シリーズ
    くるみ割り書房: 大岡由佳さん
    

    View Slide

14. 『りあクト！』シリーズ
    https://oukayuka.booth.pm/
    

    View Slide

15. 『りあクト！』シリーズ
    https://oukayuka.booth.pm/
    

    View Slide

16. 『りあクト！』シリーズのおすすめポイント
    ● 一口目からわかる美味しさ
    ● 噛めば噛むほどわかる美味しさ
    

    View Slide

17. 『りあクト！』シリーズのおすすめポイント
    ● 一口目からわかる美味しさ
    →これからReactやFrontendを学ぶ人にとって嬉しい👌
    ● 噛めば噛むほどわかる美味しさ
    →これから学ぶ人も経験者にとっても嬉しい👌
    

    View Slide

18. 『りあクト！』シリーズのおすすめポイント
    ● 一口目からわかる美味しさ🦑
    →これからReactやFrontendを学ぶ人にとって嬉しい👌
    ● 噛めば噛むほどわかる美味しさ
    →これから学ぶ人も経験者にとっても嬉しい👌
    

    View Slide

19. 一口目からわかる
    美味しさ
    

    View Slide

20. 一口目からわかる美味しさ
    ● TypeScript対応🦑
    

    View Slide

21. TypeScript対応
    https://oukayuka.booth.pm/
    

    View Slide

22. TypeScript対応
    ● 現代のReact開発はTypeScriptが基本（だと思ってる）
    ● JSXを使うってところからもTSの恩恵はでかい
    ● しかし公式DocはJavaScript
    

    View Slide

23. TypeScript対応
    ● 現代のReact開発はTypeScriptが基本（だと思ってる）
    ● JSXを使うってところからもTSの恩恵はでかい
    ● しかし公式DocはJavaScript
    →全てTypeScriptで紹介されてるの本当にありがたい
    →なんなら序盤TypeScriptについても詳細な紹介あり
    

    View Slide

24. 一口目からわかる美味しさ
    ● TypeScript対応
    ● 対話形式のわかりやすさ🦑
    

    View Slide

25. 対話形式のわかりやすさ
    りあクト！ TypeScriptで始めるつらくないReact開発 第3.1版【Ⅱ. React基礎編】 P12
    

    View Slide

26. 対話形式のわかりやすさ
    ● 素朴な疑問が一緒に解決される
    ● 「言われてみれば…！」って疑問もある
    ● 文脈がわからず悩むことがない
    りあクト！ TypeScriptで始めるつらくないReact開発 第3.1版【Ⅱ. React基礎編】 P12
    

    View Slide

27. 一口目からわかる美味しさ
    ● TypeScript対応
    ● 対話形式のわかりやすさ
    ● 根本から解説されている🦑
    

    View Slide

28. 根本から解説されている
    https://oukayuka.booth.pm/
    

    View Slide

29. 根本から解説されている
    ● 3冊中1冊は言語・環境編(227P)
    https://oukayuka.booth.pm/items/2368045
    

    View Slide

30. 根本から解説されている
    ● 3冊中1冊は言語・環境編(227P)
    ● 各章も本当に根本から紹介
    りあクト！ TypeScriptで始めるつらくないReact開発 第3.1版【Ⅰ. 言語・環境編】P10
    

    View Slide

31. 一口目からわかる美味しさ
    ● TypeScript対応
    ● 対話形式のわかりやすさ
    ● 根本から解説されている
    →これからReactやFrontendを学ぶ人にとって嬉しい👌
    

    View Slide

32. 噛めば噛むほどわかる
    美味しさ
    

    View Slide

33. 噛めば噛むほどわかる美味しさ
    各技術の思想・歴史がめっちゃ細かく紹介されている
    

    View Slide

34. 噛めば噛むほどわかる美味しさ
    各技術の思想・歴史がめっちゃ細かく紹介されている
    →最初読んだ時はなかなか大切さがわからない…！
    

    View Slide

35. 噛めば噛むほどわかる美味しさ
    各技術の思想・歴史がめっちゃ細かく紹介されている
    →最初読んだ時はなかなか大切さがわからない…！
    →個人的にも最近大事だなーと思っていること！
    

    View Slide

36. なぜ思想・歴史を
    知るのが大切なのか？
    

    View Slide

37. なぜ思想・歴史を知るのが大切なのか？
    ● 技術の正しい使い方がわかる
    ● 「技術選定の審美眼」が鍛えられる
    

    View Slide

38. なぜ思想・歴史を知るのが大切なのか？
    ● 技術の正しい使い方がわかる
    ● 「技術選定の審美眼」が鍛えられる
    

    View Slide

39. 技術の正しい使い方がわかる
    （例）はさみの使い方
    

    View Slide

40. 技術の正しい使い方がわかる
    （例）はさみの使い方
    『はさみのつかいかた』ポプラ社（子ども向け）
    

    View Slide

41. （例）はさみの使い方
    ● 持ち方
    ● 根本で切る
    ● 垂直に切る
    技術の正しい使い方がわかる
    『はさみのつかいかた』ポプラ社（子ども向け）
    

    View Slide

42. （例）はさみの使い方
    切る道具としか知らないと…
    技術の正しい使い方がわかる
    https://mamatx.net/communication-oyako/1-3sai/scissors-practice-drill-100/
    

    View Slide

43. （例）はさみの使い方
    切る道具としか知らないと…
    →たしかに切れなくはない…
    技術の正しい使い方がわかる
    https://mamatx.net/communication-oyako/1-3sai/scissors-practice-drill-100/
    

    View Slide

44. （例）はさみの使い方
    切る道具としか知らないと…
    →たしかに切れなくはない…
    →「難しい！使いづらい！😡😡😡」
    技術の正しい使い方がわかる
    

    View Slide

45. （例）はさみの使い方
    切る道具としか知らないと…
    →たしかに切れなくはない…
    →「難しい！使いづらい！😡😡😡」
    →「いやいや正しい使い方を知ろうよ…！😭😭😭」
    技術の正しい使い方がわかる
    

    View Slide

46. Reactの場合
    →「フロントエンド開発の新しい道具」として捉える
    →「jQueryみたいに書けない！わかりづらい！😡😡😡」
    →「宣言的だから書き方が違うの…！😭😭😭」
    技術の正しい使い方がわかる
    

    View Slide

47. Reactの場合
    →「フロントエンド開発の新しい道具」として捉える
    →「jQueryみたいに書けない！わかりづらい！😡😡😡」
    →「宣言的だから書き方が違うの…！😭😭😭」
    思想・背景から正しい使い方を理解するのが大切
    技術の正しい使い方がわかる
    

    View Slide

48. Reactを使う上で大切なこと
    ● 関数型プログラミング
    ● 宣言的UIと仮想DOM
    ● Component指向
    ● 単方向データフロー
    ● プラットフォームに依存しないUI描画のエコシステム
    技術の正しい使い方がわかる
    

    View Slide

49. Reactを使う上で大切なこと
    ● 関数型プログラミング
    ● 宣言的UIと仮想DOM
    ● Component指向
    ● 単方向データフロー
    ● プラットフォームに依存しないUI描画のエコシステム
    →『りあクト！』では思想から各APIの使い方がわかる
    技術の正しい使い方がわかる
    

    View Slide

50. なぜ思想・歴史を知るのが大切なのか？
    ● 技術の正しい使い方がわかる
    ● 「技術選定の審美眼」が鍛えられる
    

    View Slide

51. 技術選定の審美眼とは？
    →t-wada(和田卓人)さんの言葉
    https://speakerdeck.com/twada/understanding-the-spiral-of-te
    chnologies
    「技術選定の審美眼」が鍛えられる
    

    View Slide

52. ※以下は自分の解釈で、自分の言葉で表現したものです。
    ● 技術は変化するもの
    ● 変化は予想できない
    「技術選定の審美眼」が鍛えられる
    

    View Slide

53. ※以下は自分の解釈で、自分の言葉で表現したものです。
    ● 技術は変化するもの
    ● 変化は予想できない
    だから過去（歴史）から学び、新しい技術が登場した時にその未
    来がどうなるかを予測できるようにする。
    「技術選定の審美眼」が鍛えられる
    

    View Slide

54. ※以下は自分の解釈で、自分の言葉で表現したものです。
    ● 技術は変化するもの
    ● 変化は予想できない
    だから過去（歴史）から学び、新しい技術が登場した時にその未
    来がどうなるかを予測できるようにする。
    「技術選定の審美眼」が鍛えられる
    

    View Slide

55. Reactを使う上で大切なこと
    ● 関数型プログラミング
    ● 宣言的UIと仮想DOM
    ● Component指向
    ● 単方向データフロー
    ● プラットフォームに依存しないUI描画のエコシステム
    →『りあクト！』ではこの思想を採用している理由がわかる
    「技術選定の審美眼」が鍛えられる
    

    View Slide

56. 噛めば噛むほどわかる美味しさ
    各技術の思想・歴史がめっちゃ細かく紹介されている
    →なぜ思想・歴史を知るのが大切なのか？
    ● 技術の正しい使い方がわかる
    ● 「技術選定の審美眼」が鍛えられる
    

    View Slide

57. 噛めば噛むほどわかる美味しさ
    各技術の思想・歴史がめっちゃ細かく紹介されている
    →なぜ思想・歴史を知るのが大切なのか？
    ● 技術の正しい使い方がわかる
    ● 「技術選定の審美眼」が鍛えられる
    →これから学ぶ人も経験者にとっても嬉しい👌
    

    View Slide

58. まとめ
    

    View Slide

59. まとめ
    ● 『りあクト！』シリーズは一口目から美味しいReactのスルメ本
    🦑
    ● 一口目からわかる美味しさ
    ○ TypeScript対応
    ○ 対話式のわかりやすさ
    ○ 根本から解説されている
    ● 噛めば噛むほどわかる美味しさ
    ○ 各技術の思想・歴史がめっちゃ細かく紹介されている
    

    View Slide

60. おまけ(？)
    

    View Slide

61. ● 第4版が出るらしい
    ● React18対応！🎉
    ● Vite！🎉
    ● Deno！🎉
    ● Preact！🎉
    ● Solid！🎉
    おまけ(？)
    https://twitter.com/oukayuka/status/1553957329300647936?s=20&t=lHc_sLZAJ6j9hgb8dM_3wQ
    https://twitter.com/oukayuka/status/1553955255527780352?s=20&t=lHc_sLZAJ6j9hgb8dM_3wQ
    

    View Slide

62. ありがとうございました！
    

    View Slide