# ローカル環境でのプロジェクトの開発

HTML、CSS、JavaScript で構築されたクライアント側アプリケーションの例を使って、ローカル開発環境を作成する方法について説明します。

## 概要

ローカル開発とは、クラウドやリモート サーバーではなく、**自分のコンピューターでプロジェクトを設定して実行すること**を意味します。 ローカル環境で開発すると、インターネットに接続せずにコードの作業を行い、ライブ アプリケーションに影響を与えずに実験することができます。

ローカル開発環境の構成に必要な手順は、プログラミング言語、フレームワーク、ツール、依存関係に基づいて、プロジェクトごとに異なります。 このガイドでは、HTML、CSS、JavaScript で構築されたクライアント側アプリケーションの例を使って、プロジェクトのセットアップに必要な**コア スキル**について説明します。 そうすれば、同じスキルを今後の他のプロジェクトに適用できます。

## 重要な開発ツールのインストール

始める前に、ローカル開発に広く使われているいくつかの重要なツールをインストールする必要があります。

1. [VS Code と GitHub Copilot をセットアップします](https://code.visualstudio.com/docs/copilot/setup-simplified)。
1. [Git をインストールします](https://git-scm.com/downloads)。

## VS Code でリポジトリをクローンして開く

まず、リポジトリをクローンして、コンピューター上にそのコピーを作成します。

1. [new2code/client-side-web-application リポジトリをクローンして始めます](vscode://vscode.git/clone?url=https://github.com/new2code/client-side-web-application)。 このリンクをクリックすると、VS Code でリポジトリをクローンするためのダイアログが開きます。 <!-- markdownlint-disable-line GHD003 -->
1. コンピューター上のリポジトリを保存する場所を選び、**[Select as Repository Destination]** をクリックします。
1. プロンプトが表示されたら、リポジトリを開きます。

## プロジェクト要件をインストールする

1. [コパイロットチャット を開き](vscode://GitHub.Copilot-Chat?ref_product=copilot&ref_type=engagement&ref_style=text)、次のプロンプトで何をインストールする必要があるかを特定するように依頼してください。 <!-- markdownlint-disable-line GHD003 -->

    ```text copy
    What do I need to install to develop this project locally? 
    ```

    この例では、このプロジェクトには Node.js が必要であることが Copilot によって示されます。 Node.js を使うと、ユーザーのコンピューター上で JavaScript コードを実行でき、Web 開発用のツールが提供されます。

1. プロジェクトに必要なものをインストールする方法を Copilot に尋ね、手順に従ってそれらをコンピューターにインストールします。

    この例では、"Node.js をインストールするにはどうすばいいですか?" などと質問します。 Copilot により、https://nodejs.org/ にアクセスしてインストーラーをダウンロードするための手順が提供されます。

## プロジェクトの依存関係のインストール

必要なソフトウェアがインストールされたので、この特定のプロジェクトのためにそれを使う方法を理解する必要があります。

**最初に README ファイルを確認します**。 ほとんどのプロジェクトのルート ディレクトリには、プロジェクトを設定して実行する方法を説明する README ファイルが含まれています。 このプロジェクトでは、README ファイルを読んでも、Copilot に尋ねても、次のステップは、npm (Node.js パッケージ マネージャー) を使ったプロジェクトの依存関係のインストールであることがわかります。

1. コマンド パレットを開くには、<kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>P</kbd> (Windows linux) または <kbd>Cmd</kbd>+<kbd>Shift</kbd>+<kbd>P</kbd> (Mac)。

1. 「`Terminal: Create New Terminal`」と入力して <kbd>Enter</kbd> キーを押します。

1. ターミナル タブに次のコマンドを貼り付けます。

   ```bash copy
   npm install
   ```

このプロジェクトでは Node.js を使うので、`npm install` を使って `package.json` ファイルを読み取り、プロジェクトが正常に動作するために必要なすべての依存関係をダウンロードします。 他の種類のプロジェクトでは、異なるコマンドが使われます。 たとえば、Python プロジェクトでは `pip install -r requirements.txt` を使用し、Ruby プロジェクトでは `bundle install` を使用できます。

README に依存関係のインストールに関する情報が含まれていない場合は、次の方法を使用できます。

* **構成ファイルの検索**: プロジェクトごとに異なるファイルを使用して依存関係を一覧表示します。たとえば、Node.js プロジェクトでは `package.json`、Python プロジェクトでは `requirements.txt`、Ruby プロジェクトでは `Gemfile` を使用します。
* **Copilot に尋ねる**: "Node.js のインストールが済んだら、このプロジェクトをセットアップする次のステップは何ですか?" のようなプロンプトを試します。

## プロジェクトの実行と開発

開発環境のセットアップが済んだので、開発サーバーを起動し、それを使ってコードへの変更をプレビューできます。

1. プロジェクト フォルダーの README ファイルを調べて、プロジェクトを開始する方法を確認します。

   この例では、README の "Steps for running locally" セクションで、`npm start` コマンドを使って開発サーバーを起動できることが説明されています。 ターミナルで次のコマンドを入力します。

   ```bash copy
   npm start
   ```

1. ターミナルの出力で、ローカル サーバーを利用できる場所を確認します。 
http://localhost:8080 でローカル サーバーを使用できることがわかります。 ブラウザーでそのアドレスに移動します。
1. HTML ファイルのテキストの編集や CSS ファイルの色の変更など、コードを少し変更します。 変更を保存。
1. プロジェクトのドキュメントまたはターミナルの出力を調べて、変更を確認する方法を理解します。 プロジェクトにより、変更を保存すると自動的に更新されることもあれば、ブラウザー ウィンドウを最新の情報に更新することが必要な場合もあります。

   このプロジェクトでは、ブラウザー ウィンドウを最新の情報に更新して変更を確認します。

README に必要な情報が含まれていない場合は、構成ファイルで利用可能なコマンドを調べます。 また、[コパイロットチャット](vscode://GitHub.Copilot-Chat?ref_product=copilot&ref_type=engagement&ref_style=text) に次のプロンプトを使って質問することもできます。 <!-- markdownlint-disable-line GHD003 -->

```text copy
How do I start this project locally?
```

## 次は何ですか？

初めてのローカル開発環境を正しく設定したので、さまざまな種類のプロジェクトにこれらのスキルを適用します。

**別のプロジェクトで練習する**: 要件が異なる別のプロジェクトを設定してみます。 たとえば、[@new2code のPython Web アプリケーション](https://github.com/new2code/python-web-application)では、Node.jsの代わりに Python と Flask が使用されます。 <!-- markdownlint-disable-line GHD003 -->

このチュートリアルで学んだことを使って、次のことを行います。

* VS Code を使ってリポジトリをクローンする
* インストールする必要があるツールと依存関係を Copilot に尋ねる
* README ファイルを読んで、プロジェクトの実行方法を理解する
* ブラウザーで実行されているアプリケーションを取得する

この練習は、異なるテクノロジの間でパターンを認識し、自信を持ってローカル環境で任意のプロジェクトを設定できるようになるのに役立ちます。