Zenn
👋

create-react-appが消えてしまったことの調査

2023/04/09に公開
React
tech

create-react-appは非推奨なのか？

React.devのプロジェクト作成の手順の記事を久しぶりに確認した所、create-react-appの形式ではない書き方が中心になっていました。

create-react-appはもう時代遅れなのか、調査した結果をまとめて行きます。

初期化方法として提示されていたもの

初期化方法として提示されていたものは以下の4つです。

  • Next.js
  • Remix
  • Gatsby
  • Expo (ネイティブアプリのみ)

Next.js

$ npx create-next-app

Reactを使ったWebサイト/アプリ構築用のフレームワーク。SSRしたりSSGしたり色々出来る。

Remix

$ npx create-remix

Reactを使ったWebサイト/アプリ構築用のフレームワーク。SSRするためのもの

Gatsby

$ npx create-gatsby

Reactを使ったWebサイト/アプリ構築用のフレームワーク。SSGするためのもの。

Expoについては省略。

以上の欄の下に

Can I use React without a framework?

というコンテンツがあり、framworkなしで行う方法については非表示コンテンツになっていました。

これが当記事を作成するにあたった経緯です。

Can I use React without a framework?

記載されている内容をDeepL翻訳して抜粋。

フレームワークなしでReactを使うことはもちろん可能です（ページの一部にReactを使う方法）。しかし、新しいアプリやサイトをReactで完全に構築するのであれば、フレームワークを使うことをお勧めします。

おすすめする理由としては以下のように書かれている。

  • 最初はルーティングやデータフェッチが必要なくても、そのためのライブラリを追加したくなる可能性が高い。

  • 新しい機能が増えるたびにJavaScriptバンドルが大きくなり、各ルートのコードを個別に分割する方法を考えなければならないかもしれない。

  • データ取得のニーズがより複雑になると、サーバーとクライアントのネットワークの滝に遭遇し、アプリが非常に遅く感じられるようになる可能性がある。

  • ネットワークが貧弱なユーザーやローエンドデバイスのユーザーが増えてくると、コンポーネントからHTMLを生成してコンテンツを早期に表示する必要が出てくるかもしれない（サーバー上か、ビルド時に）。

  • コードの一部をサーバーやビルド時に実行するように設定を変更することは、非常に厄介なことである。

つまりどういうこと?

React単体では出来ることというのは限界があり、例えばSPAを作るためにReact Routerを入れるのが必須になっているような状況なため、最初からフレームワークを入れる前提で良い、ということのようです。

どうせ後から追加するなら最初から入れておけば、という意見は半分くらい同意します。

それでもまだ納得できない、あるいはあなたのアプリにはこれらのフレームワークではうまくいかない特殊な制約があり、独自のカスタムセットアップを展開したいとお考えなら、ぜひとも挑戦してください！

ドキュメントにはここまで理由を言ってもフレームワークを使いたくないバカな人向けの捨てセリフみたいなものがあります。

ただしnpm installでreactとreact-domをインストールする使い方が書かれているのでもしかするとcreate-react-app自体が非推奨になる日が近いかもしれない、と考えています。

frameworkは本当に必要なのか？

あるプロジェクトに対してframeworkが必要なのかどうかという質問に対して、回答は「場合による」以外はありません。

CTOや技術策定するポジションの場合は厳密に調査した上で導入するかどうかを決めるべきです。

ではホビープログラマーや初心者の場合、frameworkを使った方が良いかどうかという命題について結論を出すのは難しいと考えられます。

最近の風潮にならい、とりあえずChatGPTに聞いてみました。

ChatGPTに聞いてみた React単体で始める場合のメリット・デメリット

  • メリット：

    • Reactの基本的な概念を学ぶことができます。
    • ライブラリやフレームワークに依存しないReactのスキルが身につきます。
    • 柔軟性が高く、自分の好きなようにアプリケーションを構築することができます。

  • デメリット：

    • ルーティング、サーバーサイドレンダリングなどの機能を自分で実装する必要があります。
    • データの取得や管理について自分で決める必要があります。
    • デプロイの際には、自分で設定や管理を行う必要があります。

ChatGPTに聞いてみた NextJSを最初から始めた場合のメリット・デメリット

  • メリット：

    • Reactとともによく使われるフレームワークであり、ルーティング、サーバーサイドレンダリング、データ取得などの機能が簡単に導入できます。
    • 開発の効率が高くなります。
    • サーバーサイドレンダリングによってパフォーマンスが向上し、SEOの改善が期待できます。

  • デメリット：

  • 機能が多く、初めは学習コストが高くなります。

  • NextJSに依存しがちで、React以外のライブラリやフレームワークとの組み合わせが難しい場合があります。

  • 汎用的なWebサイトに向いており、複雑なアプリケーションには向かない場合があります。

ChatGPTに聞いてみた: React単体とNextJSどちらを使うべきか

React単体で始めるか、NextJSを最初から導入するかは、アプリケーションの規模や開発の目的によって異なります。

初心者の場合はReact単体で始めることをお勧めしますが、将来的に大規模なアプリケーションを開発する場合は、NextJSの導入を検討することをお勧めします。

補足を入れる必要も無いくらいの回答だったのでそのまま掲載しました。

create-react-appなしで初心者が始めることは可能か？

公式サイトではどのように書かれているかというとCodeSandboxからzipファイルをダウンロードしてきてnpm installする、とうい形で書かれています。

TypeScriptに切り替えたりする細かいパターンは対応出来ていませんが、軽くチュートリアルを進めるには良さそうです。

  1. CodeSandboxのForkをクリック

  1. Export to ZIPでzipファイルを作成

  1. 解凍したファイルを開いてnpm install

これで始められそうです。

結論: create-react-appは非推奨なのか？

結論: 非推奨になりそう

2023年4月現在ではcreate-react-appコマンドは使うことが出来ますが、開発者サイドではこのコマンドが嫌われているようです。

このような状況であれば近い将来使えなくなる or 別のコマンドに変わる可能性が高いと考えられます。

GitHubで編集を提案

Discussion