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
12k
4
Share
ありがとう、create-react-app
ToKyoto.js #02
https://kyotojs.connpass.com/event/302442/
utagawa kiki
January 12, 2024
More Decks by utagawa kiki
See All by utagawa kiki
メソッドのジェネリクスでGoの夢は広がるか? / Kyoto.go #65
utgwkk
3
470
new(1.26) ← これすき / kamakura.go #8
utgwkk
0
4k
tparseでgo testの出力を見やすくする
utgwkk
2
1.7k
go test -json そして testing.T.Attr / Kyoto.go #63
utgwkk
4
2.2k
自動で //nolint を挿入する取り組み / Gopher's Gathering
utgwkk
1
2.9k
ゆるやかにgolangci-lintのルールを強くする / Kyoto.go #56
utgwkk
2
4.5k
君たちはどうコードをレビューする (される) か / 大吉祥寺.pm
utgwkk
21
17k
Dive into gomock / Go Conference 2024
utgwkk
14
8.7k
Goでリフレクションする、その前に / Kansai.go #1
utgwkk
4
3.7k
Other Decks in Programming
See All in Programming
TypeScriptだけでAIエージェントを作る フロント・エージェント・インフラのフルスタック実践
har1101
6
1.3k
密結合なバックエンドから TypeScript のコードを生成する
kemuridama
1
710
ADKを使って簡単にAIエージェントを作ってみよう
k1mu21
0
210
PHPで使える日時の表現と、その知り方 #frontend_phpcon_do
o0h
PRO
0
180
作って学ぶ、 JSX (TSX) ランタイムの基本
syumai
7
1.5k
ふつうのFeature Flag実践入門
irof
7
3.5k
[2026年度第1回ORセミナー] 計画最適化ベンチャーと競技プログラミング人材
terryu16
0
240
CLIであることを活かしたGitHub Copilot CLI活用術 / GitHub Copilot CLI Pro Tips & Tricks
nao_mk2
1
1.2k
Oxlintのカスタムルールの現況
syumai
5
990
脅威をエンジニアリングの糧にして――現場編 / Turning Threats into Engineering Fuel — Field Edition
nrslib
0
250
AI 時代のソフトウェア設計の学び方
masuda220
PRO
29
12k
プロパティの順序で型推論が壊れる!? TypeScript6.0の修正からContext-Sensitivityの仕組みを追う
bicstone
2
1.3k
Featured
See All Featured
Designing for Performance
lara
611
70k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
25
1.9k
Money Talks: Using Revenue to Get Sh*t Done
nikkihalliwell
0
240
Code Reviewing Like a Champion
maltzj
528
40k
Site-Speed That Sticks
csswizardry
13
1.2k
Reflections from 52 weeks, 52 projects
jeffersonlam
356
21k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
659
62k
Leo the Paperboy
mayatellez
7
1.8k
How to Get Subject Matter Experts Bought In and Actively Contributing to SEO & PR Initiatives.
livdayseo
0
130
職位にかかわらず全員がリーダーシップを発揮するチーム作り / Building a team where everyone can demonstrate leadership regardless of position
madoxten
62
54k
Building Flexible Design Systems
yeseniaperezcruz
330
40k
Mozcon NYC 2025: Stop Losing SEO Traffic
samtorres
1
250
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 フロントエンドの世界に飛び込むきっかけを作ってくれてありがとう