Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
一口目から美味しいReactのスルメ本🦑
Search
taro
August 13, 2022
Programming
3
1.4k
一口目から美味しいReactのスルメ本🦑
『エンジニアおすすめ本超LT会』で発表したスライドです。
https://engineer-park.connpass.com/event/254244/
taro
August 13, 2022
Tweet
Share
More Decks by taro
See All by taro
ローコードSaaSのUXを向上させるためのTypeScript
taro28
2
870
GraphQLをServer Componentsで使いたい
taro28
8
2.9k
Sequenceを理解する
taro28
1
230
propsのバケツリレー対策でGlobal_Stateを使うその前に
taro28
11
4.4k
状態ってなに?🙃
taro28
2
520
ReactのSuspenseを使った非同期処理のエラーハンドリング
taro28
9
6.8k
T-falってすごい【社内LT】
taro28
1
280
Reactは何を提供するLibraryなのか?
taro28
7
1.5k
Other Decks in Programming
See All in Programming
『GO』アプリ バックエンドサーバのコスト削減
mot_techtalk
0
150
チームリードになって変わったこと
isaka1022
0
210
Djangoアプリケーション 運用のリアル 〜問題発生から可視化、最適化への道〜 #pyconshizu
kashewnuts
1
250
pylint custom ruleで始めるレビュー自動化
shogoujiie
0
120
データベースのオペレーターであるCloudNativePGがStatefulSetを使わない理由に迫る
nnaka2992
0
180
Kubernetes History Inspector(KHI)を触ってみた
bells17
0
230
1年目の私に伝えたい!テストコードを怖がらなくなるためのヒント/Tips for not being afraid of test code
push_gawa
1
240
Software Architecture
hschwentner
6
2.1k
AWS Organizations で実現する、 マルチ AWS アカウントのルートユーザー管理からの脱却
atpons
0
150
お前もAI鬼にならないか?👹Bolt & Cursor & Supabase & Vercelで人間をやめるぞ、ジョジョー!👺
taishiyade
7
4.1k
Amazon ECS とマイクロサービスから考えるシステム構成
hiyanger
2
570
Honoのおもしろいミドルウェアをみてみよう
yusukebe
1
210
Featured
See All Featured
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
A Philosophy of Restraint
colly
203
16k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
4
350
KATA
mclloyd
29
14k
Producing Creativity
orderedlist
PRO
344
39k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
Into the Great Unknown - MozCon
thekraken
35
1.6k
Agile that works and the tools we love
rasmusluckow
328
21k
Fireside Chat
paigeccino
34
3.2k
Embracing the Ebb and Flow
colly
84
4.6k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Transcript
一口目から美味しい Reactのスルメ本🦑 エンジニアおすすめ本超LT会 2022.08.13(土)
自己紹介 • taro( @taroro_tarotaro) • Shelfyで建設SaaSを作ってるエンジニア(あと少しで2年) • React, SpringBoot, Django
• イカはやったことないです🦑(モンハンやってる)
はじめに
※案件ではないです。 本のLTってことで、全力で本の良さ語ろうとしたら売り込みみたいになってしまったので(笑)
スルメ本とは?🦑
スルメ本とは?🦑 “最初に読んだときには、別段すばらしいと思ったり感銘を受けたりしなかったが、何度 か読み返すうちに良さに気づき、味わい深さや読み応えを感じるようになる、といった性 質の本。読めば読むほど良さがわかる本。” 引用元:実用日本語表現辞典: https://www.weblio.jp/content/スルメ本
スルメ本とは?🦑 “最初に読んだときには、別段すばらしいと思ったり感銘を受けたりしなかったが、何度 か読み返すうちに良さに気づき、味わい深さや読み応えを感じるようになる、といった性 質の本。読めば読むほど良さがわかる本。” 引用元:実用日本語表現辞典: https://www.weblio.jp/content/スルメ本
スルメ本とは?🦑 “最初に読んだときには、別段すばらしいと思ったり感銘を受けたりしなかったが、何度 か読み返すうちに良さに気づき、味わい深さや読み応えを感じるようになる、といった性 質の本。読めば読むほど良さがわかる本。” 引用元:実用日本語表現辞典: https://www.weblio.jp/content/スルメ本 →一口目から美味しいスルメ本🦑
Reactむずかしい…
Reactむずかしい… • 公式Doc読んでもいざ使おうとしたら出来ない • わかったようでわからん… • 変化激しくて書籍がない
Reactむずかしい… • 公式Doc読んでもいざ使おうとしたら出来ない • わかったようでわからん… • 変化激しくて書籍がない 僕がよくお世話になってる本を紹介したい🦑
紹介する本
『りあクト!』シリーズ くるみ割り書房: 大岡由佳さん
『りあクト!』シリーズ https://oukayuka.booth.pm/
『りあクト!』シリーズ https://oukayuka.booth.pm/
『りあクト!』シリーズのおすすめポイント • 一口目からわかる美味しさ • 噛めば噛むほどわかる美味しさ
『りあクト!』シリーズのおすすめポイント • 一口目からわかる美味しさ →これからReactやFrontendを学ぶ人にとって嬉しい👌 • 噛めば噛むほどわかる美味しさ →これから学ぶ人も経験者にとっても嬉しい👌
『りあクト!』シリーズのおすすめポイント • 一口目からわかる美味しさ🦑 →これからReactやFrontendを学ぶ人にとって嬉しい👌 • 噛めば噛むほどわかる美味しさ →これから学ぶ人も経験者にとっても嬉しい👌
一口目からわかる 美味しさ
一口目からわかる美味しさ • TypeScript対応🦑
TypeScript対応 https://oukayuka.booth.pm/
TypeScript対応 • 現代のReact開発はTypeScriptが基本(だと思ってる) • JSXを使うってところからもTSの恩恵はでかい • しかし公式DocはJavaScript
TypeScript対応 • 現代のReact開発はTypeScriptが基本(だと思ってる) • JSXを使うってところからもTSの恩恵はでかい • しかし公式DocはJavaScript →全てTypeScriptで紹介されてるの本当にありがたい →なんなら序盤TypeScriptについても詳細な紹介あり
一口目からわかる美味しさ • TypeScript対応 • 対話形式のわかりやすさ🦑
対話形式のわかりやすさ りあクト! TypeScriptで始めるつらくないReact開発 第3.1版【Ⅱ. React基礎編】 P12
対話形式のわかりやすさ • 素朴な疑問が一緒に解決される • 「言われてみれば…!」って疑問もある • 文脈がわからず悩むことがない りあクト! TypeScriptで始めるつらくないReact開発 第3.1版【Ⅱ.
React基礎編】 P12
一口目からわかる美味しさ • TypeScript対応 • 対話形式のわかりやすさ • 根本から解説されている🦑
根本から解説されている https://oukayuka.booth.pm/
根本から解説されている • 3冊中1冊は言語・環境編(227P) https://oukayuka.booth.pm/items/2368045
根本から解説されている • 3冊中1冊は言語・環境編(227P) • 各章も本当に根本から紹介 りあクト! TypeScriptで始めるつらくないReact開発 第3.1版【Ⅰ. 言語・環境編】P10
一口目からわかる美味しさ • TypeScript対応 • 対話形式のわかりやすさ • 根本から解説されている →これからReactやFrontendを学ぶ人にとって嬉しい👌
噛めば噛むほどわかる 美味しさ
噛めば噛むほどわかる美味しさ 各技術の思想・歴史がめっちゃ細かく紹介されている
噛めば噛むほどわかる美味しさ 各技術の思想・歴史がめっちゃ細かく紹介されている →最初読んだ時はなかなか大切さがわからない…!
噛めば噛むほどわかる美味しさ 各技術の思想・歴史がめっちゃ細かく紹介されている →最初読んだ時はなかなか大切さがわからない…! →個人的にも最近大事だなーと思っていること!
なぜ思想・歴史を 知るのが大切なのか?
なぜ思想・歴史を知るのが大切なのか? • 技術の正しい使い方がわかる • 「技術選定の審美眼」が鍛えられる
なぜ思想・歴史を知るのが大切なのか? • 技術の正しい使い方がわかる • 「技術選定の審美眼」が鍛えられる
技術の正しい使い方がわかる (例)はさみの使い方
技術の正しい使い方がわかる (例)はさみの使い方 『はさみのつかいかた』ポプラ社(子ども向け)
(例)はさみの使い方 • 持ち方 • 根本で切る • 垂直に切る 技術の正しい使い方がわかる 『はさみのつかいかた』ポプラ社(子ども向け)
(例)はさみの使い方 切る道具としか知らないと… 技術の正しい使い方がわかる https://mamatx.net/communication-oyako/1-3sai/scissors-practice-drill-100/
(例)はさみの使い方 切る道具としか知らないと… →たしかに切れなくはない… 技術の正しい使い方がわかる https://mamatx.net/communication-oyako/1-3sai/scissors-practice-drill-100/
(例)はさみの使い方 切る道具としか知らないと… →たしかに切れなくはない… →「難しい!使いづらい!😡😡😡」 技術の正しい使い方がわかる
(例)はさみの使い方 切る道具としか知らないと… →たしかに切れなくはない… →「難しい!使いづらい!😡😡😡」 →「いやいや正しい使い方を知ろうよ…!😭😭😭」 技術の正しい使い方がわかる
Reactの場合 →「フロントエンド開発の新しい道具」として捉える →「jQueryみたいに書けない!わかりづらい!😡😡😡」 →「宣言的だから書き方が違うの…!😭😭😭」 技術の正しい使い方がわかる
Reactの場合 →「フロントエンド開発の新しい道具」として捉える →「jQueryみたいに書けない!わかりづらい!😡😡😡」 →「宣言的だから書き方が違うの…!😭😭😭」 思想・背景から正しい使い方を理解するのが大切 技術の正しい使い方がわかる
Reactを使う上で大切なこと • 関数型プログラミング • 宣言的UIと仮想DOM • Component指向 • 単方向データフロー •
プラットフォームに依存しないUI描画のエコシステム 技術の正しい使い方がわかる
Reactを使う上で大切なこと • 関数型プログラミング • 宣言的UIと仮想DOM • Component指向 • 単方向データフロー •
プラットフォームに依存しないUI描画のエコシステム →『りあクト!』では思想から各APIの使い方がわかる 技術の正しい使い方がわかる
なぜ思想・歴史を知るのが大切なのか? • 技術の正しい使い方がわかる • 「技術選定の審美眼」が鍛えられる
技術選定の審美眼とは? →t-wada(和田卓人)さんの言葉 https://speakerdeck.com/twada/understanding-the-spiral-of-te chnologies 「技術選定の審美眼」が鍛えられる
※以下は自分の解釈で、自分の言葉で表現したものです。 • 技術は変化するもの • 変化は予想できない 「技術選定の審美眼」が鍛えられる
※以下は自分の解釈で、自分の言葉で表現したものです。 • 技術は変化するもの • 変化は予想できない だから過去(歴史)から学び、新しい技術が登場した時にその未 来がどうなるかを予測できるようにする。 「技術選定の審美眼」が鍛えられる
※以下は自分の解釈で、自分の言葉で表現したものです。 • 技術は変化するもの • 変化は予想できない だから過去(歴史)から学び、新しい技術が登場した時にその未 来がどうなるかを予測できるようにする。 「技術選定の審美眼」が鍛えられる
Reactを使う上で大切なこと • 関数型プログラミング • 宣言的UIと仮想DOM • Component指向 • 単方向データフロー •
プラットフォームに依存しないUI描画のエコシステム →『りあクト!』ではこの思想を採用している理由がわかる 「技術選定の審美眼」が鍛えられる
噛めば噛むほどわかる美味しさ 各技術の思想・歴史がめっちゃ細かく紹介されている →なぜ思想・歴史を知るのが大切なのか? • 技術の正しい使い方がわかる • 「技術選定の審美眼」が鍛えられる
噛めば噛むほどわかる美味しさ 各技術の思想・歴史がめっちゃ細かく紹介されている →なぜ思想・歴史を知るのが大切なのか? • 技術の正しい使い方がわかる • 「技術選定の審美眼」が鍛えられる →これから学ぶ人も経験者にとっても嬉しい👌
まとめ
まとめ • 『りあクト!』シリーズは一口目から美味しいReactのスルメ本 🦑 • 一口目からわかる美味しさ ◦ TypeScript対応 ◦ 対話式のわかりやすさ
◦ 根本から解説されている • 噛めば噛むほどわかる美味しさ ◦ 各技術の思想・歴史がめっちゃ細かく紹介されている
おまけ(?)
• 第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
ありがとうございました!