世界

CRAを捨てる：最初のReactアプリにとってそれが何を意味するか| siam-vit | 2025年7月

〜Pranav Hari少し前まで、Reactアプリのセットアップは可能な限り簡単でした。開発者はただ実行できます npx create-react-app そして、これ以上心配することなくアプリの構築を開始します。何年もの間、CRAは無数の開発者にとってデフォルトのスターターキットでした。しかし、CRAが出て行ったように、私はReactの世界に入りました。私が最初のReactアプリを構築する準備ができていた頃には、CRAや現代の代替手段がすでに彼らの代わりになったことを推奨していませんでした。このシフトは高速でしたが、顕著でした。 ReactチームによるGithubからのこの引用は、単に変化の必要性を説明しています - 「Reactエコシステムの最新の進歩でCRAを最新の状態に保つ帯域幅はありません。」Create React App（CRA）は、2016年にReactチームによって導入され、初期の構成を必要としない初心者向けのReactセットアップをユーザーに提供しました。 Webpack、Babel、その他のビルドツールをパッケージに提供し、セットアップをすべての人にとって簡単にし、長年にわたって広く採用されている公式のReactスターターパックとして受け入れられました。 CRAは、ホットリロード、賢明なデフォルト、統一されたプロジェクト構造も提供しました。しかし、JavaScriptエコシステムが進化するにつれて、開発者の期待が上昇しました。最新のアプリは、より速いビルド、より良いスケーラビリティ、およびサーバーサイドレンダリング（SSR）、静的サイト生成（SSG）、粒状コード分割などのより高度な機能を要求しました。更新が速度が低下し、時代遅れのアーキテクチャが開始されたため、CRAは遅れ始め、2025年2月14日にその非難につながり始めました。CRAのアーキテクチャは、今日のワークフロー向けには設計されておらず、ネイティブESモジュールと最新のビルド最適化のサポートがありません。画像の最適化、ミドルウェア、組み込みのデータフェッチング戦略などの機能が欠落していました。これにより、特にフロントエンドの複雑さとパフォーマンスの需要が高まっているため、CRAは生産グレードのアプリケーションにますます不適当になりました。対照的に、Vite、Next.JS、Parcelなどの近代的な代替品は、パフォーマンス、柔軟性、開発者エクスペリエンスが向上しています。 Viteは、Lightning Fast StartupとHot Module Reloading（HMR）を提供し、最新のシングルページアプリに好ましい選択肢となっています。 Next.jsはさらに物事を進め、サーバーサイドレンダリング（SSR）を備えたフルスタックフレームワークを提供し、SEOに焦点を当てたスケーラブルなアプリケーションに最適です。 Parcelは、CRAと同様のゼロコンフィギュアエクスペリエンスを提供しますが、最新のアーキテクチャ、より速いビルド、自動依存関係の処理を提供します。CRAのZero Configurationアプローチは、初心者が対応できるようになりましたが、カスタマイズが必要なときに複雑さを隠しました。 Viteはほぼ同じですが、より透明です。 Next.jsは、初心者にとって圧倒的な機能を紹介します。 ViteとNext.jsは、排出または遅いビルド時間の痛みなしに、最新の大規模なアプリケーションに必要なツールと柔軟性を提供します。これらの最新のツールの構成にはアクセス可能で保守可能です。いくつかは、厳格なコンプライアンスニーズを持つレガシープロジェクトまたは環境のCRAをまだ評価していますが、新しいアプリの制限を認めています。 Reactエコシステムは、さまざまなプロジェクトのニーズに合わせた特殊なツールに向かっています。 Reactコミュニティは、開発者エクスペリエンスとエンドユーザーパフォーマンスに重点を置いて、よりモジュール式、柔軟な、パフォーマンス指向の考え方を採用しています。これはTwitterからの引用で描かれています - 「Create Reactアプリはその目的を果たしましたが、Webは先に進みました。ViteやNext.JSなどの最新のツールは、今日のニーズに合ったものです。」CRAが写真から外れているため、React Ecosystemは新しいフェーズに入り、開発者はすべてに適合し、さらに犠牲になるツールではなく、スピードとパワーを追い出します。CRAからのシフトに加えて、学習曲線にも変更があります。初心者は単一のコマンドを実行して1日と呼ぶことはできません。彼らは、アプリを一枚ずつセットアップする必要があり、それぞれの部分が何に使用されているかを理解するのに役立ちます。これは、人々が自分の境界を押し広げ、可能なことを実験することにより、イノベーションの成長をもたらしています。明らかなことは、Reactの未来が単一のツールによって形作られないことです。実際の問題を解決する何千人もの開発者によって形作られます。 Reactは、開発者のコミュニティによって構築され、進化して変化します。それで、次は何ですか？ CRAが写真から外れていると、開発者はビルドセットアップをより多く実践することが期待されています。最新のツールは、高速ホットモジュールの交換とネイティブESモジュールサポートを提供します。特定のツールは、ハイブリッドレンダリング機能、強力なルーティング、画像の最適化を提供します。複雑な構成を必要とせずに、最新のバンドルを簡素化します。フレームワークは、エッジレンダリング、増分静的再生、よりスマートなバンドルテクニックをサポートするために進化し続けます。これらのツールを手配して適応させることを学ぶことは、まもなく基本的なスキルになります。開発者にとって、これは新しいツールと概念を探求し、快適にするのに最適な時期です。ツールは変更されていますが、目標は高速で保守可能でユーザーフレンドリーなアプリケーションを提供することです。CRAは、Reactのライフサイクルの特定の時代の強力なツールでした。現在、VitaとNext.jsは、新しい多様なフロンティアを表しています。 CRAからの移行は、技術的な必要性と文化的進化の両方です。時代の終わりのように感じるかもしれませんが、それは新しい始まりでもあります。あらゆるスキルレベルのReact開発者にとって、パフォーマンスの向上、柔軟性の向上、より活気のあるエコシステムを約束するもの。ズーム画像が表示されます著者 - プラナフ・ハリ #CRAを捨てる最初のReactアプリにとってそれが何を意味するか #siamvit #2025年7月