①課題名

Buddies

②課題内容（どんな作品か）

• メインテーマは「自己救済」です
• 毎日コードを書いてる自分を励まし慰め、練習ができる相棒を拡張機能で作ってみました
• タイマーは「just do it」でON、「good night」でOFFできます（25分作業、5分休憩のポモドーロタイマーを繰り返します）
• 褒めワード(cheerful flowers)は画面左端、縦に並ぶ項目から「⇔」をクリックで開きます（またはコマンドで「show growth Tree」）
• JS関数練習問題は画面右下、Go Liveを入れてる方はその左側に「JS関数練習」が出ます（またはコマンドで「let me practice」）

③アプリのデプロイURL

• 拡張機能のためデプロイ不可
• JS練習問題のみ、100本ノック選択問題に変更しWebブラウザでも触ってもらえるようにしてみました！
• URL：[https://einekleine.sakura.ne.jp/JS100knock/]

④アプリのログイン用IDまたはPassword（ある場合）

• ID: none
• PW: none

⑤工夫した点・こだわった点

• 一番長く触れるであろうVSCodeの拡張機能で、欲しいサポートの完結を目指した点
• 拡張機能ではevalを使って合否判定のところを、セキュリティ上リスクがあるためブラウザ版は選択問題に変更した点
• それに伴い問題レイアウトやキーを書き直し、localStorageで復習できるようにした点

⑥難しかった点・次回トライしたいこと（又は機能）

• npm？を使ってダウンロードされたテンプレートには大量のファイルやフォルダが入っており、どう使えばいいのか全く分からず途方に暮れました。
• VSCode拡張機能固有と思われる書き方が結構あって（例えば単純にsrcを使って画像挿入は不可、Uriで定義して使う等）、完成を目指しながら「これを経て私はJSが身につくのか？」と自問自答が止まらなくなったときは切り替えるのが難しかったです。
• evalを使わず正誤判定を行うために、PHPを導入してバックで色々処理してみるという方法もAIから提案されましたが理解が追いつかず…次回はトライしたいです。
• 自覚がほとんどないままNode.jsを触っていたようなので、また知識を付けた後リファクタリングに挑戦してみたいと思います。
• せっかくタイマーもあるので連動させて、時間経過ごとに花のグレードをアップさせるのも面白そうだと思いましたが出来ませんでした。その点もリファクタリング挑戦時にやってみたいです。

⑦フリー項目（感想、シェアしたいこと等なんでも）

• VSCodeの拡張機能を作るために最低限必要だと思われる内容はQiitaで発見しました。先人に感謝です。
• あとは同じ提供元だからという理由でCopilotに質問を投げまくりましたが、長くなるとあの子はすぐフリーズします。もう少し一緒に頑張ってくれ。
• 最低限必要なのはextension.js（実際のコード）とpackage.json（コマンドなどを指定しておく）の2つだけみたいです。自身のVSCode上で実行とデバッグを行うなら.vscodeフォルダごとlaunch.jsonのコピペ推奨。参考になれば！
• [参考記事]
  • 1. [ここで共有していいか不明のため削除します]　ぷろぐら(by坂尻先生)
  • 2. [https://github.com/microsoft/monaco-editor/tree/main]　monaco-editorのGitHub（VSCodeっぽい見た目にできるもの）
  • 3. [https://qiita.com/ken/items/06161e8d4bac5e0bd209]　「知識0の状態からたった2時間でVSCodeの拡張機能を作った話」
  • 4. [https://github.com/microsoft/vscode-extension-samples]　「VSCode拡張機能のサンプル by Microsoft」
  • 5. [https://web-dev.tech/front-end/javascript/cherry-blossom-petal-falling-effect/] 「JSとCSSで桜を降らせるエフェクトを実装する方法【コピペOK】」
  • 6. [https://www.youtube.com/shorts/J1LJom5NEjM/]「通知のカウント表示を作る方法」（YouTubeショート動画です）