Chat GPT と GitHub Copilot Chat と Bing AI に同じ質問をしたところ、 Bing AI だけ本当に欲しかった答えが一発で得られて、とても感動したので記事にしたいと思います。
質問内容
SCSSで、以下のように同じセレクタを繰り返して詳細度を上げるためのDRYな書き方を探していました。
// これをDRYに書きたい
.foo.foo.foo {
}
Chat GPT（GPT-4 / Pluginなし）の回答
SCSS（Sassy CSS）を使って、クラス名を繰り返して詳細度を上げるためには、& リファレンスを利用することができます。以下のようにSCSSで記述できます：
.foo { &.foo { &.foo { // スタイルをここに書く } } }このSCSSコードは以下のCSSにコンパイルされます：
.foo.foo.foo { // スタイルをここに書く }このようにして、クラス .foo が3回繰り返されることで詳細度を上げることができます。このテクニックは、他のCSSルールによってスタイルが上書きされるのを防ぐ場合に有用です。
これではSCSSを使っている旨味がなく、求めている回答ではありませんでした。
さらに fooを繰り返し書く必要がないように のように追加で質問しても、 @for や @function を使った複雑な提案をしてくれて、実用的ではありませんでした。
GitHub Copilot Chatの回答
SCSSで詳細度を上げるために、自身を繰り返して書く方法は、以下のように & を使用します。
.foo { &&& { /* 詳細度が高いスタイル */ } }
これでは SassError: "&" may only used at the beginning of a compound selector. のようなエラーが出てしまいました。
さらに質問しても、正確な答えは出ませんでした。
Bing AIの回答
SCSSでは、詳細度を上げるためにクラスを繰り返すことができます。以下にその方法を示します。
.foo { &#{&}#{&} { // ここにスタイルを書く } }上記のコードは、コンパイルすると以下のようになります。
.foo.foo.foo { // ここにスタイルが書かれます }このように、SCSSでは&を使用して現在のセレクタを参照し、それを繰り返すことで詳細度を上げることができます。ただし、この方法は詳細度の問題を解決するための最終手段と考えてください。可能な限り、よりシンプルで保守性の高いCSSを書くことをお勧めします。詳細度が高くなると、後からスタイルの変更やデバッグが難しくなる可能性があります。また、詳細度が高いということは、CSSが具体的すぎて再利用性が低下する可能性もあります。そのため、まずは他の方法（例えば、より具体的なクラス名を使用するなど）で問題を解決できないか検討してみてください。それでも解決しない場合には、上記のような方法を試してみてください。
→ 完璧でした！
このような書き方は知らず、諦めていたので、本当に助かりました。
その他の質問
API Gatewayのやや複雑なリソース指定について質問した際も、Bing AIだけ欲しかった答えを出してくれました。
各サービスの使用感
各サービスを浅く使ってみた感想です。まだ使い始めたばかりのため、ご参考までに🙇♂️
Chat GPT（GPT-4）
良い点
- UIが洗練されてきていて、分かりやすい
悪い点
- 間違っていたり、遠回りな方法を提案されることがある
- 最新の情報には対応していない（Pluginなしの場合）
GitHub Copilot Chat
良い点
- プロジェクトのコードベースを元に回答してくれたりする
悪い点
- 回答の正確性がかなり低い印象
Bing AI
良い点
- 最新の情報を元に答えてくれる
- 回答の正確性が高い
- ログインなしでも簡単に使える
悪い点
- UIが若干分かりにくく感じた（過去のチャット履歴は見れない？）
まとめ
これからはBing AIを積極的に使ってみたいと思います🎉
Discussion