はじめに

Hello, ~~Swift~~ TypeScript ラバーなみなさん。これからラバーのみなさん。
なんと（？）今日も Swift 関連ではなく、今日は React + Typescript のお話になります。

以前にこんな記事を書きました。

React でボタンの連打対策をする

その中で、
…が、create-react-appが素直に動かないじゃないか…
調べてみた結果、React 公式からcreate-react-appは外されているようですね…
ここは追々記事にする（かもしれません）。

とあり、そのフラグを回収するためにやってきました。

どんな記事？

上記の通りで気づいていなかったのですが、いつの間にか create-react-app コマンドが非推奨になっていました。
普段は継続開発をしており、新規で立ち上げることが減っていたため、取り残されておりましたわ。
少し調査をしたところ、React の導入ページには、後述のフレームワークたちの紹介が、Mozilla の React 導入ページには、後述の Vite が紹介されておりました。
いったい何を選べばええんや..となったため、調査の記録として残します。
調査と文章の生成には GitHub Copilot Chat Enterprise 版さんにご協力いただきました。

紹介されてたフレームワーク & ビルドツールたち

Next.js

公式サイト

Copilot Chat さん生成

Next.js は、React をベースにした人気の JavaScript フレームワークで、以下のような特徴があります：

  1. サーバーサイドレンダリング（SSR）: サーバー側でページをレンダリングすることで、初期表示が高速になり、SEO にも有利
  2. 静的サイト生成（SSG）: ビルド時に HTML を生成し、静的ファイルとして出力することで、レスポンスが高速になり、サーバーの負荷を軽減
  3. ファイルベースのルーティング: pagesディレクトリ内のファイル構成に基づいて自動的にルーティングが設定され、直感的で分かりやすいルーティングが可能
  4. ビルトインの CSS サポート: styled-jsxやグローバル CSS を使って、簡単にスタイリングが行える
  5. 画像の最適化: next/imageコンポーネントを使って、画像の遅延読み込みやサイズ調整、WebP 形式への変換などが自動的に行われる

Next.js を使うことで、効率的に高速で使いやすい Web アプリケーションを開発できます。

感想

なんでもできそう（雑）
静的サイトもサーバーサイドレンダリングもどちらもできるようなので、導入に困ったらこれを選んでも良さそう？

Remix

公式サイト

Copilot Chat さん生成

Remix は、React を基盤としたフルスタックフレームワークで、以下のような特徴があります：

  1. サーバーサイドレンダリング（SSR）: サーバー側でページをレンダリングすることで、初期表示が高速になり、SEO にも有利
  2. ファイルベースのルーティング: routesディレクトリ内のファイル構成に基づいて自動的にルーティングが設定され、直感的で分かりやすいルーティングが可能
  3. データフェッチ: loader関数を使ってサーバーサイドでデータを取得し、クライアントに渡すことができます。これにより、データの取得が効率的になる
  4. フォーム処理: action関数を使ってサーバーサイドでフォームのデータを処理し、クライアントに結果を返すことができる
  5. Web 標準に忠実: Fetch API や Form などの Web 標準技術を活用し、シンプルで直感的な開発が可能

Remix を使うことでReact の強力な UI 構築能力を活かしながら、サーバーサイドの処理やデータ管理をシームレスに統合できます。

感想

パッと見た感じだと Next.js とさほど変わらなそう？
仕事では静的サイトを作成することが多いので、追加で聞いてみたところ、

Remix は静的サイト生成（SSG）には対応していませんが、サーバーサイドレンダリング（SSR）を活用して高速なページロードを実現しています。Remix は、動的なコンテンツやユーザーごとのデータを効率的に処理するために設計されており、静的ページの生成は行いません。

との回答がありました。

公式サイトを見ても、

「While you were waiting for your static site to build, distributed web infra­structure got really good. Break through the static.」（日本語訳:「静的サイトの構築を待っている間に、分散 Web インフラストラクチャが非常に良くなりました。静的を打破しましょう。」）

と煽ってるので、静的サイト対応はなさそうです。

自分の用途に照らし合わせると、一旦対象から除外になります。

Gatsby

公式サイト

Copilot Chat さん生成

