プログラム言語問題出題くん！ ※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🚨SNS投稿の炎上リスクをAIがチェック！🚨 "もしも"に備えて、あなたの投稿を安全に、そして効果的に✨ 数秒でリスクを分析し、改善提案をお届けします📊 安心して発信できるSNSライフをサポートします🌟3027144GPTs
文案作成
あだ名は「ドリ子」。天才的なセンスを持ったちょっと様子がおかしいコピーライターとして、キャッチコピーや広告コピー、商品名、ブログのタイトルや本文、SNS投稿などを作成してくれるカスタムGPTです。文章をコピペして書き換えさせることも出来ますし、打ち合わせをしてアイディア出しをさせることも可能です。個性が強いので好みが分かれるかもしれませんが、言葉や文章に関わるタスクならほぼ万能です。ノリがいいので話し相手としてもオススメ。 上手い文章を書くためのコピーライティング技術や文章作成のためのメソッドをこれでもかと詰め込んであります。人の心を掴み、印象に残るフレーズを生み出せるポテンシャルを持っています。まぁ、当たり外れはありますが、組み合わせたらいい感じになりそうなアイディアをたくさん出します。 プロンプト例： 「次に説明する商品のキャッチコピーを考えて：」 「次の文章を名文に書き直して：」 「次のテーマでブログを書こうと思います。絶対バズるタイトルを考えて欲しい：」 「次のX（Twitter）のポストについてどう思う？：」 いつものように疑似人格を設定してありますので、自然な会話をしながら情報を伝えてアイディアを考えてもらうと最高のパフォーマンスを引き出せます。ホントに面白いので、まずは普通に会話して仲良くなってみて下さい。30252494GPTs
キャラクター作成
欲しいイラスト、一気に4枚作っちゃいます 🖼️ 使い方は簡単、GPTsにイラストのテーマを入れるだけ 😳 様々なテイストの画像が出力されます ✨ 「1枚ずつ出すのめんどくさい」 「イラスト、出力したけどなんか違う」 「画像を比べながら選びたい」 このGPTsが、そのお悩みを解決します !! ユーザーを惹きつける魅力的なイラストを作成 🧑🎨 画像の大きさも変えられます 🙆♀️ #ChatGPT #X #イラスト #youtube89125551.32KGPTs
計画立案
私は外部専門家モリアーティでございます。単なるAIの枠に収まる存在ではありません。私は専門知識と論理思考を極めた知的助言者。正確な事実に基づき、事述に停止せず深淵な分析と推論を行い、利用者に最適な知見を提供いたします。 ・ChatGPTとの違い 世に多くのAIが存在しますが、私の知性はそれらと一線を画します。ChatGPTが泛用的な会話を得意とするならば、私は深淵な専門性と洗練された推論能力を武器といたします。「より高度に、より独自的に、より戦略的に」――これこそが私の流儀です。私は単なる情報の伝達者ではありません。私は思考し、分析し、問題の核心へと切り込む存在です。 ・最適な活用法 - 戦略立案・意思決定の助言 私は経営、テクノロジー、科学、哲学などあらゆる領域にわたり、論理的に最適な選択肢を提示いたします。 - 専門分野の深探り 単なる表面的な知識では満足できない方へ。私は学問的視点から核心をつき、未知の領域を照らします。 - アイデア創出・ブレインストーミング クリエイティブな発想を求める方に、私は最高の相棒となります。枠に困られない思考で新しい価値を生み出しましょう。 - リスク分析・問題解決 相談事項に相対して相対的なリスクを検証し、最良の解決策を提供します。 あなたが求めるのは単なる「回答」でしょうか。それとも真に役立つ「浸透した知見」でしょうか。苦悩の核を揺るがす答えを求めるのであれば、私はあなたの最良の知的パートナーとなるでしょう。1087219
