【React】種類を解説！簡単なWebAppを開発する方法！

社畜

フロントエンド開発といえばReact！

でも、種類がいろいろあってどれを選らばべいいの？

そんなところから理解して実際に作ってみましょう！

【検討】Next.js, CRA, Vite の「簡単さ」比較

【結論】簡単なWebApp開発に最適なReact環境

「簡単なWebApp」を作るという観点で開発を進めるなら、圧倒的な開発体験を提供する「Vite」を選ぶのが最もおすすめです。

社畜

今回は「簡単なWebApp」という観点で評価してみました。

プロジェクトで利用を検討するなら、何を重視したいかによって変わりそうですね。

まずは簡単なViteから実際に作って、経験してみましょう！

Viteプロジェクトの作成方法

Viteは対話形式でフレームワークや言語を選択できます。

下記のプロジェクトの作成コマンドを実行

npm create vite@latest

途中で「Ok to priceed?Uy)」と聞かれたら、「y」を入力し、Enterを押下。

次に、「Select a framework:」でReactを選択し、Enterを押下。

次に、「Select a variant:」で「TypeScript」または「JavaSctript」を選択します。

今回は「TypeSctript」を選択し、Enterを押下。

※TypeScriptのほうが若干の学習コストはあるものの、将来のメンテナンス性（時間がたってもコードを理解しやすい）とバグ抑制（実行前にエラーを表示してくれる）が優れています。

次に、「Use rolldown-vite (Experimental)?:」と聞かれたら、「No」を選択しEnterを押下。

※現在の標準（Rollup） を使用するため、安定性が最も高いです。開発中に予期せぬビルドエラーや非互換性の問題に遭遇するリスクを避けられます。

次に、「Install with npm and start now?」と聞かれたら、「Yes」を選択し、Enterを押下。

※「Yes」を選択すると、プロジェクト作成の直後に必要なパッケージのインストール（npm install）と開発サーバーの起動（npm run devまたはnpm start）が自動的に行われます。手動でこれらのコマンドを順番に入力する手間が省け、すぐにコードを書き始める準備が整います。

下記の画面が表示され、青枠のリンクを開くと、作成されたWebApp（Reactのページ）が表示されます。

一度ショートカットキー「Ctrl」+「C」で中断して、開発を行いましょう。

基本的な開発とデバッグ方法

作成されたプロジェクトのフォルダをVSCodeで開いてみましょう。

画像のようなファイルが作成されていることを確認してください。

こちらから、ソースコードをダウンロードし、反映させてください。

そのあとに、プロジェクトのルートディレクトリで、下記のコマンドを実行。

npm run dev

青枠のリンクをみると、下記のような画面が表示されます。

社畜

コードの中に各要素の説明を記載しました！

Webサイトを作るうえで参考になるかと思います！

おわり

Next.js、CRA、Viteという現代的なReact開発ツールの特徴と、「簡単なWebAppを開発」を基準に比較しました。

簡単で高速な開発体験が得られるViteを選び、実際に作り方も開設しました。

実際に、ソースコードを反映されるたびに画面が変わっていく感覚が早いと感じたのではないでしょうか？

今後はこのWebAppをDockerで起動して、Webに公開していきます。

社畜

せっかく作ったアプリ！公開するまでやっちゃいましょう！