Visual Studio Code（VS Code）は、開発者向けのエディタではありますが、マークダウン形式のファイルなどの扱いもの得意なため、マークダウンエディタとしても利用できます。ここでは、VS Codeの基本機能を紹介しながら、マークダウンの扱いについて紹介しましょう。

VS Codeの画面構成を理解しよう

基本的な画面レイアウト

VS Codeの画面は、以下の主要エリアで構成されています

1. エディターグループ（中央）

• メインの編集エリア
• 複数のファイルをタブで管理できる

2. アクティビティバー（左端）

• 主要機能へのアクセス
• エクスプローラー、検索、ソース管理、実行、拡張機能など

3. プライマリーサイドバー（左側）

• アクティビティバーで選択した機能のパネル

4. セカンダリーサイドバー（右側）

• 現在はGitHub Copilotのチャット機能が主に表示
• 将来的には他のパネルが追加される可能性もあり

5. パネル（下部）

• 問題、出力、ターミナルなどの情報表示
• タブで機能を切り替え

カスタムレイアウトで生産性アップ

画面の使いやすさは個人の好みや作業環境によって異なります。VS Codeでは柔軟なレイアウトカスタマイズが可能です。右上の「レイアウトのカスタマイズ」ボタンをクリックしましょう。

プライマリーサイドバーを左右入れ替えたり、

画面下のパネルを画面幅いっぱいに調整したり、

「クイック入力」パネルを、画面の中央に表示することなどができます。

また、アクティビティバーを右クリックして「アクティビティバーの位置」メニューで、変更すると

アクティビティバーを上部などに移動することができます。

マークダウンを作ろう

それでは、マークダウンファイルを作成してみましょう。VS Codeでフォルダを開いたら、左側の「エクスプローラーパネル」で新規ファイルボタンをクリックして、新しいファイルを作成します。

ファイル名が入力できるので、「readme.md」と入力しましょう。「.md」というのがマークダウンを表すファイル拡張子です。

エディタでファイルが開くので、ここでは次のように入力します。

# じゃんけんゲーム

このプログラムは、JavaScriptで動作するじゃんけんゲームです。

途中、Copilotが自動的に次の候補を表示して、薄い文字で表示しますが、ここでは無視して構いません。

マークダウンをプレビューしよう

このように作成したマークダウンは、VS Codeの「プレビュー」機能で確認することができます。右上に「プレビューを横に表示」ボタンが表示されているので、これをクリックしましょう。

なお、正しく表示されていない場合はファイル名の特に拡張子（.md）が正しくつけられていない場合があります。確認しておきましょう。

クリックすると、画面が左右に分割されて右側にプレビューが表示されます。先頭の「じゃんけんゲーム」という文章が大きく、太い文字で表示されていることが分かります。

このまま、左側のエディタに次のように追加してみましょう。

## 機能について

右側のプレビューがすぐに更新されて、今度は少し小さい見出しになることが分かります。

続いて、「-」を入力してみましょう。プレビューには「・」と表示され、またCopilotの補完機能でなにか文相の候補が表示されるかも知れません。

ここでは、このままTabキーで候補を採用して、マークダウン文書を作成していきましょう。次のように箇条書きができあがります。

マークダウン記法はこのように記号を入力することで、見出しや箇条書きなど、さまざまな書式を表すことができる記法です。この後、各記号について紹介しましょう。

言語モードを正しく設定しよう

マークダウンファイルを編集する場合は、ファイルの拡張子を「.md」にする必要があると紹介しました。これは、VS Codeの「言語モード」というものを正しく設定するためです。今、右下に「Markdown」と表示されていますが、これが言語モードです。

例えばここで、「index.html」を編集し始めると、言語モードは今度は「HTML」に切り替わります。

このように、VS Codeは今編集しているファイルがどのような種類であるかを判断し、必要な機能を有効にしたり、コードのカラーリングルールを変更したりしています。

