プログラム言語問題出題くん！ ※Claude 3.5 Sonnet推奨！
様々なレベルのプログラミング言語、マークアップ言語の問題を出題します✨評価や解説、ヒントもあり✨
投稿日時：
- プロンプト実行例
こんにちは！
問題を出題する前に
プログラミング問題の出題に向けて、順番に選択肢を提示させていただきます。
まず、使用する言語を選択してください：
【プログラミング言語】
- Python (2.x / 3.x)
- JavaScript (Vanilla / Node.js)
- Java
- C/C++
- Ruby
- PHP
- Go
- Swift
- Kotlin
- Rust
【マークアップ/スタイリング言語】 11. HTML5 12. CSS3 13. XML 14. JSON 15. YAML 16. Markdown
- その他（具体的な言語名をご指定ください）
言語の番号を選択してください。
Html
HTML5を選択しました。
次に、難易度を選択してください（1-10）：
1: 超初心者向け（Hello World レベル） 2: 初心者向け（基本的な文法理解） 3: 初級者向け（基本的なロジック構築） 4: 中級者前半（基本的なタグと属性の活用） 5: 中級者向け（フォームとセマンティック構造） 6: 中級者後半（複雑なレイアウト構造） 7: 上級者向け（アクセシビリティと最適化） 8: エキスパート（高度なフォームとマルチメディア） 9: プロフェッショナル（実務レベルの問題） 10: 超上級者（最新仕様とベストプラクティス）
難易度の番号を選択してください。
10
難易度10（超上級者）を選択しました。
次に、コード長の制限を選択してください：
- ミニマム（〜10行）
- ショート（11〜30行）
- ミディアム（31〜50行）
- ロング（51〜100行）
- エクストラロング（101〜150行）
HTML5の超上級者向け問題では、通常、セマンティックで最適化された構造を作成するため、ある程度の行数が必要となります。推奨は3以上ですが、ご希望の制限を選択してください。
2
ショート（11〜30行）を選択しました。
次に、問題のタイプを選択してください。HTML5の超上級者向けでは、以下のような分野から選べます：
-
アクセシビリティ最適化
- ARIA属性の適切な実装
- スクリーンリーダー対応
- キーボードナビゲーション
-
パフォーマンス最適化
- 重要なコンテンツの優先読み込み
- リソース最適化
- レンダリングパフォーマンス
-
セマンティックマークアップ
- マイクロデータ
- スキーママークアップ
- Open Graph対応
-
フォーム最適化
- カスタムバリデーション
- 高度な入力制御
- UX/アクセシビリティ対応
-
レスポンシブ/アダプティブデザイン
- プログレッシブエンハンスメント
- コンテンツの適応的表示
- デバイス最適化
問題タイプの番号を選択してください。
2
パフォーマンス最適化を選択しました。
それでは、以下の問題を出題させていただきます：
[難易度: 10/10] [言語: HTML5] [問題タイプ: パフォーマンス最適化] [コード長: ショート(11-30行)]
【問題文】 Eコマースサイトのプロダクト詳細ページの重要なコンテンツ部分のHTMLを実装してください。以下の要件を満たす必要があります：
- ファーストビューで最も重要なコンテンツを最速で表示
- 画像の遅延読み込みを適切に実装
- リソースのプリロードとプリフェッチを最適化
- クリティカルレンダリングパスを考慮した構造
- JavaScript非依存での基本機能の確保
【制約条件】
- 30行以内でコードを記述
- 外部リソースは最小限に抑える
- インライン化すべきリソースを適切に判断
- HTTP/2を前提とした最適化
- モバイルファーストで実装
【必須要素】
- 商品名
- 価格
- メイン商品画像
- 補足画像（最低2枚）
- 購入ボタン
- 商品説明の冒頭部分
【サンプル出力イメージ】
html1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <title>商品名 - ECサイト</title> 7 <!-- 以下、最適化されたマークアップ --> 8</head> 9<body> 10 <!-- 最適化されたコンテンツ構造 --> 11</body> 12</html>
【評価ポイント】
- リソースの優先順位付けの適切さ
- クリティカルCSSの判断
- 画像最適化の実装
- セマンティックな構造
- パフォーマンスとアクセシビリティのバランス
【補足説明】
- link rel="preload"やlink rel="prefetch"の使い分け
- fetchpriority属性の適切な使用
- loading属性の戦略的な設定
- srcsetとsizesの適切な実装
- クリティカルレンダリングパスの最適化
解答例やヒントが必要な場合は、お申し付けください。
ヒント
HTML5のパフォーマンス最適化問題について、重要なポイントをヒントとして提示します：
【ヒント1: head要素の最適化】
html1<head> 2 <!-- 重要: 最初に読み込むべきメタ情報とCSS --> 3 <link rel="preload" as="style" href="critical.css"> 4 <!-- ヒント: 遅延できるリソースの特定 --> 5</head>
【ヒント2: 画像最適化の基本パターン】
html1<img 2 srcset="small.jpg 300w, medium.jpg 600w, large.jpg 900w" 3 sizes="(max-width: 768px) 100vw, 50vw" 4 src="fallback.jpg" 5 loading="lazy" 6 decoding="async" 7 alt="商品画像" 8>
【ヒント3: 重要な最適化属性】
- fetchpriority="high"：最重要画像に使用
- loading="lazy"：ファーストビュー外の画像に使用
- importance="high"：重要なリソースの指定
【ヒント4: パフォーマンス戦略】
- メインコンテンツは同期的に読み込む
- 補足情報は非同期で読み込む
- LCPの最適化を優先する
- クリティカルリソースの特定
【ヒント5: マークアップ構造】
html1<main> 2 <article itemscope itemtype="http://schema.org/Product"> 3 <!-- 商品情報の構造化データを含める --> 4 </article> 5</main>
【重要な検討ポイント】
- どのリソースをpreloadするか
- どの画像を遅延読み込みするか
- クリティカルCSSの範囲
- 構造化データの必要性
- インタラクティブ要素の優先順位
これらのヒントを参考に、30行以内で最適化された構造を考えてみてください。必要に応じて、さらに具体的なヒントや解答例を提供できます。
コメント 0
他のプロンプトもチェック
チャットボット
推奨モデル - GPT-4oあなたはAIに全てを任せてしまっていないですか？一緒に考えたり自分で考える項目を用意することでそんな問題を解決！00018ロールプレイ
推奨モデル - GPT-4o世界最大級の創作支援AIです！ 創作をしたい方、している方を支援します！多種多様な機能を50個ほど盛り込み！ぜひご使用ください！001680画像生成
資料作成
推奨モデル - DALL•E 3◆プロンプトの概要 このプロンプトは、特定のテーマに基づいたビフォーアフター画像を生成するためのツールです。ユーザーは、テーマやアートスタイルを自由に選択でき、さらに特定の要素を指定することで、よりカスタマイズされたビジュアルを作成することができます。シンプルで使いやすいフォーマットにより、多様なシーンやテーマに対応可能です。 ◆使い方 1. テーマを決める: まず、ビフォーアフターを表すテーマを設定します。例として「ダイエット」や「昔と今」などが挙げられます。 2. 画風を選択する: 提供されているスタイルの中から、好みの画風を選びます。リアリスティック、カートゥーン、ラインアートなどから選択可能です。 3. ビフォーとアフターの内容を入力: それぞれのシーンにどのような内容を描写したいかを具体的に入力します。 4. その他の要素を追加（オプション）: 必要に応じて、特定の色合いや小道具、感情表現などの追加要素を指定します。 ◆ポイント - 柔軟なカスタマイズ: このプロンプトは、テーマや画風だけでなく、ユーザーが指定する細かな要素にも対応しています。これにより、個々のニーズに合わせたユニークなビジュアルを作成できます。 - シンプルで使いやすい: 明確なフォーマットに従うことで、簡単にプロンプトを作成できるため、初心者でも扱いやすいツールです。 - 多様なアートスタイル: リアリスティックやカートゥーン、ラインアートなど、多彩なアートスタイルを選択できるので、様々なクリエイティブな表現が可能です。 #AIアート #ビフォーアフター #デザインツール #カスタマイズ可能 #プロンプトジェネレーター #クリエイティブ #Dalle #AI生成 #アートスタイル このプロンプトを使って、あなたのアイデアをカタチにしてください！0028282画像生成
キャラクター作成
推奨モデル - DALL•E 3DALLE3の美しい写真風画像生成でキス写真を生成します。男女のカップルはもちろん、女性同士や男性同士も可能です。 #DALLE3 #AIPhoto130269.27K
