← 準備

レッスン 2/4 ⏱ 15 分

VS Code エディタのインストール

コードを書くプログラムをインストールする。無料で、プロも使ってる。

VS Code って何?なぜこれ?

Visual Studio Code(みんな VS Code と呼ぶ)はエディタ——コードを書くプログラム。プログラマー向けの Word みたいなもの:コードに色をつけて、ヒントをくれて、間違いを教えてくれる。完全無料で、世界最大の会社の人たちもウェブサイト作りに使ってる。今覚えれば、ずっと役に立つ。

⚠️

大人と一緒にインストールして。 保護者のそばに座って——インストール自体は安全だけど、パソコンに何が入るか知っておいてもらうのがいい。

Windows でのインストール

  1. code.visualstudio.com を開いて、大きな青い Download for Windows ボタンをクリック。

  2. ダウンロードが終わったら、ファイルをクリック(下のタスクバーか Downloads フォルダにある)。

  3. ライセンスに同意(I accept the agreement にチェック)、Next を押し続ける。Select Additional Tasks のところで Create a desktop icon にチェック——デスクトップにアイコンができる。

  4. Install をクリックして待つ。最後に Finish——VS Code が開く。

Mac でのインストール

  1. code.visualstudio.com を開いて Download for macOS をクリック。

  2. ダウンロードしたファイルを Downloads フォルダで見つける。.zip ならダブルクリックで解凍。

  3. 青い Visual Studio Code アイコンが現れる。Applications フォルダにドラッグ。これでインストール完了。

  4. Applications フォルダを開いて Visual Studio Code をダブルクリック。初回は Mac が「本当に開く?」と聞く——Open をクリック。

VS Code を知ろう

VS Code はたくさんの言語に対応——さっと見て慣れよう:

  1. 左サイドバーで 積み重なった四角 のアイコン(Extensions)をクリック。4つの小さなブロックみたい。

  2. 上の検索ボックスに Prettier(または DraculaNight Owl など好きなテーマ名)と入力。

  3. 気に入ったものを選んで横の Install をクリック。

  4. 右下に小さなウィンドウが出るかも——言われた通りに。VS Code がすぐ反映する。

確認: VS Code が開いて使える状態、上にメニュー(File、Edit、Selection…)がある。そうなら——準備完了、作業場OK!

この章のまとめ