正しい言語モードに設定するには

VS Codeは標準では「プレーンテキスト」という言語モードに設定されます。

この部分はクリックができるようになっていて、言語モードを自由に切り替えることができます。

とはいえ、毎回切り替えるのは面倒なので、実際にはVS Codeが自動的に認識するようになっています。そこで活躍するのが、ファイル名の「ファイル拡張子」というわけです。VS Codeは戸の拡張子に従って、適した言語モードに切り替えます。そのため、VS Codeでは最初にファイル名や拡張子をつけて、ファイルを作成してから編集を始めた方が効率が良いという訳です。

アウトライン機能で高速移動しよう

マークダウンファイルが大規模になってきたら、ファイル内を移動するのも大変です。そこで、「アウトライン」パネルを使いましょう。

ここではまずは、マークダウンファイルをかさ増しするためにCopilotに次のように入力して、マークダウンを作ってもらいました。

readme.mdの続きを書いてください

マークダウンが作られたら、エクスプローラーパネルの下にある「アウトライン」パネルを開きましょう。

すると、マークダウン内の見出し（#や##から始まる行）が一覧されます。また、見出しのレベルごとにインデントや折りたたみ可能な状態になっていることも分かります。

各見出しをクリックすると、エディタ内でその位置まで瞬時に移動します。

その他のファイル形式の場合

アウトラインパネルは、マークダウン以外でも利用できます。例えばHTMLの場合は、「div」などのタグの一覧が表示されます。ID属性やclass属性なども確認ができます。

また、プログラム言語の場合は関数などの宣言部分が表示されます。

ミニマップを利用しよう

ファイル内の移動には、この他にも「ミニマップ」を利用する事もできます。エディタの右側に、小さなエリアがあります。（表示→外観→ミニマップメニューで切り替えできます）

ここでは、エディタの全貌を確認することができ、クリックするとその場所まで移動できます。

ミニマップを右クリックすると、いくつかのオプションが表示されます。

レンダリング文字

表示の方法を、文字を正確に表現したものとあいまいな表現に切り替えできます。

垂直方向のサイズ

ミニマップの大きさを変更できます。

スライダー

今いる位置を見にマップ上に表示するかを切り替えられます。

その他の移動方法

その他にも、ファイル内を移動する方法があるので紹介しましょう。

シンボル移動

「移動→エディター内のシンボルへ移動」メニューで、見出しやタグなどに移動できます。

行番号指定移動

「移動→行/列に移動」メニューで、行番号や文字数を指定して移動できます。

右端での折り返し

なお、1行が非常に長い場合は「表示→右端での折り返し」メニューをクリックすると、エディターの右端で長い行が折り返して表示されます。

この時、左端の行番号は空欄になり、1行であることが分かります。使いやすい方で使っていきましょう。

コマンドパレットを使いこなそう

ここまで、VS Codeの操作にマウスなどのポインティングデバイスを利用してきました。しかし、プログラムを開発中はキーボードを主に使うため、あまりマウスに手を伸ばしたくないでしょう。そこで、VS Codeには「コマンドパレット」という機能があります。

これを使えば、ほぼすべての操作がキーボードだけで操作できるようになる上、マウス操作ではできない作業などもできたりするので、ものすごく強力です。ここでは、コマンドパレットの使い方を紹介しましょう。

コマンドパレットを起動するには、「Shift+Cmd+P（Win:Shift+Ctrl+P）」キーを押します。画面上部にクイック入力が表示されます。

すべてのコマンドの一覧が表示されるので、キーボードの「上下」キーで選ぶことができますが、実際には一番上の検索窓で、探すと良いでしょう。例えば、「言語」などで検索すると、言語モードの切り替えなどのメニューが表示されます。

下に表示されている英文を使って、英語で検索することもできます。また、部分一致検索なので戦闘が一致しなくても、メニュー名の途中でもヒットします。思いついたキーワードでなんとなく検索すれば、希望の機能が探し出せるでしょう。

