無料版GitHub CopilotでClineを体験する：Recline-legacy導入完全ガイド

## tl;dr

:::note info
本記事ではWindows11 Home 24H2で動作確認しています。
:::

1. GitHubの無料アカウントを作成する
1. 無料版GitHub Copilotを利用可能にする
1. node.jsをインストールする
1. Recline-legacyをVS Code拡張機能としてビルドする
1. Recline-legacyをVS Codeにインストールする
1. Recline-legacyのLLM ModelにGitHub Copilotを選択する
1. Recline-legacyからの応答を日本語化する
1. プロンプトを入力してコードを生成する

## 手順

:::note info
すでにお手元の環境に揃っているものの手順は適宜スキップしてください。
:::

### 1. GitHubの無料アカウントを作る

1. [GitHub公式サイト](https://github.com)にアクセスする
2. 右上の「Sign up」ボタンをクリックする
3. メールアドレスを入力する
4. パスワードを設定する
5. ユーザー名を入力する
6. メールでマーケティング情報を受け取るかどうかの質問に回答する
7. CAPTCHAを完了して「人間」であることを証明する
8. 「Create account」ボタンをクリックする
9. 登録したメールアドレスに届いた確認コードを入力する
10. 使用方法に関するいくつかの質問に回答します（チームサイズ、GitHubの使用目的など）
11. 無料プランを選択する
12. アカウント設定を完了して、GitHubダッシュボードにアクセスする

公式ドキュメント：[GitHub でのアカウントの作成 - GitHub Docs](https://docs.github.com/ja/get-started/start-your-journey/creating-an-account-on-github)

### 2. 無料版GitHub Copilotを利用可能にする

1. GitHub Copilotの公式ページにアクセスする
1. ページ右上のプロフィール写真をクリックし、ドロップダウンメニューから「Your Copilot」を選択する
1. 表示されたページで、「Start using Copilot Free」をクリックする
1. 画面の指示に従って、VS CodeにGitHub Copilot拡張機能をインストールする。以下のコマンドでもインストールできる
    ```powershell:GitHub Copilot拡張機能のインストールコマンド
    code --install-extension github.copilot    
    code --install-extension github.copilot-chat
    ```
1. VS Codeの左下にある下から2番目のアイコンからGitHubアカウントにサインインし、GitHub Copilotの利用を開始する

公式ドキュメント：[GitHub Copilot のクイック スタート - GitHub Docs](https://docs.github.com/ja/copilot/quickstart)

### 3. node.jsをインストールする

プロジェクトごとのバージョン指定が可能になるので、Windows11環境ではwingetを使用してVoltaをインストールします。

1. Windows terminalからPower Shellを起動する
1. 次のコマンドを実行する：  
    ```powershell:node.jsのインストール
    # もし初めてwingetを利用するときはMS StoreとMicrosoft Terminalの
    # アップデート後、Windows Terminalの再起動が必要になります。
    winget update
    winget upgrade --all
    
    # 下記オプションは本当にインストールするかどうかの問い合わせに自動的にyesと回答するもの
    winget install Volta.Volta Git.Git --disable-interactivity --accept-package-agreements
    
    # 下記コマンドでWindowsに最新安定版のnode.jsがインストールされる
    volta install node
    ```

### 4. Recline-legacyをVS Code拡張機能としてビルドする

GitHubのリポジトリ: [julesmons/recline-legacy](https://github.com/julesmons/recline-legacy.git)

1. 次のコマンドを実行する：  
    ```powershell:Recline-legacyのビルドツールの構築    
    # Recline-legacyをインストールする環境を整える
    # あらかじめ作業用のフォルダで移動しておくと良い
    npm install -g pnpm
    
    # pnpmのパスを通したりモジュールを保存する場所を自動的にセットアップする
    pnpm setup
    
    # VS Codeのパッケージ作成用ツールのインストール
    pnpm install -g @vscode/vsce@3.3.2

    # GitHubからRecline-legacyのリポジトリ（ソースコード）をダウンロードする
    git clone https://github.com/julesmons/recline-legacy.git
    cd recline-legacy

    # Recline-legacyをビルドしてインストール可能にする
    pnpm install
    pnpm package
    ```

### 5. Recline-legacyをVS Codeにインストールする
1. 次のコマンドを実行する：
    ```powershell:ビルドしたVS Code拡張機能をインストールする
    code --install-extension .\recline-0.2.5.vsix
    ```

### 6. Recline-legacyのLLM ModelにGitHub Copilotを選択する
VS Codeを起動して、リクライニングした座席のアイコンから、Recline-legacyを起動します。
最初にセットアップ画面が表示されますので、以下の設定を行ってください。

- **API Provider:** `VScode Language Model API`
- **Language Model:** `copilot / claude-3.5-sonnet` ※ここはGitHub Copilotを選択してください。お好みで`copilot / gpt-4o`でも良いでしょう

Doneボタンをクリックして、設定を完了します。

### 7. Recline-legacyからの応答を日本語化する

1. VS Codeから再度Recline-legacyを起動する
1. 右上の歯車のアイコンから設定画面を開く
1. **Custom Instructions**欄に「Win11です。日本語で対話して」と入力する
1. Doneボタンをクリックして、設定を完了する

### 8. プロンプトを入力してコードを生成する

あらかじめコードを生成して保存したいフォルダを作成し、そのフォルダをVS Codeで開いておいてください。

1. アクティビティバーのRecline-legacyアイコンをクリックする
1. プライマリサイドバーの一番下のテキスト入力欄に、作成したいコードのプロンプトを入力する
1. Recline-legacyがプロンプトを解釈し、実行するタスクリストと編集対象のファイル名がプライマリサイドバーに表示され、エディタ領域には生成予定のソースコード差分が表示される
1. プライマリサイドバー下にある「Save」ボタンを押すとソースコード差分やファイルの作成・削除が実行される。Saveする前にプロンプトを入力することで編集方針を修正することができる

もしHTMLファイルなどの開くことが可能な出力であった場合、その出力を開くコマンドの内容とそのコマンドの実行する許可を求めてくることがあります。
もしそのコマンドの実行に問題がなければ「Run Command」ボタンをクリックすると、そのコマンドを実行してくれます。

:::note info
Custom InstructionsにWindowsであることを明記しないとmacOSやLinux用の`open`コマンドで開くことを提案してきます。
:::

#### プロンプト例
```plaintext
画面の中央に"Hello,world!"と表示するhtmlページを作成してください。
```

## トラブルシューティング
**そもそもwingetが動かない**
Windows10の場合はあらかじめMicrosoft Storeがインストールされておらず、wingetが動作しない可能性があります。
その場合は[公式ダウンロードURL](https://aka.ms/getwinget)からwingetののzipファイルをダウンロードし、インストールしてください。

**wingetでVoltaがインストールできない**
もし初めてwingetを利用するときはwingetでMS StoreとMicrosoft Terminalのアップデート後、wingetを実行しているWindows Terminalの閉じて開き直す必要があります。

**pnpmが実行できない**  
pnpmを実行できないときは、Windows Terminalを閉じて開き直すと設定が確実に反映されます。