GitHub Codespaces 起動

この章で学ぶこと

GitHub Codespaces をはじめて起動します。

今回の GitHub Codespaces リポジトリにアクセス

今回の GitHub Codespaces リポジトリに Chrome ブラウザでアクセスします。

https://github.com/1ft-seabass/hack-rock-fes-2023-chatgpt-workshop-codespace に Chrome ブラウザでアクセスします。それ以外のブラウザだと、うまく動作しない可能性があるので Chrome で動かしましょう。

GitHub Codespaces としてリポジトリを開く

Code ボタンをクリックします。

Codespaces タブをクリックします。Create codespace on main をクリックします。

Setting up your codespace という画面が出て構築されます。

ブラウザ上で Visual Studio Code が起動し、今回の仕組みを反映した環境が起動しました。

Visual Studio Code 操作画面の紹介

• 参考 : Visual Studio Code User Interface
  • https://code.visualstudio.com/docs/getstarted/userinterface

VS Code には、フォルダーまたはプロジェクトの完全なコンテキストを参照してアクセスするための十分なスペースを確保しながら、エディターに提供されるスペースを最大化する、シンプルで直感的なレイアウトが付属しています。UI は 5 つの主要な領域に分かれています。

• アクティビティバー
  • 左側の端にあり、ビューを切り替えることができ、Git が有効になっている場合の発信変更の数など、追加のコンテキスト固有のインジケーターが表示されます。

• プライマリ サイド バー
  • プロジェクトでの作業を支援するエクスプローラーなどのさまざまなビューが含まれています。

• エディタ
  • ファイルを編集するためのメイン領域です。エディタは好きなだけ縦横に並べて開くことができます。

• パネル
  • エディター領域の下にあるビュー用の追加スペース。デフォルトでは、出力、デバッグ情報、エラーと警告、および統合ターミナルが格納されます。パネルを左右に移動して、垂直方向のスペースを増やすこともできます。

• ステータス バー
  • 開いているプロジェクトと編集するファイルに関する情報。

✅ポイント

• 機能を全部覚える必要はありません。気になる人がいたら、英語ですが https://code.visualstudio.com/docs でいろいろ使い方を調べて試してみましょう
  • テーマをダークにしたい人は多いかもなので https://code.visualstudio.com/docs/getstarted/themes を見てダークテーマに変更してみてもよいでしょう
• 今回は、エクスプローラでファイルを選択し→エディタで編集＆保存→パネルでターミナルから実行という流れで行います

プログラムは Node.js という仕組みで動いている

エクスプローラを見てみましょう。今回のプログラム群は Node.js で作られています。

Node.js は、普段はブラウザで活用されていて、ネット上で文献の多い JavaScript 言語で、Unity でデータのやり取りをするサーバー側、つまりサーバーサイドのプログラムが作成することができます。

• Node.js® とは
  • https://nodejs.org/ja/about

また、Node.js と一緒にインストールされる npm は、Node.jsのパッケージ管理ツールです。npmを使うことで、パッケージの依存関係や競合関係を管理してくれるので、パッケージを追加、更新する際は基本的に npm 経由で行うことになります。

また、npm には、Node.js と一緒に入ってすぐ使える便利なライブラリがたくさん登録されています。今回は Express https://expressjs.com/ という便利なサーバー構築ライブラリがインストールされています。公式のドキュメントもわかりやすいですが、とほほのExpress入門 https://www.tohoho-web.com/ex/express.html も日本語でとっつきやすいので、もしカスタマイズしくなった方は参考にするとよいでしょう。

✅ポイント

• 今回は、Node.js サーバー側のプログラムは、起動とちょっとした設定反映が中心です。
• もし、より知りたくなったら、ネット上でいろいろと調べてみましょう。
  • （余裕があれば、文献の検索実演）

今回の環境の準備

この環境はすでに以下の準備が Codespace によって準備済みです。

• GitHub Codespaces 上に今回の環境が用意されている
• Node.js がすぐ動くように構築されている
• package.json をベースにした npm によるライブラリのインストールが済んでいます
  • ChatGPT API を扱う openai ライブラリ
  • HTTP を扱う axios ライブラリ
• 今回のリポジトリにあるコード群がすべて使える
• ブラウザ上の Visual Studio Code で今回のリポジトリにあるコードが編集・実行できる
• 今回の教材はほぼ変更なしで使えます。

ChatGPT API を扱う Node.js 公式ライブラリ

ChatGPT API を扱う Node.js 公式ライブラリはこちらのドキュメント https://platform.openai.com/docs/libraries/node-js-library に書かれています。

Python もある

そのほかに、Python library https://platform.openai.com/docs/libraries/python-library もあるので、ハンズオンのチーム事情に合わせて使いましょう。

ドキュメントでのソースで Node.js と Python の事例を選べます。

たとえば、https://platform.openai.com/docs/guides/gpt/chat-completions-api で各ソースコードで、このように選ぶことができます。

HTTP

また API Reference https://platform.openai.com/docs/api-reference/chat/create で curl を選べば、API の理解がより深く必要ですが、Node.js や Python を使えない Unity のような他の仕組みにつながる素の HTTP リクエストについても把握することができます。

今回はあらためて Node.js でつなぐ

あらためて、今回は Node.js のライブラリ https://platform.openai.com/docs/libraries/node-js-library で動かしてみます。

サンプルをターミナルから実行

app01.js というプログラムを実行してみましょう。

console.log('Hello! app01!');

JavaScript で、コンソールログに「Hello! app01!」と表示するプログラムです。

ターミナルでコマンドを実行します。パネルエリアに注目します。

ターミナルタブをクリックします。

このようにカーソルがありコマンドの入力待ちになっています。

node app01.js

このコマンドを入力して Enter キーを押します。

なお、コマンドをコピーされた方は初回にペーストしたときにアドレスバーに、このように通知が出てきます。許可するボタンをクリックして許可するとペーストできます。

コマンドの意味は、以下の通りです。

• node
  • 「Node.js でファイルを実行する」コマンド
• app01.js
  • app01.js というファイルが対象という意味
  • /workspaces/hack-rock-fes-2023-chatgpt-workshop-codespace というプロジェクト最上部にいるので、詳しくパスを打たなくても app01.js だけで名指しできます

すると、次の行に「Hello! app01!」とでてきたら成功です。

これでターミナル実行のウォームアップ完了です。