[青い T シャツを着た開発者が自宅で、マイクと GitHub の Octocat ロゴが付いたポップ シールドの後ろに座っています。 開発者は、右上の Web カメラに表示した状態で画面を共有しています。 画面では "js-project" という GitHub リポジトリを見ています。]
開発者: 今日は私の JavaScript プロジェクトを GitHub Codespaces で動かしてみましょう。
[開発者がリポジトリ ページのファイル一覧の上にある [コード] ボタンを選んで、ドロップダウン メニューを開きます。 [Open with Codespaces] (Codespaces で開く) をクリックし、[New codespace] (新しい Codespaces) をクリックします。]
開発者: codespace を作成しているときに、「codespace とは何か」という疑問があるかもしれません。
[ブラウザーに codespace が読み込まれます。 [白い背景に、GitHub の Octocat ロゴと VS Code ロゴの下に "Preparing your codespace" (codespace の準備中) というテキストが表示されます。]
開発者: codespace はインスタント クラウド開発環境です。実行、テスト、デバッグ、プッシュといった、開発環境で使い慣れているすべての操作を、ローカルの場合であれば必要なマシンの設定なしで実行できます。
[codespace がブラウザーの VS Code Web エディターに表示され、ダーク テーマで実行されます。 左サイドバーにはリポジトリのディレクトリとファイルが表示されます。 [統合ターミナルには、"Welcome to Codespaces" (Codespaces へようこそ) というメッセージと、含まれるランタイムとツールの一覧が表示されます。]
開発者: この codespace を作成すると、既に設定されたマシンが開き、Python、Node、Docker、さらには Java や Rust、Go、C++ などのツールが設定されていることがわかります。
ただし、開いているのは既定のイメージです。 Codespaces のすばらしい点は、自分だけでなく、このリポジトリに参加するすべてのユーザーに合わせて、設定を完全にカスタマイズできることです。 そのため、独自のイメージ、Dockerfile、Docker Compose を使用できる "コードとしての構成" 設定を行うことができます。
このアプリを実際に起動してみましょう。 ここで npm start を実行すると、アプリはポート 3000 で実行されていると表示されます。ブラウザーで開いて、アプリが完全に稼働している転送ポートにセキュリティで保護された方法で接続できます。
[転送ポートのポップアップが表示されます。 開発者は、このポップアップにある [ブラウザーで開く] というボタンをクリックします。 新しいブラウザーのタブが開き、"Haikus for Mona" というタイトルの Web ページが表示されます。 Web ページには、Octocat の Mona が紫色の傘を持って水たまりの上をスキップしている様子の漫画が表示されます。 画像の下には、"Rain in Seattle. Don't forget an umbrella, or it will be gloom" (雨のシアトル、傘を忘れると暗くなる) という俳句が表示されます。]
開発者: このように、私の Node アプリが稼働し、codespace に接続されていることがわかります。 Codespaces での設定に 60 秒ほどかかりました。
[開発者は、Mona が触手でレコード プレーヤーをつついている画像までスクロールします。]
開発者: このように、完全にカスタマイズできるので、あらゆるリポジトリの設定時間を短縮できることが想像できます。
GitHub Codespaces の概要は以上です。
音声テキストの終了。 GitHub Codespaces の詳細については、GitHub Codespaces のドキュメントを参照してください。