Clineの日本語設定どこで設定している？ プロンプト？ Custom Instructions? Advanced Settings?

Visual Studio Code(以下VSCode)でClineを使っていたときに、気になった部分があったので検証してみました。

# 検証内容
Clineの日本語設定には、「Custom Instructions」と「Advanced Settings」という2つの方法があります。それぞれに違いがあるのか？また、異なる設定をした場合にどう動作するのか？を検証します。
またプロンプトそのものに指定した場合も検証しました。

# 背景

VSCodeで使用していた時に日本語でやりとりするのはどうするんだろうと思い調べてみると多くの記事がCustom Instructionsで「Speak in Japanese」と入力するというものでした。
実際拡張機能の画面のサンプルにもスペイン語で話してというサンプルも書かれていました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/869077/3f67160b-46b9-49d3-9b3a-dbf2c749832b.png)

一方、設定画面の下の方にAdvanced Settingsというボタンがあり、そこから追加設定が可能です。
その中に「Preferred Language」という項目があり、日本語を選択できるようになっていました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/869077/f2aee7a5-9138-40b0-80d0-f8c1689415db.png)

このように言語設定が複数箇所存在していたため、
・それぞれに違いがあるのか
・プロンプト内で「日本語で話して」と直接指示した場合と比べてどう違うかを比較検証してみました。

なお、今回の検証ではOpenAI APIを利用しています。

また、テストには過去に自作したChrome拡張機能を対象としました。

https://qiita.com/ho-rai/items/18909407d2dcd0c24585

# 検証1 APIの利用料金について
各設定でAPI利用料金を比較したところ、金額はほぼ同じでした。
|設定方法|金額|
|---|---|
|Custom Instructions|0.0028ドル|
|Advanced Settings（Preferred Language）|0.0027ドル|
|プロンプトに「Speak in Japanese」を指定|0.0027ドル|

それぞれの請求画面キャプチャも参考に載せておきます。

## Custom Instructionの場合
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/869077/6861c546-1f24-44f9-82b5-3840722f4c27.png)

## Advanced Settingsの場合
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/869077/be7a8e1f-de56-41d5-8d29-077a855a1eae.png)

## プロンプトに「Speak in Japanes」を指定した場合
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/869077/3b5c3a8e-2360-4068-ba8c-3f7ba983e894.png)


# 検証2 出力された内容
日本語設定方法ごとに、出力された内容も比較してみましたが、結果はほぼ同じでした。

## Custom Instructionの場合
```
script/board.jsはBacklogのボード画面で動作するJavaScriptコードで、主に以下の機能を持っています。

担当者フィルター機能

複数の担当者を選択してカードをフィルタリングできるUIを生成し、選択された担当者に応じてカードの表示・非表示を切り替えます。
カードの進捗時間表示と色分け

各カードのタイトルから予定時間と実績時間を抽出し、合計をリストタイトルに表示します。
実績時間が予定時間を超えた場合は赤（dangerLevel）、予定の70%以上の場合は黄色（warningLevel）、それ以外は青（safetyLevel）でカードの背景色を変えます。
期限日の判定

カードに設定された期限日を判定し、期限切れや期限間近のカードにクラスを付与して視覚的に区別します。
担当者の選択肢を動的に追加

ボード上のカードの担当者情報からフィルター用の選択肢を動的に追加します。
タスクの状態確認ボタンの生成

カテゴリー指定されたタスクの状況を確認するためのボタンを生成し、条件に応じて有効・無効を切り替えます。
定期的な更新

5秒ごとにboardFunctionを呼び出し、ボードの状態を更新します。
また、ボードのリストやカードの情報を取得するための補助関数も含まれています。

このスクリプトはBacklogのボード画面のDOM構造に依存しており、特定のクラス名や要素構造を前提に動作しています。
```

