ViteでReactプロジェクトをセットアップする方法

JavaScript React

著者は、Code.orgをWrite for DOnationsプログラムの一環として寄付の対象に選びました。

イントロダクション

通常、新しいプロジェクトを作成する際には、Create React Appを使用しますが、これには140 MB以上の依存関係をインストールするのにかなりの時間がかかることがあります。 Viteは、31 MBの依存関係しか使用せず、新しいプロジェクトの開始に時間を節約します。 Viteはまた、JavaScriptファイルへのリンクにブラウザネイティブのES（ECMAScript）モジュールを使用しており、各ファイルの変更後にバンドル全体を再構築しません。これらの違いにより、Viteを使用したReact Appの作成、更新、ビルドがより迅速な体験となります。

このチュートリアルでは、Viteツールを使用して新しいReact Appの骨組みを作成します。新しいコンポーネント、CSS、画像ファイルを含む基本的なアプリを作成し、展開のための最適化されたバンドルを準備します。

DigitalOcean App Platformを使用してReactアプリケーションを簡単にデプロイし、数分でGitHubからReactをデプロイします。

前提条件

このチュートリアルに従うには、以下が必要です：

マシンにインストールされたNode.jsバージョン12.2.0以上です。Node.jsの最新バージョンは、Node.jsのインストール方法をご覧いただくことでインストールできます。
マシンにインストールされたYarnパッケージマネージャーのバージョンは1.22.0以上です。Yarnのインストール方法は、Node.js用Yarnパッケージマネージャーのインストールと使用方法のステップ1をご覧ください。
HTML、CSS、およびモダンJavaScriptに精通していることが必要です。また、Reactで使用されるモダンJSを知っていると役立ちます。
A foundational knowledge of React, which you can learn with the How To Code in React series.
A mobile phone connected to the same Wifi network as your computer so you can preview your app from mobile.

ステップ1 — Viteプロジェクトの作成

このステップでは、コマンドラインからViteツールを使用して新しいReactプロジェクトを作成します。スクリプトのインストールと実行にはyarnパッケージマネージャーを使用します。

以下のコマンドをターミナルで実行して、新しいViteプロジェクトの足場を組み立てます：

yarn create vite

このコマンドは、リモートのnpmリポジトリからVite実行可能ファイルを実行します。必要なツールを構成して、Reactローカル開発環境の足場を組み立てます。最後に、プロジェクト設定と言語タイプのためのコマンドラインメニューを開きます。

スクリプトが完了したら、プロジェクト名を入力するように求められます：

Outputyarn create v1.22.10
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...

success Installed "[email protected]" with binaries:
- create-vite
- cva
? Project name: » vite-project

プロジェクト名を入力してください（このチュートリアルではdigital-ocean-viteを例として使用します）：

digital-ocean-vite

プロジェクト名を入力した後、Viteがフレームワークを選択するように求められます：

Output? Select a framework: » - Use arrow-keys. Return to submit.
Vanilla
Vue
> React
Preact
Lit
Svelte
Others

Viteを使用して、Reactだけでなくさまざまなプロジェクトタイプの足場を組み立てることができます。現在、React、Preact、Vue、Lit、Svelte、およびvanillaJavaScriptプロジェクトがサポートされています。

キーボードの矢印キーを使用してReactを選択してください。

Reactフレームワークを選択した後、Viteは言語タイプを選択するように求めます。プロジェクトでJavaScriptまたはTypeScriptを使用できます。

矢印キーを使用してJavaScriptを選択してください：

Output? Select a variant: » - Use arrow-keys. Return to submit.
> JavaScript
TypeScript
JavaScript + SWC
TypeScript + SWC

フレームワークの設定が完了すると、プロジェクトが足場になったことが出力されます。その後、ViteはYarnを使用してプロジェクトの依存関係をインストールするように指示します：

OutputDone:
Scaffolding project in path\to\digital-ocean-vite...

Done. Now run:

cd digital-ocean-vite
yarn
yarn dev

Done in 129.89s.

指示に従ってプロジェクトフォルダに移動してください：

cd digital-ocean-vite

次に、yarnコマンドを使用してプロジェクトの依存関係をインストールします。

yarn

完了したら、依存関係のインストールにかかった時間が表示されます：

Outputsuccess Saved lockfile.
Done in 43.26s.

これで、Viteを使用して新しいReactプロジェクトを設定し、ReactとViteに必要なパッケージをインストールしました。

次に、開発サーバーを起動してアプリケーションをテストします。

ステップ2 — 開発サーバーの起動

このステップでは、開発サーバーを起動して、すべてが正常に動作しているかを確認します。

digital-ocean-viteフォルダー内から、次のコマンドを使用して開発サーバーを実行します：

yarn run dev

このコマンドは、viteコマンドの別名です。プロジェクトを開発モードで実行します。

次に、以下の出力が表示されます：

OutputVITE v4.0.4 ready in 847 ms

➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h to show help

その後、ブラウザを開いてhttp://localhost:5173/にアクセスします。デフォルトのReactプロジェクトがポート5173で実行されます：

このアプリが実行されているのを見たら、ReactとViteを正常にインストールしました。次に、モバイルからアプリをプレビューします。

ステップ3 — モバイルからアプリをプレビュー

Viteはデフォルトでは開発アプリケーションをネットワークに公開しません。このステップでは、アプリをローカルネットワークに公開して、携帯電話からプレビューできるようにします。

アプリをローカルネットワークで実行するには、まず現在のサーバーを停止する必要があります。ターミナルでCTRL+Cを使用して現在実行中の開発サーバーを終了します。

次に、以下のコマンドを使用してプロジェクトを実行します：

yarn run dev --host

--hostフラグはViteにアプリをローカルネットワークに公開するよう指示します。

このコマンドを実行すると、ターミナルに次の出力が表示されます：

OutputVITE v4.0.4 ready in 747 ms

➜ Local: http://localhost:5173/
➜ Network: http://your_ip_address:5173/
➜ press h to show help

これはあなたのコンピューターネットワークまたはルーターに固有のローカルIPアドレスです。

携帯電話のブラウザを開き、上記のIPアドレスとポートを入力して、Viteアプリのプレビューにアクセスします：

これで、開発環境でアプリを実行し、動作を確認しました。次のステップでは、Viteに付属しているボイラープレートコードを削除します。

ステップ4 — デフォルトのボイラープレートの削除

このステップでは、Viteプロジェクトのsrc/ディレクトリからボイラープレートファイルを削除し、新しいアプリケーションをセットアップできるようにします。また、現在のアプリのデフォルトのプロジェクト構造に慣れることができます。

次のコマンドを使用してsrc/ディレクトリの内容を表示します：

ls src/

出力はすべての利用可能なファイルを一覧表示します：

OutputApp.css
App.jsx
assets
index.css
main.jsx

rmコマンドを使用してファイルまたはディレクトリを削除します。次のコマンドを使用して、プロジェクトからデフォルトのファイルを削除します：

rm src/App.css
rm src/App.jsx
rm src/index.css

次のコマンドを使用してassetsディレクトリを削除します：

rm -r src/assets

-rフラグは、ディレクトリとその内容を削除する場合に必要な再帰操作です。

これらのファイルを削除した後、src/ディレクトリにはmain.jsxのみが残ります。残りのファイルを確認するには、ls src/コマンドを再度実行してください：

ls src/

今、ディレクトリにはmain.jsxファイルのみが含まれます：

Outputmain.jsx

他のすべてのファイルを削除したため、削除されたCSSファイルへの参照をmain.jsxから削除する必要があります。

次のコマンドを使用してmain.jsxを編集します：

nano src/main.jsx

強調表示された行を削除してCSSファイルへの参照を解除します：

/src/main.jsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import "./index.css"

ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<App />
</React.StrictMode>,
)

main.jsxファイルを保存して閉じます。

次のコマンドを使用して、src/ディレクトリにApp.jsxという新しいファイルを作成します：

nano src/App.jsx

App.jsxファイルに次のコードを追加します：

/src/App.jsx

export default function App() {
return (
<>
<div>Hello World</div>
</>
);
}

このコードは、Appという新しい機能的なReactコンポーネントを作成します。 export default接頭辞は、JavaScriptにこの関数をデフォルトエクスポートとしてエクスポートするように指示します。関数本体には、Hello Worldテキストが含まれています。

App.jsxファイルを保存して閉じます。

開発サーバーを再起動するには、次のコマンドを使用してください：

yarn run dev --host

今、ブラウザでhttp://localhost:3000を開いてまたはリフレッシュして、Hello World テキストが表示される空白のページにアクセスしてください。

このステップでは、Viteプロジェクトから一部のデフォルトファイルを削除しました。次に、新しいコンポーネント、CSSファイル、および画像ファイルを使用して基本的なアプリを構築します。

ステップ5 — 基本的なアプリの作成

このステップでは、基本的なアプリを作成することで、コンポーネントを作成し、CSSファイルを追加し、画像にリンクを張ります。まず、開発サーバーを終了してください。

次のサブセクションでは、Reactアプリ用の新しいコンポーネントを作成します。

コンポーネントの作成

新しいコンポーネントを作成すると、プロジェクトにモジュラリティが追加されます。すべてのコンポーネントをcomponentsディレクトリに追加して、整理された状態に保ちます。

次のコマンドを使用して、src/内にcomponentsという新しいディレクトリを作成します:

mkdir src/components

次に、src/components/ディレクトリ内にWelcome.jsxという新しいファイルを作成します:

nano src/components/Welcome.jsx

Welcome.jsxファイルに以下のコードを追加します：

/src/components/Welcome.jsx

export default function Welcome() {
return (
<>
<div className="wrapper">
<h1>Welcome To My App</h1>
<p>This is going to be the coolest app in the world!</p>
</div>
</>
);
}

上記のコードは、新しい機能性のあるReactコンポーネントを作成します。このコンポーネントの名前はWelcomeです。 export defaultのプレフィックスは、JavaScriptにこの関数をデフォルトのエクスポートとして指示します。

wrapperクラス名のdivタグを使用すると、CSSでこのセクションを対象にできます。 h1およびpタグは、画面上にメッセージを表示します。

ファイルを保存して閉じてください。

次に、App.jsxファイルでこの新しいコンポーネントを参照します。

次のコマンドでApp.jsxを開いてください：

nano src/App.jsx

App.jsxの内容を以下のコードで更新してください：

/src/App.jsx

import Welcome from "./components/Welcome"

export default function App() {
return (
<>
<Welcome />
</>
)
}

このコード行は、Welcome.jsxをアプリにインポートし、新しいコンポーネントを関数本体にリンクします。完了したら、ファイルを保存して閉じてください。

次のサブセクションでは、アプリに画像を追加します。

画像の追加

Reactで画像を追加することはアプリ開発の一般的なユースケースです。

次のコマンドでsrc/ディレクトリの下にimgという新しいディレクトリを作成します：

mkdir src/img

このコマンドでsrc/imgディレクトリに移動します：

cd src/img

この画像をsrc/imgにダウンロードします。

wgetを使用して画像をダウンロードします：

wget https://html.sammy-codes.com/images/small-profile.jpeg

画像の名前を以下のコマンドで変更します：

mv small-profile.jpeg sammy.jpeg

このコマンドは、small-profile.jpegというイメージファイルをsammy.jpegに名前を変更します。後で参照しやすくなります。

次に、このコマンドでルートディレクトリに戻ります：

cd ../../

次に、Welcome.jsxファイルを更新して、このイメージにリンクします。ファイルを開きます：

nano src/components/Welcome.jsx

以下のハイライトされた行をWelcome.jsxファイルに追加して更新します：

/src/components/Welcome.jsx

import Sammy from "../img/sammy.jpeg"

export default function Welcome() {
return (
<>
<div className="wrapper">
<h1>Welcome To My App</h1>
<p>This is going to be the coolest app in the world!</p>
<img src={Sammy} alt="Sammy Image" width={200} height={200} />
</div>
</>
)
}

最初の行では、Reactにイメージをモジュールとしてインポートします。

関数本体内の他の行では、新しい<img>タグを作成し、src属性をさっきインポートしたイメージコンポーネントにリンクします。 widthとheightプロパティは、対応するイメージ属性を200ピクセルに設定します。

Welcome.jsxファイルを保存して閉じます。

次に、プロジェクトにCSSを追加します。

CSSの追加

このサブセクションでは、アプリをスタイルするためにカスタムCSSファイルをプロジェクトに追加します。

次のコマンドを使用して、src/ディレクトリの下にcssという新しいディレクトリを作成します：

mkdir src/css

次に、src/cssにmain.cssという新しいCSSファイルを作成します：

nano src/css/main.css

次のコードをmain.cssファイルに追加します：

/src/css/main.css

body {
display: grid;
place-items: center;
background-color: #b4a7d6;
font-family: Arial, Helvetica, sans-serif;
}

.wrapper {
background-color: #fff9e6;
padding: 20px;
border-radius: 10px;
}

