ChatGPTにコードの質問をした際の回答
ChatGPTにコードを貼り付けて質問する際は、書き方によって回答の質が向上します。
例えば、コードを貼り付けて質問する際には、そのまま貼り付けるか、コード部分をMarkdownの記法を使用して以下のように書く方が多いと思います。
以下のコードに間違いがないかチェックしてください。
```
.foo {
.bar {
color: red;
}
}
```ChatGPTに上記の内容を送信すると、以下のような回答が表示されます。
このコードは、CSSではなく、SassやSCSSの構文に見えます。CSSの標準構文では、ネストはサポートされていません。以下は、SCSSとして正しい構文です：
.foo {
.bar {
color: red;
}
}
これをCSSに変換すると、次のようになります：
.foo .bar {
color: red;
}
CSSを直接使用する場合は、ネストを使わずにこのように記述する必要があります。
もし、SCSSでの記述が目的であれば、このコードは問題ありません。CSSとして記述する場合は、上記のように変換してください。https://chatgpt.com/share/a40b663b-4643-44ce-b779-a94c6408ef3d
見ての通り、ChatGPTが貼られたコードSassとSCSSのどちらか判断できないため、「SCSSでの記述が目的であれば」という補足付きで問題ないと回答しています。
CSSの可能性もあるので、「CSSとして記述する場合は」という補足も追加されています。
回答してほしいのは「SCSSのコードに間違いがないか」だけなのに余計な情報が多いです。
ChatGPTでは拡張子付きコードを貼るべし
次にコード部分をMarkdownの記法のバッククォート (```) のうしろに拡張子を貼って質問して見てください。
以下のコードに間違いがないかチェックしてください。
```scss
.foo {
.bar {
color: red;
}
}
```ChatGPTではコード部分の拡張子を認識できるため、より簡潔な回答を返してくれます。
問題ありません。このコードはネストされたSCSSの構文として正しいです。
.foo {
.bar {
color: red;
}
}
このコードは、.foo クラスの要素内にある .bar クラスの要素に color: red; を適用します。https://chatgpt.com/share/3ea5f637-e37a-47af-bfd5-1f4c2d553fb0
以上のように、拡張子の有無の違いだけで回答の精度に差が出るため、GhatGPTにコードを貼り付けて質問する際はコードブロック (```) で囲み、拡張子を追加したコードで質問することをオススメします。
