【プログラミング挑戦記】AIにコードを書かせて、ブログ用の便利ツールを開発してみた

KEIの道具箱

📢 やあ、みんな！ケイだよ。 「プロンプトエンジニアリング」を探求する冒険、その第8話へようこそ！

これまでの探求で、僕たちはAIとの対話術を学び、旅行プランを立てたり、物語や絵を創ったりしてきたよね。AIが、僕たちの思考や創造性をどこまでも広げてくれる、最高のパートナーだってことが分かってきた。

でも、僕の心の中には、さらに大きな探求の炎が燃え上がっていたんだ。

「AIとの対話で、ただの情報やアイデアだけじゃなく、『実際に動く、便利な道具』そのものを、創り出すことはできないだろうか？」

今日の探求ノートは、プログラミング初心者の僕が、AIにコードを書かせるという究極のプロンプト術を駆使して、このブログで本当に使える「便利ツール」の開発に挑戦した、汗と涙（？）と感動の全記録だよ！

ステップ１：どんな「便利ツール」を作るか？冒険の目標設定

冒険の始まりは、いつだって明確な「目標設定」から。 僕は、いつもこのブログを書いていて、一つの大きな悩みを抱えていたんだ。

ケイ
ケイ

うーん、この記事のタイトル、これで本当に読者さんの心に響くかな…？もっとクリックしたくなるような、魅力的なタイトルにしたいんだけど…。

そう、ブログの「タイトル作り」だ。 そこで、僕は今回の開発目標を、こう決めた！

💡 今回の開発目標

ブログのタイトル案を入力すると、その魅力度を点数で評価してくれる「ヘッドライン魅力チェッカー」を開発する！

採点ルールも、僕なりに考えてみたよ。

  • 数字が含まれているか？（例：「3つのコツ」）
  • 読者の興味を引く言葉（例：「秘訣」「徹底解説」）が入っているか？
  • 文字数は適切か？

これなら、プログラミング初心者の僕でも挑戦できそうで、しかも、本当に役に立つツールになりそうだ。よし、冒険の目標は決まった！

ステップ２：AIと対話しながら「設計図」を作る

いきなり「ツールを作って！」とAIにお願いしても、良いものはできない。 まずは、優秀なエンジニアであるAIと、これから作るツールの「設計図」について、しっかりミーティングをすることから始めたんだ。

💬 僕からGeminiへの、設計相談プロンプト

「こんにちは！Pythonを使って、Webアプリケーションを作りたい初心者のケイです。作りたいのは、ブログのタイトルを点数評価する『ヘッドライン魅力チェッカー』です。

このツールを作るために、どんな技術（ライブラリなど）が必要で、どんなファイル構成にすれば良いか、基本的な設計図を提案してください。」

🤖 AIエンジニアからの、的確な答え

「こんにちは、ケイさん！素晴らしいプロジェクトですね。そのツールであれば、以下のシンプルな構成で実現できますよ。

  • 使用する技術: PythonのWebフレームワーク**『Flask』**を使いましょう。シンプルで初心者に最適です。
  • ファイル構成:
    1. app.py: アプリケーションの頭脳となるPythonファイルです。
    2. templates/index.html: ユーザーがタイトルを入力する画面（見た目）のファイルです。

まずは、この2つのファイルを用意することから始めましょう。」

ケイ
ケイ

Flask…？HTML…？知らない言葉もいくつかあるけど、最初にこうして全体の地図を示してもらえると、全然怖くない！まるで、ベテランのエンジニアが、僕の冒険の進むべき道を照らしてくれたみたいだ。よし、この設計図通りに進めよう！

ステップ３：AIに「部品」のコードを書いてもらう

設計図が手に入ったら、いよいよ建築開始だ！ ここからは、AIに「部品」となるコードを、一つひとつ正確に作ってもらう、プロンプト術の見せ所だよ。

まずは、見た目の部分（HTML）から

ユーザーがタイトルを入力したり、結果を見たりする「画面」の部分だね。

💬 僕からAIへの、HTML作成プロンプト

「Flaskで使うindex.htmlのコードを作成してください。以下の要素を含めてください。

  • 『ヘッドライン魅力チェッカー』という大きな見出し
  • タイトルを入力するためのテキストボックス
  • 『チェックする』というボタン
  • 結果の点数を表示する場所」

🤖 AIが生成したHTMLコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <title>ヘッドライン魅力チェッカー</title>
</head>
<body>
    <h1>ヘッドライン魅力チェッカー</h1>
    <form method="post">
        <input type="text" name="title" size="50">
        <button type="submit">チェックする</button>
    </form>
    {% if score is not none %}
        <h2>魅力スコア: {{ score }}点</h2>
    {% endif %}
</body>
</html>

次に、頭脳の部分（Python）の呪文

そして、入力されたタイトルを、僕が考えたルールで採点する、一番大事な「頭脳」の部分。

💬 僕からAIへの、Python作成プロンプト

「Flaskを使ったapp.pyのコードを作成してください。先ほどのHTMLと連携させ、以下の採点ロジックを実装してください。

  • 採点ロジック:
    1. 基本点として50点。
    2. タイトルに数字が含まれていれば+10点。
    3. 「？」が含まれていれば+10点。
    4. 『方法』『コツ』『秘訣』のいずれかが含まれていれば+15点。
    5. 文字数が20文字以上、35文字以下なら+15点。」

