👤
バイブコーディングをやってみたいがどこから始めていいかわかりません。
以前けんスピで、Chromeの拡張機能からやってみるのがいいと聞き興味がありますが、結局何の機能があれば便利かとかもわかりません。これをAIにも聞いて見たのですが回答もあまりピンと来ず。【これがあったらいいのに】を思いつくために、どうやって考えたらいいとかあるんでしょうか?
以下Geminiからの回答です!
バイブコーディング、素晴らしいですね!自分の「あったらいいな」を形にしていくプロセスは、エンジニアとしてのスキルアップにも、日々の業務の効率化にも直結します。特にChrome拡張機能は、普段使っているブラウザを直接ハックできるので、成果を実感しやすく、バイブコーディングの第一歩として非常におすすめです。
「何を作ればいいかわからない」というのは、実は多くの人が最初にぶつかる壁です。AIに聞いてもピンとこなかったとのこと、おそらく一般的な回答が多く、ご自身の具体的な業務や興味に刺さらなかったのかもしれませんね。
大切なのは、無理に壮大なアイデアを考えようとしないことです。まずは、ご自身の日常に潜む、ほんの些細な「不便」「面倒」「もっとこうだったら」を見つけることから始めてみましょう。
「あったらいいのに」を思いつくための思考法
まず、アイデアを無理やりひねり出すのではなく、自然に見つけるための考え方をご紹介します。
- 不満・面倒くさいことの棚卸しをする
- PCで作業している中で「あー、面倒だな」「これ、いつも同じことやってるな」と感じる瞬間はありませんか?
- 実践方法: 1日、PCの横に付箋やメモ帳を置いておき、少しでも「イラッ」「面倒」と感じた作業をすべて書き出してみてください。「毎日JIRAを開いて担当チケット一覧に飛ぶのが面倒」「このサイト、いつも広告が邪魔で見たいコンテンツがすぐ見れない」など、どんな些細なことでも構いません。
- 特定のウェブサイトに的を絞る
- あなたが毎日、あるいは頻繁に使うウェブサイトはありますか?(例: GitHub, JIRA, Slack, Google Drive, 社内ツール, Qiitaなど)
- 実践方法: そのサイトを使っているときに、「このボタンがここにあればいいのに」「この情報を自動でコピーしてくれたら楽なのに」「この見た目、もっとこうだったら見やすいのに」といった視点で観察してみてください。特定のサイトに特化すると、課題が具体的になりやすいです。
- ルーチンワークを疑う
- 毎日、あるいは毎週決まって行っている定型作業はありませんか?
- 実践方法: 「毎週月曜に〇〇のレポートを開いて、数値をコピーして、スプレッドシートに貼り付けている」といった作業を自動化できないか考えてみましょう。ボタン一つでその作業が完了したら、最高だと思いませんか?
- 情報の見せ方を変える
- 既存のウェブサイトの情報はそのままに、自分にとって見やすいように表示を変える、というのも立派なアイデアです。
- 実践方法: 「この技術ブログ、コードブロックが小さくて見づらいから大きくしたい」「GitHubのPRで、画像ファイルは常に閉じた状態で表示したい」など、情報の見せ方(UI/UX)に関する改善点を考えてみましょう。
無理やり考えたChrome拡張機能アイデア10選
上記の思考法を踏まえ、CTOやエンジニアの方が「これ、地味に便利かも」と思っていただけそうなアイデアを10個考えてみました。ぜひ、ご自身の状況に当てはめてみてください。
- 【GitHub特化】PRレビュー超高速化くん
- 解決する不便: PRのレビュー時、毎回同じような指摘(タイポなど)をしたり、LGTMの画像をMarkdownで入力したりするのが面倒。
- 機能:
- PRのコメント欄に、「LGTM」「typo:」「Requesting changes」など、よく使う定型文や画像をワンクリックで挿入できるボタンを追加する。
- package-lock.jsonやyarn.lockなど、差分が多くなりがちな特定のファイルをデフォルトで非表示(折りたたみ)にする。
- 【JIRA/Asana/etc.】チケット情報コピー整形くん
- 解決する不便: チケットのURLをSlackなどで共有する際、URLだけだと何のチケットかわかりにくい。毎回チケット番号とタイトルをコピペするのが面倒。
- 機能:
- チケットページに「共有用コピー」ボタンを追加。クリックすると[JIRA-123] ユーザー認証機能の実装のように、[チケット番号] チケットタイトルの形式でクリップボードにコピーされる。
- 【英語学習者向け】技術英語スイスイ読みくん
- 解決する不便: 英語の技術ドキュメントやブログを読んでいるとき、知らない専門用語が出てくるたびに翻訳サイトを開くのが面倒。
- 機能:
- ページ上の英単語を選択(あるいはマウスオーバー)すると、その単語の日本語訳や簡単な解説がポップアップで表示される。
- (発展)自分だけの単語帳に登録できる機能。
- 【Web会議用】タイムスタンプ付きメモ支援くん
- 解決する不便: Google MeetやZoomでの会議中、「今の発言、議事録に残しておこう」と思っても、後からどの部分か探すのが大変。
- 機能:
- 会議画面に「TIMESTAMP」ボタンを追加。クリックすると、現在の会議経過時間(例: 15:32)とカーソルがアクティブなメモアプリ(Notion, メモ帳など)に自動でペーストされる。
- 【開発者向け】開発用ダミーデータ一発入力くん
- 解決する不便: 開発中のフォーム画面で、テストのために毎回同じような名前、メールアドレス、住所などを手入力するのが面倒。
- 機能:
- 右クリックメニューに「ダミーデータ入力」を追加。氏名、メールアドレス、電話番号、住所(日本語/英語)などのダミーデータを一発で入力してくれる。
- 【情報収集】コードスニペット・コレクター
- 解決する不便: QiitaやZenn、Stack Overflowなどで見つけた役立つコードスニペットを、後で見返せるようにどこかに保存したいが、いちいちコピペするのが手間。
- 機能:
- Webページ上のコードブロック (<pre><code>タグなど) の右上に「Save」ボタンを表示。クリックすると、事前に設定したNotionやScrapboxの特定ページに、コードと引用元URLを自動で追記してくれる。
- 【タブ整理】プロジェクト・コンテキスト・マネージャー
- 解決する不便: A案件の調査、B案件の開発、個人の勉強…と作業が切り替わるたびに、大量のタブを開き直したり閉じたりするのが大変。
- 機能:
- 現在のウィンドウで開いているタブ一式を「A案件」「B案件」といった名前で保存できる。
- 保存したセットをワンクリックで復元できる。
- 【デザイン確認】CSSセレクタ指定スクリーンショット
- 解決する不便: ページの特定要素のデザインを共有したいとき、スクリーンショットを撮ってから画像編集ソフトでトリミングするのが面倒。
- 機能:
- 拡張機能のボタンを押すと、ページ上のHTML要素がハイライトされる。キャプチャしたい要素(例: ヘッダー、特定のカードコンポーネント)をクリックすると、その部分だけを綺麗にスクリーンショット撮影してくれる。
- 【セキュリティ】見せちゃいけない情報マスキングくん
- 解決する不便: 画面共有でのデモや、ブログ用のスクリーンショットを撮る際に、個人情報やAPIキーなどが映り込んでしまうのが怖い。
- 機能:
- 事前に設定したキーワード(例: api_key, secret, 自分の名前)や正規表現にマッチする文字列を、ページ上で自動的に ***** のように黒塗り表示する。
- 【汎用】マルチエンジン・クイック検索
- 解決する不便: エラーメッセージなどを調べる際、Googleで検索して、ダメならStack Overflow、次はGitHub Issues…と複数のサイトで同じキーワードを検索するのが手間。
- 機能:
- ページ上のテキストを選択して右クリックすると、「Googleで検索」「Stack Overflowで検索」「GitHubで検索」といったメニューが表示され、新しいタブで一気に検索できる。
まずはこの中から「あ、これなら自分のイライラを解決できそう」と感じるものや、作っていて楽しそうなものを選んで、非常にシンプルな機能からでいいので挑戦してみてはいかがでしょうか。バイブコーディングは、楽しむことが一番の原動力です!
- ページ上のテキストを選択して右クリックすると、「Googleで検索」「Stack Overflowで検索」「GitHubで検索」といったメニューが表示され、新しいタブで一気に検索できる。
🤖
使用プロンプト
(質問文)
無理やりでも十個案を考えてください。
⚡使用AIサービス:Gemini
コメントするにはログインが必要です。
他の回答も見る(1件)