SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

開発用エディタのド定番「VSCode」を使いこなそう

VSCodeをドキュメント作成に活用――テキストエディタ、Markdownエディタの設定と拡張機能を解説

開発用エディタのド定番「VSCode」を使いこなそう 第10回

  • X ポスト
  • このエントリーをはてなブックマークに追加

Markdownエディタとして活用

 Markdownは、軽量なマークアップ言語の一つです。Markdown形式のファイルは、Qiitaにおける記事作成や、GitHubのREADMEの記述にも用いられており、簡単に書けて表現力もあるフォーマットとして広く使われています。VSCodeでも、拡張子が.mdであるファイルをMarkdown形式として扱い、シンタックスハイライトなどの基本的な機能を提供しています。

プレビューを表示する

 Markdownに慣れないうちは、独特のマークアップ(記号)と見た目の対応がなかなかイメージできないので、プレビューを見ながら書けたら便利でしょう。VSCodeでは、Markdownファイルの編集中に、プレビューを表示させることができます。同一のエディタグループとするか、あるいは新たなエディターグループとして横に表示するか、2通りの操作があります(図8)。

同一エディターグループ内にタブを開いて表示

  • Markdownファイルのタブで右クリックして[プレビューを開く]を選択
  • タブバー右のプレビューアイコンを[Option]/[Alt]キーを押しながらクリック
  • [Command]+[Shift]+[V]/[Ctrl]+[Shift]+[V]

