Visual Studio Codeで文章執筆 文系ライターが紹介する使い方とカスタマイズ解説

テキスト＝文字書くことを目的としたソフトウェアの事を『テキストエディタ』と呼びます。 Windowsの『メモ帳』やMacの『テキストエディット』もこのひとつですが、今回紹介する『Visual Studio Code（ビジュアル・スタジオ・コード）』もこのテキストエディタのひとつです。

本来プログラムを効率的に記述する事を想定して作られた無料で使えるソフトなのですが、その豊富なカスタマイズ機能で『ライター業務＝文章を書く』にも活躍するソフトです。 実際に、文系出身のライターである筆者が使っていて便利だと思った機能を中心に、インストールから、便利な使い方などをご紹介したいと思います。

Visual Studio Codeとは

文章を書くことをメインの仕事にされているみなさんは、日頃どんなエディタで文章を書かれているのでしょうか？ MS Wordが多いのでしょうか。最近ではGoogleドキュメントも人気ですね。

当記事で紹介するVisual Studio Code（略称 VS Code）はマイクロソフトが開発したデスクトップ用ソフトウェアで、厳密には『ソースコードエディタ』に分類される、プログラミング向けのエディタです。

対応OSは、Windows、MacOS、Debian、Red HatなどのLINUX系に対応していて、しかも無料で利用できます。

ソースコード＝HTMLやCSS、PHPなどのプログラムコードを記述する際に、タグとテキスト部分を自動的に色分けしてくれたり、段落ごとに自動的に行頭をずらしてくれるなどの機能が、ほぼすべてのメジャーなプログラミング言語に対応しています。 言語ごとの記述の特徴に対応していたり、予測入力もこなしてくれたりと、開発の省力化にも役立つと評判も高いようです。

そしてこのソフトは、理系エンジニアだけでなく、筆者のように文字・文章の執筆をメインの仕事にしている人にもおすすめできますよ！ という事を具体的な例を交えて解説していきます。

あ、その前にパソコンにインストールしておきましょう……。

インストールの手順

1. Visual Studio Codeの公式ページから
2. 『Download now』をクリックして
3. インストールするOS用をクリック
4. プログラムのダウンロードがはじまります
5. ダウンロードしたファイルを起動
6. インストーラーの内容にしたがっていけば完了

日本語化して使うには

続いて日本語化したいという方の為に日本語化の手順もご紹介しておきましょう。

1. 上部メニューの『View』>『Coomand Palette』 と選択
2. 入力欄に『Language』と入力すると表示される『Configure Display Language』を選択
3. さらに『Install Additional Languages…』を選択
4. 画面左側に言語パックが沢山表示されるので『Japanese Language Pack…』を選択
   ※左側、上部の入力欄に『Japan』と入力すればすぐに見つかります。
5. 『Install』をクリックしインストールが完了したら右下に出てくる『Restart』をクリック
6. ソフトウェアが再起動し、日本語で表示されます。

※筆者は英語のまま使用していますので、以下の画面解説は英語UIとなっています。ご了承ください。

文系ライターが使い倒すVisual Studio Codeの設定

筆者が、Visual Studio Codeで文章を書くようになってから、この機能のおかげで仕事が楽になったと感じているのが以下の5点です。

1. 読みやすいフォント
2. 目に優しい画面
3. 文字数確認機能
4. 自動保存機能
5. Markdownへの対応

上記の点に注目しながら、本ソフトの使い方や魅力をお伝えしていきます。

1.読みやすいフォントに設定できる

ライター業とは、目と指を特に使う仕事なので、『目』はいたわってあげたい点です。

少し話がそれますが、目を酷使してしまうと眼精疲労が原因で首や肩に不調が出たり、全身に影響が出ることもあります。これはVDT症候群と呼ばれ、現代人の体調不良の典型的な原因とされています。

• 参考：参天製薬 VDT症候群とは
• 参考：VDT症候群 | IT用語辞典 | 大塚商会

そして、そんな大事な目を労わるという意味で、文字が読みやすい……というのはとても大事なことだと思います。読みやすいフォント＝可読性の高いフォントで表示されている文章は、読みにくいフォントのそれよりも精神的なストレスが少なくなりますし、目の疲れ抑えてくれます。

そして読みやすいフォントは＝執筆しやすいフォントでもあります。つまり、自分にとって見やすいフォントを使ってテキストエディタで作業できれば、執筆の負担も減らすことができるだろう、と考えました。

