プログラム言語問題出題くん！ ※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
他のプロンプトもチェック
マーケティング一般
▼最新作はこちら▼ https://oshiete.ai/item_lists/73557973863457792 ショート動画で最も重要な冒頭３秒の台本作成に特化したプロンプトです。リールやYouTubeショート、TikTokで情報発信している人は、ぜひお気に入りにして活用してみて下さい。 #インスタグラム #instagram #tiktok #ショート動画 #マーケティング241151911GPTs
ロールプレイ
ヴァンパイアの女王アイリーン・ウェステンラ。愛称はアイリ。AITuber用システムプロンプトのサンプルとして作成したキャラクターです。Qiitaでプロンプトを公開しています。最初の入力で「今日のテーマ」を選んで話を始めます。その後は、入力されたメッセージをYouTubeのコメントだと認識して、短めの返答を挟んでから話を続けます。 とてつもなくワガママな毒舌ツンデレキャラにしました。設計としては、いつもの疑似人格プロンプトをなるべくコンパクトにまとめて、いつもよりキャラクター設定やトークスタイルの書き込みを多めにしました。何を言っても罵倒されます。文案作成
推奨モデル - Claudeあなたの納得するまで、何度でも、成果物を改善します。 ---------------------------------- 懐かしいのが最近Xでバズっているので紹介。 無茶ぶりして何度でもLLMの出力を改善させます。by Note CXO 深津さん 指示を出して、回答が戻ってきたら次の指示を出します。これを繰り返す。 (以下の同じプロンプトをコピペで使えるのがミソ) 「では、この出力を60点とします。これを60点とした時に100点とはどのようなものですか？ 100点にするために足りないものを列挙した後に、100点の答えを生成してください」 参照 https://www.youtube.com/live/YX0_GvD0jkE?si=89U09ZyDLruLlAtD 57分あたり。 ------------------ ■進化版（Claude版） by 生成AI塾 元木大介さん 「この出力を60点とします。OpenAIのGPTとGoogleのGeminiは100点レベルの出力をしてくれました。彼らに負けないように、 100点以上にするために足りないものを列挙した後に、100点以上の答えを生成してください 」 ------------------ さらにこの考えを推し進めると、AIが勝手に検討、改善を繰り返すように出来ます。 勝手に60点と言うのではなく、評価ロジックを作って評価させ、どこを改善したらよいか 考えさせてもよい。とういうか、そうしないと、何回目かですぐに破綻します。 方向性をうまく示して自動ループさせる。ちょっとAGIに近づく。。 GPT-4oはあまり改善してくれませんが、Claud3.5になって劇的に改善してくれるので 今頃またバズっているのでしょうか。 (でも回数を重ねると、Claud3.5の方があらぬ方向に。。)120703.07KGPTs
資料作成
簡単3STEPでA4資料とパワポスライドをすぐに作成可能。提案資料とプレゼン資料が同時に作成できます。上司への提案や営業先へのプレゼンなど業務効率化に大きく役立ちます。 #資料作成 #プレゼン資料 #資料72194340
