【VS Code】第2回「VS Codeで、開発以外にできることを理解しよう」

はじめに

前回、VS Codeのインストールや操作イメージを把握していただきました。
すぐに、開発でお使いいただいても良いのですが、今回は開発以外の使い⽅を紹介します。まずは、VS Codeに慣れていきましょう。

１．VS CodeでMarkdownを使う　学習編

Markdownを紐解く

Markdownとは、⽂章を記述する軽量マークアップ⾔語のことです。
プレーンテキスト形式で⼿軽に書いた⽂章からHTMLやPDF形式に変換できます。
余談ですが、本記事もMarkdownを使って書いております。
QiitaやBacklogなどのサービスでもマークダウン記述を採⽤しています。

Markdownを使う意味

様々なサイトで言及されているように、第⼀のメリットは⽂章構造を明⽰できることです。
⽂章構造を明⽰することの良さは、「⽂章の構造が、⽂章を作成した⼈によってばらつくことがない」ことだと思います。
⾒出しが、1. 2. 3. や、1) 2) 3) や、① ② ③ と、異なっていたり、段落の作りが微妙に異なってると、読みづらさを感じる⽂章となります。
Markdownは、この問題を解消するとともに、簡単に覚えられるマークアップ⾔語です。

「マークダウン」なのに「マークアップ」⾔語︖

マークアップは、HTMLやXMLを⽰しており、タグを使って構造・装飾をする⾔語です。
一方、Markdownは、軽量マークアップ⾔語です。すなわち、マークアップ⾔語を簡略化し、記述できる内容も少なく、シンプルです。
つまり、ある程度覚えてしまえば、メモや設計書をサクサクと作成できる⾔語なのです。
VS Codeには、Markdownを使いやすくする拡張機能が⽤意されています。
まずは、Markdownでメモを作成するところからスタートして、VS Codeに慣れ、徐々に開発利⽤と進んでいただければと思います。
- なお、今回の記事では触れませんが、VS Codeをメモ帳のように使用して、.txtのファイルを作成、更新することも可能です。
- Markdownの前に、メモ帳として使ってみるのもおすすめです。

２．VS CodeでMarkdownを使う　実践編

Markdown拡張機能をインストールする

第1回⽬の記事を参照しながら、拡張機能のインストール作業を進めてください。
アクティビティー・バーにある、拡張機能のアイコン（ブロックが4つある）をクリックし、以下3つの拡張機能をインストールしてください。

拡張機能の名称	拡張機能の概要
Markdown All in one	Markdownに必要なもの⼀式（キーボードショートカット⾃動プレビューなど）が含まれています。
Markdown PDF	Markdownから、PDFを出⼒できます。
Marp for VS Code	Markdownからパワーポイントの出⼒ができます。

Markdown作成時の画像フォルダーの設定を行う

Markdownファイルごとにディレクトリを作って画像を保存するための設定をします。
- ファイル＞ユーザー設定＞設定を選択します。
- 検索バーに Markdown と⼊⼒します。
  - 項⽬︓*.md
  - 値︓${documentBasename}/images/
- 上記設定を⾏うことで、以下のように画像が保存されます。
```
 - mdが保存されているディレクトリ
 |- test.md
 |- test (ディレクトリ⾃動作成)
 |- image.png
 |- aaa.md
 |- aaa (ディレクトリ⾃動作成)
 |- image.png
```
Markdownファイルを作成する
- それでは、早速、Markdownのファイルを作成します。Markdownのファイルの拡張⼦は .md です。
- 初めてのMarkdown.mdというファイルを作成します。
- ファイルの右端にあるアイコンをクリックし、プレビュー画⾯を表⽰します。
  - このアイコンはMarkdownファイルを開いているときに表⽰されます。
- 基本的なマークダウンを⼊⼒してみます。
  - 以下のソースをコピーして、マークダウンファイルに貼り付けてください。
