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.3k
一口目から美味しいReactのスルメ本🦑
『エンジニアおすすめ本超LT会』で発表したスライドです。
https://engineer-park.connpass.com/event/254244/
taro
August 13, 2022
Tweet
Share
More Decks by taro
See All by taro
GraphQLをServer Componentsで使いたい
taro28
8
2.4k
Sequenceを理解する
taro28
1
200
propsのバケツリレー対策でGlobal_Stateを使うその前に
taro28
11
3.8k
状態ってなに?🙃
taro28
2
450
ReactのSuspenseを使った非同期処理のエラーハンドリング
taro28
9
6k
T-falってすごい【社内LT】
taro28
1
250
Reactは何を提供するLibraryなのか?
taro28
7
1.4k
Other Decks in Programming
See All in Programming
유연한 Composable 설계
l2hyunwoo
0
380
Activities at Cairo Library
cairolibrary720
0
1.2k
CSC307 Lecture 11
javiergs
PRO
0
240
Exploring the Gradually Lost Technical Skills in the Cloud Native Era
hwchiu
2
3.9k
Javaの現状2024夏 / Java current status 2024 summer
kishida
4
1.4k
生成AIをkintoneに連携してみた
hideg
0
230
CSC307 Lecture 13
javiergs
PRO
0
150
DMMプラットフォームにおけるTiDBの導入から運用まで
pospome
7
3k
ピグパーティにおけるMongoDB CommunityバージョンからAtlasへの移行事例
10969hotaka
0
130
From Spring Boot 2 to Spring Boot 3 with Java 22 and Jakarta EE
ivargrimstad
0
1.9k
Harnessing Large Language Models for Training-free Video Anomaly Detection
tereka114
1
1.3k
最近追加した型の紹介とその振り返り
aki19035vc
0
170
Featured
See All Featured
Building Effective Engineering Teams - LeadDev
addyosmani
47
2.2k
Robots, Beer and Maslow
schacon
PRO
157
8.1k
Art, The Web, and Tiny UX
lynnandtonic
291
20k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
Speed Design
sergeychernyshev
9
270
Large-scale JavaScript Application Architecture
addyosmani
506
110k
Automating Front-end Workflow
addyosmani
1362
200k
Optimising Largest Contentful Paint
csswizardry
18
2.6k
Adopting Sorbet at Scale
ufuk
71
8.8k
A designer walks into a library…
pauljervisheath
201
24k
Fontdeck: Realign not Redesign
paulrobertlloyd
79
5.1k
Building a Scalable Design System with Sketch
lauravandoore
458
32k
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
ありがとうございました!