[初心者必見] Visual Studio Codeの使い方を徹底解説
ホームページ作成に欠かせないのが、HTMLを記述するためのテキストエディタです。
テキストエディタは世の中に無数に存在しています。今回はその中でもマイクロソフトが無償で提供しているVisual Studio Code（以下VSCode）というテキストエディタを紹介いたします。
VSCodeはダウンロード、インストール、使用に関して料金が発生することはありません。自由に使えるという意味でフリーソフトという種類に属しています（この「フリー」は「無料」ではなく「自由」という意味です）。
VSCodeの特徴としては、マイクロソフトが長期間開発してきた開発環境の良い所取りがされていることと、マイクロソフト社内でも使われていて、精力的にアップデートされていることです。特定の機能は最初から何も設定せずにそのまま使うことが出来ます。
VSCodeより先にリリースされたエディタ「Atom」と同じく、利用者はかなり多いので、情報もそれだけたくさんあります。
VSCodeとは
VSCodeとは、ホームページ制作に特化しているテキストエディタです。
もちろんテキストエディタですので、ブログ用の記事の下書きで使ったり、プラグインで機能を拡張し、図形描写をさせることなんかも出来ます。
テキストエディタとワープロの違いをよく質問されます。どちらも文字を記述するためのソフトですが、根本的に用途が全く違います。
ワープロは装飾しながら文章をレイアウト配置していくソフトです。つまり、新聞の様な見た目を作ることが出来ます。
テキストエディタは文字だけを記述します。装飾やレイアウトなどは一切関係ありません。新聞に対する原稿用紙という感じでしょうか。
つまりプログラムやHTMLなどの言語を記述するためには、レイアウト情報や装飾情報などが含まれない、文字だけのテキストエディタが都合の良いソフトということになります。ワープロでHTMLを記述しても、HTMLとして表示されませんのでご注意を。
テキストエディタはお箸やボールペンなど、直接手で触るものに感覚的に近く、人によって手に馴染むものとなじまないものがあります。VSCodeは比較的多くの人に受け入れられていますので、まずは早速使ってみましょう。
VSCodeのインストール
お使いのMacにVSCodeをインストールするには、こちらからVSCodeをダウンロードします。
VSCodeの公式サイトが表示されたら、「Mac」をクリックしてファイルをダウンロードします。
ダウンロードされたファイルは特に指定しなければ、Macのダウンロードフォルダに入ります。デスクトップを一度クリックし、[Command] + [Shift] + [H]キーを押してファインダーを表示し、左側列に表示された「Downloads」をクリックして選択すると、ダウンロードフォルダの中身を確認出来ます。
「VSCode-darwin-stable.zip」というファイルがダウンロードされます（このファイル名は将来は別の名前に代わっているかも知れません）。最後の「.zip」という部分は拡張子と呼ばれ、ファイルがどんな種類なのかを表しています。「zip」は圧縮ファイルという形式ですので、一度解凍しなければなりません（最近は「解凍」より「展開」という表現もよく使われます）。
ダウンロードしたファイルをダブルクリックして解凍しましょう。同じ場所に「Visual Studio Code.app」というファイルが出来ました（解凍前のzipファイルはそのまま残ります）。この「Visual Studio Code.app」がVSCode本体です。
「Downloads」フォルダに解凍されましたので、「アプリケーション」フォルダへ移動しましょう。移動する方法ですが、「Visual Studio Code.app」をマウスクリックしっぱなしで、そのまま左側列の「アプリケーション」の上に重ねて下さい。重なった状態で指を離すと移動されます（この作業の様に、掴んで離すことをドラッグ＆ドロップといいます）。
これでインストールは完了です。VSCodeを起動するには、アプリケーションフォルダから「Visual Studio Code.app」アイコンをダブルクリックしてください。
アプリケーションフォルダはデスクトップを一度クリックし、[Command] + [A]で簡単に開くことができます。画面下部にあるドックに登録しておくのも便利です。
初回起動時、以下の様なダイアログが表示されることがありますが、「開く」ボタンを押して起動してください。
起動直後はこの様な画面になります。
初回起動時、画面右下にマイクロソフトからの通知が表示されますが、マイクロソフトがデータを収集することに対して内容を知りたい方は「詳細を参照」ボタンで確認してみて下さい。興味が無い方は「☓」で閉じてしまって下さい。
テーマの変更
VSCodeでいうテーマというのは、見た目の色合いのことです。人によって見やすい背景色、文字色が違いますし、長時間使うソフトでもあるので、目に優しいものを選ぶと良いでしょう。
有志がつくったテーマをインストールすることもできますが、ここでは予め用意されているテーマを選択します。インストールされていないテーマはVSCode内から検索できますし、同じくVSCode内だけでインストールすることができます。こちらに関しては今回は割愛させていただきます。
まずは設定ファイルがどの様に変更されるのかを確認出来るように、VSCodeの設定画面を開きましょう。VSCodeの設定画面を開くには、[Command] + [,]ボタンを押します。左右に別れたセッティングタブが表示されますので、いったんこのままにしておきましょう。
この設定ファイルを直接編集して保存すれば、設定が反映されますが、いくつかの設定項目はメニューから選択することが可能です。
次に、メニューからテーマを変更してみましょう。[Command] + [K]ボタンを押したあと、[Command]は押しっぱなしでそのまま[T]を押します。画面にテーマの選択肢が出てくるので、お好みのものを選択します。選択すると直後に反映し、最初に開いた設定ファイルの内容も自動的に書き換わったのがわかると思います。
テーマは「ライト テーマ」と「ダーク テーマ」の２種類から選択することが出来ます。いくつかスクリーンショットを用意しましたので参考にしてみて下さい。
今回は「ダーク テーマ」の「Monokai Dimmed」を選択してみました。
プラグインのインストール
VSCodeには基本的な機能が予め用意されており、インストールした直後から便利な機能を使うことができます。
しかし、一部の機能は更に拡張されたものが存在し、必要に応じて個人がインストールして使えるようになっています。もちろんVSCodeに最初から存在しない機能を追加する事も可能です。
これらの機能を追加できる仕組みをプラグインと呼びます。どんなプラグインがあるのか、いくつか代表的なものを紹介致します。
- VSCode icons
- デフォルトで白黒のアイコンをカラフルにする
- ファイルの種類によってアイコンの形も変わる
- Markdown Preview Enhanced
- Markdown形式で記述されたテキストのプレビュー
- 数式や楽譜、グラフなどの図形描写などもできる
- VSCode本体の「Markdown Preview」は無効にすること
VSCodeには最初から入門に便利なプラグインがインストールされている状態ですので、だいたい上記の2つが入っていれば、作業をするのに差し支えないと思います。
他にもプラグインは何百個もありますので、気に入らなかったら別の物をインストールしてどんどん使い勝手を良くしていけば良いかと思います。プラグインは入れるのも外すのもVSCode上から簡単に行なえます。
さて、まずは今回は上記で説明した、「VSCode icons」と「Markdown Preview Enhanced」というプラグインを入れてみましょう。
VSCode左側の一番下にあるアイコンボタンをクリックすると、プラグインメニューが表示されます。検索窓に「vscode icons」と入力します。リストの一番上に「vscode-icons」というプラグインが表示されますのでクリックします。右側のタブに詳細が表示されますので、「インストール」をクリックします。インストールはこれで完了です。
プラグインによって有効化の方法は違いますが、この「vscode-icons」はインストール後「再読込」ボタンを押してVSCodeを再読込する必要があります。「インストール」ボタンが表示されていた場所が「再読込」と「アンインストール」ボタンに変わりますので、「再読込」ボタンを押します。
しばらくするとVSCodeが再読込され、更に画面にダイアログが表示されます。
「Activate」ボタンをクリックして有効化すれば、アイコンがカラフルに変わります。
次に「Markdown Preview enhanced」を検索してインストールします。
プラグインメニューの検索窓に「markdown preview enhanced」と入力します。同名のプラグインがいくつか表示されますが、作者が「Yiyi Wang」氏のものを選択します（彼はATOM版Markdown Preview Enhancedプラグインの作者でもあります）。
「VSCode icons」の時と同じ様に、「インストール」ボタンでインストールし、必要に応じて「再読込」して下さい。
これでプラグインのインストールは完了です。
プラグインを試してみる
早速HTMLファイルを作成してみましょう。HTMLファイルを作るとHTML5のアイコンに変わります。
まずはVSCodeにフォルダを登録するため、デスクトップにフォルダを釣ります。
フォルダ名は「project」にします。次にVSCodeの一番上にあるアイコンボタンをクリックし、エクスプローラを表示させます。「フォルダーの追加」ボタンで、デスクトップに作成した「project」フォルダを選択します。選択する際、projectフォルダの中にはいった状態で登録して下さい。
これでプロジェクト向けのフォルダの登録が完了しました。
次はこのフォルダにファイルを追加します。エクスプローラに表示された「project」をクリックすると、小さいアイコンがいくつか表示されます。一番左側がファイルの追加になりますのでクリックします。
ファイル名の入力になるので、「index.html」と入力してください。アイコンがHTML5のものに代わったはずです。これがVSCode iconプラグインです。
せっかくなので、index.htmlをEmmetを使って記述してみましょう。
何も記述されていないindex.htmlですが、まず画面に半角で「!」とだけ入力してください。日本語入力モードではなく英数モードです。
もし日本語になってしまったら一旦キャンセルし、[英数]キーで英数モードにしてください。
その後[Tab]キーを押してみてください。「!」が変換され、一気にHTMLのベースが自動で記入されました。薄いグレーで塗られている箇所は、続けて[Tab]を押すことで直接移動出来る単語です。[Tab]を4回ほど押し、「title」タグの中にカーソルを移動させ、「テスト」に書き換えてみて下さい。
Emmetの記法はこれだけではありません。以下のサイトを参考に、いろいろ試してみてください。計算させてクラス名の数字を増やしながら複製することなんかもできたりします。
次は2つ目のインストールした「Markdown Preview Enhanced」のテストをしてみましょう。
新規ファイルで「readme.md」というファイルを作成して下さい。アイコンが「M↓」という形状のものに変わるはずです。
内容は少し長いのですが、以下の通り記入してみて下さい。この記法こそマークダウン記法と呼ばれ、短時間でHTMLライクなメモが取れるモダンなメモ法です。
この状態で[Command] + [K]のあと[V]を押してみて下さい。入力した内容がコンバートされ、右側でプレビューされます。
マークダウン記法に関しては以下のページが詳しく載っています。完全に同一なものではありませんが、ほとんどの記法が使えます。参考にしてみて下さい。
キーバインドの設定
VSCodeに最初からインストールされている「Emmet」ですが、キーバインド（キーの組み合わせ）が[Tab]になっています。他のエディタでは[Control] + [E]となっていることもあり、人によってはこの[Tab]ではなく[Control] + [E]が良かったり、[Control] + [E]ではなく[Command] + [Shift] + [E]が良かったりしますので、このキーバインドを変更してみましょう。
まずは[Command] + [K]のあと[Command]を押したまま[S]を押すと、キーバインドの設定画面が表示されます。今回変更するのは「Emmet」の[Tab]ですので、画面上部にある検索窓にTabと入力します。
[Tab]キーを使うプラグインは「Emmet」だけでした。該当する行を選択すると、左側にペンシルアイコンが表示されますのでクリックします（右クリックして「キーバインドの変更」を選択してもOKです）。
キーバインドの設定ダイアログが表示されるので、[Command] + [Shift] + [E]を直接押して登録します。登録は[Enter]キーです（やり直すときは[Esc]キーを押して下さい）。
さて、実は[Command] + [Shift] + [E]はエクスプローラに割り当てられています。このままではエクスプローラ側が優先されてしまうので、今度は「cmd shift e」で検索し、重複してるエクスプローラ側のキーバインドを変更してしまいましょう。
筆者の場合はマウスでクリックしているのでこのショートカットはほとんど使っていません。多少使いにくい組み合わせでもOKだと思い、[cmd] + [opt] + [E]に変えました。
これで「Emmet」側で[Command] + [Shift] + [E]が使えるようになりました。試してみましょう。
先に作成してある「index.html」を開いて下さい。カーソルを「body」タグ内の任意の位置まで移動し、今度は「p.top」と入力してみてください。
そして[Tab]ではなく[Command] + [Shift] + [E]キーで変換すると、「<p class=”top”></p>」に変換され、更に内部のテキスト記述部分までカーソルが自動で移動してくれます。
キーバインドはいつでももとに戻せますので、色々組み合わせを変えてみて下さい。
最後に
VSCodeの入門はこれで終わりです。
以下のようなゴールを用意しましたので、中級に進む時の参考にしてみてください。
- 2画面、3画面にしてみる
- [Command] + [Shift] + [P]でコマンド画面を表示しプラグインの各動作を利用してみる
- 「editorconfig」プラグインを導入し、記述のフォーマットを統一させてみる
VSCodeはホームページ制作やブログの下書き、ちょっとしたメモや図形描写などに最適な素晴らしいフリーソフトです。ぜひ使ってみてください。
コンピュータ歴39年。8歳の頃ゲーム改造のためにプラミングを始めたのがきっかけ。好きな動物はネコ、フクロウ、ペンギン。映画、音楽、楽器、イラスト、ツーリング、旅行、外語、ゲーム、カラオケ、ボウリング、釣り、太極拳、ウォーキングなどに精を出したり出さなかったりする100%日替わりな純一自由人。 細かい事どころか大事な事まで気にしないという社会的に手に余るおっちゃん。 常にダイエット中。
関連記事
- 記事検索