マルチカーソル機能で一気に編集しよう

VS Codeには「マルチカーソル」という、カーソルを複数設定できる機能が搭載されています。これを使えば、複数の場所を一気に編集できます。

例えば、次のように箇条書きにしたい内容が複数行に記載されている場合を考えてみましょう。

この時、箇条書きにするにはそれぞれの行の先頭に「- 」と入力する必要があります。こんな時に、マルチカーソルが便利です。「Cmd+Option+↓（Win:Ctrl+Alt+↓）」キーを押しましょう。カーソルが2行になります。

続けて入力すると、複数の行に設定できます。そしてこの状態で「- 」と入力すると、カーソルのある箇所にそれぞれ入力されます。

また、「Option+クリック（Win:Alt+クリック）」で任意の場所に設定することもできます。

なお、マルチカーソルのキーは「選択→マルチカーソルをCmd+Clickに切り替える」メニューでショートカットキーを変更することもできます。

同一テキストの一括選択

マルチカーソルの応用として、同じキーワードを簡単に選択することができます。例えばここでは、複数の箇所に現れる「、」を選択したいとします。

この場合、まずは最初の1つめを選択します。そしたら、「Cmd+D（Win:Ctrl+D）」を押しましょう。すると、次に現れる同じ文字が次々に選択されます。

後は、例えば「,」などに置き換えたい場合は、そのまま入力すれば変更ができます。

マークダウンの各機能を知ろう

先の通り、マークダウンでは各機能によって書式の意味が決まっていて、それらを記述することでプレビュー時に見た目が調整されます。各記号について紹介しましょう。

見出し

先頭に「#」を付加すると、見出しになります。「#」を連続して記述すると見出しのレベル（大きさ）がじょじょに小さくなり、「見出し6」まで標準で準備されています。

リスト、番号付きリスト

先頭に「-」または「*」を入れると、リストにできます。また、「1. 」などと入れると番号付きのリストになります。

なお、番号付きリストは最初の数字だけ正しければ、次の数字は連続していなくても、プレビュー時に自動的に連続した数字に変わります。

また、先頭に空白を4個挿入すると、「子リスト」を作る事もできます。

本文内の装飾

本文内で、「**内容**」と記述するとその部分が太字になります。

同じく、「*内容*」とすると斜体になります。

「~~内容~~」とすると、打ち消し線を入れることができます。

なお、本文は改行をしてもそのままでは反映されず、1行になってしまいます。

実際に改行したい場合は、行の最後に半角空白を2つ挿入します。

マークダウンの記号で使い方を知りたい場合や、記号を知りたい場合はCopilotに質問すると回答してくれます。

リンクを張ろう

マークダウンには、他のファイルやサイトにリンクを張ることができます。リンクを張るには、次のように記述します。

[リンクのラベル](リンク先)

例えば、次のように記述しましょう。

[ライセンスを読む](https://yahoo.co.jp/)

すると、Yahoo! Japanへのリンクが設置できます。

ドラッグでリンクを張ろう

この時、内部のファイルにリンクを張りたい場合は、VS Codeの機能を利用することができます。VS Codeのエクスプローラーパネルから、リンクを張りたいファイルをドラッグし、「Shift」キーを押しましょう。カーソルが図のように変わります。

この状態で、マウスボタンを放すと「ドロップオプション」というボタンが表示されます。

メニューが表示されるので「相対パスの挿入」をクリックしましょう。

画像を挿入しよう

マークダウンには、画像を挿入することもできます。書式は次のようになります。

![画像の説明](画像のパス)

VS Codeの場合は、先と同じ手順で挿入できます。画像ファイルを準備したら、エクスプローラーパネルからエディターにドラッグしましょう。「Shift」キーを押すと、図のようになるので挿入したい箇所で放します。

マークダウンの書式が挿入されるので、説明を置き換えましょう。