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.5k
一口目から美味しいReactのスルメ本🦑
『エンジニアおすすめ本超LT会』で発表したスライドです。
https://engineer-park.connpass.com/event/254244/
taro
August 13, 2022
Tweet
Share
More Decks by taro
See All by taro
VitestのIn-Source Testingが便利
taro28
9
2.5k
ローコードサービスの進化のためのモノレポ移行
taro28
1
380
ローコードSaaSのUXを向上させるためのTypeScript
taro28
2
950
GraphQLをServer Componentsで使いたい
taro28
8
3k
Sequenceを理解する
taro28
1
250
propsのバケツリレー対策でGlobal_Stateを使うその前に
taro28
11
4.6k
状態ってなに?🙃
taro28
2
540
ReactのSuspenseを使った非同期処理のエラーハンドリング
taro28
9
7k
T-falってすごい【社内LT】
taro28
1
300
Other Decks in Programming
See All in Programming
Rubyの!メソッドをちゃんと理解する
alstrocrack
1
310
Flutterでllama.cppをつかってローカルLLMを試してみた
sakuraidayo
0
150
Bedrock × Confluenceで簡単(?)社内RAG
iharuoru
1
130
私のRubyKaigi 2025 Kaigi Effect / My RubyKaigi 2025 Kaigi Effect
chobishiba
1
130
Cursorを活用したAIプログラミングについて 入門
rect
0
220
ドメイン駆動設計とXPで支える子どもの未来 / Domain-Driven Design and XP Supporting Children's Future
nrslib
0
300
20250429 - CNTUG Meetup #67 / DevOps Taiwan Meetup #69 - Deep Dive into Tetragon: Building Runtime Security and Observability with eBPF
tico88612
0
180
LRパーサーはいいぞ
ydah
7
1.4k
2025年のz-index設計を考える
tak_dcxi
12
4.6k
note の Elasticsearch 更新系を支える技術
tchov
9
3.6k
fieldalignmentから見るGoの構造体
kuro_kurorrr
0
140
Vibe Coding の話をしよう
schroneko
14
3.8k
Featured
See All Featured
Testing 201, or: Great Expectations
jmmastey
42
7.5k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.8k
Navigating Team Friction
lara
185
15k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.2k
How STYLIGHT went responsive
nonsquared
100
5.5k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
24
2.7k
The Pragmatic Product Professional
lauravandoore
33
6.6k
Visualization
eitanlees
146
16k
Rebuilding a faster, lazier Slack
samanthasiow
81
9k
The Cost Of JavaScript in 2023
addyosmani
49
7.8k
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
ありがとうございました!