🤖 AIが生成したPythonコード

import re
from flask import Flask, render_template, request

# Flaskアプリの準備
app = Flask(__name__)

# スコアを計算する関数
def calculate_score(title):
    score = 50  # 基本点

    # ルール1: 数字が含まれていれば+10点
    if re.search(r'\d', title):
        score += 10

    # ルール2: 「？」が含まれていれば+10点
    if '？' in title or '?' in title:
        score += 10

    # ルール3: 特定のキーワードが含まれていれば+15点
    keywords = ['方法', 'コツ', '秘訣', '理由', '比較', '入門', '徹底解説']
    if any(keyword in title for keyword in keywords):
        score += 15

    # ルール4: 文字数が20文字以上、35文字以下なら+15点
    if 20 <= len(title) <= 35:
        score += 15
        
    # スコアは100点を上限とする
    if score > 100:
        score = 100

    return score

# メインページの処理
@app.route('/', methods=['GET', 'POST'])
def index():
    score = None
    # 「チェックする」ボタンが押された時の処理
    if request.method == 'POST':
        title = request.form['title']
        if title: # タイトルが空でない場合のみ計算
            score = calculate_score(title)
    
    # 画面を表示する
    return render_template('index.html', score=score)

# アプリケーションの実行
if __name__ == '__main__':
    app.run(debug=True)
ケイ
ケイ

すごい…！これはもう、魔法だ。僕は、作りたいものの『ルール』を言葉で伝えただけなのに、AIがそれを完璧な『コード』という別の言語に翻訳してくれた。これこそ、AIと人間の最高の共同作業だね！

ステップ４：エラー、エラー、そしてまたエラー！AIとのデバッグ作業

順調に見えた僕の冒険。でも、開発の旅に「エラー」という名のモンスターは、つきものだった…。

HTMLとPythonのコードを合体させて、いよいよ実行！ …しかし、僕の目の前に現れたのは、真っ赤なエラーメッセージの嵐だった。

ケイ
ケイ

うわーん、動かないよ！どこが間違ってるのか、さっぱり分からない…！

でも、今の僕には、最高の相棒がいる。 僕は、エラーメッセージをそのままコピーして、AIにSOSを送ったんだ。

💬 僕からGemini先生へのSOS

「助けて！Flaskアプリを実行したら、こんなエラーが出ました。（エラーメッセージを貼り付け） これはどういう意味で、どこを直せばいいか、初心者の僕にも分かるように教えて！」

🤖 頼れる相棒からの、的確なアドバイス

「ケイさん、落ち着いてください。そのエラーは、『templatesという名前のフォルダが見つかりません』という、よくある間違いです。Flaskでは、HTMLファイルは必ずtemplatesという名前のフォルダの中に入れる、というルールがあるんですよ。index.htmlをそのフォルダに移動させれば、きっと動きます。」

ケイ
ケイ

そ、そんなルールがあったなんて…！でも、AI先生が、エラーの原因だけじゃなく、その背景にある『ルール』まで教えてくれたから、すごく勉強になった。AIは、コードを書くだけじゃなく、世界で一番忍耐強い、プログラミングの家庭教師でもあるんだね。

完成！僕だけの「ヘッドライン魅力チェッカー」爆誕！

何度かのエラーとの格闘の末、ついに、その瞬間は訪れた。 僕が作った画面にタイトルを入力し、「チェックする」ボタンを押すと…

「魅力スコア: 50点」

ケイ
ケイ

動いた…！本当に、動いたよ！ プログラミング初心者の僕が、AIと対話するだけで、世界に一つだけの、実際に動く便利なツールを、創り出してしまった…！

これは、僕の探求の歴史の中で、忘れられない、本当に大きな一歩だ。AIという相棒がいれば、アイデアを『思いつくだけ』で終わらせずに、『形にする』ことができる。そのことを、身をもって証明できたんだから。

まとめ：僕たちはもう「消費者」じゃない。「開発者」の時代だ

第8話 探求のまとめ

  1. 作りたいツールの「目標」と「設計図」を、まずはAIと対話して固めよう！
  2. AIに「部品」のコードを作ってもらい、僕たちは「監督」として全体を組み立てよう！
  3. エラーは冒険の一部！AIは、最高の「デバッグパートナー」にもなってくれる！
  4. AIとの共創で、誰もがアイデアを形にできる「開発者」になれる時代が来た！
ケイ
ケイ

今回の冒険で、僕は確信した。AIは、僕たちの仕事を奪う存在じゃない。これまで専門家しか持てなかった『創造の力』を、僕たち一人ひとりに分け与えてくれる、最高のパートナーなんだ。

君の頭の中にも、「こんなものがあったら便利だな」っていう、素敵なアイデアの種が眠ってはいないかな？

僕たちはもう、ツールをただ使うだけの「消費者」じゃない。 AIと一緒に、未来の道具を創り出す、「開発者」なんだ。

それじゃあ、また次の探求で会おうね！
ケイより。

コメント

タイトルとURLをコピーしました