かぐやと学ぶ 超プログラミング！

表示モード

環境構築 ​

第1章「AIヤチヨチャットを作ろう！」を始めるにあたって、以下のソフトウェアをインストールします。

  • Visual Studio Code (VSCode) : ソースコードを書くためのエディタ
  • Node.js : JavaScript の実行環境

Windowsでは winget 、Macでは Homebrew というパッケージマネージャを使ってインストールします。お使いのOSに合わせて、以下のタブを切り替えてください。

ターミナルの起動方法 ​

これ以降の手順や本編では、文字でコマンドを入力していく「ターミナル」と呼ばれるアプリを使います。

Windows 11 には Windows Terminal（アプリ名は「ターミナル」）が標準でインストールされています。起動すると、デフォルトで PowerShell が開くようになっており、本書ではこの状態でコマンドを入力していきます。

起動方法

  1. スタートボタンを右クリックします。（または `Windowsキー + X）
  2. 「ターミナル（管理者）」を選びます。

起動直後に PS C:\Users\〇〇> のような文字が表示され、何らかの文字が入力できる状態になっていれば、PowerShell が動いている状態です。

WARNING

お使いのWindows 11 にターミナルが入っていない・見つからない場合は、Microsoft Store から「Windows Terminal」を検索してインストールしてください。

事前準備: パッケージマネージャの用意 ​

Windows 11 と、Windows 10 (バージョン 1809 以降) には、Microsoft 公式のパッケージマネージャ winget が標準で搭載されています。基本的に追加のインストール作業は不要です。

winget が使えるか確認

  1. ターミナルに、以下のコマンドを実行します。

    powershell
    winget --version

  2. v1.x.x のようなバージョン番号が表示されればOKです。

WARNING

「winget は内部コマンドまたは外部コマンド…として認識されていません」と表示される場合は、Microsoft Store から「アプリ インストーラー」をインストールする必要があります。以下のリンクから、インストールしてください。

https://apps.microsoft.com/detail/9nblggh4nns1?hl=ja-JP&gl=JP

VSCode のインストール ​

PowerShell で以下のコマンドを実行します。

powershell
winget install --id Microsoft.VisualStudioCode -e

途中で「ソースの利用規約」や「パッケージの使用許諾」への同意を求められたら、Y キーを押して進めます。確認ダイアログを省略したい場合は以下のオプションを付けてください。

powershell
winget install --id Microsoft.VisualStudioCode -e --accept-package-agreements --accept-source-agreements

インストール完了後、スタートメニューから Visual Studio Code を起動できることを確認します。

Node.js のインストール ​

PowerShell で以下のコマンドを実行します。

powershell
winget install --id OpenJS.NodeJS.LTS -e

インストールが完了したら、PowerShell を 一度閉じてから開き直して 、以下のコマンドでバージョンを確認します。

powershell
node --version
npm --version

それぞれバージョン番号が表示されればインストール完了です。

OpenRouter のアカウント作成とAPIキーの発行 ​

AIヤチヨチャットでは、AIの応答を生成するために OpenRouter という、複数のAIモデルにまとめてアクセスできるサービスを利用します。ここでは、OpenRouter にアカウントを作成し、APIキーを発行するまでの手順を案内します。

INFO

OpenRouterのアカウント作成自体に料金はかかりません。また、新規登録時にクレジットカードの登録も不要です。実際にAIモデルを呼び出すには、クレジット（前払いの利用枠）の購入が必要なものと、無料で利用できるモデルがあります。

アカウントの作成 ​

  1. ブラウザで https://openrouter.ai/sign-up にアクセスします。

    OpenRouter新規アカウント登録画面

  2. 以下のいずれかの方法でアカウントを作成します。いずれかの方法で登録してください。

    • Googleアカウントで登録（おすすめ）
    • GitHubアカウントで登録
    • メールアドレスとパスワードで登録
    • （キツネのアイコンはMetaMaskという暗号資産ウォレットを使う方法なので、特段理由が無い場合は選ばなくてOKです）
      • いろPのアバターじゃないよ！（かぐや談）

  3. 画面の指示に従って、サインアップを完了します。メールアドレスで登録した場合は、確認メールが届くので、本文中のリンクをクリックして認証を完了してください。

  4. サインアップが完了すると、以下のようなダイアログが表示されます。このまま「Create API Key」をクリックして、次に進みます。

    登録完了

APIキーの発行 ​

自分が作ったアプリからOpenRouterへアクセスするためには、APIキーと呼ばれる鍵が必要です。

  1. （先ほど「Create API Key」が表示されなかった場合は）ログイン状態で、ブラウザから https://openrouter.ai/settings/keys にアクセスします。

    TIP

    画面右上のプロフィールアイコンをクリックし、メニューからKeysを選択しても同じページに移動できます。

  2. New Keyボタンをクリックします。

    New Keyボタン

  3. 入力フォームが表示されます。以下を設定します。

    • Name(APIキー名): このキーの用途がわかる名前を入力します。本書では yachiyo-chat-key などとしておくとよいでしょう。
    • Credit limit(): このキーで使える金額の上限を設定できます(USD)。本書では一旦無料モデルで試しますが、もし課金する場合でも、一旦 1（=1ドル）程度に設定しておくと安心です。

    キー作成フォーム

  4. Create ボタンをクリックすると、sk-or-v1-... で始まる文字列のAPIキーが表示されます。

    APIキー表示ウィンドウ

重要

APIキーは、この画面でしか全文を確認できません。 画面を閉じてしまうと二度と表示できなくなります。必ずメモ帳などに控えてください。

万が一APIキーを紛失した場合は、同じ画面から 削除（Delete） して、新しいキーを発行し直してください。

WARNING

APIキーは 絶対に他人に渡したり、SNSやGitHubなどに公開したりしないでください。第三者にキーが知られると、自分のクレジットを勝手に使われてしまう可能性があります。誤って公開してしまった場合は、すぐに OpenRouter のダッシュボードからそのキーを削除し、新しいキーを発行し直してください。

ここまでで、VSCode と Node.js のインストール、そして OpenRouter のAPIキーの準備は完了です。

Published by Team SWSD

Copyright © Team SWSD