h1 {
color: #8873be;
}

上記のCSSでは、bodyに対してグリッド表示を設定し、アイテムを中央に配置します。フォントファミリーと背景色も設定しています。

.wrapperクラスは、Welcome.jsxファイル内のラッパーdivを選択します。このクラスのスタイルは、以下のようになります：

背景色を設定します。
20ピクセルのパディングを追加します。
角を10ピクセル丸めます。

h1セレクタは、HTML内のタグを対象とし、その色を紫色に設定します。

完了したら、main.cssファイルを保存して閉じます。

次に、新しいCSSファイルをWelcome.jsxコンポーネントから参照します。 Welcome.jsxファイルを開きます：

nano src/components/Welcome.jsx

ファイルの内容を以下の行で更新します：

/src/components/Welcome.jsx

import Sammy from "../img/sammy.jpeg"
import "../css/main.css"

export default function Welcome() {
return (
<>
<div className="wrapper">
<h1>Welcome To My App</h1>
<p>This is going to be the coolest app in the world!</p>
<img src={Sammy} alt="Sammy Image" width={200} height={200} />
</div>
</>
)
}

この行は、CSSファイルをコンポーネント内のモジュールとしてインポートします。プロジェクトフォルダーの正しいファイルパスで行を更新する必要がある場合があります。

完了したら、Welcome.jsxファイルを保存して閉じます。

次のサブセクションでは、アプリのタイトルバーを変更します。

アプリのタイトルバーの変更

デフォルトでは、ViteアプリはブラウザウィンドウのタイトルバーにテキストVite + Reactを表示します。このステップでは、それを記述的なタイトルに変更します。

ルートディレクトリ内のindex.htmlを開きます：

nano index.html

ハイライトされたテキストで<title>タグを更新します：

/index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Cool App</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>

このテキストは、デフォルトの Vite アプリ タイトルバーをカスタムのアプリタイトルに置き換えます。

index.html ファイルを保存して閉じます。

開発サーバーを再実行する必要がある場合は、次のコマンドを実行します：

yarn run dev --host

これらの変更をすべて適用した後は、アプリを表示するために http://localhost:5173 を訪問してください。新しいバージョンのアプリが表示されます。

ビルドに移る準備ができたら、開発サーバーを閉じることができます。

これで、画像が追加され、スタイルが変更され、洗練されたUIが作成されました。次の最終ステップでは、展開用に最適化されたアプリバンドルを作成します。

ステップ6 — 本番向けにビルドする

このステップでは、サーバーに展開できる最適化されたアプリバンドルを作成します。ビルドを作成するには、次のコマンドをターミナルで実行します：

yarn run build

このコマンドにより、サーバーに展開できるミニファイされたソースファイルが含まれる新しい dist フォルダーが作成されます。

次のような出力が表示されます：

Outputvite v4.0.4 building for production...
✓ 34 modules transformed.
dist/index.html 0.45 kB
dist/assets/sammy-9cb83ad5.jpeg 6.74 kB
dist/assets/index-d1c95597.css 0.19 kB │ gzip: 0.16 kB
dist/assets/index-e0751083.js 143.19 kB │ gzip: 46.04 kB
✨ Done in 1.63s.

現在、distフォルダーの内容をオンラインのサーバーにデプロイできます。 ApacheまたはNginxサーバーをお持ちの場合は、コンテンツを手動でアップロードできます。また、アプリプラットフォームを使用してビルドスクリプトを実行し、ビルドファイルを自動生成することもできます。 ReactアプリをDigitalOceanのアプリプラットフォームにデプロイするには、DigitalOcean App PlatformにReactアプリケーションをデプロイする方法のチュートリアルに従ってください。

結論

このチュートリアルでは、Viteツールを使用して新しいReactアプリを作成しました。 yarn create viteコマンドで新しいReactアプリをスキャフォールディングしました。ボイラープレートコードを削除した後、カスタムイメージ、CSSファイルの追加、タイトルバーの変更により、コンポーネントを作成しました。最後に、yarn run buildコマンドを使用して最適化されたバンドルを作成し、デプロイの準備が整いました。

Viteで構築されたReactアプリを持っているので、React.jsでコーディングする方法シリーズで他に何ができるか見て、他のReactチュートリアルを探索してください。

Source:
https://www.digitalocean.com/community/tutorials/how-to-set-up-a-react-project-with-vite