「Visual Studio Code(通称:VS Code)」で写経をしていたら、タグを打つたびに候補が出てきて、Tabを押すと補完入力されますよね。
>を入力して閉じると、終了タグまで勝手に入る。

ラクだけど、
「書いて覚えるのが目的なのに、これでいいのか」
と迷いました。
今回はVS Codeの補完機能を確認しながら、
「写経で使っていいのか」をAI先生とともに確認していきます。
※ブログはキャラクター同士の会話形式で進みます。 → 登場キャラクター紹介はこちら
入力補完って何が出てくるの?

何かしら入力すると出てくるこの候補リスト。
そもそもどういう内容なのか、HTMLやCSSでよく使うものをAI先生に教えてもらいました。

VS Codeで打っていると、すごく入力候補が出てくるよね。
あれってどういうものがあるんだろう?

便利だけど、よくわからないで使ってるなぁ。

ざっくり教えてほしいわね。先生お願いしていいかしら?

はい。候補には種類があって、アイコンがついています。よく出てくる4つを見ていきましょう。
| 主に出てくるもの | アイコン | 例 | 役立つ場面 |
|---|---|---|---|
| HTMLのタグ名 | ![]() |
div / section |
綴りを忘れても頭文字で出せる |
| HTMLの属性名 | ![]() |
class / src |
確定すると class="" まで入る |
| CSSのプロパティ名 | ![]() |
background |
長い名前を打たずに済む |
| 自分が書いた文字列 | ![]() |
post-title |
自作のクラス名が候補に出る |
※アイコンの見た目は、VS Codeのバージョンやテーマによって変わることがあります。

こうやってみると、いろんなところで補完してくれてるんだね。

頭文字を続けて打つと、候補も絞られてきて、手で打つより全然早いよ😄

classとかは、自動的に「=””」まで入力してくれるんだな。

便利ね〜。サクサク書けそうよ。

Tabキーで候補を確定すると閉じカッコ(>)が入っていませんが、
手動で>を入力することで、終了タグも自動で入力されます。
①<div ← 候補確定時
↓
②<div> ← 手動で「>」入力
↓
③<div></div> ← 終了タグが自動で入り、カーソルは真ん中に移動

「<div class=””~」と続けることもできるが、階層が深くなると終了タグを忘れそうや。慣れないうちは、先に終了タグ(</div>)を入れておくのがオススメやな。
書いた文字列が候補に出る場合もある

クラス名など自由に設定できる場合は、文字列が候補に表示されます。
大文字や小文字の使い分けなど、意図せぬ文言が入らないように気をつけたいですね。

あれ、なんで「ウェットフードB」とか出てくるの? クラス名じゃないよね???

開いているファイルの中にある文言を、そのまま集めて出しているんです。クラス名として正しいかどうかまでは見ていません。

書いたものは、あとで使えるってわけね。

山小屋の忘れ物箱と同じだな。
誰が何を置いたかは気にせず、全部並べてあるだけだ。

なるほど。中身を見てるわけじゃないから、自分で選ばないとダメってことか。
学習中に入力補完を使っていいのか?


結論から言うと使っていいです。
ただ、補完内容がどういう意味をもつのかは、確認しておきましょう。
なぜ使っていいのか
写経の目的は、構造を理解しつつ、
書いた内容がどのように表示されるのかを確かめることでした。
目的は1文字ずつ打ってスペルを覚えたり、
タイピングを学ぶわけではありません。
入力補完は打つ手間を減らし、
理解する時間を増やすという意味で、
大変便利な機能だったというわけです。

山地図だとコース概略図を見て、
コースタイムとか標高差をざっくり掴むって感じかな。

いきなり細かい等高線を読み取るのも難しいし、最初は概略図でコース全体を俯瞰したらええ。
気をつける点
とはいえ、すべて入力補完に頼って、
そのプロパティが何を意味しているのかが理解できないと、写経を行う意味が薄れます。
不明点は都度AI先生に確認しながら、
理解したうえで先に進む。
忘れたときは何回でも確認するといいでしょう。
嫌がらずに丁寧に教えてくれます😀

よくわからんものを放っておくと、
あとで痛い目見るぞ。

早期発見、早期治療。
わからないところは、
小さいうちに潰すのが一番よ。
まとめ

・VSコードの入力補完は多様な種類があり、終了タグまで自動で補完できる
・VSコードの入力補完は打つ手間を減らして、理解する時間を増やしてくれる。
・入力補完した内容で意味がわからない場合は、あとでAI先生に聞いてみる
入力補完って、正直便利すぎますよね。
便利すぎてこのまま使っていいのか迷いましたが、
目的を考えることで、使うことにためらいはなくなりました。
入力に時間をかけるよりも、
こなす量を増やしたり、理解に時間をかける。
そんな感じのスタンスで、これからも頑張っていこうと思います。
ではでは👋







