じゅんび・はじめの準備

パソコンにVSCodeを入れる

コードを書くには「書く道具」がいります。プロも使う無料エディタVSCodeを入れて、スタート地点に立とう。

ようこそ、プログラミングの世界へ。ここは「まじで何もわからない」人のための、いちばん最初の一歩です。むずかしい知識はまだ何もいりません。まずは、コードを書くための道具をパソコンに用意しましょう。

エディタって何?

コードは、ただの文字。だから、じつはパソコンの「メモ帳」でも書けます。でも、メモ帳だと色もつかず、まちがいも教えてくれず、とても書きにくい。

そこで使うのがエディタ。エディタは、いわば「プログラミング専用の、超つよいメモ帳」。文字に色をつけて見やすくしたり、打ちまちがいをそっと教えてくれたりします。中でも VSCode は定番中の定番。まずはこれを入れましょう。

便利な「拡張機能」

VSCodeは、あとから機能を足せるのが大きな魅力。この追加パーツを拡張機能(Extension)と呼びます。スマホにアプリを入れて便利にするのと、同じ感覚です。はじめの一歩には、この3つがおすすめです。

拡張機能できること
Japanese Language Pack for VS CodeVSCodeの画面を日本語にしてくれる。英語がこわい人は、まずこれ
Live Serverファイルを保存すると、ブラウザが自動で最新の見た目になる。毎回ひらき直さなくてよくなる
Prettier - Code formatterガタガタのコードを、ボタンひとつでキレイに整えてくれる
じゅんびHTMLファイルの全体像いま入れたPrettierが活きる場面。“入れ子をきれいに閉じる”話は、この先で出てくるよ

このレッスンのまとめ

  1. コードはエディタで書く(VSCodeがおすすめ)
  2. VSCodeは無料code.visualstudio.com から入れる
  3. 拡張機能で、あとから便利機能を足せる(まずは日本語化がおすすめ)
  4. まずは起動できればOK。設定はあとで

やってみよう:VSCodeと拡張機能を入れる

むずかしくありません。ふだんアプリを入れるのと同じ手順です。

  1. いつものブラウザで、code.visualstudio.com を開く
  2. 大きな 「Download(ダウンロード)」ボタンを押す(自分のパソコンに合ったものが自動で選ばれます)
  3. ダウンロードできたファイルを開いて、案内どおりにインストールする
  4. インストールが終わったら、VSCodeを起動する
VSCode公式サイト。中央に大きな「Download」ボタンがある
公式サイト(code.visualstudio.com)。真ん中の大きなボタンから入れられます。

青いアイコンのアプリが立ち上がって、少し未来っぽい画面が出てきたら成功です。

起動直後のVSCode。左端にアイコンが縦に並び、右側にようこそ画面が表示されている
これが起動直後の画面。左端のアイコンの列と、右のようこそ画面が出ていればOK。

真っ暗な画面でも大丈夫

初めて開くと、黒っぽい画面に英語がいっぱいで「うわ……」となるかもしれません。でも大丈夫。今は何も設定しなくていいし、英語も読めなくて大丈夫。「入った」というだけで、この回は大成功です。

つづけて、拡張機能も入れましょう。VSCodeの左端にある、四角が4つ集まったアイコン(拡張機能)を押し、出てきた検索欄に名前を打って 「Install」 を押すだけです。

VSCodeの拡張機能パネル。検索欄に「Japanese」と入力し、日本語言語パックが一覧の先頭に出ている
検索欄に名前を打つと候補が並びます。まずは「Japanese」で日本語化パックを入れてみましょう。

道具が手に入りました。