AI を活用して最新の Web アプリを開発した方法

ChatGPT のような生成 AI は、ソフトウェア開発の新しい時代を先導しました。コーディング スキルがほとんどなくても、誰でも便利で最新のアプリケーションを開発できる時代です。この記事では、AI を使用して、今では毎日頼りにしているツールを開発した方法を紹介します。

私が解決しようとしていた問題

ChatGPT やその他の AI 言語モデルが誕生して以来、特定の単語がAI 生成コンテンツと強く結び付けられるようになりました(ChatGPT を執筆に使用すべきでない理由の 1 つです)。例としては、「delve」、「tapestry」、「testament」などがあります。私は作家として、常に適切な単語を適切なコンテキストで使用することを信条としてきました。単語がぴったり合っていて、伝えたいことを正確に表現しているときは、その単語を使用できると感じます。

残念ながら、私のクライアントの多くは同じ見方をしていません。彼らは AI によって生成されたように聞こえるコンテンツに対してますます警戒しています。私は AI ではないので (少なくとも私はそうは思いません)、AI 言語モデルで一般的に過剰に使用される単語やフレーズをすべて覚えているわけではありません。そのため、それらを避けるのは難しい場合があります。

そこで私は、提供されたテキストを単語リストと照らし合わせて分析し、「AI っぽい」可能性のある単語やフレーズをハイライト表示するツールを作成することにしました。このようなツールは、HTML (Web ページのコンテンツを構造化する)、CSS (Web ページのコンテンツのスタイル設定に使用)、JavaScript (静的な Web ページを、必要な機能を実行する「Web アプリ」に変換する) という 3 つの主要な Web テクノロジを使用して開発できます。

Web アプリ開発に最適な AI の選択

私の「 AI Vocab Checker 」のようなプロジェクトは、AI 支援ソフトウェア開発に最適な候補です。最高の AI モデルは、大量の HTML、CSS、JavaScript コードとドキュメントでトレーニングされているため、コードを出力したり、ベスト プラクティスに関するガイダンスを提供したり、効率的な実装を提案したり、開発中に発生する可能性のある問題のトラブルシューティングを支援したりできます。

LMSYS Chatbot Arena リーダーボードの上位 3 つの大規模言語モデル (LLM) (GPT-4o、Claude 3.5 Sonnet、Gemini Advanced) はすべて、Web 開発タスクを優れた能力で処理できます。ただし、このプロジェクトでは最終的に Claude 3.5 Sonnet を選択しました。

Claude 3.5 Sonnet は、主に「プロジェクト」機能のおかげで、アプリの開発専用のワークスペースを作成できる AI コーディング アシスタントとして私のお気に入りになりました。もちろん、HumanEval ベンチマークに含まれるコーディング タスクで Sonnet が競合製品よりも優れていることも役立っています。

クロードと一緒にウェブアプリを構築する

まず、左側のペインで[プロジェクト]タブを選択し(アクティブなチャットの左上隅にある Claude のロゴの上にマウス カーソルを置くと表示されます)、[プロジェクトの作成] ボタンをクリックして、Claude で AI Vocab Checker 用の新しいプロジェクトを作成しました。

それが終わったら、クロードに問題を説明する必要がありました。私が思いついたプロンプトは次のとおりです。

一般的に、達成したいことの高レベルの説明を提供し、その後にできるだけ多くの詳細を記述します。詳細に記述していない内容は AI による解釈に委ねられ、それがあなたのビジョンと一致するかどうかはわかりません。

Claude がコードを出力するのに少し時間がかかりました。その後、Visual Studio Code を使用して、そのコードを index.html ファイルに貼り付けました。その後、Web ブラウザーで index.html ファイルを開くだけで、Claude が作成した AI Vocab Checker アプリの初期バージョンが完成しました。

ご覧のとおり、Claude はたった 1 つのプロンプトで機能するアプリを作成できました。アプリは実際に期待どおりに動作します。ただし、詳しく調べると明らかな問題がいくつかあります。

• 最初の 2 つのテキスト ボックスは、下のテキスト ボックスよりもわずかに大きくなっています。
• アプリの名前が間違っています（指定し忘れました）。
• アプリはデスクトップ デバイスで利用可能な水平方向のスペースを活用していません。
• すべての単語が同じ色で強調表示されます (結果の分析が困難になります)。
• 検出された単語の使用統計はありません。
• クロードは、そうするように勧められていたにもかかわらず、ライブラリやフレームワークを一切使用しませんでした。

そこで、私は次のように促しました。

そして結果は次のとおりです。

これは大幅に改善されました。必要なのは、1 つの追加プロンプトだけです。Claude は、最新のレスポンシブ デザインを実現するためにBootstrap フレームワークを実装し、強調表示を改善するためにmark.js ライブラリを実装しました。これらを組み込むことでアプリがどのように改善されたかに感銘を受けた私は、Claude に他にどのようなフレームワークやライブラリを使用できるか尋ねたところ、AI は Vue.js、Chart.js、Tippy.js、Natural、FileSaver.js などを提案しました。

提案されたフレームワークとライブラリの中で、棒グラフや円グラフなどの単語使用統計の視覚的表現を作成できるため、Chart.js が最も便利に思えました。私は Claude に実装を依頼し、ユーザー エクスペリエンスを向上させるために、分析するテキストを結果に置き換えるように指示しました。いくつかの小さな調整とデザインの調整を行った後、次のものができました。

私の個人的なニーズに関しては、このバージョンの AI 語彙チェッカーは十分に満たすことができ、さまざまな無料プログラミング Web サイトで長年にわたり習得した非常に限られた Web 開発スキルを使用して開発するのに、わずか 15 分しかかかりませんでした。

表紙画像とスクリーンショットはDavid Moreloによるものです。