プログラミング学習を始めたいのに、開発環境の構築で挫折してしまうことはよくあります。
プログラミング学習前にツールのインストールで躓いてしまうのはとても勿体無いです。
そこで、この記事ではテキストエディタで最も使われている「Visual Studio Code」のインストール方法を解説します。インストール後の使い方も画像を交えてわかりやすく解説しているので、是非最後までご覧ください。
目次
テキストエディタの準備しよう
テキストエディタとは、テキストデータを編集するソフトのことです。
テキストエディタにもたくさん種類が存在し、「メモ帳」「Visual Studio Code」「Atom」「CotEditor」「Sublime Text」などが代表例としてあげられます。
Visual Studio Code （VSCode）とは
Visual Studio Code （以下VSCode）とは、Microsoft社開発のテキストエディタです。
VSCodeはプログラミングによる開発に特化しており、作業を効率化するための便利な機能が数多く用意されています。
テキストエディタの準備しよう
それでは、VSCodeのダウンロードをしていきましょう。
WindowsとMacで方法が異なりますので、ご自身のお使いのパソコンに合わせて説明を読み進めてください。
Windows OS の場合
ダウンロードページにアクセスする
VSCodeはMicrosoft社の公式ホームページからダウンロードすることができます。
「Visual Studio Code - Code Editing. Redefined」にアクセスし、「Download」を押してダウンロードを進めましょう。
Windows OS用の「ダウンロードボタン」をクリックする
Windows OS のパソコンを使われている方は、Windows用の「ダウンロードボタン」をクリックします。
ダウンロードボタンを押すと「VSCodeUserSetUp.exe」がダウンロードされます。
ダウンロードされた「VSCodeUserSetUp.exe」を開く
ダウンロード完了すると画像のようにページが変わります。
次に、ダウンロードされた「VSCodeUserSetUp.exe」を開き、インストーラーを起動します。
「次へ(N)」をクリックする
「VSCodeUserSetUp.exe」を開き、案内に沿って「次へ(N)」を押し、インストールを進めてください。
インストール先を指定し「次へ(N)」をクリックする
インストール先を指定する画面になったら、そのまま「次へ(N)」をクリックします。
インストール先を指定したい方は、「参照(R)」をクリックして選択します。
ショートカット作成も「次へ(N)」をクリックする
ショートカットを作成する画面もそのまま「次へ(N)」をクリックします。
「デスクトップ上にアイコンを作成する」にチェックを入れる
「デスクトップ上にアイコンを作成する」項目にチェックを入れましょう。
チェックを入れられたら「次へ(N)」をクリックします。
「インストール」をクリックする
インストール内容の確認画面になったら、「インストール」をクリックします。
インストールが終わるまで待機する
インストール中の画面になったら、インストールが終わるまで待ちましょう。
インストールが終わったら「完了」をクリックする
「Visual Studio Code セットアップウィザードの完了」と表示された画面が出れば、インストール完了です。
「完了」ボタンを押して、インストーラーを閉じましょう。
以上で、VSCodeのインストールは完了です。
Mac OS の場合
ダウンロードページにアクセスする
Mac OS の方もWindows OS の方と同様に、「Visual Studio Code - Code Editing. Redefined」にアクセスします。
Mac OS用の「ダウンロードボタン」をクリックする
Mac OS のパソコンを使われている方は、Mac用の「ダウンロードボタン」をクリックします。
ボタンを押すと「VSCode-darwin.zip」がダウンロードされます。
「Visual Studio Code.app」を「アプリケーションフォルダ」に移動する
「VSCode-darwin.zip」をダブルクリックし、解凍（展開）します。
解凍（展開）が完了すると、「Visual Studio Code.app」が出てきます。上記の手順にしたがって、「Visual Studio Code.app」を「アプリケーションフォルダ」に移動させてください。
移動が完了したら、VSCodeのインストールは完了です。
VSCode の使い方
次に、VSCode の使い方を簡単に説明していきます。
画面の見方
こちらが、VSCode を立ち上げた時の例になります。
画像の画面では日本語表記になっていますが、後述する「拡張機能」を入れることによって「英語表記」から「日本語表記」にすることができます。
画像で示されている箇所は、普段からよく使う部分になるので覚えておきましょう。
「起動時にウェルカムページを表示する」のチェックを外すとデフォルトの「作業の開始」の画面は表示されなくなります。
お好みで設定を変えてください。
ファイル/フォルダの開き方
次に、ZeroPlusで配布される教材を開くために「ファイル/フォルダの開き方」を学んでいきましょう。
「ファイル」から「フォルダーを開く」をクリックする
まずは、ファイルから開きたいものを選択します。
プログラミングの学習は基本的にフォルダの状態で扱うことになりますので、「フォルダーを開く」をクリックしましょう。
開きたいフォルダを選択し「開く」をクリックする
次に、開きたいフォルダを選択し、「開く」をクリックすることでVSCode内にフォルダを開くことができます。
「サイドバー」から「エディタ」にファイルを表示する
フォルダーを開くと、サイドバーに開いたものの中身の構成が表示されます。
フォルダ構成の中から開きたいファイルをクリックすることで、エディタの画面に表示することができます。
ファイルの分割表示
次に、コーディングがしやすいように「ファイルの画面分割」の方法を学んでいきましょう。
ファイルをクリックして表示したい場所にドロップする
画面分割を行う場合は、分割して表示したい位置に開きたいファイルをドラック＆ドロップすることで開けます。
index.htmlを先に開いておいた状態で、style.cssを画面端でドロップしてみましょう。
分割表示されたらOK
エディタの画面に「index.html」と「style.css」が表示されれば完了です。
コーディングがしやすくなるので、画面分割はできるようになっておきましょう。
おすすめの便利なショートカットキー
次に、VSCode の操作を快適に行うためのショートカットキーを紹介していきます。今回はよく使う基本的なものを厳選して紹介させていただきます。
| 操作 | ショートカットキー |
| 操作を１つ前に戻す(Undo) | ⌘ Z |
| 操作を１つ先に進む(Redo) | ⌘ Shift Z |
| カット | ⌘ X |
| コピー | ⌘ C |
| ペースト | ⌘ V |
| 全選択 | ⌘ A |
| 複数選択(マルチカーソル) | option クリック |
| 範囲選択 | Shift クリック |
| 行の端にカーソル移動 | ⌘ ← / → |
| カーソル移動しつつ選択 | Shift ← / → |
| 文字列検索 | ⌘ F |
| 文字列(単語)選択 | ⌘ D |
| 同じ文字列を全て選択 | ⌘ Shift L |
| 行の選択 | ⌘ L |
| 行の移動 | Option ↑ / ↓ |
| 行の複製 | Option Shift ↑ / ↓ |
| 上書き保存 | ⌘ S |
| 名前をつけて保存 | ⌘ Shift S |
| 折り返しの表示の切り替え | Option Z |
※Windowsでは、⌘は「Ctrlキー」、optionは「Altキー」に相当します。
VSCode の拡張機能
次に、VSCode の拡張機能について簡単に説明していきます。
VSCode に拡張機能を入れる
次に、VSCode の便利な拡張機能を入れていきましょう。
「拡張機能」のアイコンをクリックする
拡張機能のアイコンをクリックすると、サイドバーにVSCode の拡張機能の一覧が表示されます。
「検索欄」から「インストール」をクリックする
入れたい拡張機能を検索し、詳細を表示させます。
「インストール」ボタンをクリックして、インストールが完了です。
インストールした拡張機能を有効化するためには、VSCodeを再起動する必要があるプラグインもあります。
VSCodeのおすすめ拡張機能
次に、VSCode のおすすめ拡張機能を紹介していきます。
VSCodeには豊富に拡張機能が存在しますが、その中でも学習の役に立つものを厳選して紹介します。
・ Japanese Language Pack for VSCode
VScodeは、デフォルトの状態だと英語表記で起動します。
このプラグインをインストールすると、VScodeを日本語表記に変更することができます。
・Live Server
Live Serverは、自動でブラウザを更新してくれるプラグインです。
ブラウザの更新忘れを回避できる便利なプラグインです。
・Zenkaku
Zenkakuは、全角スペースを可視化してくれるプラグインです。
コードを書くときに全角スペースはエラーの元となります。デフォルトの状態だと全角スペースは見えないので、可視化することで予期せぬエラーを防ぐことができます。
・indent-rainbow
indent-rainbowは、コードのインデント（字下げ）をみやすくしてくれるプラグインです。
インデントのずれを素早く見つけることができるので、インデントを綺麗にすることにまだ慣れていない人は入れておきましょう。
・Prettier
Prettierは、コードのインデントを自動で綺麗に整形してくれるプラグインです。
こちらのプラグインは、次のおすすめ設定で使い方を説明しています。
VSCode おすすめ設定
次に、プログラミングの学習をより効率化する設定をしていきましょう。
コードの自動整形の設定
コードを自動的に綺麗に整形してくれる設定を追加していきます。
「管理」のアイコンから「設定」クリックする
アクティビティバーから「管理」のアイコンをクリックし、「設定」をクリックします。
「Default Formatter」を「Prettier」に変更する
設定の検索欄に、「format」と入力します。
Default Formatterの設定を「なし」から「Prettier - Code formatter」を選択します。
「Format On Save」にチェックを入れる
次に Format On Save の設定にチェックを入れましょう。
以上の設定を追加することで、保存時に自動でコードを綺麗に整えてくれるようになります。
区切れるテキストの設定
次に、テキストが区切れる場所の設定を変更します。
設定の検索欄に、「sepa」と入力します。
Word Separatorsの設定から「-（ハイフン）」を消します。
（※他の記号を消さないように注意してください！）
以上で区切れるテキストの設定は完了です。
ハイフンで選択が途切れなくなる
ダブルクリックでテキストを選択する際、ある特定の文字で選択が外れてしまう場合があります。
デフォルトの設定だと、-（ハイフン）で区切れてしまいます。
HTML,CSSを学習する際は、この -（ハイフン）をまとめて選択したいタイミングが出てきますので、選択できるように今のうちに設定を変更しましょう。
VSCode を使いこなそう！
今回はVSCode のインストールから基本的な使い方を学びました。
VSCode はプログラミングの学習をする上で、今後の皆さんの手と足のようなツールになります。
VSCode を使いこなして、快適なプログラミング学習ライフを送りましょう！
