Gitpodを使用したハンズオンイベントで手順とおりに上手くいかないと質問を受けたことがきっかけです。

手順はTheia IDEで作成していました。

初めてGitpodを使用する参加者がいて、IDEの初期設定がVS Codeに変わっていました。

見た目はVS Codeはライトモード、Theiaはダークモードで、大きく違っていました。

Node.jsのプログラムを実行した時に表示されるポート番号の表示も色が異なることで、手順で説明している内容が伝わりませんでした。

幸い、表示される文言は同じだったため、「Make Public」を押してください、と伝えて手順を進めることができました。

しかし、問題は次の手順でした。動作を確認するため、ブラウザで表示を確認するため、「Open Ports」のタグを選択してください、が伝わりませんでした。

ハンズオンの時はブラウザのタブを新しく開いて「URLの先頭に3000-を付けて」表示を確認してください、と伝えて手順を進めました。

ハンズオン終了後に今回の原因(Default IDEが変わっていたこと)が分かり、「Open Ports」の場所を特定することができました。

IDEを使用するハンズオンでは、手順の作成や説明の仕方で、設定に気をつける必要があることを学びました。