キーボードストーム：完全に AI で完成したフロントエンドホワイトボードプロジェクト#
新米プログラマーとして、最近の AI のコーディング能力がますます強化されているのを見て、思わず AI を使ってプロジェクトを完成させてみたくなりました。AI の力だけで、ほとんどフロントエンドを理解していない人がどの程度できるのかを見てみたいと思いました。また、このプロジェクトを誰かに見てもらえたら、キーボードストームという概念を広めたいとも思っています。
構想#
プロジェクトの構想はこうです：市場にあるホワイトボードツールを使ってフローチャートやマインドマップを作成する際のワークフローは大体以下のようになります：
- マウスでコンテナを作成する（画面上でドラッグして矩形を得るか、要素ライブラリから要素をホワイトボードにドラッグする）
- マウスでダブルクリックしてこのコンテナに入る
- 手をマウスから離し、キーボードで内容を入力する
- 内容を保存し、マウスに戻って次のコンテナを作成する
描く内容が増えてくると、頻繁にこのように切り替える必要があり、紙の上でマインドマップやフローチャートを構築するのと比べて、マウスとキーボードを行き来し、コンテナの位置を考慮し、ドラッグしてコンテナの位置を考えなければなりません。そして、実際に内容を入力する時には、思考がこれらの小さな動作によって中断されてしまうかもしれません。
そのため、私はこのようなワークフローが嫌いですが、受け入れざるを得ませんでした。他のワークフローも考えました。例えば：
- 草稿用紙にすべての内容を大まかに描く
- その後、画面上で草稿に基づいて必要なすべてのコンテナを描く
- それから一つずつクリックして内容を編集する
この方法の方が良いと思います。思考があまり簡単に中断されることはありません。しかし、これではそれらの一部の意味が失われてしまいます。それらは単なる、私が元々描いたあまり美しくない図を美化するためのツールになってしまいます。そして、私はこのワークフローを打破するのに適したツールを見つけられませんでした。ちょうど最近、AI のコーディング能力がますます強化されているので、あまりフロントエンドを理解していない状態で AI を使ってこのプロジェクトを完成させてみました。
概況#
このプロジェクトでは、cursor、Trae、Trae CN、vscode の copilot、Cluade 3.7 Sonnet、Cluade 3.7 Sonnet、Cluade 3.7 Sonnet Thinking、Gemini 2.5 Pro、GPT-4.1、GPT-4o、deepseek-v3、deepseek-r1 などのモデルを試しました。以前の子供たちが百家の食事で育ったとしたら、笑われても構いませんが、** このプロジェクトは百家のモデルで育ったと言えます。** 子供に食事を与えるモデルはこれらのコードをよく理解しているかもしれませんが、子供の主人はほとんど理解していないかもしれません。まるで何も知らないボスが部下のエンジニアに仕事を指示するようなものです。
おそらく、キーボードストーム（kb-storm）は、ブレインストーム（Brain storm）からコピーした言葉であることが想像できるでしょう。このプロジェクトはキーボードを中心にしたプログラムで、ウェブページに入ると、ctrl + dを押すことで矩形またはカード、付箋（私はカードの背景色が好きで、付箋のようです）を得ることができ、直接キーボードを使ってアイデアを入力できます。アイデアを書き終えたら、再度ctrl + dを押して次の付箋を作成し、入力を続けることができます。
市場にあるほとんどのツールと比較して、ショートカットキーを使うことで直接コンテナを作成し、編集状態に入ることができるため、上記のマウスの手順を省略できます。私たちはキーボードでアイデアを入力するだけで済み、マウスを探してキーボードから離れる必要はなく、次のコンテナの作成位置を考える必要もなく、コンテナのサイズを考える必要もなく、ダブルクリックして編集状態に入る必要もありません。あなたの思考の流れの速度は、あなたの手の速さだけに依存します。
ctrl + dを押した後、付箋（カード / コンテナ）の位置はどこに現れるのでしょうか？画面表示領域のランダムな位置に現れます。キャンバスを移動またはズームすると、それはキャンバスの新しい位置（依然としてあなたの視覚領域内）にランダムに生成されます。この特性を利用して、ホワイトボードの異なる領域に異なるアイデアエリアを作成できます。
なぜランダム生成なのか？グリッド配置はあまりにも堅苦しいからです。ランダム生成された付箋の色も異なります。ランダム生成された付箋は整理が必要で、私たちの思考も整理が必要です。付箋を整理する段階で移動することは、私たちの思考を整理するプロセスでもあり、付箋が移動する際には他の付箋と衝突することもあります。二つのアイデアが衝突し、新しい火花が生まれます。
カードのサイズはどうでしょうか？私は小さなアイデアの内容を収容できる比較的適切な値を設定しました。そして、入力する内容が多くなると、それは自動的に大きくなり、あなたの文字を収容し、完全に表示されることを保証します。
その他のキーボード機能#
キーボードの機能を強化するために、ctrl + dの他にもいくつかの操作を設定しました：
1：数字の1を押すと、カード選択モードに入ります。方向キーを移動させることで、カード間を選択できます。⬆️を押すと、現在のカードのその方向にある別のカードが選択されます。他の方向キーも同様です。現在、選択できないカードに遭遇したことはありませんが、極端な場合には選択できないカードがあるかもしれません。その場合は、マウスを使って操作する必要があるかもしれません。
2：数字の2を押すと、カード移動モードに入ります。方向キーを移動させることで、現在選択されているカードを移動できます。カードが選択されていない場合は、カード選択モードに戻ります。方向キーを移動させる際にshiftキーを同時に押すと、カードの移動速度が速くなります。
3：数字の3を押すと、線選択モードに入ります。方向キーを移動させることで、カード間の連線を選択できます。これは循環選択であり、カードのようにアルゴリズムは設定されていません。
ctrl + i：線の選択モードに入った際に、選択されたカードがある場合、このショートカットキーを押すと、方向キーを使って別のカードに移動し、選択した後にenterを押すと、これら二つのカードの間に線が引かれます。これもマウスをあまり使わない機能です。
tab：以前のtabキーは線とカード間の循環に使用されていましたが、現在のtabの機能は、選択されたカードの色を切り替え、選択された線の矢印の方向を切り替えることです。カード選択モードと線選択モードで試してみてください。
ショートカットキーの変更：なぜカード作成のショートカットキーがctrl + dなのか？（あなたをこのウェブページにブックマークさせるため（冗談））答え：適当に設定したからです。最もよく使うctrl + dとctrl + iのショートカットキーを変更して、あなたの好きな、より便利なショートカットキーにすることができます。
主なシーンとワークフロー#
主な機能を紹介したので、基本的にキーボードストームを使用できるようになりました。プロジェクトのアドレスをお伝えする前に、私が考えたシーンとワークフローについてお話ししたいと思います。
疑いなく、最初のシーンはブレインストーミングです。コンピュータでブレインストーミングを行う際に、以前のホワイトボードツールを使用する必要はありません。マウスでカードを作成し、クリックしてからキーボードで入力するというワークフローではなく、直接キーボードを使ってキーボードストームを行うことができます！
- アイデアを生み出し、キーボードショートカットを押すだけでアイデアを入力できます。
- 二つ目のアイデアを生み出し、再度キーボードショートカットを押すことで入力を続けることができます。
- このプロセスはスムーズで、ブレインストーミングが滞ることはありません。
- アイデアを書き終えたら、カード間の位置や関係を整理し、カードをドラッグすることで思考を整理し、新しい火花を生むことができます🔥🔥🔥
もう一つのシーンは整理です。本を読み終えた内容を整理したり、学んだ知識を整理したり、イベントの振り返りを行ったり、一日の思い出を整理したりします。
- 最初から思い出す必要はありません。最初から思い出すことは内容を整理できますが、時には非常に苦痛です。
- このツールを使って、記憶に残っている最も印象的な内容を直接画面に書き出すことができます。
- 次に、二番目に印象に残った知識やイベント、または単純に印象に残ったことを書きます。
- こうして思いつくものをすべて書き終えます。
- 最後に、カードの分類や移動の過程で、記憶に残っているものや、記憶に残っていないものを直感的に見ることができ、記憶の欠落した内容についてはさらに復習し、他の人と振り返り、整理することができます。整理分類後、あなたがそのものに対して持っているすべての印象を見ることができ、より良い整理と出力が可能になります。
あなたは試してみたいと思っているかもしれません。もう一つの小さなシーンは自由な書き込みです。思いついたことをそのまま書くことができ、このツールの役割に非常に合っています。書き終えた後、カード間の整理も自己の思考を考えるプロセスです。
まとめ：主なワークフローは、まずキーボードで入力したいすべてを入力し、その後ランダムに配置されたカードを整理することです。整理の過程では、キーボードを使っても、マウスを使ってもよく、新しい火花を生むことができます。
プロジェクトアドレス#
それでは、プロジェクトのアドレスを以下に示します：
体験アドレス：（github ページ静的デプロイ）
https://qkyufw.github.io/kb-storm/
プロジェクトホームページ：
ユーザーマニュアル：（AI が書いたもので、大部分の機能に問題はありませんので、ぜひご覧ください）
https://github.com/qkyufw/kb-storm/blob/master/MANUAL.md
さらに多くの機能#
まだ読んでいるので、私が設計した他の機能をいくつか共有します。
Markdown のインポートとエクスポート#
画像のエクスポート機能を設計しましたが、この機能はあまり完璧ではありませんが、使えると思います。mermaid のインポートとエクスポート機能も追加しましたが、これは非常に効果的で、他のツールに同期して使用できますが、安定性は保証できません。
Markdown のインポートとエクスポートについて、これらの内容をどのように保存し、可読性を保つかを考えました。大胆に Markdown を使って内容をエクスポートすることにしました。エクスポートされるタイトルは kbstorm で始まり、カードの内容は Markdown の本文に書かれ、各カードは---で区切られます。Markdown の最後にはメタデータがあり、インポート時にメタデータが認識されると、この全体の図を完全に復元できます。
Markdown のインポートについては、自分で手書きの Markdown を作成してエクスポートすることもできます。具体的なワークフローは以下の通りです：
- テキスト記録を迅速に使用する必要があるとき、Typora や他の Markdown 編集ソフトを開き、本文の開始部分にアイデアを書きます。
- 一つのアイデアを書き終えたら、次の行に
---を書き、区切りを作ります。 - その後、次の行に新しいアイデアの内容を書きます。
- Markdown を書き終えたら、タイトルやメタデータを書く必要はなく、直接ウェブサイトでインポートします。
- 内容が分割され、ランダムな位置にカードが生成され、kbstorm を使って作業を続けることができます。
自由な連結機能#
ツールバーの自由連結ボタンを押すと、ホワイトボード上で自由に線を引くことができます。線の始点と終点について、カードの端に合わせる必要はありません。始点はカード内の任意の点で、終点は別のカード上の任意の点です。始点と終点の領域は非常に広く、接続すると自動的に二つのカードの端を接続し、吸着します。ただし、始点または終点がカード上にない場合は、連結することはできません。
一点の想像#
他の機能は普通のホワイトボードツールの機能に似ていますが、ああ、そうだ、カードをダブルクリックするとそのカードの編集に入ります。ホワイトボードの空白の位置をダブルクリックすると、新しいカードが作成され、直接キーボードで入力を開始できます（この機能はモバイル端末で非常に便利で、任意の領域をダブルクリックすることで新しいカードの内容編集を開始できます。カードをドラッグして描く必要がなく、便利で簡単です）。
レイアウトシステム：右上にランダムレイアウトというレイアウトが設計されています。これは、ショートカットキーやインポートされたカードが、画面の視覚領域のランダムな位置に現れることを意味します。このレイアウトアルゴリズムに対して、ユーザーがより高いカスタマイズを持つことを望んでいます。例えば、グリッド配置や螺旋配置など。現時点では、このシステムはまだ不完全です。
他にもいくつかの小さな機能がありますが、ここでは一つ一つ挙げることはしません。
AI に対する感想#
この百家のモデルで育った子供に対して、私はつまずきながら感じています。完全に使えるプロジェクトとしては、70％は完成していると言えるでしょう。
AI がコードを書く最大の感想は、一般の人々にはまだ距離があるということです。もしあなたが全くある方向を理解していない場合、導き手がいるか、完全なチュートリアルが必要です。なぜなら、私は最初はフロントエンドについてほとんど何も知らなかったので、最初に AI を使って構築する過程で、AI は React プロジェクトを作成する方法を教えてくれませんでした。私は直接 HTML ウェブページを作成させましたが、まるでハサミを持って携帯電話を解体しようとしているようでした。
何かを理解していない場合、あなたが指示する人が作業を行うと、あなたも騙される可能性があります。AI は、まだ全知全能のレベルには達していません。あなたはコードを理解しなければ、AI を柔軟に使って問題を解決することはできません。おそらく、AI は上級プログラマーにとってはより役立つでしょう。
また、私が遭遇したいくつかの問題についてもお話しします。記録が不完全で申し訳ありません：
- エラーが発生し、AI に修正を依頼すると、A と B の二つの選択肢を提示されます。A の選択肢が間違っていると伝えると、B の選択肢で再試行しますが、B も間違っていると伝えると、再び A の選択肢に戻ります。行ったり来たりして……、無言です。
- エラーが発生し、ABC の三つの選択肢を提示され、三つの選択肢をすべて使用して、コードが深刻に冗長になり、バグを解決できないまま大量の内容を出力することがあります。
- 生成されたコードに参照エラーが発生し、更新を依頼すると、誤ったパスで新しいファイルを生成します……、私たちは何と言えばいいのでしょうか……
- バグが発生し、ABC の各段階に問題がある可能性があり、AI は AB の段階に問題があると分析し、A の段階だけを修正しようとします。
AI を使ってコンテンツを生成する際の最も頭痛の種は時間の問題です。あなたの要求を比較的正確に説明する必要があります。つまり、AI が理解できる言葉でコミュニケーションを取る必要があります。理解の誤り、ネットワークの波動、デバッグのエラーがあると、大量の時間を浪費することになります。特に、あなたが AI が書いた内容を理解していない場合には。
もう一つの頭痛の種は、AI とのコミュニケーション方法です。私は AI とのコミュニケーションの過程で、あなたの要求を別の AI に渡し、提示詞を書いてもらう方法を学びました。あなたはそれを使って満足のいく、完全な提示詞を生成し、編集プログラムに渡して修正させることができます。多くの場合、AI が書いた提示詞は非常に完璧です。もし不完全だと感じた場合、再度修正を依頼することもできます。
もしバグが発生し、AI が解決できない場合、提示詞を変更することを試みることもできますし、別のモデルを試すこともできます。多くの場合、驚くべき効果があります！！！これがこのプロジェクトが百家のモデルで育った理由でもあります。
今のところ、私は ask モードを使うのが好きです。これらの AI と戦うのはしばらくの間続いており、React についてはあまり理解していませんが、少しは理解できるようになりました。そして、ask モードを通じて AI とアーキテクチャを設計し、リファクタリングし、機能の設計について議論し、バグの解決方法について話し合い、より良い解決策を探ることができます。
最後の提案：git をうまく使い、ロールバックをうまく使いましょう。
AI は依然として単なるツールです。
終わり#
長文を最後まで読んでいただきありがとうございます。もう一度言いますが、私はこのプロジェクトを通じて、AI を使ってこのプロジェクトをどの程度構築できるかを見たかったのです。また、キーボードストームという概念を広めたいとも思っています。おそらく、キーボード愛好者だけでなく、他の人にも好まれるでしょう。
私はキーボードストームが流行することを期待していません。このプロジェクトは、私が AI を使って設計した、まだ使えるツールに過ぎません。もしこのプロジェクトが良いと思ったら、さらに改善したいと思っている方、大歓迎です！
最後に：あなたの考えを残してください。