SCSS のインストール

Vite

［Vite］TypeScriptのプロジェクトの作成

公開日：2025-12-22
更新日：2025-12-22

1. 概要

TypeScriptのプロジェクトを作成します。
Node.js を使用しますので、まだインストールしていない場合は、「Node.js のインストール」を参考にしてインストールしてください。

2. プロジェクトの作成

Node.js が使えるターミナルを起動して、カレントディレクトリをプロジェクトフォルダを作成したい場所に移動します。
今回は最終的に Apache で動かすため、D:/xampp/htdocs をカレントディレクトリにします。
Apache を使わない場合、好きな場所で結構です。

コマンド

cd D:/xampp/htdocs

次のコマンドでプロジェクトを作成します。

コマンド

npm create vite@latest test001

Vanilla を選択します。

コマンド

*  Select a framework:
|  > Vanilla
|    Vue
|    React
|    Preact
|    Lit
|    Svelte
|    Solid
|    Qwik
|    Angular
|    Marko
|    Others
—

TypeScript を選択します。

コマンド

*  Select a variant:
|  > TypeScript
|    JavaScript

No を選択します。

コマンド

*  Use rolldown-vite (Experimental)?:
|    Yes
|  > No
—

Rolldown をバンドラーとして使用するかどうかと言う選択です。
将来的には Rolldown がデフォルトになります。

No を選択します。

コマンド

*  Install with npm and start now?
|    Yes / > No

Yes を選択した場合は、自動的に「npm install」と「npm run dev」が実行されます。

作成されたプロジェクトフォルダに移動して、package.json で指定されたパッケージをインストールします。

コマンド

cd test001
npm install

次のコマンドで開発サーバーを起動します。

コマンド

npm run dev

実行すると URL（http://localhost:5173/）が表示されるので、ブラウザでアクセスします。
サンプルの画面が表示されれば完了です。

3. サンプルの説明

3.1 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>test001</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

index.html は、Vite でビルドする際のエントリーポイントです。

コード

<script type="module" src="/src/main.ts"></script>

main.ts が最初に実行されるファイルです。
このファイルは TypeScript ですが、開発サーバーが起動している場合は、自動的に JavaScript に変換されます。
ブラウザのページのソースを表示して main.ts をクリックすると、JavaScript に変換されていることがわかります。

3.2 src/main.ts

コード

import './style.css'
import typescriptLogo from './typescript.svg'
import viteLogo from '/vite.svg'
import { setupCounter } from './counter.ts'

document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
  <div>
    <a href="https://vite.dev" target="_blank">
      <img src="${viteLogo}" class="logo" alt="Vite logo" />
    </a>
    <a href="https://www.typescriptlang.org/" target="_blank">
      <img src="${typescriptLogo}" class="logo vanilla" alt="TypeScript logo" />
    </a>
    <h1>Vite + TypeScript</h1>
    <div class="card">
      <button id="counter" type="button"></button>
    </div>
    <p class="read-the-docs">
      Click on the Vite and TypeScript logos to learn more
    </p>
  </div>
`

setupCounter(document.querySelector<HTMLButtonElement>('#counter')!)

コード

import './style.css'

style.css をビルド対象にします。
スクリプトで css を操作するためのものではありません。

コード

import typescriptLogo from './typescript.svg'

typescript.svg をビルド対象にします。
また、svg を読み込んで、URL を変数に設定します。

この変数は、

コード

<img src="${viteLogo}" class="logo" alt="Vite logo" />

で使用されおり、${viteLogo} は変数の値が展開されます。

コード

import viteLogo from '/vite.svg'

vite.svg は public フォルダに入っているため、import をしなくても、自動的にビルド対象になります。
public 配下のファイルは、ビルドの出力先の dist に全てコピーされます。
viteLogo には vite.svg の URL が入ります。

コード

import { setupCounter } from './counter.ts'

setupCounter には、counter.ts で定義された setupCounter() が設定されます。
これにより、main .ts で setupCounter() が使用できるようになります。

コード

document.querySelector<HTMLDivElement>('#app')!.innerHTML = `

main.ts を実行した index.html の id="app" の要素を取得して、HTML を設定します。

HTMLDivElement は、node_modules/typescript/lib/lib.dom.d.ts に定義されている TypeScript の DOM の型です。
ジェネリクスの <HTMLDivElement> により、querySelector() が HTMLDivElement または null を返す宣言になります。
これにより、VS Code などのコード補完に効くようになります。

