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

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

この記事の内容

概要

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

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

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

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

  1. VS Code と GitHub Copilot をセットアップします。
  2. Git をインストールします。

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

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

  1. new2code/client-side-web-application リポジトリをクローンして始めます。 このリンクをクリックすると、VS Code でリポジトリをクローンするためのダイアログが開きます。
  2. コンピューター上のリポジトリを保存する場所を選び、[Select as Repository Destination] をクリックします。
  3. プロンプトが表示されたら、リポジトリを開きます。

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

  1. Copilot Chat を開き、次のプロンプトを使って、インストールする必要があるものを示してもらいます。

    Text
    What do I need to install to develop this project locally?

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

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

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

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

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

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

  1. Ctrl+Shift+P キー (Windows/Linux) または Cmd+Shift+P キー (Mac) を押して、コマンド パレットを開きます。

  2. 「Terminal: Create New Terminal」と入力して Enter キーを押します。

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

    Bash
    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
    npm start

  2. ターミナルの出力で、ローカル サーバーを利用できる場所を確認します。 http://localhost:8080 でローカル サーバーを使用できることがわかります。 ブラウザーでそのアドレスに移動します。

  3. HTML ファイルのテキストの編集や CSS ファイルの色の変更など、コードを少し変更します。 変更を保存。

  4. プロジェクトのドキュメントまたはターミナルの出力を調べて、変更を確認する方法を理解します。 プロジェクトにより、変更を保存すると自動的に更新されることもあれば、ブラウザー ウィンドウを最新の情報に更新することが必要な場合もあります。

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

README に必要な情報が含まれていない場合は、構成ファイルで利用可能なコマンドを調べます。 次のプロンプトを使って、Copilot Chat に尋ねることもできます。

Text
How do I start this project locally?

次の内容

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

別のプロジェクトで練習する: 要件が異なる別のプロジェクトを設定してみます。 たとえば、@new2code の Python Web アプリケーションでは、Node.js ではなく Python と Flask が使われます。

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

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

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