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
ありがとう、create-react-app
Search
utagawa kiki
January 12, 2024
Programming
4
11k
ありがとう、create-react-app
ToKyoto.js #02
https://kyotojs.connpass.com/event/302442/
utagawa kiki
January 12, 2024
Tweet
Share
More Decks by utagawa kiki
See All by utagawa kiki
自動で //nolint を挿入する取り組み / Gopher's Gathering
utgwkk
1
260
ゆるやかにgolangci-lintのルールを強くする / Kyoto.go #56
utgwkk
2
1.3k
君たちはどうコードをレビューする (される) か / 大吉祥寺.pm
utgwkk
21
14k
Dive into gomock / Go Conference 2024
utgwkk
14
6.2k
Goでリフレクションする、その前に / Kansai.go #1
utgwkk
5
2.7k
Go製Webアプリケーションのエラーとの向き合い方大全、あるいはやっぱりスタックトレース欲しいやん / Kyoto.go #50
utgwkk
7
3.9k
mockgenによるモック生成を高速化するツール bulkmockgenのご紹介 / Kyoto.go #43
utgwkk
2
2.3k
SPAでもデータをURLでシェアしたい / Kyoto.js 19
utgwkk
2
1.9k
prototype大全 / YAPC::Kyoto 2023
utgwkk
1
4.4k
Other Decks in Programming
See All in Programming
Writing documentation can be fun with plugin system
okuramasafumi
0
120
バックエンドのためのアプリ内課金入門 (サブスク編)
qnighy
8
1.8k
CloudNativePGがCNCF Sandboxプロジェクトになったぞ! 〜CloudNativePGの仕組みの紹介〜
nnaka2992
0
230
一休.com のログイン体験を支える技術 〜Web Components x Vue.js 活用事例と最適化について〜
atsumim
0
440
お前もAI鬼にならないか?👹Bolt & Cursor & Supabase & Vercelで人間をやめるぞ、ジョジョー!👺
taishiyade
6
4k
Pulsar2 を雰囲気で使ってみよう
anoken
0
240
『GO』アプリ データ基盤のログ収集システムコスト削減
mot_techtalk
0
120
JavaScriptツール群「UnJS」を5分で一気に駆け巡る!
k1tikurisu
9
1.8k
color-scheme: light dark; を完全に理解する
uhyo
3
270
自分ひとりから始められる生産性向上の取り組み #でぃーぷらすオオサカ
irof
8
2.8k
ARA Ansible for the teams
kksat
0
150
ソフトウェアエンジニアの成長
masuda220
PRO
10
1.1k
Featured
See All Featured
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.6k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
4 Signs Your Business is Dying
shpigford
182
22k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
How GitHub (no longer) Works
holman
314
140k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
Statistics for Hackers
jakevdp
797
220k
Producing Creativity
orderedlist
PRO
344
39k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
How to train your dragon (web standard)
notwaldorf
91
5.8k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
Transcript
ありがとう、create-react-app ToKyoto.js #02 @utgwkk (うたがわきき)
はじめに 今日はcreate-react-appに感謝を伝えに来ました
自己紹介 @utgwkk (うたがわきき) 株式会社はてな Webアプリケーションエンジニア in 京都 KMC (京大マイコンクラブ) 最近はGoとReactを書いて暮らしています
アジェンダ create-react-appについて create-react-appの現状 create-react-appと私
アジェンダ create-react-appについて create-react-appの現状 create-react-appと私
create-react-app https://create-react-app.dev/ コマンドを1つ実行するだけで Reactを使ったアプリケーションの開発が できるようになる Webpackの設定や各種ライブラリ・ スクリプトの詰め合わせ
ゼロコンフィグ最高便利 何も設定を書かなくてもReactがすぐ使える (ほぼ) 何もしなくてもTypeScript/Sass/CSS Modulesが使える Webpack/Babel/Jestなどの設定を忘れて書きはじめられる 最高便利〜
アジェンダ create-react-appについて create-react-appの現状 create-react-appと私
create-react-appの現状 (最終更新日時) 2022/8/13にv5.0.1がリリースされている https://github.com/facebook/create-react-app/releases/tag/v5.0.1 React 18向けの互換性対応が主
create-react-appの現状 (メンテナ不足) We need regualr CRA maintainer · Issue #11180
· facebook/create-react-app
create-react-appの現状 (チュートリアル) 最新のReact公式チュートリアルで紹介されているフレームワークは以下 • Next.js • Remix • Gatsby •
Expo そもそもフレームワークの利用が前提として書いてある ViteやParcelを使う選択肢は発展編として出てくる
create-react-appは役目を終えた? 「Create React Appは役割を終えました」 https://zenn.dev/nekoya/articles/dd0f0e8a2fa35f 公式チュートリアルから案内されなくなっている Reactがフレームワーク指向っぽくなっているのもあるか?
アジェンダ create-react-appについて create-react-appの現状 create-react-appと私
ゼロコンフィグという気軽さ コマンド1つ叩くだけでReactが使える フロントエンドのツールチェインのことを気にせずにReactが書ける おもちゃから本格的なアプリケーションまで作った
不具合調査・動作検証 挙動調査のためにサクッとcreate-react-appで書きはじめる https://github.com/utgwkk/20210719-sketch-react-modal-vs-mouseevent https://github.com/utgwkk/20210710-sketch-use-measure-and-animation https://github.com/utgwkk/20221117-sketch-react-modal https://github.com/utgwkk/20221206-sketch-cra-env-var-name
作ったおもちゃの例 https://sugarheart.utgw.net/wordlenator/ 我々がWordleを出題してAIに解いてもらう Wordleの単語を当ててもらう側を無限に体験できる Wordlenatorを作った - 私が歌川です
作ったアプリケーションの例 https://github.com/kmc-jp/GodUploader-graphql サークル (KMC) で使っている部内イラストアップローダー React / React Router /
Relay (GraphQL)
None
None
None
create-react-appの薄い本 create-react-appにお世話になったので 同人誌を書く create-react-appが使っているライブラリや 実装について知る本 https://utgwkk.booth.pm/items/4069689
ヤンチャの思い出 create-react-appで生成した環境でejectせずにWebpackのプラグインを試したい - 私 が歌川です 中身がWebpackだと分かっているので様々なズルを試す
create-react-appからツールチェーンに親しむ もともとフロントエンドツールチェーンについて何も知らなかった scriptタグでJSファイルを読み込むところからなかなか進展せず数年 新卒入社してから本格的にReactを書きはじめた create-react-appをきっかけに、多少は何が起こっているのか分かるようになったつもり フロントエンドの世界に臆せず飛び込めるようになった
after create-react-appと私 おそらくもうcreate-react-appを新規採用しないだろう 簡単なReactアプリケーションを作りたくなったらViteを使う create-react-appで作ったアプリケーションをViteに移行したことがある 世間的にはNext.jsが流行っている??
おわりに ありがとう、create-react-app フロントエンドの世界に飛び込むきっかけを作ってくれてありがとう