Gatsby は、React を基盤とした静的サイトジェネレーターで、以下のような特徴があります：

  1. 高速なパフォーマンス: Gatsby は静的サイトとしてビルドされるため、初回ロードが非常に速く、ユーザー体験が向上します。また、ページ間の遷移もスムーズ
  2. GraphQL によるデータ取得: 内部的に GraphQL を使用してデータを取得し、効率的にコンテンツを生成します。これにより、複雑なデータ構造も簡単に扱える
  3. 豊富なプラグインエ cosystem: 多数のプラグインが用意されており、SEO 対策や画像の最適化、PWA（プログレッシブウェブアプリ）対応など、さまざまな機能を簡単に追加できる
  4. 開発体験の向上: 開発者向けのツールやドキュメントが充実しており、初心者でも扱いやすい設計になっている
    また、ホットリロード機能により、コードの変更が即座に反映される
  5. ホスティングの柔軟性: 生成された静的サイトは、Netlify や Vercel、GitHub Pages など、さまざまなホスティングサービスに簡単にデプロイできる

Gatsby を使うことで、高速でスケーラブルなウェブサイトを効率的に構築できます。

感想

お、静的サイト推しだ。
Netlifyというデプロイ/ホスティングサービスと連携すれば、5 分でサイトを公開できるらしい。
ライトなサイト（LP とか）を作るにはいいのかもしれない。

Expo

公式サイト

Copilot Chat さん生成

Expo は、React Native を基盤としたフレームワークで、モバイルアプリ開発を簡単かつ効率的に行うためのツールとサービスを提供しています。以下は Expo の主な特徴です：

  1. クロスプラットフォーム対応: Expo を使うと、同じコードベースで iOS、Android、Web 向けのアプリを開発できる
  2. 迅速な開発サイクル: Expo Go アプリを使って、実機でのテストが簡単に行えます。ホットリロード機能により、コードの変更が即座に反映される
  3. 豊富なビルトイン API: カメラ、位置情報、センサーなど、さまざまなデバイス機能にアクセスできる API が標準で提供されている
  4. EAS（Expo Application Services）: ビルド、デプロイ、更新などのプロセスを自動化するためのサービスが提供されており、アプリのリリースが簡単になる
  5. オープンソース: Expo はオープンソースプロジェクトであり、コミュニティによって積極的に開発・改善が行われる

Expo を使うことで、モバイルアプリの開発がよりシンプルで効率的になります。

感想

なるほど。React Native を使ったネイティブアプリ用サービスなのね。
ネイティブアプリを作成するときにはいいのかもしれない。
ただ、私はネイティブアプリ開発者（iOS/Android 共）なので、あんまり使うことはなさそう。

Vite

公式サイト

Copilot Chat さん生成

Vite は、Evan You 氏（Vue.js の作者）によって開発された次世代のフロントエンドビルドツールで、React と組み合わせることで非常に高速な開発環境を提供します。以下は Vite の主な特徴です：

  1. 超高速な開発サーバー: Vite は、インスタントなホットモジュールリプレースメント（HMR）を提供し、コードの変更が即座に反映される
  2. 最適化されたビルド: Rollup を使用して効率的にコードをバンドルし、プロダクション向けに高度に最適化された静的アセットを生成
  3. モダンなブラウザサポート: 開発中は最新の JavaScript と CSS 機能をサポートするモダンブラウザをターゲットにし、プロダクションビルドではネイティブの ES モジュールをサポートするブラウザをターゲットにする
  4. プラグインエコシステム: Vite はプラグインを通じて拡張可能で、React、Vue、Svelte などのさまざまなフレームワークと統合できる
  5. 簡単なセットアップ: create-viteコマンドを使用して、React や他のフレームワークのプロジェクトを迅速にセットアップできる

Vite を使うことで開発速度が大幅に向上し、効率的なプロダクションビルドが可能になります。

感想

こちらは Mozilla のスタートページで紹介されていたもの。
React のページで紹介されていたものと違い、フレームワークではなく、ビルドツールになります。
たぶん、一番create-react-appコマンドに近いものだと思われる。
代替と考えたら、一番近いのではないだろうか？？
あとホットモジュールリプレースメントがあるのが熱いわ。
あと、一応サーバーサイドレンダリングも対応している模様。

まとめ

フレームワークとビルドツールがごっちゃになっていますが、代替と考えると以下のような形になりますかね？

静的サイトを構築したい場合は、以下が選択肢になってきそう。

  • Next.js
  • Gatsby
  • Vite

サーバーサイドレンダリングを行いたい場合は、以下が選択肢になってきそう。

  • Next.js
  • Remix
  • Gatsby
  • Vite

ネイティブアプリの場合

  • Expo

次回以降、Vite から深堀りしていければと思います！！

それでは、よき開発ライフを！！



ギャップロを運営しているアップフロンティア株式会社では、一緒に働いてくれる仲間を随時、募集しています。 興味がある！一緒に働いてみたい！という方は下記よりご応募お待ちしております。
採用情報をみる