Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ありがとう、create-react-app

utagawa kiki
January 12, 2024

 ありがとう、create-react-app

utagawa kiki

January 12, 2024
Tweet

More Decks by utagawa kiki

Other Decks in Programming

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide