Viteを使ったReactプロジェクトのセットアップ方法

1年 ago
陽, 向宇
5 minutes

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

はじめに

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

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

Info

デジタルオーシャンのアプリプラットフォームを使用して、Reactアプリケーションのデプロイを簡単に行いましょう。数分でGitHubからReactを直接デプロイします。

前提条件

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

  • Node.js version 12.2.0 or higher installed on your machine. You can install the latest version of Node.js with our tutorial on How To Install Node.js.
  • Yarn package manager version 1.22.0 or higher installed on your machine. You can install Install Yarn with Step 1 in How To Install and Use the Yarn Package Manager for Node.js.
  • Familiarity with HTML, CSS, and modern JavaScript. It also helps to know modern JS used in React.
  • 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プロジェクトを作成するために、ターミナルで次のコマンドを実行してください。

  1. yarn create vite

 

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

スクリプトが終了すると、プロジェクト名の入力を求められます。

Output

yarn create v1.22.10 [1/4] Resolving packages… [2/4] Fetching packages… [3/4] Linking dependencies… [4/4] Building fresh packages… success Installed “create-vite@2.9.0” with binaries: – create-vite – cva ? Project name: » vite-project

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

  1. 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、およびバニラのJavaScriptプロジェクトをサポートしています。

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

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

JavaScriptを選択するために矢印キーを使用してください。

Output

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

フレームワークをセットアップした後、プロジェクトの設計が完了したことを出力で確認できます。その後、ViteはYarnを使用して依存関係をインストールするよう指示します。

Output

Done: Scaffolding project in path\to\digital-ocean-vite… Done. Now run: cd digital-ocean-vite yarn yarn dev Done in 129.89s.

指示通りにプロジェクトフォルダに移動してください。 (Shiji doori ni purojekuto fora ni idō shite kudasai.)

  1. cd digital-ocean-vite

 

その後、プロジェクトの依存関係をインストールするために、yarnコマンドを使用してください。

  1. yarn

 

終了すると、依存関係のインストールにかかった時間の出力が返されます。

Output

success Saved lockfile. Done in 43.26s.

現在、ReactプロジェクトをViteを使って新しくセットアップし、ReactとViteに必要なパッケージをインストールしました。

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

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

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

デジタル・オーシャン・バイトのフォルダ内から、開発サーバーを実行するために以下のコマンドを使用してください。

  1. yarn run dev

 

このコマンドは、viteコマンドのエイリアスです。プロジェクトを開発モードで実行します。

以下の出力を受け取ります。

Output

VITE 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で実行されます。

Default React Project with Vite

このアプリが起動しているのを見ると、ReactとViteのインストールが成功しています。次に、モバイル電話からアプリをプレビューします。

ステップ3 – スマートフォンからアプリをプレビューする

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

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

次に、プロジェクトを実行するために、次のコマンドを使用してください。 (Tsugini, purojekuto o jikkō suru tame ni, tsugi no komando o shiyō shite kudasai.)

  1. yarn run dev –host

 

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

ターミナルでこの出力を受け取ります。

Output

VITE 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アプリのプレビューに携帯電話からアクセスしてください。

React App Mobile Phone preview

開発環境でアプリを実行し、正常に動作を確認しました。次のステップでは、Viteに付属しているひな型コードを削除します。

ステップ4- デフォルトのボイラープレートを削除する。

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

以下のコマンドを使用して、src/ディレクトリの内容を表示してください。

  1. ls src/

 

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

Output

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

ファイルやディレクトリを削除するには、rmコマンドを使用してください。プロジェクトからデフォルトのファイルを削除するためには、以下のコマンドを使用してください。

  1. rm src/App.css
  2. rm src/App.jsx
  3. rm src/index.css

 

以下のコマンドを使用して、アセットディレクトリを削除してください。

  1. rm -r src/assets

 

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

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

  1. ls src/

 

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

Output

main.jsx

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

以下のコマンドを使用して、main.jsxを編集するために開いてください。

  1. nano src/main.jsx

 

