クリーム色の背景、色付き表示、高コントラスト、大きな文字のほうが読みやすいですか?配色と文字を選ぶと、すべてのページに一度で反映されます。

無料レッスン

HTTPリクエストとJSON

このレッスンのあとで: HTTPリクエストとJSONボディを読み書きできる。

60分のレッスンコマンド2件AI コーディングエージェントのラボ:opencode でコードを説明・修正し、その結果を確かめる

プログラムはネットワークで話す

HTTPは、2つのプログラムがネットワークで会話する方法です。一方がリクエストを送り、もう一方がレスポンスを返します。データには、たいていJSONというテキスト形式を使います。

どのモデルAPIも、この方法で動きます。リクエストとレスポンスが読めれば、どのAPIでも使えます。

このレッスンのゴール

メモ

HTTPリクエストとJSONボディを読み書きできる。

キーワード

ことばいみれい
リクエストプログラムが何かを頼むために送るもの
レスポンスリクエストへの返事として戻ってくるもの
ヘッダーリクエストやレスポンスについての名前付きの情報content-type
ステータスコードリクエストがどうなったかを表す番号200
JSONキーと値でできたデータのテキスト形式

学生が入力するセルは、このプレビューでは空白です。

リクエストは4つの部分でできている

メソッドは、何をするかを表します。GET は読み取り、POST はデータの送信です。URLは、送り先です。ヘッダーは、データの種類などの情報を足します。ボディは、データそのものです。

モデルAPIは、メッセージを入れたJSONボディ付きの POST を受け取ります。

例:リクエストを部分ごとに見る

部分入っているものこの呼び出しでは
メソッドすることPOST
URL送り先http://ai:4000/v1/chat/completions
ヘッダーボディの種類content-type: application/json
ボディJSON形式のデータmodel, messages, max_tokens

学生が入力するセルは、このプレビューでは空白です。

スクリプトが送るリクエストを表示

コマンド
docker exec -w /home/node/project agent node -e "const body={model:'lab',messages:[{role:'user',content:'こんにちはと言ってください'}],max_tokens:20};console.log('POST /v1/chat/completions');console.log('content-type: application/json');console.log(JSON.stringify(body,null,2))"

ここでは表示のみで、実行されません。無料アカウントを作成すると、実行ボタンで自分のラボのターミナルに入力できます。

JSONはキーと値のテキスト

JSONは、データをテキストで書きます。オブジェクトは、"キー": 値 の組を波かっこで囲んだものです。リストは角かっこで囲みます。キーは必ずダブルクォートで囲みます。

プログラムは、送るときにデータをJSONテキストに変え(JSON.stringify)、読むときにJSONテキストをデータに戻します(JSON.parse)。

レスポンスにはステータスとボディがある

レスポンスで最初にあるのはステータスコードです。200から299の番号は、成功を表します。400から499は、リクエスト側の誤りです。500以上は、サービス側の問題です。

ボディを読む前に、ステータスを読みましょう。

例:よく見るステータスコード

ステータス意味すること
200成功したボディを読む
400リクエストが間違っているボディを直す
401キーがないか、間違っているキーを確かめる
403許可されていないメッセージを読む
429リクエストが多すぎる待ってから再試行する
503まだ準備ができていない後でもう一度試す

学生が入力するセルは、このプレビューでは空白です。

モデルを呼んでステータスを読む

コマンド
docker exec -w /home/node/project agent node -e "const u=(process.env.AI_URL||'http://ai:4000')+'/v1/chat/completions';const show=(s,t,k,m)=>{console.log('ステータス:'+s);console.log('コンテンツタイプ:'+t);console.log('トップレベルのキー:'+k);console.log('応答:'+m)};(async()=>{try{const r=await fetch(u,{method:'POST',headers:{'content-type':'application/json',authorization:'Bearer lab'},body:JSON.stringify({model:'lab',messages:[{role:'user',content:'あいさつを3語で言ってください。'}],max_tokens:20})});const j=await r.json();if(r.ok===false)throw new Error(r.status+' '+j.error.message);show(r.status,r.headers.get('content-type'),Object.keys(j).join(', '),j.choices[0].message.content)}catch(e){console.log('応答なし('+e.message+')。記録済みサンプル:');show(200,'application/json','id, object, model, choices, usage','こんにちは、みなさん。')}})()"

ここでは表示のみで、実行されません。無料アカウントを作成すると、実行ボタンで自分のラボのターミナルに入力できます。

よくある間違い

注意

ステータス200は、答えが正しいという意味だと考える人が多くいます。実際には、リクエストが成功したというだけです。モデルは、間違った答えや変な答えにも200を返すことがあります。まずステータス、次に中身を確かめましょう。

さらに:リクエストを変えてみる

リクエストを表示する実行を書き換えます。ボディに temperature: 0 を足して、もう一度実行します。次に max_tokens を 5 に変えます。

変えるたびに、どの部分を変えたかを書き留めましょう。メソッド、URL、ヘッダー、ボディのどれかです。

このラボとソースについて: AI コーディングエージェントのラボ:opencode でコードを説明・修正し、その結果を確かめる

授業で使いますか?このモジュールを学生に割り当てると、教員用ガイド、自動採点つきの課題、学生ごとのラボを使えます。