新たにエディターグループを開いて横にプレビューを表示

  • タブバー右のプレビューアイコンをそのままクリック
  • [Command」+[K][V]/[Ctrl]+[K][V]
図8:Markdownプレビュー(横に表示)
図8:Markdownプレビュー(横に表示)

 プレビュー側には、現在のカーソル位置に応じて、左端に縦線が表示されます。プレビューからは、タブバー右に現れる[ソースの表示]アイコンのクリックで、元のMarkdownファイルに切り替えることもできます。

 プレビューを閉じるにはタブの[×]をクリックします。エディターグループとして表示されている場合には、右端の[…]をクリックして[すべて閉じる]を選択しても閉じることができます。

さまざまな便利機能を備える「Markdown All in One」

 Yu Zhangによる拡張機能「Markdown All in One」を使うと、基本となる補完機能の他にキーボードショートカットが拡張され、目次の作成機能やナンバリング機能、HTMLへのエクスポート、数式編集機能など「All in One」の名にふさわしい多くの便利機能を利用できるようになります。

 その一つ、目次作成機能を見てみます。目次を挿入したい箇所にカーソルを移動し、コマンドパレットから「Markdown All in One: Create Table of Contents」を実行します。すると、目次が作成されて挿入されます(図9)。

図9:Markdown All in Oneによる目次挿入
図9:Markdown All in Oneによる目次挿入

 見出しを修正した場合でも、保存時に自動的に反映されるので便利です。

 もう一つ、ナンバリング機能も見てみます。ナンバリング機能を使うと、見出しに連番を自動的に振ることができます。コマンドパレットから、「Markdown All in One: Add/Update section numbers」を実行します。すると、見出しに「x.y.z」形式で自動的にレベルに応じた連番が振られます(図10)。

図10:Markdown All in Oneによるナンバリング
図10:Markdown All in Oneによるナンバリング

 見出しを追加してナンバリングをし直すときにも同様の操作です。ナンバリングを解除するには、コマンドパレットから「Markdown All in One: Remove section numbers」を実行します。

テーブルの編集を楽にする「Markdown Table」

 Markdown形式によるテーブルの作成は、罫線文字が必要になったり作成や修正は意外と面倒なものです。また、入力中の見た目と実際の表のイメージを一致させようとすると、空白をたくさん入れて位置合わせることになりがちです。

 Takumi Ishiiによる拡張機能「Markdown Table」を使うと、テーブルのオートフォーマットやCSV(Comma Separated Value)/TSV(Tab Separated Value)のフォーマット、セル間のカーソル移動などの機能が使えるようになり、見た目の調整や罫線文字の自動挿入など、テーブルの作成をアシストしてくれます。セル間のカーソル移動は、[Tab]キー、[Shift]+[Tab]キーで、移動に伴うオートフォーマットも実行してくれます。

 オートフォーマット機能の利用方法を説明します。テーブルを作成するとき、まずはヘッダ行とアラインメント行の一部を入力しておきます(図11①)。ここで[Tab]キーを押すと、アラインメント行が自動的に補完されて、データ行が1行追加されます。

 必要であれば、この時点でアラインメント行に「:」を追加して桁揃え方法を指定しておきます(図11②)。データ行に入力していきましょう。[Tab]キーによってカーソルをセル間で移動すると、自動的にフォーマットし直されるのが分かります(図11③)。プレビューを表示させてみると、きちんとテーブルとして処理されているのが分かります(図11④)。

図11:Markdown Tableによるオートフォーマット
図11:Markdown Tableによるオートフォーマット

 TSVのフォーマットも試してみます。Excelで入力、あるいはテキストエディタでタブ区切りでテーブルの原型を作成します。これをコピー・アンド・ペーストでVSCodeのエディター画面に貼り付けます。テーブルの範囲を選択し(図12①)、右クリックで表示されるコンテキストメニューから[Markdown Table: Convert TSV to table]を選択します(図12②)。コマンドパレットからも呼び出せます。

 プレビューを表示させてみると、こちらもきちんとテーブルとして処理されているのが分かります(図12③)。

図12:Markdown TableによるTSVのテーブル化
図12:Markdown TableによるTSVのテーブル化

 オートフォーマットなしのセル間移動、全テーブルのフォーマット、カラムの挿入、揃え方向の指定、カラムの移動などの機能も備えているので、拡張機能の[詳細]を参照してください。

Markdown構文をチェックできる「markdownlint」

 Markdownに慣れないうちはプレビューで確認しながら入力してもよいですが、誤りを随時指摘してくれると効率がアップするでしょう。David Ansonによる拡張機能「markdownlint」を使うと、Markdown書式のルールに違反している箇所を黄色の波線で指摘してくれるようになります。また、一覧を「問題」パネルで確認できます(図13)。

図13:markdownlintによる問題の指摘
図13:markdownlintによる問題の指摘

 指摘を見ながら手作業で修正してもよいですが、クイックフィックスがある場合はそれを利用すると、修正をスピーディに実施できます。波線の位置にマウスカーソルをホバーさせると、指摘内容がポップアップします(図14)。[クイックフィックス...]をクリックすると処理方法がメニュー表示されるので(ショートカット[Command」+[.]/[Ctrl]+[.])、[Fix this violation of ...]をクリックすると、波線の位置の問題が修正されます。

図14:markdownlintによる問題点の修正
図14:markdownlintによる問題点の修正

MarkdownをPDF化する「Markdown PDF」

 Markdownを直接PDFに変換できれば、簡単なワードプロセッサのように活用できるでしょう。yzaneによる拡張機能「Markdown PDF」を使うと、編集中のMarkdownファイルから直接PDFやHTML、画像形式のファイルを作成できます。Markdown PDFでは、変換にChroniumを使います(拡張機能のインストール後に自動的にインストールされます)。

 PDFの作成は、開いたMarkdownファイルのエディター画面で右クリックします。コンテキストメニューが表示されるので、[Markdown PDF: Export (xxxxx)]のいずれかをクリックします。xxxxxの部分は出力する形式で、settings.jsonによる既定、pdf、html、png、jpeg、allから選択できます(図15)。

図15:Markdown PDFのメニュー
図15:Markdown PDFのメニュー

 図16は、PDFで出力してみた例です。

図16:Markdown PDFによるPDFファイル
図16:Markdown PDFによるPDFファイル

 PDFを見ると、上部にヘッダが書き出されています。ヘッダが出力されないようにするなど、Markdown PDFではいくつかの設定が可能です。[設定]-[拡張機能]-[Markdown PDF]から変更できます。以下は、主な設定項目です(カッコ内は既定値)。

  • markdown-pdf.outputDirectoryRelativePathFile:出力先の相対パス(なし)
  • markdown-pdf.convertOnSave:ファイル保存時に作成(しない)
  • markdown-pdf.displayHeaderFooter:ヘッダとフッタの表示(あり)
  • markdown-pdf.format:PDF出力時の用紙サイズ(A4)
  • markdown-pdf.type:既定の出力形式(PDF)

 この他にも、クリッピング、上下左右の空き、用紙の向き、ヘッダとフッタの書式なども指定できるので、設定項目を確認してみてください。

 この他、VSCodeのプレビュー機能では表示できないMarkdownの拡張構文などを取り扱えるようにするYiyi Wangによる「Markdown Preview Enhanced」などの拡張機能もあります。

今回登場のショートカットキー

機能 macOS Windows
設定 [Command]+[,] [Ctrl]+[,]
コマンドパレット [Command]+[Shift]+[P] [Ctrl]+[Shift]+[P]
禅モードの切り替え [Command]+[K][Z] [Ctrl]+[K][Z]
エディターグループ内にプレビューを表示 [Command]+[Shift]+[V] [Ctrl]+[Shift]+[V]
新しいエディターグループにプレビューを表示 [Command]+[K][V] [Ctrl]+[K][V]
クイックフィックス [Command]+[.] [Ctrl]+[.]

まとめ

 今回は、VSCodeを一般的なテキストエディタ、Markdownエディタ作成ツールとして使う方法を紹介しました。役立ちそうなものがあったら、ぜひ導入してVSCodeの活用領域を拡げてください。

 次回は、UML図やフローチャートなどのダイアグラムをVSCodeで作成する方法を紹介します。

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
開発用エディタのド定番「VSCode」を使いこなそう連載記事一覧

もっと読む

この記事の著者

WINGSプロジェクト 山内 直(WINGSプロジェクト ヤマウチ ナオ)

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS X: @WingsPro_info(公式)、@WingsPro_info/wings(メンバーリスト) Facebook <個人紹介>WINGSプロジェクト所属のテクニカルライター。出版社を経てフリーランスとして独立。ライター、エディター、デベロッパー、講師業に従事。屋号は「たまデジ。」。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/20391 2024/11/08 11:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング