スクリプトの種類

このガイドでは、ウェブサイトで利用可能なスクリプト（コマンド）について説明します。これらのスクリプトは、開発やビルド、デプロイなどの作業を簡単に行うために用意されています。

利用可能なスクリプト

package.jsonファイルのscriptsセクションに定義されているスクリプトを実行するには、ターミナルでnpm run スクリプト名を実行します。

開発関連スクリプト

`npm run dev`

開発サーバーを起動します。このコマンドを実行すると、ローカル環境でウェブサイトを確認できます。

用途: 開発中にウェブサイトをプレビューする
特徴: ファイルを変更すると自動的にブラウザの表示が更新される
URL: http://localhost:5173/

npm run dev

`npm run lint`

コード内の問題（構文エラーや書式の一貫性など）をチェックします。

用途: コードの品質を確保する
特徴: エラーや警告があれば表示される

npm run lint

`npm run fmt`

コードの書式を自動的に整えます（インデントの調整、空白の追加・削除など）。

用途: コードの書式を統一する
特徴: Prettierというツールを使用して、コードを整形する

npm run fmt

ビルド関連スクリプト

`npm run build`

本番環境用のファイルをビルドします。このコマンドを実行すると、最適化されたファイルがdistフォルダに生成されます。

用途: デプロイ用のファイルを生成する
特徴: ファイルサイズが小さくなるように最適化される

npm run build

`npm run preview`

ビルドしたファイルをローカルでプレビューします。npm run buildを実行した後に使用します。

用途: ビルド結果を本番環境にデプロイする前に確認する
URL: http://localhost:4173/

npm run preview

使用例

開発作業の流れ

開発サーバーを起動
```
npm run dev
```
コードを編集（変更は自動的にブラウザに反映されます）
開発が完了したらコードの書式を整える
```
npm run fmt
```
コードの問題をチェック
```
npm run lint
```
問題がなければビルド
```
npm run build
```
ビルド結果を確認
```
npm run preview
```

注意点

スクリプトを実行する前に、プロジェクトのルートディレクトリ（package.jsonがある場所）にいることを確認してください。
npm run buildを実行すると、既存のdistフォルダの内容は上書きされます。必要なファイルがある場合はバックアップを取ってください。
エラーが発生した場合は、メッセージをよく読んで対処してください。解決しない場合はトラブルシューティングを参照してください。

次のステップ

スクリプトの基本を理解したら、構造とファイル説明に進み、プロジェクトの構成について学びましょう。