# コードの記述と格納

コア開発者ワークフローに従ってブランチを作成し、コードを記述し、 Copilot と GitHub Desktopを使用して pull request を開きます。

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

## 前提条件

* `stargazers-log` リポジトリのローカル複製。 この設定をまだ行っていない場合は、 [Connecting to your code locally](/ja/enterprise-cloud@latest/get-started/start-your-journey/connecting-to-your-code-locally) を参照してください。

## ブランチの作成

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

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

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

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

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

使用可能なCopilotプランと使用方法の詳細については、[](/ja/enterprise-cloud@latest/copilot/get-started/plans)ドキュメントの 。

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

<!-- markdownlint-disable search-replace -->

```text copy
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.
```

<!-- markdownlint-enable search-replace -->

<a href="vscode://GitHub.Copilot-Chat?ref_product=copilot&ref_type=engagement&ref_style=button" target="_blank" class="btn btn-primary mt-3 mr-3 no-underline" aria-label="Open Copilot Chat in Visual Studio Code">
<span>でコパイロットチャットを開くVS Code</span><svg version="1.1" width="16" height="16" viewBox="0 0 16 16" class="octicon octicon-link-external" aria-label="link external icon" role="img"><path d="M3.75 2h3.5a.75.75 0 0 1 0 1.5h-3.5a.25.25 0 0 0-.25.25v8.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-3.5a.75.75 0 0 1 1.5 0v3.5A1.75 1.75 0 0 1 12.25 14h-8.5A1.75 1.75 0 0 1 2 12.25v-8.5C2 2.784 2.784 2 3.75 2Zm6.854-1h4.146a.25.25 0 0 1 .25.25v4.146a.25.25 0 0 1-.427.177L13.03 4.03 9.28 7.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.75-3.75-1.543-1.543A.25.25 0 0 1 10.604 1Z"></path></svg>
</a><br><br>

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

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

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

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

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

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

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

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

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

   ```javascript copy
   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);
       });
     });
   ```

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

   ```html copy
   <!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 に送信されます。

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

## pull request を開く

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

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

## 達成した内容

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

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

* [個々のGitHub Copilotプランと特典について](/ja/enterprise-cloud@latest/copilot/concepts/billing/individual-plans)
* [個人の使用量ベースの課金](/ja/enterprise-cloud@latest/copilot/concepts/billing/usage-based-billing-for-individuals)
* [GitHub AI Creditsの使用状況の監視](/ja/enterprise-cloud@latest/copilot/how-tos/manage-and-track-spending/monitor-ai-usage)

## 次のステップ

* マージする前に、独自の変更を確認して問題を早期にキャッチします。
  [提案された変更の確認](/ja/enterprise-cloud@latest/get-started/start-your-journey/reviewing-your-proposed-changes) に進みます。