そこで筆者は、下記のような設定でVisual Studio Codeを使っています。

• 文字の大きさ（12pt）
• 背景カラーテーマ（solarized light）
• フォント（半角：Raleway, 全角：Yu Gothic UI）
• カーソルスタイル（underline） 

この設定のもうひとつのポイントとしては、半角と全角で違うフォントを設定しているという点。それぞれ見た目が違うフォントを指定しておく事で、文章中で意図せず半角と全角が混ざってしまっても、すぐに気が付いて修正する事ができます。

フォント設定の手順

以下に、フォント設定の変更手順を解説します。

※補足：上記解説画像4枚目……『Font Family』欄はプルダウンでフォントを選択できるような設計にはなっていないので、直接OSにインストールされているフォント名を正しく入力する必要があります。 例えば、メイリオであれば、『Meiryo UI』MSゴシックであれば、『MS UI Gothic』と入力しなければいけません……。

少し手間ですが、私は（Windows10使用）[設定画面]→[個人用設定]→[フォント]と推移しフォント名を確認しながら入力しました。

※※半角文字と全角文字で利用フォントを変えたい場合には、2つのフォント名を設定します。その際、半角フォントをひとつ目に設定し、全角フォントをふたつ目に入力します。

また、カーソルの設定が変更できるのもうれしいところ。 一般的なテキストエディタでは、文字の横で縦線が点滅していたりするのですが、これを『Underline』に設定すると、文字の直下が横線で点滅します。

ひと昔前のワープロのようなレトロな雰囲気で個人的に気に入っています。

2.目に優しい画面に変更できる

昨今ダークモードが流行し、スマホやPCのテーマを暗い色で揃える方が増えてきました。 文章を書く際にも、黒背景に白文字で書かれている方もいらっしゃるのではないでしょうか。

筆者の場合は、以前は白背景に黒文字で、何の違和感もなく執筆していたのですが、ダークモードが登場し試しにつかってみた所、背景と文字の色の変化でかなり目への負担が違うという事実に気がつきました。

そして Visual Studio Codeでは、画面の設定を細かく設定する事もできますし、いくつかのプリセットテーマから画面の色をいっぺんに変更する事もできます。

筆者が使っているカラーテーマSolarized lightは、アイボリーの背景に濃い灰色文字の組み合わせなのですが、個人的にはこれが特に目に優しい配色と感じたので使っています。

3.文字数を計算してくれる拡張機能『CharacterCount』

Visual Studio Codeには『拡張機能』という、追加機能が提供されています。 操作画面左側から、拡張機能の検索ができるので、これらの中から気に入った機能を後から追加できるのです。

米マイクロソフトが開発していることもあり、またオープンソースとして内部を公開しているため、個性的で使い勝手のいい拡張機能が数多く存在し、またその数は日々増え続けています。

そして筆者は文字数を計測してくれる『CharacterCount』という拡張機能を利用しています。

• Visual Studio Code 拡張機能 『CharacterCount』

日本の開発者の方が作成した拡張機能で、プレーンテキストとMarkdown形式のテキストをリアルタイムカウントして表示してくれます。 全角文字でも半角文字対応で、選択した箇所のみのカウント……なんて事もできてとても便利です。

『適切な表現をクライアントの望む文字数で完結させる』ために、リアルタイムの字数を常時表示してくれるこの機能はとても重宝します。

4.自動保存機能してくれる拡張機能『Auto-Save on Window Change』

作業途中のデータが突然なくなってしまう……この現象は何もテキストに限ったことではありません。

PowerPointでのプレゼン資料作成時、画像編集時、動画編集時……などなど。 せっかく長時間作業したものが、突然のトラブルで保存もきかず、何も残らずほぼイチからやり直す……という経験は誰しもお持ちではないでしょうか。

最新の画像編集、動画編集ソフトなどにはほぼ備わっている『自動保存』機能ですが、Visual Studio Codeでも実現する事ができます。

• Visual Studio Code 拡張機能 『Auto-Save on Window Change』

この拡張機能を導入すると、Alt+Tab（Windowsの場合）の組み合わせで使用アプリを切り替えるタイミングで、執筆文章を自動保存してくれます。 マウスで他のウィンドウのクリックした時も同様に上書き保存させる事ができます。

筆者の場合、執筆時にWebブラウザで調べものをしながらや、画像の編集をしながらといった事が多いので、この拡張機能のおかげで意識せずに上書き保存をかけることができます。

