AIプログラム生成プロンプト

AIツールの使い方|AIプロンプト(文書画像動画プログラム)|サイトマップホーム

プロンプトの書き方で、AIの回答精度は大きく変わります。重要なポイントは次の3つです。

期待した回答と異なる場合は、追加指示で対話しながら精度を高めましょう。

1.プログラム生成

1.1 Python

【指示内容】
Pythonで以下の要件を満たすフィボナッチ数列生成プログラムを作成してください。
【仕様】
・ 関数名: generate_fibonacci(n)
・ 引数: 生成する個数 n(整数)
・ 戻り値: フィボナッチ数列のリスト
・ ループ(for/while)を使って実装
・ 入力値のバリデーション(n < 0 の場合はValueErrorを発生)
・ 使用例とその出力もコメントで記述してください

1.2 Javascript

1.2.1 非同期API呼び出し

【指示内容】
JavaScriptでREST APIからデータを取得する関数を作成してください。
・ async/awaitを使用(Promiseチェーンは使わない)
・ fetchAPIを使ってGETリクエスト
・ 引数: url(文字列), options(オブジェクト、省略可)
・ 成功時: レスポンスのJSONをオブジェクトとして返す
・ 失敗時: エラーメッセージを含むErrorをthrow
・ タイムアウト処理(5秒)を含める
・ JSDoc形式のコメントを記述してください

1.2.2 配列操作ユーティリティ

【指示内容】
JavaScriptで配列操作のユーティリティ関数群を作成してください。
以下の関数をES6モジュール形式(exportあり)で実装してください:
1. groupBy(arr, key)
・ オブジェクト配列をkeyでグループ化
2. uniqueBy(arr, key)
・ keyの値でユニークにした配列を返す
3. sortBy(arr, key, order='asc')
・ keyで昇順/降順ソート
各関数にTypeScript型定義のコメントを付けてください。

1.3 Java

【指示内容】
JavaでConfigManagerクラスをシングルトンパターンで実装してください。
【要件】
・ スレッドセーフな実装(Double-Checked Lockingを使用)
・ プロパティファイル(config.properties)の読み込み機能
・ 設定値を取得するgetValue(String key)メソッド
・ Java 8以上を対象
・ 適切な例外処理と、発生しうる例外の種類をJavaDocに記載
・ 使用例をmainメソッドで示してください

1.4 PHP

【指示内容】
PHPでMySQLデータベースに接続してユーザー情報を操作するクラスを作成してください。
【クラス名】
・UserRepository
【メソッド】
・ findById(int $id): ?array ユーザーをIDで取得
・ findAll(): array 全ユーザー取得
・ create(array $data): int ユーザー作成、挿入したIDを返す
・ update(int $id, array $data): bool 更新
・ delete(int $id): bool 削除 【要件】
・ PHP 8.1以上、PDOを使用
・ プリペアドステートメントで SQLインジェクション対策必須
・ 接続情報はコンストラクタで受け取る
・ 失敗時はPDOExceptionをcatch してログ出力

1.5 C++

【指示内容】
C++17でテンプレートクラスを使ったスタックを実装してください。
【要件】
・ クラス名: Stack
・ 内部実装: std::vectorを使用(生ポインタ-newは使わない)
・ メソッド: push(), pop(), top(), empty(), size()
・ pop()とtop()は空の場合std::underflow_errorを投げる
・ コピーコンストラクタ・ムーブコンストラクタを実装
・ ヘッダファイル(.hpp)のみで完結する実装
・ 使用例とunit testのコードも含めてください

2.HTML・CSS

2.1 レスポンシブナビゲーションバー

【指示内容】
HTML5とCSSのみ(JavaScriptなし)でレスポンシブなナビゲーションバーを作成してください。
【デザイン要件】
・ PC(768px以上): 横並びメニュー、ロゴ左・メニュー右
・ スマートフォン(767px以下): ハンバーガーメニューアイコンを表示
 ※ チェックボックスハックで開閉(JSなし)
・ 背景色: #1a1a2e、テキスト: 白
・ ホバー時: 下線アニメーション(0.3秒のtransition)
・ メニュー項目: ホーム、サービス、実績、お問い合わせ
・ position: sticky でスクロールしても上部固定

2.2  CSS Gridを使ったカードレイアウト

【指示内容】
CSS Gridを使って商品カードを並べるレイアウトを作成してください。
・ カード数: 6枚(ダミーデータでOK)
・ PC: 3列、タブレット(600px〜): 2列、SP: 1列
・ カードの構成: 画像(aspect-ratio 16:9)、タイトル、価格、購入ボタン
・ カード同士のギャップ: 24px
・ カードにhoverで transform: translateY(-4px) のアニメーション
・ 画像はunsplash.comのプレースホルダーURLを使用
・ BEM記法でクラス名をつけてください

2.3  CSSアニメーションのローディングスピナー

【指示内容】
CSSアニメーションのみでローディングスピナーを3種類作成してください。
・回転する円形ボーダー(border-radius + rotate)
・バウンスするドット3つ(animation-delay でずらす)
・拍動するハート型(pulsate アニメーション) 各スピナーをFlexboxで横並びに配置し、
 それぞれの下にアニメーション名を表示してください。

