人生初ハッカソン!
サポーターズのハッカソンvol.16に参加しました。人生初のハッカソンです。
個人で参加したのですが、他に個人で参加した人とランダムでチーム分けされ、即席チームとして開発を行いました。
初めてということもあり、最後まで実装できるのだろうかと不安でしたが、何とか作り上げ、努力賞を獲得しました。
自分のチームでは、VSCodeの拡張機能を2つ開発しました。
タイマー機能等を用いた拡張機能と、変数の名前の修正を提案してくれる拡張機能です。
前者2人・後者2人で分かれて開発しましたが、自分は前者を開発しました。
なので、この記事ではタイマー機能等を用いた拡張機能の概要や、用いた技術、完成させて感じたことを語りたいと思います。
開発した拡張機能の概要
この拡張機能は、特徴が大きく分かれて2つあります。
タイマー機能
VSCode上にタイマーを設置し、自分が今やる作業を入力し時間（分・秒）を指定することでタイマーを作動させることができます。
タイマー終了時には、モーダルダイアログが強制的に表示されます。なので、VSCodeを閉じてブラウザ等で調べ事をしていた時にも絶対に気づくことができます。
ヒント機能
ヒント機能は、今やろうとしている作業に用いる言語・仕様を入力し、「ヒントを取得」ボタンをクリックすると、作業を助けてくれるヒントが表示されます。作業の手順だったり、コードの例だったり、どんな変数を定義するかなどを表示してくれます。
表示されるヒントにはレベルがあります（低・中・高）。レベルが上がるごとに分量を200文字ずつアップさせることができ、最大で600字です。
両方の機能を備えた拡張機能は、VSCodeの左側に新たにサイドバーを作成しその中に表示しています。
技術スタック
今回使用した技術は TypeScript, VS Code API, Gemini API です。
基本的には、以下のサイトをまずは真似てみて、そこから今回実装した拡張機能に繋げていきました。
どの技術も扱うのが初めてだったので、ちゃんと実装できるのだろうかと不安でした。
ですが、拡張機能って意外と作るの簡単なんだなと思いました。
上記のサイトの通りにやってみると、色々ファイルが作られるのですが、一番メインとなるのはsrc/extension.tsなんです。強いて言えばもう1つあるのですが、もし必要であればpackage.jsonにもコーディングする、ということぐらいです。
今回の機能はこの2つのファイルのみで開発しました。今回紹介しなかった変数を修正してくれる機能もそうです。ファイル数だけで考えても、結構ハードル低そうに感じませんか？
意外に簡単なんです。たまにVSCodeの右下に通知が来ることがありますよね？あれも簡単に実装出来ちゃんですよ。自分のやりたいと思っていることが、すぐに実現できちゃったりするんですね。
さらにここに、生成AIを組み込むことも出来るんです。
今回使用したのはGemini APIです。APIキーを取得して、extension.tsに以下のチュートリアルサイトのようにコーディングすれば実装出来ちゃいます。
ただ、APIキーは、srcディレクトリにenv.tsファイルを作成してそこに入力するか、コマンドで登録するかのどちらかの手段を取る必要がありましたが、前者を選びました。
直接APIキーを書き込んでしまうと、誤ってプッシュしてしまう恐れがあるので、env.tsファイルを作成するとともに、.gitignoreにそのファイル名を書き込んで、Gitの追跡対象外にしました。
完成したときに感じたこと
拡張機能が完成したときは、思った以上にいい出来で、実用的な機能が作れたんだなと感じました。
VSCodeの拡張機能全般に言えることですが、他のアプリやツールを使わず、VSCode上で完結させることができるというドデカいメリットがあります。いちいちタブを切り替えることなくVSCodeで確認できちゃうのですね。
もう1人（Iさんとします）自分と一緒に開発していたメンバーがいるのですが、Iさんおかげで完成させることができたといっても過言ではありません。
もともと、私たちは別々の拡張機能を作っていました。自分はVSCodeを開いた時間（総作業時間）を記録する機能、Iさんがタイマー機能です。
発表時間、残り開発期間などの事情があり、Iさんのタイマー機能に、自分が作っている拡張機能の良さそうなところを統合して、開発を進めることになりました。そのあと、Iさんによってヒント機能も作られ、無事に完成しました。
統合～完成までに自分がやったこと
統合することに決めたとき、タイマー機能に新たに作られたサイドバーにアイコンがなかったんですね。
私が作っていた拡張機能にはアイコンを実装していました。アイコンがあった方が絶対にわかりやすいだろうということで、アイコンの入手先、アイコンの大きさ・拡張子、アイコンをどのフォルダに入れるか、どのように参照するのかを伝えた後、Iさんに実装してもらいました。
そして、自分が実装したものがあります。タイマー終了後にモーダルダイアログを表示させるというものです。
タイマー機能は特に問題なく作動するのですが、タイマーが終了（00:00）になった後のアクションがなかったんですね。作業に夢中になっていてタイマーに気づかない場面が出てくるのではないかと思いました。
このアクションの実装には、2つの案を用意しました。
１．作業を強制的に中断させられるように、モーダルダイアログを使い、タイマーが終了したことを確実に伝えられるようにする。
２．タイマー終了後に、VSCodeの右下に通知が届くようにする。
それぞれの案に該当コードを添付した上で、タイマーが終了したことに絶対に気づくことが出来るという点で案1がいいのではないかと相談し、実装出来ました。
Iさんがヒント機能を実装するとき、Gemini APIの使い方を理解していないようだったので、自分がチュートリアルを行った際のサイトを共有・説明、サイトには書かれていない重要なことを伝える、といったことをコード付きで行いました。
その重要なことというのは、APIキーをenv.tsに入力・.gitignoreにそのファイルを追加し、間違ってAPIキーを公開しないようにすること、ですね。
そして、自分が注意したことがありまして、自分の作業が終わったらまずはプッシュせずに確認を取る、です。
作業するファイルがかなり少ないので、コンフリクトが起きるリスクが高まります。最初の打ち合わせの時に、他メンバーが過去に参加したハッカソンで、「1つのファイルにつき1人が作業する」ことを徹底していたことを知りました。
拡張機能を作るのでそれを絶対に守らなければならないと思い、プッシュ前にIさんに確認を取ってからプッシュを行いました。
もう一つ意識していたことは、どこに変更を加えたかをコード付きで説明したことです。プッシュする前なので、GitHubからは変更が反映されていません。こうすることで、相手がコードの詳細を調べることができ、どのような意味を持つコードかを理解しやすくするようにしました。
完成後、自分たちは資料作りに取り掛かりました。Iさんが文章、自分が画像を添付しました。
ただ、34インチの超デカいモニターを使っていることもあり、画像の調整にはなかなか苦労しました。何とか文字が見える程度には調整できたかなと思うのですが...
終わりに
今回、チーム開発を進めてくださったメンバーの皆さんに本当に感謝しています。
知らない技術に実際に触れたことで「こんなこともできるんだな」と刺激を貰いました。
今まではバックエンド側の技術を中心に触れていましたが、フロント側の知識も身に着けたいと思っています。
拡張機能も、何か別のものを作ってみようかな...？
記事は以上です。ありがとうございました。
Discussion