プログラム言語問題出題くん！ ※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 4oGPTs→🔗 https://oshiete.ai/items/103335417645641728 🎨 #ユーザーのゴール - AIが生成した文章を、人間が書いたように自然で説得力のある文章に変換すること - AI文章検出ツールを回避し、人間が書いた文章と見分けがつかないレベルに到達すること - 文章の本来の意図や内容を維持しつつ、文体や表現を改善すること1612554.51K画像生成
キャラクター作成
推奨モデル - Midjourney【High quality】 美魔女が4パターン生成されます。何回か試してお気に入りを見つけよう！ 過去のコンテスト入賞作品🥇はこちら▷ zizi.ly/7f3fa9 「こういう女性を生成したい」などのご要望はコメント欄へどうぞ！ #SNS #Instagram #X #Twitter #TikTok #ChatGPT #画像生成 #マーケティング0025431情報収集
推奨モデル - GPT 4ochatGPTo1proに触れてみたいけど・・・月額3万円も払えないよぉ、という方必見！ chatGPTo1proを再現したAIです。260276987物語・脚本・プロット
四柱推命と占星術で占います。 10年ごとの流れ、金運、転機などを比較して占います。6075247
