<p data-line="0" class="code-line"><code>Vite</code>+<code>React</code>+<code>TypeScript</code>のプロジェクトの作成方法について説明します。</p>
<h2 id="%E7%92%B0%E5%A2%83" data-line="2" class="code-line">
<a class="header-anchor-link" href="#%E7%92%B0%E5%A2%83" aria-hidden="true"></a> 環境</h2>
<ul data-line="3" class="code-line">
<li data-line="3" class="code-line">macOS</li>
<li data-line="4" class="code-line">volta 2.0.2</li>
<li data-line="5" class="code-line">node 22.18.0</li>
<li data-line="6" class="code-line">pnpm 10.22.0</li>
</ul>
<h2 id="%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E4%BD%9C%E6%88%90" data-line="8" class="code-line">
<a class="header-anchor-link" href="#%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E4%BD%9C%E6%88%90" aria-hidden="true"></a> プロジェクト作成</h2>
<p data-line="10" class="code-line">まず、ターミナルで以下のコマンドを打って、新規プロジェクトを作成します。</p>
<div class="code-block-container"><pre class="language-bash"><code class="language-bash code-line" data-line="12"><span class="token function">pnpm</span> create vite my-vite-app
</code></pre></div><p data-line="16" class="code-line">コマンドを実行すると、いくつか質問されるので今回は以下の画像のように選択します。<br>
※選択は十字キーでできます。</p>
<ul data-line="18" class="code-line">
<li data-line="18" class="code-line">React</li>
<li data-line="19" class="code-line">TypeScript + SWC</li>
<li data-line="20" class="code-line">No</li>
<li data-line="21" class="code-line">No</li>
</ul>
<p data-line="23" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/7c3c16cdeae4-20251116.png" alt="" class="md-img" loading="lazy"></p>
<p data-line="25" class="code-line">次に、作成したプロジェクトのディレクトリに移動して、依存パッケージをインストールします。</p>
<div class="code-block-container"><pre class="language-bash"><code class="language-bash code-line" data-line="27"><span class="token builtin class-name">cd</span> my-vite-app
</code></pre></div><div class="code-block-container"><pre class="language-bash"><code class="language-bash code-line" data-line="30"><span class="token function">pnpm</span> <span class="token function">install</span>
</code></pre></div><p data-line="34" class="code-line">最後に、以下のコマンドでアプリケーションを実行します。</p>
<div class="code-block-container"><pre class="language-bash"><code class="language-bash code-line" data-line="36"><span class="token function">pnpm</span> dev
</code></pre></div><p data-line="39" class="code-line">以下のようになったら、<a href="http://localhost:5173" target="_blank" rel="nofollow noopener noreferrer">http://localhost:5173</a>にアクセスしてください。</p>
<p data-line="41" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/f51e2d14b47c-20251116.png" alt="" class="md-img" loading="lazy"></p>
<p data-line="43" class="code-line">以下の画像のように表示されたら成功です。</p>
<p data-line="45" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/7de4776c0812-20251116.png" alt="" class="md-img" loading="lazy"></p>


Vite + React + TypeScript プロジェクト作成

環境

プロジェクト作成

Discussion