フロントエンドの実装で起こっていた悩みをGithub Copilot Chat（以降Copilotと記載）に相談したら解決出来た、という内容です。tipsとしてまとめておきます。
前提
現在携わっているプロダクトでは、フロントエンドを「svelte × sass」で実装しています。また、PC版とモバイル版をレスポンシブに表現するために、cssのカスタムプロパティを用いて下記のように実装しています。
<script>
export let isMobile = false
</script>
<div class="container"
class:pc={!isMobile}
class:sp={isMobile}
>
...
</div>
<style lang="sass">
@import "global.scss";
.pc {
// OK
--container-width: #{$pc-content-width};
}
.sp {
// NG
// `$sp-content-width`という文字列がプロパティに割り当てられる
--container-width: $sp-content-width;
}
.container {
width: var(--container-width);
}
</style>
$pc-content-widthや$sp-content-widthは、スタイルガイドによって定義され、global.scssにsass変数として記述されている値です。このような仕組みを活用することで、webサイト全体のスタイル統一を容易にします。
問題点
sass変数をcssカスタムプロパティに割り当てるときは、sass変数をインターポレーション（展開）しないと意図した値がスタイルに割り当てられません。
具体的には、#{...}でsass変数を囲う必要があります。インターポレーションしない場合、カスタムプロパティにsass変数名が文字列として格納されます。
厄介なことに、この状態でwebページを表示してもエラーになりません。エディタなどが検知してくれるわけでもないので、よく#{...}をつけ忘れてpushしてしまい、後々デザイン崩れやスタイル適用不備に気づくということが多々発生していました。
解決方法
今は 「sass変数をcssカスタムプロパティにインターポレーションする」 のように言語化することは出来ます。しかし、どうにかしようとした当初は#{...}のような構文をなんて呼ぶのか、またどんな仕組みを使えばい解決できるかなど、あまりにもとっかかりが少ない状態でした。
記号を用いた構文は、中々Google検索などでの調査が難しいことも多いです。
そこで活用するのがみなさんお馴染みCopilot君。Copilot君に構文の名称や意味がどういったものなのか、またどうすれば解決できるかまで聞いてみようと思います。
構文の名称と意味を聞いてみる
早速構文の意味を聞いてみます。
早速Interpolation（インターポレーション）という単語が出てきました。また、sass変数を展開する という旨の説明も出てきました。
それっぽい説明をしている気がしますが、念のため調べて確証を得ておきます。
調べた結果、sassの公式ページで解説しているページがヒットしました。このページを読むに、どうやらCopilotが述べていることは正しそうです。
どうやったらつけ忘れを防げるかを聞いてみる
先ほどのやり取りで構文の名称と意味が判明しました。次に、カスタムプロパティにsass変数を割り当てる場合にどうしたらインターポレーションの付与を強制できるかを聞いてみます。
試しにCopilotに対し、コミット時にチェックする方法が無いかを聞いてみました。
コミット時にチェックする手段として、lint-stagedとstylelintを活用する方法を提示してくれました。lint-stagedとstylelintはプロジェクトのパッケージに含まれているので、そのまま利用できそうです。また、同一プロンプトの回答として実際のstylelintとlint-stagedの設定を出力してくれました。
見事にstylelintrcやlintstagedの設定キーや、検出するための正規表現まで出力してくれました。キー名や正規表現が正しいかどうかを確認できればそのまま組み込めそうです。
まとめ
Copilotを利用することで、インターポレーション忘れ防止設定をプロダクトに組み込む方法を知ることができました。
改めて、CSSやLinterのような世の中に広く知れ渡っている、かつ記号が含まれているなどの理由によってググラビリティの低い（Google等によって検索しにくい）情報に対してはかなり有用なツールだということが分かりました。
また、正規表現のような人間にとって理解しにくいものも、要望に沿った形で出力してくれるのはありがたいと感じました。
ただし、Copilot等の生成AIを利用する上で重要なことは、自分なりに検証や事実確認を行うことだと思っています。
今回の記事でも、「インターポレーション」という概念は本当に当てはまる情報なのか？正規表現は期待する文字列をマッチングしてくれるのか？など、検証や確認しておいた方がいい点はいくつかあったと思います。
今後AIが進化していくにつれ、より高い精度の「嘘」を付けるようになることも考えられます。したがって、利用者も相応に賢くなっていき、出力された情報を鵜呑みにしない、適切に検証や確認をしていくことが良い付き合い方なんだと思います。
Discussion