ハイライトされた行を削除して、CSSファイルへのリンクを解除してください。

/src/main.jsxを日本語で自然に言い換えてください（1つだけ必要です）：
/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という新しいファイルを作成してください。

  1. 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 ファイルを保存して閉じる。

開発サーバーを再起動するために、以下のコマンドを使用してください。

  1. yarn run dev –host

 

ブラウザでhttp://localhost:3000を開いて、空のページに「Hello World」というテキストが表示されるように、ページをリロードしてください。

React App with

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

ステップ5 – 基本アプリの作成

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

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

コンポーネントの作成

新しいコンポーネントを作成することで、プロジェクトにモジュール性が追加されます。すべてのコンポーネントをコンポーネントディレクトリに追加して整理します。

以下のコマンドを使用して、src/内に新しいディレクトリ「components」を作成してください。

  1. mkdir src/components

 

次に、以下のコマンドでsrc/components/ディレクトリ内にWelcome.jsxという新しいファイルを作成してください。

  1. nano src/components/Welcome.jsx

 

Welcome.jsxファイルに次のコードを追加してください。

/src/components/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>
</>
);
}

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

クラス名が”wrapper”のdivタグは、CSSでこのセクションを指定するために使用できます。h1タグとpタグは、メッセージを画面上に表示します。

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

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

以下のコマンドでApp.jsxを開く：

  1. nano src/App.jsx

 

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

/src/App.jsxを日本語で表現するとうようなものは次の通りです：「/src/App.jsx」
import Welcome from "./components/Welcome"

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

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

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

画像を追加する

Reactにおいて、画像を追加することはアプリ開発の一般的な用途です。

src/ディレクトリの下にimgという新しいディレクトリを作成するために、以下のコマンドを使用してください。

  1. mkdir src/img

 

このコマンドを使用して、src/img ディレクトリに移動してください。

  1. cd src/img

 

「src/img」にこのサミーの画像をダウンロードしてください。

Sammy Image

wgetを使用して画像をダウンロードしてください。

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

 

以下のコマンドを使って画像の名前を変更してください。

  1. mv small-profile.jpeg sammy.jpeg

 

このコマンドは、後で簡単に参照するために、小さなプロファイル画像のファイル名を small-profile.jpeg から sammy.jpeg に変更します。

このコマンドを使用して、ルートディレクトリに戻ってください。

  1. cd ../../

 

次に、Welcome.jsxファイルを更新して、この画像にリンクを貼ります。ファイルを開いてください。

  1. nano src/components/Welcome.jsx

 

ハイライトされた行を追加して、Welcome.jsx ファイルを更新してください。

/src/components/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にモジュールとしてインポートします。

関数本体の別の行では、新しいタグが作成され、src属性が先ほどインポートした画像コンポーネントにリンクされます。widthとheightのプロパティは、対応する画像属性を200ピクセルに設定します。

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

次に、プロジェクトにCSSを追加します。 (Tsugi ni, purojekuto ni CSS o tsuika shimasu.)

CSS を追加する

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

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

  1. mkdir src/css

 

今、src/cssというディレクトリにmain.cssという新しいCSSファイルを作成してください。

  1. nano src/css/main.css

 

メインの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では、ボディにグリッドディスプレイを設定し、アイテムを中央に配置します。また、フォントファミリーと背景色も指定しています。

.wrapperクラスは、Welcome.jsxファイル内のwrapperディビジョンを選択します。このクラスのスタイルは、以下のような動作をします。

  • Set a background color.
  • Add padding of 20 pixels.
  • Add rounder corners of 10 pixels.

h1 セレクタはHTML内のタグをターゲットにし、その色を紫の色調に設定します。

終了したら、main.cssファイルを保存して閉じてください。

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

  1. nano src/components/Welcome.jsx

 

ハイライトされた行でファイルの内容を更新してください。

/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を開いてください。

  1. nano index.html

 

ハイライトされたテキストで

コメントを残す 0

Your email address will not be published. Required fields are marked *