……ウィンドウを切り替えない限り保存してくれないので、厳密に言うと自動保存ではないのですが、マシンに負担をかけないという面でも気に入っています。

5.Markdownにも対応

Markdown記法とは、ライトなデジタル文章の書き方で、Visual Studio Codeはこれにデフォルト（基本機能）で対応しています。

簡単に言うと、”＃”や”＊”、”（）”などの装飾文字を使って文章を書いていくことができる方法です。もともとHTMLの記述を簡略化する目的で発生したもので……

• #文字列 と記入すると h1の見出しとして、##文字列 と記入すると、ｈ2の見出しと認識します。
  ＃の数を増やせば、更に下のランクの見出しとして認識します。
  • ###文字列 = h3
  • ####文字列 = h4
  • ……
• 太字にしたい場合は**で文字をはさみます。
  • 例：**太字にしたい文字**
• 引用文は、文頭に>を記述する
• などなど……

簡略化の文字は半角で記載しなければいけないので日本語でライティングをしている時には頻繁にキーボードで全角と半角を切り替える必要があるのですが、さらにIMEの辞書ツールを活用してひらがな入力からの変換を保存することでさらに効率化させています。

Markdown応用編

Visual Studio Codeでは、ウィンドウを2つに分割するスプリットビューに対応しています。 これを利用すればMarkdownの執筆画面と閲覧画面を一度に見ることもできるので、執筆はMarkdownで行い、閲覧画面で見出しが大きく、太字はきちんと太字で表示されているのを確認する……なんて事ができるのです。

テキストエディタで書いたままだと、自分のクセや視点から離れることができないので、第3者視点で冷静に見ることができない事があります。 そこで筆者は何らかの形で違うスタイルでの表示してみる……という事を実践していたのですが、Visual Studio Codeのこの機能で、他のアプリで開く……というひと手間が減って助かっています。

これは、執筆後に校正する際に特に便利な機能で、記述ミスを発見しやすくなります。

その他にもある、便利な拡張機能

以上、私が主に仕様している設定や拡張機能を紹介しましたが、他にも沢山の拡張機能があります。そこでいくつか便利な拡張機能をご紹介しますので参考にしていただければ。

vscode-pdf

文字通り、Visual Studio Code上でPDFを開くことができる拡張機能です。編集や細かな設定はできませんが、閲覧する分には問題なくきちんと表示してくれます。

• Visual Studio Code 『vscode-pdf』

テキスト校正くん

執筆中にリアルタイムで校正をかけてくれる拡張機能です。

ただ、これは少し使う人を選ぶかもしれません。筆者の場合は書くそばから文章に赤い波線が追加表示されてしまい、気が散って執筆に集中できなくなってしまいました。以来Offにしています。ただ、自分好みのカスタマイズに幅広く対応しているので、うまく設定すれば使い勝手はいいかもしれません。

• Visual Studio Code 『テキスト校正くん』

Luna Paint

興味本位で導入したのですが、テキストエディタであるはずのVS Code上でJPGやPNGなどの画像加工ができてしまいます。 ただ、専用ソフトを持っている場合はおそらくそちらの方がずっと使いやすいのであくまで、画像加工の環境が無い場合に……といった所でしょうか。

• Visual Studio Code 『Luna Paint – Image Editor』

まとめ 文系のライターにもVisual Studio Codeはおすすめ！

当記事では、ライターの視点からコード・テキストエディタ『Visual Studio Code』についてご紹介しました。

文章を書くには環境が重要です。それは執筆場所であったり椅子であったりするでしょう。キーボードにこだわる方も多くいらっしゃいます。指を始めとした身体に環境を合わせることはとても重要と言えるのですが、それと同じくらいスクリーンの中も重要だと私は思います。

指と同様、目も疲労が溜まってきてしまえば、執筆に影響が出ます。 そして煩わしい作業が多くあることも、執筆がなかなかうまく進まない原因の1つでしょう。 執筆に少しでも壁やハードルを感じてきた際には、環境を変えてみることで先が見えてくることもあります。

そんな環境の改善手段のひとつとして、執筆向けのソフトウェアにも気を配ってみてはいかがでしょうか？

世の中には多数のテキストエディタ公開されていて、今回ご紹介したVisual Studio Code以外にも評価の高いエディタはたくさん存在します。

改めて自分の執筆スタイルを振り返ってみて、どういった点を変えていくと仕事が捗るか思考をまとめてみた上で、それにあったカスタマイズが可能なテキストエディタを探してみることで、執筆作業の効率が向上するかもしれませんよ。