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
860
GraphQLをServer Componentsで使いたい
taro28
8
2.9k
Sequenceを理解する
taro28
1
230
propsのバケツリレー対策でGlobal_Stateを使うその前に
taro28
11
4.4k
状態ってなに?🙃
taro28
2
510
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
Software Architecture
hschwentner
6
2.1k
AIの力でお手軽Chrome拡張機能作り
taiseiue
0
170
WebDriver BiDiとは何なのか
yotahada3
1
140
『GO』アプリ バックエンドサーバのコスト削減
mot_techtalk
0
130
AWS Lambda functions with C# 用の Dev Container Template を作ってみた件
mappie_kochi
0
240
昭和の職場からアジャイルの世界へ
kumagoro95
1
350
なぜイベント駆動が必要なのか - CQRS/ESで解く複雑系システムの課題 -
j5ik2o
7
2.5k
Domain-Driven Transformation
hschwentner
2
1.9k
Djangoアプリケーション 運用のリアル 〜問題発生から可視化、最適化への道〜 #pyconshizu
kashewnuts
1
230
Grafana Cloudとソラカメ
devoc
0
140
ASP. NET CoreにおけるWebAPIの最新情報
tomokusaba
0
360
GitHub Actions × RAGでコードレビューの検証の結果
sho_000
0
240
Featured
See All Featured
Building an army of robots
kneath
302
45k
Thoughts on Productivity
jonyablonski
69
4.5k
We Have a Design System, Now What?
morganepeng
51
7.4k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
99
18k
Code Review Best Practice
trishagee
66
17k
Become a Pro
speakerdeck
PRO
26
5.1k
Scaling GitHub
holman
459
140k
The Language of Interfaces
destraynor
156
24k
Adopting Sorbet at Scale
ufuk
74
9.2k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
Designing for Performance
lara
604
68k
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
ありがとうございました!