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

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

Transcript

1. 一口目から美味しい Reactのスルメ本🦑 エンジニアおすすめ本超LT会 2022.08.13(土)
2. 自己紹介 • taro( @taroro_tarotaro) • Shelfyで建設SaaSを作ってるエンジニア（あと少しで2年） • React, SpringBoot, Django • イカはやったことないです🦑（モンハンやってる）
3. はじめに
4. ※案件ではないです。 本のLTってことで、全力で本の良さ語ろうとしたら売り込みみたいになってしまったので（笑）
5. スルメ本とは？🦑
6. スルメ本とは？🦑 “最初に読んだときには、別段すばらしいと思ったり感銘を受けたりしなかったが、何度 か読み返すうちに良さに気づき、味わい深さや読み応えを感じるようになる、といった性 質の本。読めば読むほど良さがわかる本。” 引用元：実用日本語表現辞典: https://www.weblio.jp/content/スルメ本
7. スルメ本とは？🦑 “最初に読んだときには、別段すばらしいと思ったり感銘を受けたりしなかったが、何度 か読み返すうちに良さに気づき、味わい深さや読み応えを感じるようになる、といった性 質の本。読めば読むほど良さがわかる本。” 引用元：実用日本語表現辞典: https://www.weblio.jp/content/スルメ本
8. スルメ本とは？🦑 “最初に読んだときには、別段すばらしいと思ったり感銘を受けたりしなかったが、何度 か読み返すうちに良さに気づき、味わい深さや読み応えを感じるようになる、といった性 質の本。読めば読むほど良さがわかる本。” 引用元：実用日本語表現辞典: https://www.weblio.jp/content/スルメ本 →一口目から美味しいスルメ本🦑
9. Reactむずかしい…
10. Reactむずかしい… • 公式Doc読んでもいざ使おうとしたら出来ない • わかったようでわからん… • 変化激しくて書籍がない
11. Reactむずかしい… • 公式Doc読んでもいざ使おうとしたら出来ない • わかったようでわからん… • 変化激しくて書籍がない 僕がよくお世話になってる本を紹介したい🦑
12. 紹介する本
13. 『りあクト！』シリーズ くるみ割り書房: 大岡由佳さん
14. 『りあクト！』シリーズ https://oukayuka.booth.pm/
15. 『りあクト！』シリーズ https://oukayuka.booth.pm/
16. 『りあクト！』シリーズのおすすめポイント • 一口目からわかる美味しさ • 噛めば噛むほどわかる美味しさ
17. 『りあクト！』シリーズのおすすめポイント • 一口目からわかる美味しさ →これからReactやFrontendを学ぶ人にとって嬉しい👌 • 噛めば噛むほどわかる美味しさ →これから学ぶ人も経験者にとっても嬉しい👌
18. 『りあクト！』シリーズのおすすめポイント • 一口目からわかる美味しさ🦑 →これからReactやFrontendを学ぶ人にとって嬉しい👌 • 噛めば噛むほどわかる美味しさ →これから学ぶ人も経験者にとっても嬉しい👌
19. 一口目からわかる 美味しさ
20. 一口目からわかる美味しさ • TypeScript対応🦑
21. TypeScript対応 https://oukayuka.booth.pm/
22. TypeScript対応 • 現代のReact開発はTypeScriptが基本（だと思ってる） • JSXを使うってところからもTSの恩恵はでかい • しかし公式DocはJavaScript
23. TypeScript対応 • 現代のReact開発はTypeScriptが基本（だと思ってる） • JSXを使うってところからもTSの恩恵はでかい • しかし公式DocはJavaScript →全てTypeScriptで紹介されてるの本当にありがたい →なんなら序盤TypeScriptについても詳細な紹介あり
24. 一口目からわかる美味しさ • TypeScript対応 • 対話形式のわかりやすさ🦑
25. 対話形式のわかりやすさ りあクト！ TypeScriptで始めるつらくないReact開発 第3.1版【Ⅱ. React基礎編】 P12
26. 対話形式のわかりやすさ • 素朴な疑問が一緒に解決される • 「言われてみれば…！」って疑問もある • 文脈がわからず悩むことがない りあクト！ TypeScriptで始めるつらくないReact開発 第3.1版【Ⅱ. React基礎編】 P12
27. 一口目からわかる美味しさ • TypeScript対応 • 対話形式のわかりやすさ • 根本から解説されている🦑
28. 根本から解説されている https://oukayuka.booth.pm/
29. 根本から解説されている • 3冊中1冊は言語・環境編(227P) https://oukayuka.booth.pm/items/2368045
30. 根本から解説されている • 3冊中1冊は言語・環境編(227P) • 各章も本当に根本から紹介 りあクト！ TypeScriptで始めるつらくないReact開発 第3.1版【Ⅰ. 言語・環境編】P10
31. 一口目からわかる美味しさ • TypeScript対応 • 対話形式のわかりやすさ • 根本から解説されている →これからReactやFrontendを学ぶ人にとって嬉しい👌
32. 噛めば噛むほどわかる 美味しさ
33. 噛めば噛むほどわかる美味しさ 各技術の思想・歴史がめっちゃ細かく紹介されている
34. 噛めば噛むほどわかる美味しさ 各技術の思想・歴史がめっちゃ細かく紹介されている →最初読んだ時はなかなか大切さがわからない…！
35. 噛めば噛むほどわかる美味しさ 各技術の思想・歴史がめっちゃ細かく紹介されている →最初読んだ時はなかなか大切さがわからない…！ →個人的にも最近大事だなーと思っていること！
36. なぜ思想・歴史を 知るのが大切なのか？
37. なぜ思想・歴史を知るのが大切なのか？ • 技術の正しい使い方がわかる • 「技術選定の審美眼」が鍛えられる
38. なぜ思想・歴史を知るのが大切なのか？ • 技術の正しい使い方がわかる • 「技術選定の審美眼」が鍛えられる
39. 技術の正しい使い方がわかる （例）はさみの使い方
40. 技術の正しい使い方がわかる （例）はさみの使い方 『はさみのつかいかた』ポプラ社（子ども向け）
41. （例）はさみの使い方 • 持ち方 • 根本で切る • 垂直に切る 技術の正しい使い方がわかる 『はさみのつかいかた』ポプラ社（子ども向け）
42. （例）はさみの使い方 切る道具としか知らないと… 技術の正しい使い方がわかる https://mamatx.net/communication-oyako/1-3sai/scissors-practice-drill-100/
43. （例）はさみの使い方 切る道具としか知らないと… →たしかに切れなくはない… 技術の正しい使い方がわかる https://mamatx.net/communication-oyako/1-3sai/scissors-practice-drill-100/
44. （例）はさみの使い方 切る道具としか知らないと… →たしかに切れなくはない… →「難しい！使いづらい！😡😡😡」 技術の正しい使い方がわかる
45. （例）はさみの使い方 切る道具としか知らないと… →たしかに切れなくはない… →「難しい！使いづらい！😡😡😡」 →「いやいや正しい使い方を知ろうよ…！😭😭😭」 技術の正しい使い方がわかる
46. Reactの場合 →「フロントエンド開発の新しい道具」として捉える →「jQueryみたいに書けない！わかりづらい！😡😡😡」 →「宣言的だから書き方が違うの…！😭😭😭」 技術の正しい使い方がわかる
47. Reactの場合 →「フロントエンド開発の新しい道具」として捉える →「jQueryみたいに書けない！わかりづらい！😡😡😡」 →「宣言的だから書き方が違うの…！😭😭😭」 思想・背景から正しい使い方を理解するのが大切 技術の正しい使い方がわかる
48. Reactを使う上で大切なこと • 関数型プログラミング • 宣言的UIと仮想DOM • Component指向 • 単方向データフロー • プラットフォームに依存しないUI描画のエコシステム 技術の正しい使い方がわかる
49. Reactを使う上で大切なこと • 関数型プログラミング • 宣言的UIと仮想DOM • Component指向 • 単方向データフロー • プラットフォームに依存しないUI描画のエコシステム →『りあクト！』では思想から各APIの使い方がわかる 技術の正しい使い方がわかる
50. なぜ思想・歴史を知るのが大切なのか？ • 技術の正しい使い方がわかる • 「技術選定の審美眼」が鍛えられる
51. 技術選定の審美眼とは？ →t-wada(和田卓人)さんの言葉 https://speakerdeck.com/twada/understanding-the-spiral-of-te chnologies 「技術選定の審美眼」が鍛えられる
52. ※以下は自分の解釈で、自分の言葉で表現したものです。 • 技術は変化するもの • 変化は予想できない 「技術選定の審美眼」が鍛えられる
53. ※以下は自分の解釈で、自分の言葉で表現したものです。 • 技術は変化するもの • 変化は予想できない だから過去（歴史）から学び、新しい技術が登場した時にその未 来がどうなるかを予測できるようにする。 「技術選定の審美眼」が鍛えられる
54. ※以下は自分の解釈で、自分の言葉で表現したものです。 • 技術は変化するもの • 変化は予想できない だから過去（歴史）から学び、新しい技術が登場した時にその未 来がどうなるかを予測できるようにする。 「技術選定の審美眼」が鍛えられる
55. Reactを使う上で大切なこと • 関数型プログラミング • 宣言的UIと仮想DOM • Component指向 • 単方向データフロー • プラットフォームに依存しないUI描画のエコシステム →『りあクト！』ではこの思想を採用している理由がわかる 「技術選定の審美眼」が鍛えられる
56. 噛めば噛むほどわかる美味しさ 各技術の思想・歴史がめっちゃ細かく紹介されている →なぜ思想・歴史を知るのが大切なのか？ • 技術の正しい使い方がわかる • 「技術選定の審美眼」が鍛えられる
57. 噛めば噛むほどわかる美味しさ 各技術の思想・歴史がめっちゃ細かく紹介されている →なぜ思想・歴史を知るのが大切なのか？ • 技術の正しい使い方がわかる • 「技術選定の審美眼」が鍛えられる →これから学ぶ人も経験者にとっても嬉しい👌
58. まとめ
59. まとめ • 『りあクト！』シリーズは一口目から美味しいReactのスルメ本 🦑 • 一口目からわかる美味しさ ◦ TypeScript対応 ◦ 対話式のわかりやすさ ◦ 根本から解説されている • 噛めば噛むほどわかる美味しさ ◦ 各技術の思想・歴史がめっちゃ細かく紹介されている
60. おまけ(？)
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
62. ありがとうございました！