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
GraphQLをServer Componentsで使いたい
taro28
8
2.7k
Sequenceを理解する
taro28
1
220
propsのバケツリレー対策でGlobal_Stateを使うその前に
taro28
11
4.1k
状態ってなに?🙃
taro28
2
480
ReactのSuspenseを使った非同期処理のエラーハンドリング
taro28
9
6.4k
T-falってすごい【社内LT】
taro28
1
260
Reactは何を提供するLibraryなのか?
taro28
7
1.5k
Other Decks in Programming
See All in Programming
ECS Service Connectのこれまでのアップデートと今後のRoadmapを見てみる
tkikuc
2
240
みんなでプロポーザルを書いてみた
yuriko1211
0
190
開発効率向上のためのリファクタリングの一歩目の選択肢 ~コード分割~ / JJUG CCC 2024 Fall
ryounasso
0
420
アジャイルを支えるテストアーキテクチャ設計/Test Architecting for Agile
goyoki
9
3.1k
デプロイを任されたので、教わった通りにデプロイしたら障害になった件 ~俺のやらかしを越えてゆけ~
techouse
53
34k
Amazon Qを使ってIaCを触ろう!
maruto
0
370
PLoP 2024: The evolution of the microservice architecture pattern language
cer
PRO
0
2.4k
Webの技術スタックで マルチプラットフォームアプリ開発を可能にするElixirDesktopの紹介
thehaigo
2
1k
イベント駆動で成長して委員会
happymana
1
270
受け取る人から提供する人になるということ
little_rubyist
0
180
Jakarta EE meets AI
ivargrimstad
0
160
約9000個の自動テストの 時間を50分->10分に短縮 Flakyテストを1%以下に抑えた話
hatsu38
24
12k
Featured
See All Featured
Optimising Largest Contentful Paint
csswizardry
33
2.9k
Mobile First: as difficult as doing things right
swwweet
222
8.9k
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.4k
Code Review Best Practice
trishagee
64
17k
Measuring & Analyzing Core Web Vitals
bluesmoon
2
75
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
How GitHub (no longer) Works
holman
310
140k
Imperfection Machines: The Place of Print at Facebook
scottboms
264
13k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
15
2k
For a Future-Friendly Web
brad_frost
175
9.4k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
505
140k
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
ありがとうございました!