ようこそ、プログラミングの世界へ。ここは「まじで何もわからない」人のための、いちばん最初の一歩です。むずかしい知識はまだ何もいりません。まずは、コードを書くための道具をパソコンに用意しましょう。
エディタって何？
コードは、ただの文字。だから、じつはパソコンの「メモ帳」でも書けます。でも、メモ帳だと色もつかず、まちがいも教えてくれず、とても書きにくい。
そこで使うのがエディタ。エディタは、いわば「プログラミング専用の、超つよいメモ帳」。中でも VSCode は定番中の定番。まずはこれを入れましょう。
エディタが「超つよい」理由は、たとえばこんなところです。
- 文字に色がつく——タグや文章など、役割ごとに色分けされて、コードがぐっと読みやすくなる
- まちがいを教えてくれる——閉じ忘れたタグやつづりミスに、波線などでそっと気づかせてくれる
- 入力を先回りしてくれる——途中まで打つと候補が出てきて、長い単語も打ちまちがいにくい
コードの世界では、たった1文字のまちがいでページが崩れることがあります。それを人間の目だけで探すのは大変。エディタは、その「探す苦労」を肩代わりしてくれる相棒です。
便利な「拡張機能」
VSCodeは、あとから機能を足せるのが大きな魅力。この追加パーツを拡張機能（Extension）と呼びます。スマホにアプリを入れて便利にするのと、同じ感覚です。はじめの一歩には、この3つがおすすめです。
| 拡張機能 | できること |
|---|---|
| Japanese Language Pack for VS Code | VSCodeの画面を日本語にしてくれる。英語がこわい人は、まずこれ |
| Live Server | ファイルを保存すると、ブラウザが自動で最新の見た目になる。毎回ひらき直さなくてよくなる |
| Prettier - Code formatter | ガタガタのコードを、ボタンひとつでキレイに整えてくれる |
拡張機能はすべて無料で入れられます（一部に有料サービスと連携するものもありますが、ここで紹介した3つは無料です）。選ぶときは、インストール数が多いもの・名前が紹介と正確に一致するものを選ぶと安心です。同じような名前の拡張機能が並んでいることがあるので、作者名（Japanese Language PackならMicrosoft）もあわせて確かめるクセをつけておきましょう。
じゅんびHTMLファイルの全体像いま入れたPrettierが活きる場面。“入れ子をきれいに閉じる”話は、この先で出てくるよべんりワザVSCodeを日本語化する方法日本語化の手順をもっとくわしく。うまく切り替わらないときの直し方もこちらこのレッスンのまとめ
- コードはエディタで書く（VSCodeがおすすめ）
- VSCodeは無料。code.visualstudio.com から入れる
- 拡張機能で、あとから便利機能を足せる（まずは日本語化がおすすめ）
- まずは起動できればOK。設定はあとで
