VS Codeの入力補完は使っていい? 写経中に迷ったので整理した

台風で雲ノ平に行けなかったあるくが、雲ノ平を妄想中 テキストエディタ

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


ラクだけど、
「書いて覚えるのが目的なのに、これでいいのか」
と迷いました。

今回はVS Codeの補完機能を確認しながら、
「写経で使っていいのか」をAI先生とともに確認していきます。

※ブログはキャラクター同士の会話形式で進みます。 → 登場キャラクター紹介はこちら

入力補完って何が出てくるの?

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

あるく
あるく

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

ミナ
ミナ

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

カエデ
カエデ

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

AI先生
AI先生

はい。候補には種類があって、アイコンがついています。よく出てくる4つを見ていきましょう。

主に出てくるもの アイコン 役立つ場面
HTMLのタグ名 タグ名のアイコン1 div / section 綴りを忘れても頭文字で出せる
HTMLの属性名 属性名のアイコン2 class / src 確定すると class="" まで入る
CSSのプロパティ名 プロパティ名のアイコン3 background 長い名前を打たずに済む
自分が書いた文字列 文字列のアイコン4 post-title 自作のクラス名が候補に出る

※アイコンの見た目は、VS Codeのバージョンやテーマによって変わることがあります。

あるく
あるく

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

ミナ
ミナ

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

ライ太
ライ太

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

カエデ
カエデ

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

AI先生
AI先生

Tabキーで候補を確定すると閉じカッコ(>)が入っていませんが、
手動で>を入力することで、終了タグも自動で入力されます。

①<div  ← 候補確定時

②<div>  ← 手動で「>」入力

③<div></div> ← 終了タグが自動で入り、カーソルは真ん中に移動

ゴンさん
ゴンさん

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

書いた文字列が候補に出る場合もある

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

ミナ
ミナ

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

AI先生
AI先生

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

カエデ
カエデ

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

ライ太
ライ太

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

あるく
あるく

なるほど。中身を見てるわけじゃないから、自分で選ばないとダメってことか。



学習中に入力補完を使っていいのか?

AI先生
AI先生

結論から言うと使っていいです
ただ、補完内容がどういう意味をもつのかは、確認しておきましょう。

なぜ使っていいのか

写経の目的は、構造を理解しつつ
書いた内容がどのように表示されるのかを確かめることでした。

目的は1文字ずつ打ってスペルを覚えたり、
タイピングを学ぶわけではありません。

入力補完は打つ手間を減らし
理解する時間を増やすという意味で、
大変便利な機能だったというわけです。

ミナ
ミナ

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

ゴンさん
ゴンさん

いきなり細かい等高線を読み取るのも難しいし、最初は概略図でコース全体を俯瞰したらええ。

気をつける点

とはいえ、すべて入力補完に頼って、
そのプロパティが何を意味しているのかが理解できないと、写経を行う意味が薄れます。

不明点は都度AI先生に確認しながら、
理解したうえで先に進む。

忘れたときは何回でも確認するといいでしょう。
嫌がらずに丁寧に教えてくれます😀

ライ太
ライ太

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

カエデ
カエデ

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

まとめ

稜線の紅葉を楽しむため、ロープウェイに乗ってショートカットするあるく一行

・VSコードの入力補完は多様な種類があり、終了タグまで自動で補完できる

VSコードの入力補完は打つ手間を減らして、理解する時間を増やしてくれる

・入力補完した内容で意味がわからない場合は、あとでAI先生に聞いてみる


入力補完って、正直便利すぎますよね。
便利すぎてこのまま使っていいのか迷いましたが、
目的を考えることで、使うことにためらいはなくなりました。

入力に時間をかけるよりも、
こなす量を増やしたり、理解に時間をかける。

そんな感じのスタンスで、これからも頑張っていこうと思います。
ではでは👋