## Advanced Settingsの場合
```
<script/board.js>は、Backlogのボード画面（URLにbacklog.jp/board/またはbacklog.com/board/を含むページ）で動作するJavaScriptコードです。主な機能は以下の通りです。

担当者フィルター機能
複数の担当者を選択してカードをフィルタリングできるUIを生成し、選択された担当者のカードのみを表示します。
担当者の選択肢は、カードの担当者アイコンから動的に追加されます。
カードの色分け
各カードのタイトルに含まれる予定時間（estimated）と実績時間（actual）を抽出し、実績が予定を超えている場合は赤（dangerLevel）、予定の70%以上なら黄色（warningLevel）、それ以外は青（safetyLevel）で背景色を設定します。
期限日の判定
カードに設定された期限日を判定し、期限切れなら「overLimitDate」クラス、期限が近い場合は「nearLimitDate」クラスを付与して視覚的に区別します。
タスク一覧の集計表示
各リスト（カラム）ごとに予定時間と実績時間の合計を計算し、リストタイトルに「予定:XX / 実績:YY」と表示します。
タスク状況確認ボタンの追加
カテゴリー指定されたタスクの状況を確認するためのボタンを生成し、クリックでtaskViewFuction()を呼び出します。
定期的な更新
5秒ごとにboardFunction()を呼び出し、上記の処理を繰り返して最新の状態を反映します。
その他、カードの数やタイトル取得、予定・実績時間の計算、アイコンの色取得などの補助関数も含まれています。

全体として、Backlogのボード画面のタスクカードを担当者でフィルタリングしたり、時間の進捗状況を色で示したり、期限の近さを視覚化する拡張的な機能を提供するスクリプトです。
```

## プロンプトに「Speak in Japanes」を指定した場合
```
script/board.jsの内容を日本語で説明します。

このスクリプトは、Backlogのボード画面（URLにbacklog.jp/board/またはbacklog.com/board/が含まれるページ）で動作し、タスクカードの表示やフィルタリング、進捗状況の集計、担当者によるフィルター機能などを提供しています。

主な機能は以下の通りです：

担当者フィルター機能

複数の担当者を選択してタスクカードをフィルタリングできます。
選択された担当者に該当するカードだけを表示し、それ以外は非表示にします。
担当者リストは動的に追加されます。
タスクカードの色分け

タスクの予定時間（見積もり）と実績時間をカードタイトルから抽出し、実績が予定を超えている場合は赤系（dangerLevel）、近い場合は黄色系（warningLevel）、それ以外は青系（safetyLevel）で背景色を変えます。
期限日の判定

タスクの期限日が過ぎている場合は「overLimitDate」クラスを付与し、期限が近い場合は「nearLimitDate」クラスを付与します。
タスク一覧の集計表示

各リストのタイトルに予定時間と実績時間の合計を表示します。
UI要素の追加

担当者複数選択フィルター用のダイアログとボタンを画面に追加します。
カテゴリー指定のタスク状況確認用のダイアログとボタンも追加します。
定期的な更新

5秒ごとにboardFunctionを呼び出し、画面の状態を更新します。
その他、タスク数の取得やタイトルの取得、予定・実績時間の計算、アイコンの色取得などの補助関数も含まれています。

以上がscript/board.jsの概要です。
```

# まとめ
今回の検証結果から、

・Custom Instructions
・Advanced Settings（Preferred Language）
・プロンプト直接指定

これら3つの方法で、日本語での回答内容や料金に大きな違いは見られませんでした。
おそらく内部的には、プロンプトに自動で同様の言語指示が加えられているのではないかと思われます。

使い分けの考え方としては以下が良さそうです。

|状況|推奨設定|
|---|---|
|通常は日本語ではなく英語などで使用しトークン数をとにかく減らしたい人|プロンプト|
|単純に日本語で返してほしいが細かな指定は不要な人|Advanced Settings|
|日本語で回答を返してほしいかつ細かな条件指定をしたい人|Custom Instruction|