コードの記述と格納

次に、計画した Web サイト機能 (星付きリポジトリを一覧表示するページ) を構築します。その中で、ブランチ、コミット、プルリクエストを使って、作業用のスペースを用意し、変更を加えて保存し、レビュー用に提出するという、開発者の基本的なワークフローに従います。

前提条件

stargazers-log リポジトリのローカル複製。この設定をまだ行っていない場合は、 Connecting to your code locally を参照してください。

ブランチの作成

ブランチを使用すると、準備ができるまでコードの main コピーを変更することなく、独自の領域で機能を操作できます。

GitHub Desktopを開きます。
アプリの上部にある [ Current Branch] をクリックし、[New Branch]( 新しいブランチ) をクリックします。
ブランチ add-starred-listに名前を付け、[ブランチの作成] をクリックします。
[ ブランチの発行] をクリックして、ブランチを GitHubで使用できるようにします。

Web サイトのコードをビルドする

機能には、サンプルデータ、スタイルシート、データを表示するスクリプト、更新されたホームページなど、いくつかのファイルが必要です。

これらのファイルは、自分で記述するか、AI アシスタントである Copilot に生成するように依頼できます。すべての GitHub アカウントには、 GitHub Copilot無料へのアクセスと AI クレジットの許容量が含まれているため、すぐに Copilot の使用を開始できます。

使用可能なCopilotプランと使用方法の詳細については、ドキュメントの GitHub Enterprise Cloud を参照してください。

エディターでコパイロットチャットを開き、次のようなプロンプトでファイルを作成するように依頼します。

Text

Create a starred repositories page for my software project. Add:
- events.json with sample data for a few starred repositories
- style.css to style a simple list
- script.js to fetch events.json and render the list
- an update to index.html that links style.css and script.js

Use the code written in https://docs.github.com/get-started/start-your-journey/creating-and-changing-your-code.

Create a starred repositories page for my software project. Add:
- events.json with sample data for a few starred repositories
- style.css to style a simple list
- script.js to fetch events.json and render the list
- an update to index.html that links style.css and script.js

Use the code written in https://docs.github.com/get-started/start-your-journey/creating-and-changing-your-code.

でコパイロットチャットを開くVS Code

生成 Copilot を確認し、次の例に合わせてファイルを調整します。

Copilotを使用していない場合は、コードエディターを使用して、add-starred-list ブランチに以下のファイルを作成します。

次のサンプルデータを含む events.json という名前のファイルを作成します。ファイルを保存します。

JSON

[
  { "name": "octocat/Hello-World", "starred": "2024-01-15" },
  { "name": "github/docs", "starred": "2024-02-02" },
  { "name": "octo-org/octo-repo", "starred": "2024-03-21" }
]

[
  { "name": "octocat/Hello-World", "starred": "2024-01-15" },
  { "name": "github/docs", "starred": "2024-02-02" },
  { "name": "octo-org/octo-repo", "starred": "2024-03-21" }
]

次のスタイルを使用して、 style.css という名前のファイルを作成します。ファイルを保存します。

SCSS

body {
  font-family: sans-serif;
  margin: 2rem;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  padding: 0.5rem 0;
  border-bottom: 1px solid #ddd;
}

body {
  font-family: sans-serif;
  margin: 2rem;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  padding: 0.5rem 0;
  border-bottom: 1px solid #ddd;
}

次のコードを使用して、 script.js という名前のファイルを作成します。ファイルを保存します。

JavaScript

fetch("events.json")
  .then((response) => response.json())
  .then((events) => {
    const list = document.querySelector("#starred");
    events.forEach((event) => {
      const item = document.createElement("li");
      item.textContent = `${event.name} — starred ${event.starred}`;
      list.appendChild(item);
    });
  });

fetch("events.json")
  .then((response) => response.json())
  .then((events) => {
    const list = document.querySelector("#starred");
    events.forEach((event) => {
      const item = document.createElement("li");
      item.textContent = `${event.name} — starred ${event.starred}`;
      list.appendChild(item);
    });
  });

index.htmlを更新して新しいファイルをリンクし、リストを保持します。ファイルを保存します。

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Stargazers log</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Stargazers log</h1>
    <p>A log of the repositories I've starred.</p>
    <ul id="starred"></ul>
    <script src="script.js"></script>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Stargazers log</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Stargazers log</h1>
    <p>A log of the repositories I've starred.</p>
    <ul id="starred"></ul>
    <script src="script.js"></script>
  </body>
</html>

あなたの変更をコミットしてプッシュする

コミットすると、変更のスナップショットが保存され、プッシュによってリポジトリに格納される GitHub に送信されます。

GitHub Desktopで、左側のサイドバーで変更したファイルを確認します。
サイドバーの下部にある [概要 ] フィールドに、 Add starred repositories listなどのコミットメッセージを入力します。
Commit 4 files to add-starred-list をクリックします。
Push origin をクリックして、コミットを GitHub に送信します。

pull request を開く

プルリクエストは、ブランチの変更が main にマージされる前に、それらの変更をレビュー用に提示します。

GitHub Desktopで、[プル要求のプレビュー] をクリックし、[プル要求の作成] をクリックします。ブラウザーが開き、 GitHubの pull request フォームが表示されます。
タイトルと説明を確認し、機能の動作に関するメモを追加します。
[Pull request の作成] をクリックします。

達成した内容

Task	結果
ブランチを作成しました
`add-starred-list`を使用して、機能の分離されたスペースを作成しました。
コードを記述しました	必要に応じてコパイロットチャットの補助を受けて、機能のファイルをブランチに追加しました。
変更をプッシュしました	ブランチの変更を GitHubに保存しました。
pull request を開いた	レビューのために変更を提案しました。

詳細については、次を参照してください。

個々のGitHub Copilotプランと特典について
個人の使用量ベースの課金
GitHub AI Creditsの使用状況の監視GitHub Enterprise Cloudドキュメント

次のステップ

マージする前に、独自の変更を確認して問題を早期にキャッチします。提案された変更の確認に進みます。

Get started

この記事で