3.SVG生成

3.1 アニメーション付きロゴマーク

【指示内容】
SVGでアニメーション付きのロゴマークを作成してください。
【デザイン】
・ viewBox: "0 0 200 200"
・ 正六角形を3つ組み合わせたハニカム構造
・ 中央の六角形は塗りつぶし(#4A90E2)
・ 外側2つは線のみ(stroke: #4A90E2, stroke-width: 2)
【アニメーション(CSSアニメーションで実装)】
・ ページ読み込み時: 各六角形が順番にフェードイン(0.3秒ずつ遅延)
・ホバー時: 全体が120%に拡大(transform: scale, 0.2秒)
・ <style>タグをSVG内に埋め込む形で実装してください

3.2 インタラクティブな円グラフ

SVGとJavaScriptで円グラフ(ドーナツチャート)を作成してください。
【データ】
・ 売上: 45%(#FF6B6B)
・ 経費: 30%(#4ECDC4)
・ 利益: 25%(#45B7D1)
【実装要件】
・ stroke-dasharray と stroke-dashoffset で描画
・ 中央にパーセント数値を表示
・ 各セグメントにhoverで:
・拡大(5px外側に広がる)
・ラベル名とパーセントをtooltipで表示
・ アニメーション: 読み込み時に時計回りに描画(1.5秒)
・ レスポンシブ(幅100%に合わせてリサイズ)

4.正規表現

4.1 日本語対応メールアドレス検証

メールアドレスを検証する正規表現パターンを作成してください。
【マッチさせたいもの(valid)】
・ user@example.com
・ user.name+tag@sub.domain.co.jp
・ user123@test-domain.org
【マッチさせたくないもの(invalid)】
・ @example.com (ローカル部なし)
・ user@.com (ドメイン先頭のドット)
・ user@com (TLDのみ)
・ user @example.com (スペース含む)
以下の形式で出力してください:
1. 正規表現パターン(JavaScript形式)
2. 各ルールの解説
3. 上記の例でテストするJavaScriptコード

4.2 日本の電話番号・郵便番号

日本の電話番号と郵便番号を検証する正規表現を作成してください。
【電話番号】以下の形式すべてにマッチ:
・ 固定電話: 03-1234-5678、06-123-4567
・ 携帯電話: 090-1234-5678、080-1234-5678、070-1234-5678
・ ハイフンなし: 0312345678、09012345678
・ 先頭の0は必須
【郵便番号】
・ ハイフンあり: 123-4567
・ ハイフンなし: 1234567
・ 7桁固定
各パターンをPython(re モジュール)形式で出力し、
re.fullmatch()を使ったテスト例も付けてください。

4.3 URLのパース・抽出

URLから各構成要素を抽出する正規表現を作成してください。
抽出対象:
・プロトコル(https, http, ftp)
・ドメイン(サブドメイン含む)
・パス
・クエリパラメータ(?以降)
・フラグメント(#以降)
例: https://sub.example.com/path/to/page?id=1&lang=ja#section
→ { protocol: 'https', domain: 'sub.example.com', ... }
JavaScriptの名前付きキャプチャグループ(?<name>)を使い、
マッチした結果をオブジェクトとして取得するコードにしてください。

5.JavaScript応用

5.1 万年カレンダー

HTMLとJavaScriptで万年カレンダーを作成してください。
【機能要件】
・ 年月を変更できる「前月」「翌月」ボタン
・ 年・月をドロップダウンで直接選択可能(年: 1900〜2100)
・ 「今日」ボタンで当月に戻る
・ 今日の日付をハイライト表示(背景色で強調)
・ 祝日を表示(2024〜2025年の日本の祝日)
・ 日曜: 赤、土曜: 青でカラーリング
【UI要件】
・ 1ファイル(HTML/CSS/JS)に完結
・ テーブルレイアウト(<table>使用)
・ 前月・翌月の日付はグレーアウト表示
・ モバイル対応(max-width: 400px でも見やすいレイアウト)
・ 日付クリックで選択状態(背景色変更)
 祝日データはJavaScriptオブジェクトでハードコーディングしてください。

5.2 五目並べ

HTMLとJavaScriptで五目並べゲームを作成してください。
【ゲームルール】
・ 盤面: 15×15 マス
・ 先手: 黒石、後手: 白石
・ 縦・横・斜めに5つ並べた方が勝ち
・ 禁じ手なし(シンプルルール)
【モード】
1. 対人戦(2プレイヤー)
2. CPU戦(難易度: 強)
・ 自分が4連のとき→必ず埋める
・ 相手が4連のとき→必ずブロック
・ ミニマックス法(深さ2)で次の手を探索
【UI要件】
・ <canvas>要素で盤面を描画(サイズ: 600x600px)
・ クリックで石を置く
・ 現在の手番表示(例: ⚫ 黒の番)
・ 勝敗時にモーダルで結果表示
・ 「最初から」ボタンでリセット
・ 着手した位置に赤い点を表示(最後の1手を示す)
コードは1ファイルにまとめ、詳細なコメントをつけてください。

※参考で、以下のプログラムは「Claude」で生成しております。


AIツールの使い方|AIプロンプト(文書画像動画プログラム)|サイトマップホーム