【ITニュース解説】I Tried Building a Whiteboard App with Claude 4.5 Sonnet
2025年10月04日に「Dev.to」が公開したITニュース「I Tried Building a Whiteboard App with Claude 4.5 Sonnet」について初心者にもわかりやすく解説しています。
ITニュース概要
筆者はClaude 4.5 Sonnetを活用し、業務フロー作成用ホワイトボードアプリを開発した。AIと対話しながら要件定義・実装を進め、環境設定で手間取ったものの、AIの生成する洗練されたUIや機能追加の能力は非常に高いと評価。AIはそれぞれ得意分野があり、今後はその使い分けが重要になる。
ITニュース解説
現代のソフトウェア開発において、人工知能(AI)の活用は日進月歩で進化している。この記事では、AIの一つである「Claude 4.5 Sonnet」を使って、ゼロからホワイトボードアプリケーションを構築した経験について解説する。この事例は、システムエンジニアを目指す皆さんが、AIをどのように開発プロセスに取り入れ、効率的にソフトウェアを形にしていくかについて、具体的なイメージを掴む良い機会になるだろう。
この開発のきっかけは、筆者が勤める会社でのクラウドサービス利用における制約にあった。通常、クラウドサービスを利用するには、アカウント作成や情報送信の承認など、煩雑な手続きが必要となる場合が多い。このような状況下で、面談中にビジネスのアイデアや業務の流れをリアルタイムで共有し、図として描けるホワイトボードアプリがあれば、非常に便利だと考えた。そこで、このアイデアを実現するために、AIであるClaude 4.5 Sonnetの力を借りることを決めたのだ。
アプリ開発は、まず「ユーザー要件定義」からスタートした。これは、どのような人がアプリを使うのか、彼らがどんな問題に直面しているのか、そしてその問題を解決するためにアプリにどんな機能が必要かを明確にする作業である。例えば、「会議でアイデアを視覚的にまとめたい」「チームメンバーと共有したい」といった具体的なニーズを洗い出す。次に、「要件定義」として、洗い出したユーザー要件に基づき、具体的に必要な機能のリストアップ、アプリを動かすための技術(プログラミング言語やフレームワークなど)、そして使いやすい画面デザイン(UI/UX)の要件を定めていった。
これらの要件定義が終わると、いよいよAIとの協業による「Vibe Coding」、つまり実装フェーズへと移行した。これは個人のプロジェクトであったため、AIと対話しながら、定義された要件に基づいてプログラムを書いていくという進め方だった。
しかし、AIとの協業は常にスムーズだったわけではない。開発を進める中で、Claude 4.5 Sonnetには少し「頑固な」一面があることが判明した。例えば、筆者はアプリの主要な技術として「React」と「TypeScript」というWebアプリケーション開発でよく使われる技術の組み合わせを指定した。しかし、開発環境を素早く準備するためのツールである「Vite」が初期状態で生成するJavaScriptのテンプレートが、筆者の意図したTypeScriptではない「Vanilla JS」だったためか、AIはプロジェクトを繰り返し作成し直すという挙動を見せたのだ。この経験から、AIに開発環境の設定のような重要な作業を任せる際には、そのプロセスを注意深く監視し、適切に介入する必要があることを学んだという。AIはあくまで指示されたことを実行するツールであり、人間のような柔軟な判断力があるわけではないため、細かい部分でのすり合わせが重要になる。
また、アプリの機能追加や修正も、AIとのチャットを通じて指示することで容易に行うことができた。当初計画していた、画面上に様々な図形を配置したり、作成した図を画像としてエクスポートしたりする機能に加えて、チャットでの指示一つで、配置した図形のサイズを調整できる機能も追加することができた。
完成したアプリのユーザーインターフェース(UI)は、AIが生成したとは思えないほど洗練されており、非常に見やすいものだった。このことから、Claude 4.5 Sonnetがコーディングアシスタントとして極めて高い能力を持っていることが伺える。AIがデザインのセンスまで持ち合わせているというのは、開発者にとって大きな助けとなるだろう。
今回の開発を通じて、筆者は異なるAIにはそれぞれ得意分野があるという印象も受けたという。例えば、プロジェクト全体の計画を立てる作業には「GPT-5」のような別のAIが適しているかもしれないし、プログラムの仕様書や利用マニュアルのような文書を作成する際には「Gemini」のようなAIが強みを発揮するかもしれない。これは、一つの目的を達成するために様々なツールを使い分けるのと同じように、今後のソフトウェア開発においては、目指す成果に応じて最適なAIを使い分けることが、新しい標準となる可能性を示唆している。システムエンジニアを目指す皆さんも、多様なAIツールの特性を理解し、適切に使いこなす能力が今後ますます重要になるだろう。
この事例は、AIが単なるコード生成ツールにとどまらず、開発の企画から実装、改善に至るまで、プロセス全体を支援する強力なパートナーとなり得ることを示している。AIの力を借りることで、個人のアイデアが迅速に形になり、より効率的で質の高いソフトウェア開発が実現できる時代が到来していると言えるだろう。