動作確認方法

このガイドでは、ウェブサイトのローカル環境での動作確認方法を解説します。

開発サーバーの起動

開発サーバーを起動すると、コードを変更したときに自動的にブラウザの表示が更新されるので、効率的に開発できます。

手順

  1. ターミナルでプロジェクトフォルダに移動する

    # もし別のフォルダにいる場合
cd パス/labo-hp

  2. 開発サーバーを起動する

    npm run dev

  3. ブラウザでウェブサイトを確認する

    • 開発サーバーが正常に起動すると、ターミナルに以下のようなメッセージが表示されます：
    VITE v6.x.x ready in xxx ms

➜  Local:   http://localhost:5173/
➜  Network: http://xxx.xxx.xxx.xxx:5173/
    • ブラウザで「http://localhost:5173/」を開くと、ウェブサイトが表示されます。
    • 自動的にブラウザが起動することもあります。

変更の確認方法

開発サーバーが起動している状態で、コードを変更して保存すると、自動的にブラウザの表示が更新されます。

変更のテスト方法

  1. コードエディタでファイルを開いて編集する

    • 例えば、src/components/Introduction.tsxなどのファイルを開いて、テキストを少し変更してみましょう。

  2. 変更を保存する

    • ファイルを保存すると（通常はCtrl+SまたはCmd+S）、自動的にブラウザの表示が更新されます。

  3. ブラウザで変更を確認する

    • 変更が正しく反映されているか確認しましょう。

開発サーバーの停止

開発作業を終了する場合は、開発サーバーを停止します。

  1. ターミナルでCtrl+Cを押す
    • 「終了しますか？」と聞かれたら、「Y」を入力してEnterキーを押します。

ビルドの動作確認

本番環境と同じ状態でウェブサイトを確認したい場合は、ビルドを実行して確認できます。

手順

  1. ビルドの実行

    npm run build

  2. ビルド結果のプレビュー

    npm run preview

  3. ブラウザでの確認

    • ターミナルに表示されるURLにアクセスして確認します（通常は http://localhost:4173/ ）。

トラブルシューティング

開発サーバーが起動しない場合

  1. Node.jsのバージョンを確認

    node -v
    • バージョンが18以上であることを確認してください。

  2. 依存パッケージの再インストール

    rm -rf node_modules
npm install

  3. ポート番号の競合

    • 別のアプリケーションが同じポート番号（5173）を使用している可能性があります。
    • そのアプリケーションを終了するか、Viteの設定でポート番号を変更してください。

ブラウザで表示されない場合

  1. 正しいURLにアクセスしているか確認

    • 通常は http://localhost:5173/ です。

  2. ファイアウォールの設定

    • ファイアウォールが接続をブロックしていないか確認してください。

  3. 別のブラウザで試す

    • Google ChromeやFirefoxなど、別のブラウザで試してみてください。

次のステップ

動作確認ができたら、スクリプトの種類に進み、利用可能なコマンドについて学びましょう。