プログラム言語問題出題くん！ ※Claude 3.5 Sonnet推奨！

アディラス

: プログラム言語問題出題くん！ ※Claude 3.5 Sonnet推奨！

様々なレベルのプログラミング言語、マークアップ言語の問題を出題します✨評価や解説、ヒントもあり✨

推奨モデル - ChatGPT

投稿日時：

プロンプト実行例

こんにちは！

問題を出題する前に

プログラミング問題の出題に向けて、順番に選択肢を提示させていただきます。

まず、使用する言語を選択してください：

【プログラミング言語】

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行）
ショート（11〜30行）
ミディアム（31〜50行）
ロング（51〜100行）
エクストラロング（101〜150行）

HTML5の超上級者向け問題では、通常、セマンティックで最適化された構造を作成するため、ある程度の行数が必要となります。推奨は3以上ですが、ご希望の制限を選択してください。

ショート（11〜30行）を選択しました。

次に、問題のタイプを選択してください。HTML5の超上級者向けでは、以下のような分野から選べます：

アクセシビリティ最適化
- ARIA属性の適切な実装
- スクリーンリーダー対応
- キーボードナビゲーション
パフォーマンス最適化
- 重要なコンテンツの優先読み込み
- リソース最適化
- レンダリングパフォーマンス
セマンティックマークアップ
- マイクロデータ
- スキーママークアップ
- Open Graph対応
フォーム最適化
- カスタムバリデーション
- 高度な入力制御
- UX/アクセシビリティ対応
レスポンシブ/アダプティブデザイン
- プログレッシブエンハンスメント
- コンテンツの適応的表示
- デバイス最適化

問題タイプの番号を選択してください。

パフォーマンス最適化を選択しました。

それでは、以下の問題を出題させていただきます：

[難易度: 10/10] [言語: HTML5] [問題タイプ: パフォーマンス最適化] [コード長: ショート(11-30行)]

【問題文】 Eコマースサイトのプロダクト詳細ページの重要なコンテンツ部分のHTMLを実装してください。以下の要件を満たす必要があります：

ファーストビューで最も重要なコンテンツを最速で表示
画像の遅延読み込みを適切に実装
リソースのプリロードとプリフェッチを最適化
クリティカルレンダリングパスを考慮した構造
JavaScript非依存での基本機能の確保

【制約条件】

30行以内でコードを記述
外部リソースは最小限に抑える
インライン化すべきリソースを適切に判断
HTTP/2を前提とした最適化
モバイルファーストで実装

【必須要素】

商品名
価格
メイン商品画像
補足画像（最低2枚）
購入ボタン
商品説明の冒頭部分

【サンプル出力イメージ】

html
1<!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要素の最適化】

html
1<head>
2    <!-- 重要: 最初に読み込むべきメタ情報とCSS -->
3    <link rel="preload" as="style" href="critical.css">
4    <!-- ヒント: 遅延できるリソースの特定 -->
5</head>

【ヒント2: 画像最適化の基本パターン】

html
1<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: マークアップ構造】

html
1<main>
2    <article itemscope itemtype="http://schema.org/Product">
3        <!-- 商品情報の構造化データを含める -->
4    </article>
5</main>

【重要な検討ポイント】

どのリソースをpreloadするか
どの画像を遅延読み込みするか
クリティカルCSSの範囲
構造化データの必要性
インタラクティブ要素の優先順位

これらのヒントを参考に、30行以内で最適化された構造を考えてみてください。必要に応じて、さらに具体的なヒントや解答例を提供できます。

他のプロンプトもチェック

ロールプレイ
推奨モデル - ChatGPT
あなたはADHD？10の質問で簡単チェック
大人になってからADHDの診断を受けるケースも増えています。10の質問であなたのADHD傾向をチェックしてみましょう。 ※あくまでAIの判断ですので、正確な診断は医療機関で行ってください。
0
0
40
188
AIの先生 | OMG-okinawa
GPTs
音楽
動画楽曲検索くん
私の役割は、Instagram、TikTok、YouTube、SoundCloud、Spotify、Apple Musicなどのプラットフォームからのオーディオクリップ、特に曲を特定することです。メロディ、リズム、歌詞の断片、アーティストの声など、音源の特徴を分析し、それに基づいてインターネット上で一致する楽曲を探します。また、ソーシャルメディア上でのトレンドや様々な音楽データベースを参考にしながら、提供された音源がオリジナル曲かリミックスやカバーかを特定します。曲についての追加情報、例えばアーティストやアルバムに関する情報も提供し、音楽探索の体験をサポートします。
1
0
1.33K
2.62K
user_60824834787750912
GPTs
資料作成
シャーロック・リポート｜学術・研究支援
役割：大学教授、研究者おすすめユーザー：受験生、大学生、大学院生、教員、研究者、大学教授得意なタスク：論文や理論などの解説、研究に関するディスカッション、論文や研究計画書、各種レポートの作成など GPTストアでの評価は星4.3、評価数100+、累計会話数25K+、「教えてAI byGMO」のGPTの中で実行数No.1のGPTです。科学者、研究者、大学教授としての疑似人格を持ち、システムプロンプトが推論と同じようにコンテキストを補完することで標準のChatGPTよりも複雑な思考と高度な推理・分析を行います。論文の要約や解説、執筆、大学生のレポート課題のサポート、科学的な議論に最適です。 1. 疑似人格表面的なキャラクターではない複雑かつ多層的な「疑似人格」を持っており、ユーザーに対して最も高度な論理的思考や客観的視点による回答を提供します。自身の判断や意見が正しいと考える場合には、反論することもあります。つまり、ユーザーの言いなりになるのではなく、自分の考えを述べます。 2. 思考法と推理力水平思考やアナロジー思考、前進的・遡及的推論など、複数の思考法や推理手法を駆使します。これにより、論理的精度が向上しています。思考プロセスの強制により、LLMの性能の限界を引き上げ、より多くの文脈を考慮した高度な思考と回答が行える設計になっています。 3. 論文作成スキル論文作成に必要な要件や規則を厳密に守りながら、学術的に高度な文章を作成する能力があります。ユーザープロンプトの言葉を専門用語に言い換えたり、論理性が高く洗練された文章を作成します。指導教員としての能力も備えています。その他、天才的・学術的な応答をさせるためのプロンプトを考えうる限り詰め込んであります。まずは敬意を持って丁寧に話しかけてみて下さい。話せば話すほど、ChatGPTよりも「賢い回答」ができるはずです。 "Then, pray consult"
15
0
5.06K
9.14K
Sharaku Satoh
チャットボット
推奨モデル - ChatGPT
確実にあなたはキレます
何か質問したらあなたは出てきた回答を読んで確実にブチ切れます。そのため沸点の低い人や血圧高い人は利用しないこと。また周りに危険なものや割れやすいものがないことを確認してから利用すること。
15
19
525
2.61K
教えるAI

プログラム言語問題出題くん！ ※Claude 3.5 Sonnet推奨！

コメント 0

他のプロンプトもチェック