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
2
7.4k
ありがとう、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
mockgenによるモック生成を高速化するツール bulkmockgenのご紹介 / Kyoto.go #43
utgwkk
1
1.6k
SPAでもデータをURLでシェアしたい / Kyoto.js 19
utgwkk
1
1.5k
prototype大全 / YAPC::Kyoto 2023
utgwkk
0
4k
なんでもPull Requestにする / Kichijoji.pm 31
utgwkk
2
6k
インプットとアウトプットのサイクルを回す暮らし / Kichijoji.pm 29
utgwkk
1
8.8k
prototypeとjust epic. と私 / YAPC::Japan::Online 2022
utgwkk
0
9.4k
GraphQLを使った共同開発の心構え 〜 フロントエンドの視点から / Hatena Engineer Seminar #18
utgwkk
0
8.8k
他言語ユーザから見たPerlのおもしろさ / YAPC::Nagoya::Tiny 2019
utgwkk
1
8.1k
VJに使えそうなコマンドたち、そしてjustifyのご紹介 / YAPC::Nagoya::Tiny 2019 LT
utgwkk
0
5.4k
Other Decks in Programming
See All in Programming
try! Swift Tokyo 初参加報告LT
hinakko2
0
220
GraphQLサーバの構成要素を整理する #ハッカー鮨 #tsukijigraphql / graphql server technology selection
izumin5210
4
840
効率化に挑戦してみたらモバイル開発が少し快適になった話
ryunakayama
0
130
2 週間で Twitter Bot を作ってみた
contour_gara
0
600
PostmanでAPIの動作確認が楽になった話
h455h1
0
170
スキーマ駆動開発による品質とスピードの両立 - 私達は何故、スキーマを書くのか
kentaroutakeda
0
170
MicrosoftのPlatform Engineeringガイドを読んで実際になにかやってみた
ymd65536
1
390
二郎系ラーメンのコールで学ぶ AST 解析
memory1994
PRO
7
1.7k
はてなにおける CSS Modules、及び CSS Modules に足りないもの / CSS Modules in Hatena, and CSS Modules missing parts
mizdra
7
940
Blue/Greenデプロイの導入による 運用フローの改善
kudoas
1
390
Code Reviews
bkuhlmann
4
890
Let's learn code review
riofujimon
2
440
Featured
See All Featured
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
227
16k
Atom: Resistance is Futile
akmur
259
25k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
121
39k
KATA
mclloyd
15
12k
What the flash - Photography Introduction
edds
64
11k
Side Projects
sachag
451
41k
Teambox: Starting and Learning
jrom
128
8.4k
Writing Fast Ruby
sferik
621
60k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
40
4.4k
The World Runs on Bad Software
bkeepers
PRO
61
6.7k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
25
2.3k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.9k
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 フロントエンドの世界に飛び込むきっかけを作ってくれてありがとう