最近、AIでコードを書くことが増えてきました。ChatGPTやClaudeにちょっとした処理をお願いすると、いい感じのコードがサッと出てきてすごく便利です。
でも、便利すぎて、どこに保存したかわからなくなる問題が起きてこまっていました
記憶力とフォルダ整理の限界!! 趣味でちょこちょこコーディングしてると・・・
-
「あれ、あのいい感じのやつどこだっけ…？」
-
「なんか雰囲気は覚えてるけど、細かい構文が出てこない」
-
「VSCodeに入れたのか、メモ帳に貼ったのか、AIの履歴に残ってたのか…」
ってことが結構あって。
しかも中年にもなると、新しく覚えたことがスルスル抜けていく感覚があります。
スニペットアプリを探したけど…
ちゃんとしたスニペット管理アプリもいろいろ試しました。でも、「プロ用は実務向けで学習向きじゃないなー」とか設定が複雑だったり、ショートカットを忘れてしまったりで、結局あまり使わなくなってしまいました。
自分がほしいのはもっとシンプルなもの。
-
マウスで操作できて
-
見た目もわかりやすくて
-
自分用のメモも一緒に残せて
-
タグとかで整理しやすくて
-
完全オフラインで安心して使えるやつ
そんなわけで、「コードスニペット帳」を自作してみました。
作ったもの： 「ワンクリックMyコード」
HTML / CSS / JS だけで動く、シンプルなコード保存アプリです。
特にこだわったのは：
-
コードをワンクリックで保存
-
自由にタグをつけて分類・並び替え
-
自由にコメントをつけて登録できる
-
コードをクリックするだけでクリップボードにコピーできる！！
-
登録したコードはいつでも再編集可
-
言語ごとにハイライトします
自分だけの「コード辞典」として使える!!
他にも
-
保存はブラウザのローカルストレージ
-
JSONでバックアップ＆復元もOK
-
登録したコードの配布もできる
-
バックアップからの復元もドラッグ&ドロップでOKコードの説明や、検索タグも自分で入れられます
UIはこんな感じ
🔗 体験版はこちら - github版（UIお試し版）
https://taro-mura.github.io/code-snippet-app_jp/
-
タグをドラッグして並び替え
-
タグで検索して目的のコードをすぐ表示
-
「COPY」ボタンでコードを即コピー
🔗 フル機能はこちら - github版
https://taro-mura.github.io/code-snippet-app_full/
- コードを登録できる ※自由に説明を書いて自分の理解を残すことができる
- 登録した内容をjsonでバックアップできる
- jsonをドラッグ&ドロップでアップロードできる
- 注意：バックアップしないとキャッシュクリアで全て消えます
活用方法はこんな感じをイメージしています
-
日々のコードメモ帳として
-
AIからもらったコードの保管庫として
-
学習の記録・自分用リファレンスとして
-
「コピペじゃないけど、自分で書き直すほどじゃないコード」の置き場に
販売ページも作ってみました
もし、「オフラインで使いたい」「自分でもっとカスタマイズしたい」 と思った方は、ぜひ覗いてみてください。
オフラインでも使えるダウンロード版（￥300）→ https://kenji-webapps.booth.pm/items/7049605
※html,css,jsが全てzipに入っているので、自分でいくらでもカスタママイズできます。好きな機能を足したり、色を変えたりといい感じにしてください！
おわりに
最初は「どうせ自分用だし…」という軽い気持ちで作り始めたんですが、気づいたらUIにこだわりすぎて、けっこうちゃんとした見た目になりました。せっかくなので、同じ悩みを持っている人に使ってもらいたいです。
AIと一緒にコードを書き始めた人、プロ用ツールにちょっと抵抗がある人、にも、ちょっとだけ便利な「相棒」になるかもしれません。
ご意見・フィードバック歓迎！
「こういう機能があったらいいな」などあれば、ぜひコメントで教えてください。改善のヒントになります！