⛩️

VibeCoding修行#1: VSCode 拡張「Interstitial Journal」を作成した

に公開
AI
llm
Claude Code
Vibe Coding
tech

今日から日々自分が実践しているVibe Codingの記録をつけていきます。

忙しい人向け要点

  • VSCode拡張の自作はもう日本語でOK
  • 最終製品イメージ資料を与えて、「仕様を作って」「開発して」「修正して」で完成
  • Claude Codeは使うほど手に馴染む。今後その知見をSkillやSubagent、Pluginの形式で公開していきます。

はじめに

VSCode Marketplace に「Interstitial Journal」という拡張を公開しました。

この拡張は、作業の合間に短いログを残すためのツールです。
この記事では、作成の背景と、Claude Code を使った開発プロセスについてまとめます。

作成の背景

私の業務では、飛び込みのタスクが多く、一日の中で作業の流れが中断されることがよくあります。
気付くと「何をしていたか」を思い出すのに時間がかかり、集中も長続きしませんでした。

その時に、以下の記事を読みました。

ここで紹介されている手法に興味を持ち、作業をしているVSCodeから切り替えることなく手軽に実践できる仕組みがあると良いと感じました。

仕様策定と実装

最初の開発ディレクトリを作る部分は以下の記事を参考に人力で行いました。

次にそのディレクトリでClaude Codeを起動し、冒頭のLifehackerの記事全文を入力し仕様を作るように命じました。

仕様書はdocs/に出力させ、あとは「では実装計画を立ててください」「開発を開始してください」でほぼ動くものが完成。

しかし、あまり仕様書を隅々まで読んでいなかったので、最初のバージョンはVSCodeの「エクスプローラー（左のファイル一覧のペイン）」の下部についてしまったので、独立したペインにするように命令して作り直してもらいました。

その後は、実際に触りながら気付いた点の修正や逆にどんな機能があったらいいか提案させたりしながら一通りの機能を揃えました。

修正させる時のコツは

  • 「本質的な原因を発見し、深く考えたあとに修正に着手してください」と命じる
  • なかなか修正が進まない局面（ままある）では、
    • エラーメッセージをそのままコピペするのが直接的ですが、
    • エラーが出ず動作がおかしいだけという場合は原因を人間が想像して「これこれこういうことかもしれないからその観点で調査して」と具体的に命令（この時点で初めてプログラマとしての経験と直感が活きる）

Vibe Codingという呼称は、なんだか「テキトーでなんか結局ものにならないのでは」という不安を含む語でした。初期は（今も？）「うまくいかなければ捨てればいいんだし」とまで言う過激派もいました。

しかし、もう少し丁寧に、あたかも自転車に乗るように適度な規律と自由度のバランスで進めていけば非常に良く機能します。

その他の人力作業は以下の3つぐらい。

  • .gitignoreの調整
  • アイコンを探し、それをpackage.jsonに反映
  • バージョン番号の管理

実際に作ってもらった機能

拡張「Interstitial Journal」が提供する主な機能は次のとおりです。

  • Cmd+Shift+J / Ctrl+Shift+J で新規ログ作成
  • 自動タイムスタンプ
  • シンプルな Markdown テンプレート
  • 日別のタイムライン表示
  • カレンダーによる過去ログの一覧
  • キーワード検索
  • 日次・週次・月次の簡易サマリー作成

Claude Codeは使えば使うほど手に馴染む

最近は本業はClaude Team Premiumプランで、趣味はClaude Maxで、プログラミングの98%ぐらいはClaude Codeに書かせています。

逆にSubagentやSkillなどのMarkdownを書く頻度がものすごく増えています。Skillはskill-creatorもあるのでそれすらなくなりそうです。

VSCode 拡張開発に関しては、基礎的な知識はどこかの記事で少し読んだだけで、環境構築や最初の雛形作成に手間がかかる印象があり、手を付けずにいました。

Claude Code を使うことで、その障壁がかなり下がりました。
必要な構成を整えてもらい、修正点を伝えると自然に対応してくれるため、初めての拡張でも短期間で形にできました。

おわりに

Claude CodeのようなAI開発エージェントは、出来上がるコードの品質については様々な評価がありますが、使えば使うほど上達してくるものだという実感があります。

まだ明確に言語化できないのですが、その知見は今Claude CodeのSubagentやSkillとして形になってきているので、再利用できる形でそれらも今後紹介していきたいと思います。

Discussion