作成日：2025-03-14

VSCode の Copilot と Sass で春の大掃除祭り

最近 VSCode を導入してから、なかば「COPLIT」という AI ツールと CSS（Cascading Style Sheets）の（ Sass ）というプログラミング風で CSS がかけるツールをいれて、WebSite のお掃除を行っておりました。

COPILOT

みなさんの Windows にも入っている 🔁 みたいなマークが、実際は（ COPILOT ）です。それのプログラミング言語特化版が VSCode の Copilot で、コード生成の強力なアシスタントとして働いてくれます。

例えば、チャットで「このコードを作りたいのですが、どのようにすればいいのですか？」と問いかけてみるとこのような出力をしてくれます。

このような出力をしてくれて「エディターで適用」「AI カーソルで出力」「コピー」の三種を選ぶことが出来ます。

自動的に AI がファイルに書き込みをしてくれる、スグレモノです。

ただ、構文が 1000 文字以上あるとコーヒブレイクしてしまいまうほど時間がかかるので（３〜５分程度）注意が必要です。

AI カーソルはそのまま、クリックしているところにそのまま出力するモードです。強いて言えばそのまま出力に近いですね。

名前の通りです。一度そのままコピーして自分の目的の場所に出力したい時に使います。ただ、AI がファイル構文を取得して編集点を考えてくれるのであまり使わない機能ですね。

COPILOT では「Claude 3.5」「Gemini 2.0」「Chat GPT 4」「o3 mini」の４種類から選べることができます。初期状態では「GPT 4」になっておりますが、自分の好きな AI 言語で処理を選ぶことができるので、自分の癖に合わせた言語を選ぶといいかもしれません。

（ Sass ）はプログラミングのように CSS を記述する言語です。

詳しい内容は他の紹介サイトをオススメさせていただきますが、CSS を書いているとお悩みなのが「同じ処理を何度も書いてしまう」「代数あればいいのに…！」「今、どこの "Class" "id" だっけ」ということを無くしてくれる便利なツールです。

VSCode では（ Live Sass Compiler ）にて同様の機能を追加出来ます。

プログラマーが使うのが Git という管理ツールです。

＠ Git というのはどういうツールなの？

Gitは、ファイルのバージョンを追跡する分散型バージョン管理システムです。主にソフトウェア開発者が共同でソースコードを管理するために使用され、高速性、データ整合性、非線形ワークフローのサポートを特徴とします。ほぼ全ての開発者が主要なバージョン管理システムとして利用しています。

こちらの要約は Google by Gemini によって作られました

例えば、編集してたら「重大な失敗した！戻りたい」とか、「複数人で制作ツールの ABC をつくる」などをグラフで表現してくれる便利なツールです。

みなさん良くやるのが「Main」は確定項目（アプリケーションなら配布 Ver）「dev（develop）」が編集してコミット（編集点）をつくる項目。場合によっては「feature」という、もしかしたらつくるかもしれないけども…つくるのを辞めるかもしれないような、区切りでコミットをするみたいです。

コミットとは、現在ここまで編集しましたよ！という記録メモです。

電車で言う各駅停車みたいな ◯ 点があるのが、一つのコミットとなっております。

マージとは、途中で合流してるところで、この dev 要素を Main で確定したい！時などをマージをおこなって合流させることをいいます。

雰囲気は上司に「確認お願いします」と問いかけるようなものですね。

名前の通り、リセットをする機能。

私はよく使いますが、あのときの処理のほうが良かったなぁ…。とか、間違えてデーターを消してしまった！という時に使います。

わりとスパゲッティコード（スパゲティプログラム）だったりするので、気力がある時にサイト調整をおこなうことが多いです。

やっぱり完全なるきれいなコードって誰にも書けないと思うのですよね。 AI でもたまにポカ（失敗）したり、本当に理想的に動くの？というコードを提案してくることも…！

そういうときは、まずは自分で悩んで、それから AI に聞いてみるのが理想的に動くコードになるのではないかと考えてみるのが良いと思います。