皆さん、こんにちは。戸倉彩です。
今回は、Visual Studio Code の拡張機能の開発 に関する**「ハンズオン」**をコミュニティなどで開催する場合の Tips をまとめみました。皆さんのお役に立てればと思います。
事前準備
1. ゴール設定
「VS Code 拡張機能」 は、自分でも手軽に開発できることが人気の一つです。「ハンズオンを通じて開発を体験してもらう」 ということを 目的 にした場合、主催者側では具体的な ゴール を設定しておくと、ハンズオンの内容を決める時にも役立つと思います。
✅ 対象者 (コーディング経験/エディタ利用経験/VSCode利用経験の有無)
✅ どこまで何を体験してもらうか (デバッグ実行まで/パッケージ化まで/公開まで)
2. 当日の流れ
タイムテーブル(時間表) を作成し、何にどのくらいの時間を利用するのか、あらかじめ時間配分を決めておきましょう。イベント告知の際に公開しておくと、途中から参加で良かったら参加する！という人もいるかもしれません。
✅ VS Code 概要
✅ VS Code Marketplace 紹介
✅ VS Code 拡張機能開発 について解説
✅ ハンズオン
3. コンテンツ決め
VS Code 拡張機能開発に関する公式チュートリアル(英語)を活用するか、オリジナルで用意するかを考えましょう。
✅ Visual Studio Code - Your First Extension
✅ Visual Studio Code - Extension Guide
✅ VSCode API
4. ハンズオン資料の作成と公開
VS Code 公式サイトで公開されているチュートリアルは英語になります。ハンズオンをスムーズに進めるためには、日本語に翻訳されたステップバイステップで手順が解説されたハンズオン資料が用意されているのが望ましいですが、準備するのが困難な場合には、Qiitaで公開されている記事などを活用するなど、工夫しながら乗り切りましょう。ハンズオン資料は事前または当日に公開できるかたちにしておくと、参加者が個人個人のペースで手を動かすことができるので有用です。
✅ Qiitaで公開する。
✅ サンプルコードやReadmeと一緒にGitHubで公開する。
✅ PowerPointやWordで作成した場合にはpdfファイル形式にしてSpeakerDeckやSlideShareなどで公開する。
5. 事前準備の案内
ハンズオンを「マシン持ち込み」で行う場合、各自が持ち寄る環境が大幅に異なる可能があるため、ハンズオンに最低必要限に実行環境を事前に案内し、準備しておいてもらうことをお勧めします。初心者向けには、事前に準備内容を案内した上で、一人で準備が困難な場合にはハンズオン開始前などに環境を一緒に準備する時間を設ける等、フォローすることができると初めての参加者にとっては心強いです。
✅ VS Code (最新版が望ましい)
✅ Node.js
✅ Git
✅ Yoman
✅ Microsoft Azure DevOps アカウント (公開する場合)
ハンズオン当日
6. インターネット環境
会場で Wi-Fi によるインターネットアクセスが提供できる場合には、参加者に分かりやすいようにアクセスポイントを案内しましょう。
✅ 見えるところにアクセスポイントに関する案内を貼っておく。
✅ ハンズオンが始まる前にスライドに表示しておく。
✅ 同時アクセスができる数に制限がある場合には運用でカバーする。
7. テクニカルメンター
ハンズオンの際には、参加人数や参加する人のITリテラシーによっても異なりますが、講師1人で進めるよりはメンターさんが存在しているのが望ましいです。
✅ 参加者にとっては、講師が他の参加者の質問を受けている時でも他にメンターさんがいると質問することができ、ハンズオンを効率よく進められます。
✅ 運営側にとっても、同時に複数の質問が寄せられた時に、対応を分散できるだけでなく、得意不得意分野を講師とメンターさんとでうまく補完しあって参加者をサポートすることができます。
✅ Slack や Facebook グループなどを用意し、質問をそこに投稿してもらうことで参加者同士で助け合ったり、遠隔地からもメンターさんの協力を得るなど、他にも工夫してみると良いかもしれません。
8. トラブルシューティング
ハンズオンにトラブルはつきものです。
✅ まずは冷静になって、手順を一つ一つ丁寧に確認してみましょう。
✅ 最新版の VS Code を利用してみましょう。VS Code のバージョンアップしたくない場合には、Insiders版 (ベータ版) をインストールして同じ操作を試してみましょう。
✅ VS Code に関するよくある質問「Visual Studio Code FAQ」サイト (英語) を確認してみましょう。
✅ VS Code に関する既知の問題や他のユーザーから報告されている問題について GitHubリポジトリ の 「Issue」 でチェックしてみましょう。
他にも追加で気づいた点がありましたら、随時追記していきたいと思います。「Visual Studio Code拡張機能開発」を一緒に楽しみましょう。
Have a nice Geek Life♪
※Twitterで最新情報配信中 @ayatokura