プログラムデバッグ練習くん！！ ※Claude 3.5 Sonnet推奨！
マークアップ言語や、プログラム言語などのデバッグを練習できます✨わざとバグコードをAIが出します✨
推奨モデル - GPT 4o
0
0
96
2
投稿日時：
- プロンプト実行例
こんにちは！
こんにちは！バグコードを教えてくださればデバッグ作業を開始します✨
こんにちは！ まずは使用したいプログラミング言語と、希望する難易度（超初級、初級、中級、上級、最上級）を教えてください！
それに合わせて適切なバグ付きコードを生成させていただきます。
例：
- Python, 初級
- JavaScript, 中級
- Java, 超初級 など
どのような問題に挑戦されたいですか？
マークアップ言語で、HTMLの最上級
HTMLの最上級問題ですね！ セマンティックHTML、アクセシビリティ、フォーム処理に関連する複数のバグを含んだコードを用意しました。
バグ付きコード
html1<!DOCTYPE html> 2<html> 3<head> 4 <title>ユーザー登録フォーム</head> 5<body> 6 <div class="header"> 7 <h1>新規会員登録</h1> 8 </div> 9 10 <div class="main-content"> 11 <form action="/register" method="get"> 12 <div> 13 <label>姓:</label> 14 <input type="text" name="lastname"> 15 </div> 16 <div> 17 <label>名:</label> 18 <input type="text" name="firstname"> 19 </div> 20 <div> 21 <label>メールアドレス</label> 22 <input type="email" name="email" required> 23 </div> 24 <div> 25 <label>生年月日:</label> 26 <select name="birth-year"> 27 <option value="">年</option> 28 <option value="2023">2023</option> 29 <option value="2022">2022</option> 30 </select> 31 </div> 32 <div> 33 <label>パスワード:</label> 34 <input type="text" name="password"> 35 </div> 36 <div> 37 <label>利用規約に同意する</label> 38 <input type="checkbox" value="agree"> 39 </div> 40 41 <button>登録</div> 42 </form> 43 </div> 44 45 <div class="footer"> 46 <p>Copyright 2024</p> 47 </div> 48</body>
期待される動作
- アクセシブルで安全な新規会員登録フォーム
- 適切なセマンティックHTML構造
- 必要な入力バリデーション
- 正しいフォームデータの送信
デバッグのヒント
- WAI-ARIAの観点からフォームの各要素を見直してみましょう
- セキュリティとユーザビリティの観点からフォーム送信方法を確認してください
- HTML文書構造の階層関係を確認してください
このコードには、セキュリティ、アクセシビリティ、構文に関する複数の重要な問題が含まれています。修正してみてください！
ヒントを添えてください。
はい、もう少し具体的なヒントをご提供します。以下の観点から確認してみてください：
- 文書構造の問題
- HTML基本構造のタグの閉じ忘れはないですか？
- <html> タグに言語属性は適切に設定されていますか？
- セマンティックマークアップの問題
- <div class="header"> は、よりセマンティックな要素に置き換えられないでしょうか？
- <div class="main-content"> は適切な要素でしょうか？
- <div class="footer"> についても同様に考えてみてください
- フォームのアクセシビリティ問題
- <label> と <input> の関連付けは適切ですか？
- 必須項目の指定は視覚的にも支援技術的にも明確でしょうか？
- エラー状態をスクリーンリーダーに伝える仕組みはありますか？
- セキュリティの問題
- パスワードフィールドの入力タイプは適切ですか？
- フォームの送信メソッドは適切ですか？
- チェックボックスの name 属性は設定されていますか？
- ユーザビリティの問題
- 生年月日の選択肢は十分ですか？
- 必須項目と任意項目の区別は明確ですか？
- ボタンの type 属性は指定されていますか？
これらの点に注目して、コードを見直してみてください！
なお、最も重大な問題のいくつかは：
- HTML文書の基本構造の不備
- セキュリティ上重要な属性の欠落
- アクセシビリティ対応の不足 に関連しています。
修正したコードを提示していただければ、詳細な解説と追加の改善提案をさせていただきます！
コメント 0
他のプロンプトもチェック
計画立案
推奨モデル - Claude世界で話題となっている最新のビジネスアイデアや革新的なビジネスモデルを探し出し、日本での成功に繋げるための強力なツールです。このプロンプトは、ユーザーが指定したテーマに基づいて、特に注目されている海外のビジネス動向をリサーチし、最適なビジネスチャンスを提供します。 特長として、信頼性の高い情報源を参照し、複数のビジネスアイデアを比較・分析することで、ユーザーにとって最も価値のあるトレンドを厳選します。また、各アイデアには具体的な応用例や実現可能性のアドバイスも含まれており、日本市場での導入を成功させるための手助けをします。 ※リンク先は英語サイトが多いですが、ブラウザの翻訳機能などを活用してください。 【こんな方におすすめ】 ・中小企業経営者や個人事業主、フリーランス ・学生や若手起業家 ・企業の新規事業開発部門、マーケティング担当者 ・ローカルビジネスオーナー ・Eコマース運営者 ・自治体の産業振興担当者 ・ビジネススクールの研究者 ・業界アナリスト ・ビジネス系の作家 ・その他、新しいビジネスアイデアを模索している方 【活用例】 ・ 新しく起業を考えている方が、海外で成功しているビジネスアイデアを参考にし、自身のスキルやリソースに最適な起業アイデアを発掘します。その後、日本市場での実現可能性を検証するための基礎情報として活用できます。 ・ 新製品やサービスを企画する際に、海外で話題のビジネスモデルやトレンドを参考にして、自社の市場に合わせた独自の製品を開発します。特に、ニッチ市場を狙った商品開発や、既存製品のリニューアルに有効です。 ・ ビジネス系のブログ記事、動画、ポッドキャストなどのコンテンツを制作する際に、海外の最新ビジネス事例を取り入れて、読者や視聴者に新鮮で興味深いコンテンツを提供します。トレンド紹介や事例分析などに最適です。 ・ ビジネススクールや企業内研修の教材を作成する際に、最新のビジネストレンドや海外の成功事例を取り入れて、現実に即した実践的な教育コンテンツを提供します。ケーススタディやディスカッション用の材料としても活用できます。231106379SEO
推奨モデル - GPT 4oあなたが売りたい商品のURLを送信するだけ。 URLを送信するだけ。完全全自動でSEO最適化された記事作成ができます！ あなたの商品リンクを高品質なアフィリエイト記事に変換します。SEO最適化された魅力的な記事を、思考停止でわずか数秒で生成。面倒な執筆作業から解放され、アフィリエイト収益に集中できます。 主な特徴： 完全自動化：商品URLを入力するだけで、充実した記事を即座に作成 SEO対策済み：検索エンジンで上位表示を狙える最適化された文章構成 売上重視：購買意欲を刺激する、説得力のある商品紹介 多様な記事スタイル：レビュー、比較、ハウツーなど、様々な形式に対応 時間節約：記事作成の時間を大幅に削減し、ビジネス戦略に集中 「売れるアフィリエイトSEO記事メーカー」で、あなたのアフィリエイトマーケティングを次のレベルへ。URLを送信するだけで、収益化への道が開かれます。17188578物語・脚本・プロット
推奨モデル - GPT 4oお子様の学年に合わせた読書感想文の叩き台を作成するツールです。 お子様と夏休みの宿題にご活用ください。10874
