Slide 1

Slide 1 text

ありがとう、create-react-app ToKyoto.js #02 @utgwkk (うたがわきき)

Slide 2

Slide 2 text

はじめに 今日はcreate-react-appに感謝を伝えに来ました

Slide 3

Slide 3 text

自己紹介 @utgwkk (うたがわきき) 株式会社はてな Webアプリケーションエンジニア in 京都 KMC (京大マイコンクラブ) 最近はGoとReactを書いて暮らしています

Slide 4

Slide 4 text

アジェンダ create-react-appについて create-react-appの現状 create-react-appと私

Slide 5

Slide 5 text

アジェンダ create-react-appについて create-react-appの現状 create-react-appと私

Slide 6

Slide 6 text

create-react-app https://create-react-app.dev/ コマンドを1つ実行するだけで Reactを使ったアプリケーションの開発が できるようになる Webpackの設定や各種ライブラリ・ スクリプトの詰め合わせ

Slide 7

Slide 7 text

ゼロコンフィグ最高便利 何も設定を書かなくてもReactがすぐ使える (ほぼ) 何もしなくてもTypeScript/Sass/CSS Modulesが使える Webpack/Babel/Jestなどの設定を忘れて書きはじめられる 最高便利〜

Slide 8

Slide 8 text

アジェンダ create-react-appについて create-react-appの現状 create-react-appと私

Slide 9

Slide 9 text

create-react-appの現状 (最終更新日時) 2022/8/13にv5.0.1がリリースされている https://github.com/facebook/create-react-app/releases/tag/v5.0.1 React 18向けの互換性対応が主

Slide 10

Slide 10 text

create-react-appの現状 (メンテナ不足) We need regualr CRA maintainer · Issue #11180 · facebook/create-react-app

Slide 11

Slide 11 text

create-react-appの現状 (チュートリアル) 最新のReact公式チュートリアルで紹介されているフレームワークは以下 ● Next.js ● Remix ● Gatsby ● Expo そもそもフレームワークの利用が前提として書いてある ViteやParcelを使う選択肢は発展編として出てくる

Slide 12

Slide 12 text

create-react-appは役目を終えた? 「Create React Appは役割を終えました」 https://zenn.dev/nekoya/articles/dd0f0e8a2fa35f 公式チュートリアルから案内されなくなっている Reactがフレームワーク指向っぽくなっているのもあるか?

Slide 13

Slide 13 text

アジェンダ create-react-appについて create-react-appの現状 create-react-appと私

Slide 14

Slide 14 text

ゼロコンフィグという気軽さ コマンド1つ叩くだけでReactが使える フロントエンドのツールチェインのことを気にせずにReactが書ける おもちゃから本格的なアプリケーションまで作った

Slide 15

Slide 15 text

不具合調査・動作検証 挙動調査のためにサクッと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

Slide 16

Slide 16 text

作ったおもちゃの例 https://sugarheart.utgw.net/wordlenator/ 我々がWordleを出題してAIに解いてもらう Wordleの単語を当ててもらう側を無限に体験できる Wordlenatorを作った - 私が歌川です

Slide 17

Slide 17 text

作ったアプリケーションの例 https://github.com/kmc-jp/GodUploader-graphql サークル (KMC) で使っている部内イラストアップローダー React / React Router / Relay (GraphQL)

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

create-react-appの薄い本 create-react-appにお世話になったので 同人誌を書く create-react-appが使っているライブラリや 実装について知る本 https://utgwkk.booth.pm/items/4069689

Slide 22

Slide 22 text

ヤンチャの思い出 create-react-appで生成した環境でejectせずにWebpackのプラグインを試したい - 私 が歌川です 中身がWebpackだと分かっているので様々なズルを試す

Slide 23

Slide 23 text

create-react-appからツールチェーンに親しむ もともとフロントエンドツールチェーンについて何も知らなかった scriptタグでJSファイルを読み込むところからなかなか進展せず数年 新卒入社してから本格的にReactを書きはじめた create-react-appをきっかけに、多少は何が起こっているのか分かるようになったつもり フロントエンドの世界に臆せず飛び込めるようになった

Slide 24

Slide 24 text

after create-react-appと私 おそらくもうcreate-react-appを新規採用しないだろう 簡単なReactアプリケーションを作りたくなったらViteを使う create-react-appで作ったアプリケーションをViteに移行したことがある 世間的にはNext.jsが流行っている??

Slide 25

Slide 25 text

おわりに ありがとう、create-react-app フロントエンドの世界に飛び込むきっかけを作ってくれてありがとう