2
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

IBM BobでWebアプリを作ってみた

2
Last updated at Posted at 2026-01-06

IBM Bobとは

 2025年10月7日にIBMから、IBM Bobが発表されました。IBM Bobは、"コード・アシスタントではなく、AI開発のパートナー"と説明されていて、コードを書くお手伝いをしてくれるだけでなく、ソフトウェア開発ライフサイクル全体を効率化してくれるような製品になっています。特徴などは、以下のリンクにまとめられているのでぜひご覧ください。

単なるコード・アシスタントではないとは

 一般的なコードアシスタントは、実装中のコード補完や部分的なコード生成を支援するもの、というイメージを持たれている方が多いと思います。実際に ChatGPT などを使ってコーディングを手伝ってもらった経験がある方であれば、その感覚に近いです。
 一方で IBM Project Bob は、そうした一般的なコードアシスタントとは少し立ち位置が異なります。日本語で要件を伝えると、対話を通じて意図を整理しながら、実際に動作するコード一式を自動で作成してくれます。
 今回は、Bobの使い方のイメージを具体的につかんでいただくために、Bobを使って天気予報のWebアプリを作成していきます。

Bobを使って、Webアプリを作る

 それでは、Bobを使って天気予報のWebアプリを作成していきます。まず、Bobを起動します。画像のようにVS Code上で使うことができます。

スクリーンショット 2026-01-06 17.33.05.png

Bobではモードを選択することができます。"Plan"モードにして、右側のチャットの部分で、。「市区町村名を入力すると天気予報が出てくるアプリを作成したいです。」とアプリの作成をお願いしてみます

スクリーンショット 2026-01-06 17.36.25.png

すると、画像のようにBobから確認したい観点が返ってきました。Webアプリ作成について不慣れですと、何をお願いしたら良いのかそもそもわからないですが、このようにアシストしてくれるのはとても助かりますね。フォルダの場所はBobの指定の場所で問題なかったので、承認をクリックします。

スクリーンショット 2026-01-06 17.37.56.png

構成についても質問されました。今回はシンプルに一番上のものを選択します(※前にBobを使って、一度作ったことのあるアプリを再度作っているため、既存と同じ構成と表示されています)。

スクリーンショット 2026-01-06 17.42.12.png

天気予報アプリの仕様についても聞いてくれました。こちらも一旦はシンプルなものを作成しようと思うので、一番上のものを選択します。Bob側から選択肢を提供してくれので、開発しやすいです。

スクリーンショット 2026-01-06 17.44.54.png

要件が定まり、アプリ作成の準備が整いました。Bobが計画をまとめてくれました。今後どのような順序でアプリが作成されるのか確認することができ、大変便利です。こちらの計画を承認し、アプリ作成を進めてもらいます。"Auto-approval disabled"を選択すれば自動で進めていくこともできます。

スクリーンショット 2026-01-06 17.46.24.png

細かな計画が行われた後に、アプリ実装に移ります。Bobが提示してくれた内容で問題なかったため、承認し"Code"モードに切り替え、アプリ実装を行なってもらいます。

スクリーンショット 2026-01-06 17.49.40.png

スクリーンショット 2026-01-06 17.49.47.png

計画に沿って、コードが実行されていきます。アプリの動作確認とテストまで自動で行ってくれます。

スクリーンショット 2026-01-06 17.52.08.png

アプリが完成し、web上での動作確認が可能になりました!コマンドを実行し、できたアプリを見てみます。

スクリーンショット 2026-01-06 17.57.15.png

シンプルであるものの、とてもおしゃれなアプリが出来上がっていました(API keyは別途OpenWeatherMapで取得し、入れることで使用することができます)。

スクリーンショット 2026-01-06 17.58.20.png

試しに”東京都”と入力してみます。

スクリーンショット 2026-01-06 17.59.47.png

とてもわかりやすく現在の天気が表示されています。このままでも十分良いのですが、明日の天気も同時に確認できるようにBobにお願いしようと思います。先ほどと同様にChat画面で依頼をし、承認を行なっていきます。

スクリーンショット 2026-01-06 18.31.01.png

追加の作業を自動で実行してくれます。

スクリーンショット 2026-01-06 18.02.39.png

最終的に画像のようなアプリが実装されました。明日の天気もしっかりと表示されています!Bobにchatで気軽にお願いするだけで、こんなに簡単に動くアプリができました。

スクリーンショット 2026-01-06 18.06.54.png

IBM Bobを使った印象

 Chat 画面で Bob に簡単な文章で依頼するだけで、実際にアプリを作成できました。細かい要件を最初から自分で書かなくても、Bob の方から必要な事項を対話の中で整理し、順に確認してくれる点は、Web アプリ開発に不慣れな方にとって特に心強いと感じました。
また、アプリの動作確認やテストまで自動で行ってくれるため、「コードが生成されただけ」ではなく、実際に動作するアプリが完成します。一般的な生成AIではコードは出力されても動かないケースが少なくありませんが、IBM Bob では、最初から最後まで動くものを一貫して作ってくれる点が、大きな安心感につながりました。まだまだ試行錯誤中なのですが、今後もIBM Bobをどんどん試していこうと思います!

2
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?