```
 # ⾒出しh1
 ---
 ## ⾒出しh2
 ---
 ### ⾒出しh3
 ---
 - リスト
    - i
      - World
        - Web
 1. 番号リスト
 2. おはよう
 3. こんにちは
 4. こんばんは
   1. Good evening
   2. Guten Abend
 ---
	
 > 引⽤
 ```
     コード挿⼊
     **free
    
     ctl-opt dftname(chain);
 ```
	
 - [第1回⽬の記事のリンク](https://iworldweb.info/column/serials/vs-code-
01/)

 - **太字はアスタリスク2つで囲む**
 - *斜体はアスタリスク1つで囲む*
 - ~~私は猫です~~打消し線
 
 - ⽔平線
 ---
	
 - 画像挿⼊は後ほど！
 -
```
- ⾃動プレビューの画⾯は以下の通りになっているはずです。HTMLのプログラミングをせずとも、綺麗に構造化された⽂章を出⼒できました。
- 続いて画像挿⼊をします。と⾔っても⾮常に簡単で、特定の画像をコピーし、Ctrl + vで貼り付けるだけです。
- 貼り付けをすると以下のように、画像がファイルが保存されます。パス指定をわざわざしなくてよいので、便利ですね︕
```
 - 画像挿⼊は後ほど！
 - ![alt text](初めてのMarkdown/images/image.png)
```
- プレビュー結果は以下の通りです。

３．VS CodeでMarkdownを使う応⽤編１

応⽤編１ではMarkdownファイルから別のファイルを出⼒してみます。

PDFファイルに出⼒する

Markdown PDFの拡張機能を使って、PDFファイルに出⼒します。簡単ですが、Markdownファイルを使っていない⽅に、ファイルを共有する際におすすめです。

コマンドパレットを開きます。
- F1キー、またはWindows／LinuxではCtrl ＋ Shift ＋ pキー、macOSではCtrlでなく、Command ＋ Shift ＋ p）を押下してください。

コマンドパレットにMarkdown PDFと⼊⼒し、以下をクリックしてください。

Markdownファイルが存在するフォルダ内に初めてのMarkdown.pdfが作成されました。

PowerPointファイルに出⼒する

Marpの設定プレビュー画⾯確認

続いて、Marp拡張機能を使って、MarkdownファイルをPowerPointファイルに出力します。
まずは、Markdownファイルの冒頭に、以下を追記します。

 ---
 marp: true
 ---

コマンドパレットを開き、プレビュー画⾯を再表⽰します。
- Markdown:プレビューを開くを押下してください。

PowerPointスライド⽤のプレビュー画⾯を確認できます。

CSSを読み込ませることでヘッダーやフッターのデザインもできますので、ぜひ、トライしてみてください。

PowerPointファイルに出⼒するには、以下のMarpのアイコンを押下します。

Export Slide Deckを選択し、押下します。

拡張⼦を.pptxにして任意のディレクトリに保管します。

Power Pointスライドへの出⼒ができました︕

６．ユーザー・スニペットを使う応⽤編２

応⽤編２では、よりMarkdownを気軽に使うための設定をご説明します。

ユーザー・スニペットとは

ユーザー・スニペットは、事前にコードをスニペットに登録することです。
ユーザー・スニペットを登録することによって、短いコードを⼊⼒するだけで、登録していたコードを簡単に呼び出せます。
プログラミングのコードで利⽤するイメージがありますが、MarkdownやVSCodeを使う際に、ユーザー・スニペットを利⽤すると時間が短縮できて便利です。
設計書や議事録のスニペットを⽤意しておき、サクっとテンプレートを利⽤できます。

スニペットの登録

今回は議事録⽤スニペットを作成します。
ファイル＞ユーザー設定＞スニペット構成と選択します。
上部検索バーに Markdown と⼊⼒し、Markdown⽤のスニペット・ファイル（markdown.json）を選択します。

markdown.jsonに以下を追記し、Ctrl + sで保存します。

 {
    "meeting": {
        "prefix": "meeting",
        "body": [
            "# 案件名-お客様名",
            "## xxxx会議録",
            "- 日時:2024/MM/DD",
            "- [ ] 社内MTG",
            "- [ ] 外部MTG",
            "- 場所:リモート",
            "- 出席者:xxx,xxx,xxx,xxx",
            "- 出席者（IBM）:xxx,xxx,xxx,xxx",
            "",
            "## 1.アジェンダ",
            "- アジェンダ１",
            "",
            "## 2.決定事項",
            "1. xxxとする",
            "",
            "## 3.Todo.",
            "1. xxxxxする(担当: xxx 期日： x/x)",
            "",
            "## 4.議論内容",
            "- 議事本編（XXさん）",
        ],
        "description": "meeting"
    }
 }