ダレカン和泉Web制作・開発基礎カリキュラム

Step 2 共通基礎 » 授業2

STEP 2 | 授業 2/7

VS Codeをはじめる

VS Code(ブイエス コード)は、世界中のプロが使っている無料の「コードを書く道具」です。この授業で、インストールから「書いたページがすぐブラウザに映る」環境まで、一気にそろえます。

この授業のゴール VS Codeでファイルを作って保存し、Live Serverでブラウザに表示できるようになる。

1. VS Codeってなに?

正式名称は Visual Studio Code(ビジュアル スタジオ コード)。Microsoftが作っている無料のエディタ(=コードを書くための高機能なメモ帳)です。

  • 無料で、ずっと使えます。
  • 書き間違いに色や波線で気づかせてくれます。
  • 「拡張機能」を追加すると、どんどん便利になります。(この授業の後半で1つ入れます)
  • プロの現場で一番使われているエディタなので、覚えたことがそのまま仕事のスキルになります。

2. インストールする

教室のパソコンにはすでに入っていることもあります。デスクトップやスタートメニューに青いリボンのようなアイコンの「Visual Studio Code」があれば、この章はとばして3章へ進んでください。

  1. 公式サイトを開くブラウザで code.visualstudio.com を開きます。検索で「VS Code」と入れて、「Visual Studio Code」の公式サイトを選んでもOKです。
  2. 「Download for Windows」の青いボタンをクリックダウンロードが始まります。終わるまで少し待ちます。
  3. ダウンロードしたファイルをダブルクリックブラウザの右上の「ダウンロード」一覧か、エクスプローラーの「ダウンロード」フォルダにあります。VSCodeUserSetup-...exe という名前です。
  4. 「同意する」を選んで「次へ」使用許諾契約の画面です。「同意する」に印をつけて進みます。
  5. あとは「次へ」を押していき、最後に「インストール」途中の設定はそのままで大丈夫です。「デスクトップ上にアイコンを作成する」にチェックを入れておくと、あとで見つけやすくて便利です。
  6. 「完了」を押して起動VS Codeが立ち上がれば成功です。
困ったら: 画面が説明と少しちがっても、あわてないで大丈夫です。インストール画面は時期によって少し変わります。分からなくなったら、その画面のままスタッフを呼んでください。

3. 日本語にする

最初は画面が英語です。「拡張機能」を1つ入れると日本語になります。これが「拡張機能を入れる練習」も兼ねています。

  1. 左端の「四角が4つ」のアイコンをクリック左の縦の帯(アクティビティバー)の中にある、ブロックが1つ外れたようなアイコンです。これが「拡張機能」の入り口です。
  2. 検索らんに Japanese と入力一覧の一番上に「Japanese Language Pack for Visual Studio Code」が出てきます。
  3. 「Install」ボタンをクリック数秒で入ります。
  4. 右下に出る「Change Language and Restart」をクリックVS Codeが再起動して、メニューが日本語になります。出てこなければ、VS Codeをいったん閉じて開き直してください。

4. フォルダを開いて、ファイルを作る

VS Codeは「ファイル1枚」ではなく「フォルダごと」開いて使うのが基本です。授業1「パソコンの基本操作」で作った web-renshu フォルダを開きます。(まだ作っていない方は、先に授業1の2章へ)

  1. メニューの「ファイル」→「フォルダーを開く」画面左上の「ファイル」をクリックすると出てきます。
  2. 「ドキュメント」の中の web-renshu を選んで「フォルダーの選択」「このフォルダー内のファイルの作成者を信頼しますか」と聞かれたら、「はい、作成者を信頼します」を選びます。(自分で作ったフォルダなので大丈夫です)
  3. 左側にフォルダ名が表示されたことを確認左の一覧(エクスプローラーと呼びます)に「WEB-RENSHU」と出ていれば成功です。
  4. 「新しいファイル」アイコンをクリック左の一覧の「WEB-RENSHU」の右側にマウスを持っていくと、紙に+がついた小さなアイコンが出ます。それをクリック。
  5. 名前を index.html と入力して Enter拡張子まで自分で打ちます。.html と打ったとたん、アイコンが変わるのに注目してください。VS Codeが「これはWebページだな」と理解した合図です。
  6. 1行書いて保存する開いたファイルに こんにちは! と打ち、Ctrl + S で保存します。タブの「●」(未保存の印)が「×」に変われば保存できています。
ヒント: index.html という名前は「そのフォルダの顔になるページ」の世界共通の決まり文句です。この先もトップページは必ずこの名前にします。

5. Live Server ― 保存したら、すぐ映る

仕上げに、一番感動する道具を入れます。Live Server(ライブ サーバー)という拡張機能で、「保存した瞬間、ブラウザの表示も変わる」ようになります。

  1. 拡張機能のアイコンをクリック日本語化のときと同じ場所です。
  2. 検索らんに Live Server と入力ろうそくのようなマークの「Live Server」(作者: Ritwick Dey)を選びます。
  3. 「インストール」をクリックこれだけで準備完了です。
  4. index.html を開いて、右下の「Go Live」をクリック画面の一番下の青い帯(ステータスバー)の右のほうに「Go Live」という文字が出ています。クリックすると、ブラウザが自動で開いて、あなたのページが表示されます。
  5. 「自動で変わる」を体験するブラウザを開いたまま VS Code にもどり、こんにちは! を こんにちは、世界! に書き換えて Ctrl + S。ブラウザが勝手に新しい内容に変わります。これが Live Server の魔法です。
  6. 終わるときは、右下の「Port : 5500」をクリック「Go Live」だった場所が「Port : 5500」に変わっています。クリックすると止まります。
「Go Live」が見つからないときは: ① フォルダごと開いているか(4章の手順)、② .html のファイルを開いているか、の2つを確認してください。それでも出ないときは、VS Codeをいったん閉じて開き直すと出ることが多いです。

6. やってみよう ― 自分の「作業の流れ」を完成させる

やってみよう

これからずっと使う「編集 → 保存 → 確認」の流れを、自分の手で3回繰り返してみましょう。

  1. index.html に好きな文章を1行書き足して保存し、ブラウザで確認する。
  2. その文章を Ctrl + C / Ctrl + V で3行にふやして保存し、確認する。
  3. 間違えたつもりで Ctrl + Z で1つ取り消して保存し、確認する。

「保存するたびにブラウザが変わる」感覚がつかめたら、この授業は合格です。

発展チャレンジ(慣れている方・A型の方向け)

発展チャレンジ
  • index.html の中身を全部消して、半角で ! と1文字打ってから Tab キーを押してみてください。HTMLのひな形が一瞬で展開されます。これは Emmet(エメット) という時短機能で、次の授業で意味を学びます。
  • 行を選んで Alt + ↑ / ↓ を押すと、行ごと上下に動かせます。Ctrl + / は「コメント化」(一時的に無効にするメモ書き)。どちらもプロが毎日使う技です。
  • 「ファイル」→「ユーザー設定」→「テーマ」→「配色テーマ」で画面の色を変えられます。長時間でも目が疲れない、自分のお気に入りを見つけましょう。

できたチェック