3.3 src/counter.ts

コード

export function setupCounter(element: HTMLButtonElement) {
  let counter = 0
  const setCounter = (count: number) => {
    counter = count
    element.innerHTML = `count is ${counter}`
  }
  element.addEventListener('click', () => setCounter(counter + 1))
  setCounter(0)
}

setupCounter() に渡された要素の click イベントに、関数内で定義した setCounter() を設定します。
setCounter() で参照している counter は、setCounter() の外で定義されているため、
setCounter() を抜けても値が保持されます。
また、counter はローカル変数のため、setupCounter() が呼ばれるたびに生成されます。

3.4 public/vite.svg

public 配下のファイルは、ビルドの出力先の dist に全てコピーされます。
main.ts などで import する必要はありません。

4. ビルド

次のコマンドでビルドします。

コマンド

npm run build

ビルドの結果は、dist フォルダに出力されます。

dist 直下には、エントリーポイントの index.html、public フォルダ配下のファイルが出力されます。

JavaScript、CSS、スクリプトから import されたファイルは、assets フォルダ配下に出力されます。
この時ファイル名に、ファイルのハッシュ値が付きます。
これにより、ファイルを変更した時に、キャッシュが使われるのを防いで、最新の状態で読み込ませることができます。
また、デフォルトでは、4096バイト未満のファイルは、インライン形式で JavaScript に埋め込まれます。

例えば、typescript.svg は 1435 バイトのため、assets には出力されません。
<img> の src には、「data:image/svg+xml・・・」のようなデータ URL と言う形式で埋め込まれます。

コード

import typescriptLogo from './typescript.svg'
<img src="${typescriptLogo}"

5. ビルドの結果を Apache で動かす

開発サーバーを停止させて、
http://localhost/test001/dist/ にアクセスすると、白い画面が表示されます。

ブラウザのページのソースで確認できますが、
これは、URL が / で始まっているためです。

コード

<script type="module" crossorigin src="/assets/index-B0KbwCHS.js"></script>

これは、
D:/xampp/htdocs/test001/dist/assets/index-B0KbwCHS.js
ではなく、
D:/xampp/htdocs/assets/index-B0KbwCHS.js
を見に行きます。

この URL を相対パスにするには、
プロジェクトフォルダの直下に vite.config.ts を作成して、base を指定します。

vite.config.ts

コード

import { defineConfig } from 'vite'

export default defineConfig({
    base: './',
})

これでビルドすると、次のように相対パスになってくれます。

コード

<script type="module" crossorigin src="./assets/index-CPwYFayt.js"></script>

補足

相対パスにせずに、src="/assets/index-B0KbwCHS.js" のまま動かしたい場合は、
test001 をホスト扱いにして、Apache の VirtualHost に設定を追加すると、
http://test001/ で D:/xampp/htdocs/test001 のファイルにアクセスできるようになります。

メモ帳を管理者で実行して、メニューの「開く」で C:/Windows/System32/drivers/etc/hosts を開きます。
そして、最後に「127.0.0.1 test001」と追加します。
これで test001 がホストとして扱われます。そのため、「ping test001」を実行すると、応答があります。

次に、conf/extra/httpd-vhosts.conf などに、次の設定を追加します。

コード

<VirtualHost *:80>
    ServerName localhost
    DocumentRoot "D:/xampp/htdocs"
    <Directory "D:/xampp/htdocs">
        Options Indexes FollowSymLinks Includes ExecCGI
        AllowOverride All
        Require all granted
    </Directory>
</VirtualHost>

<VirtualHost *:80>
    ServerName test001
    DocumentRoot "D:/xampp/htdocs/test001"
    <Directory "D:/xampp/htdocs/test001">
        Options Indexes FollowSymLinks Includes ExecCGI
        AllowOverride All
        Require all granted
    </Directory>
</VirtualHost>

これは、test001 の方だけ追加すると、localhost が反応しなくなるので、2つ追加してください。
これで base をしなくても、http://test001/ にアクセスすると、正常に画面が表示されるようになります。

次の記事＞

SCSS のインストール

［Vite］TypeScriptのプロジェクトの作成

1. 概要

2. プロジェクトの作成

3. サンプルの説明

3.1 index.html

3.2 src/main.ts

3.3 src/counter.ts

3.4 public/vite.svg

4. ビルド

5. ビルドの結果を Apache で動かす

補足

新着一覧

アーカイブ

以前のカテゴリー一覧