ブログに戻る

はじめにガイド

VS Code での最初の API リクエスト: .http ファイル、キーは .env から

REST Client 拡張機能を使って VS Code から CheapTokens へ最初の chat completion を送り、キーを git に入れずに、応答とトークン使用量を確認します。

投稿者: CheapTokens Team公開日 読了時間 5 分

CheapTokens API への POST と .env から読み取るキーを含む VS Code のリクエストファイル
このページの内容
  1. 拡張機能をインストールし、キーを .env に入れる
  2. .http ファイルを書く
  3. 送信して応答を見つける
  4. モデルを 1 行で差し替える
  5. うまくいかない場合

VS Code を離れずに CheapTokens へ最初のリクエストを送れます。REST Client 拡張機能をインストールし、.http ファイルを書き、キーをその隣の .env に置いて Ctrl+Alt+R を押すだけです。応答はファイルの横のパネルで開き、テキストとトークン数はひと目で見つけられる 2 つのフィールドです。

すでにエディタを開いているなら、モデルに「Hello」と言うためだけに別のアプリをインストールするより手軽です。しかもリクエストはプレーンテキストファイルに残るので、明日また実行したり、（キーを除いて）チームメイトのためにコミットしたりできます。同じリクエストを送る他の方法は First request with HTTPie と Your first API request with CheapTokens にあります。

拡張機能をインストールし、キーを .env に入れる#

REST Client は humao.rest-client の拡張機能です。VS Code で F1 を押し、ext install と入力し、rest-client を検索してインストールします。（2026 年 11 月 9 日に拡張機能の README と照合済み。）

次にキーです。README には {{$dotenv NAME}} の説明があります。これは .http ファイルと同じディレクトリにある .env ファイルから値を読み取ります。キーがリクエストファイルに一切現れないので、まさにうってつけです。実験用のフォルダを作り、2 つのファイルを置きます。

.env:

text
CHEAPTOKENS_API_KEY=paste-your-key-here

.gitignore:

text
.env

CheapTokens アカウントでキーを作成し、プレースホルダーの代わりに貼り付けます。ignore 行がなぜ重要か、キーがコミットに紛れ込んでしまった場合の対処は Store an API key safely にあります。

順番に並べる

セットアップを正しい順序で

  1. REST Client 拡張機能をインストールする
  2. .env を .gitignore に追加する
  3. キーを .http ファイルの隣の .env に入れる
  4. リクエスト上で Ctrl+Alt+R を押す

.http ファイルを書く#

同じフォルダに first.http を作成します。構文は短く、リクエスト行（POST URL HTTP/1.1、メソッドは省略可能で既定は GET）、最初の空行までのヘッダー行 Name: value、そして空行の後のボディです。リクエストは 3 つ以上の # の行で区切ります。

http
### First request
POST https://api.cheaptokens.dev/v1/chat/completions
Authorization: Bearer {{$dotenv CHEAPTOKENS_API_KEY}}
Content-Type: application/json

{
  "model": "zai-org/GLM-5.3-Flash",
  "messages": [{ "role": "user", "content": "Hello" }]
}

注目すべき点が 3 つあります。アドレスは CheapTokens API のベース https://api.cheaptokens.dev/v1 に /chat/completions を加えたものです。モデルは完全な id zai-org/GLM-5.3-Flash で書かれています。390K コンテキストのモデルで、1 回の応答で最大 8,192 トークンまで書けます。そしてキーは {{$dotenv …}} プレースホルダーだけなので、このファイルは安全にコミットできます。

キーは .env にあり、first.http はそれを参照するだけ
キーは .env にあり、first.http はそれを参照するだけ

セットアップが .env ファイルを読み取らない場合、README には {{$processEnv NAME}} の説明もあり、こちらはマシンの環境変数から変数を読み取ります。

送信して応答を見つける#

リクエスト行の上の「Send Request」をクリックするか、Ctrl+Alt+R（macOS では Cmd+Alt+R）を押します。右クリックや F1 でも可能です。応答は別のパネルで開きます。検索や折りたたみができる通常のエディタタブがよければ、設定で rest-client.previewResponseInUntitledDocument を true にします。

応答は標準の chat-completions JSON です。初日に重要なのは 2 か所です。

  • choices[0].message.content は応答テキストです。その隣の finish_reason はモデルがなぜ停止したかを示します。length はトークン上限で応答が打ち切られたことを意味します。
  • usage はこのリクエストのトークン数です。送ったトークンとモデルが書いたトークンです。これが支払い対象なので、毎回確認しましょう。
Ctrl+Alt+R から応答テキストと usage フィールドまで
応答パネルのどこを見るか
自分で試す試してみよう: 応答が打ち切られたことはどうやって分かる？答えを表示

応答の finish_reason を見てください。length とあれば、モデルは書き終える前にトークン上限に達しています。ボディに "max_tokens" 行を追加するか、値を上げて、もう一度送信してください。

費用の感覚をつかむために: このリクエストを、入力約 1,000 トークン、出力 300 トークンで 100 回送るとします（例のための仮定であり、実測値ではありません）。

モデル リクエストあたり 100 リクエスト OpenRouter、100 リクエスト
GLM-5.3-Flash $0.000032 $0.0032 $0.0058
DeepSeek-V4-Flash $0.000045 $0.0045 $0.0112
MiniMax-M2.7 $0.000095 $0.0095 $0.114

リクエストあたり 1,000 入力トークンと 300 出力トークン。100万トークンあたりの価格は現行のもので、当社の料金体系に合わせて変動します。OpenRouter 列は同じワークロードの参考価格を示しています。

表は各モデルでのそのワークロードの現在の価格を、比較用の OpenRouter 列とともに示しています。小さな「Hello」ならはるかに安く済みます。

モデルを 1 行で差し替える#

プレーンテキストファイルの便利なところ: 1 行変えて送り直すだけです。モデル id を deepseek-ai/DeepSeek-V4-Flash-0731（380K コンテキスト、1 回の応答で最大 32,768 トークン、時間帯を問わず単一価格、入力と出力を合計すると OpenRouter より安い）に置き換え、もう一度 Ctrl+Alt+R を押します。同じボディ、同じキー、違う応答、そして違う usage です。

両方残したい？ ### 行の下に、もう一方のモデル id で 2 つ目のリクエストを貼り付けます。各リクエストに独自の Send Request リンクが付くので、順に実行して比較できます。id が分からない？ List models with GET /v1/models が正確な文字列を示します。

うまくいかない場合#

ペアを合わせる

症状と原因を照合する

  • 401 Unauthorizedキーが空か間違っている。多くの場合 .env が .http ファイルと同じフォルダにない
  • 404 Not FoundURL パスかモデル id の打ち間違い
  • 応答が文の途中で止まり、finish_reason が lengthトークン上限に達した。max_tokens を上げる

最初の 2 つについては API 401 or 404: wrong key, base URL or model id がチェック手順を解説しています。リクエストの詳細は CheapTokens docs に、現在の価格は pricing page にあります。

これがワークフローのすべてです。1 つのファイル、.env の 1 つのキー、1 つのショートカット。ここからシステムメッセージを追加したり、max_tokens を変えたり、同じボディを任意の言語のコードに変換したりできます。

タグ: