小説Git 3:VS Codeのインストールと最低限の設定

それではVisual Studio Code―VS Code(ブイエスコード)をインストールしましょう。VS CodeはMicrosoftのソフトウェア開発環境「Visual Studio(ビジュアルスタジオ)」のWebサイトからダウンロードできます。

VS Code公式Webサイト

ダウンロードしたVS Codeをアプリケーションフォルダーに移動します。小説GitではMac版で説明することが多くなりますが、WindowsやLinux(Chromebook)などをお使いの方は、適宜読み替えてください。

App Storeの審査を経ていないアプリケーションですので、初回起動時にはセキュリティ警告が表示されます。

システム環境設定セキュリティとプライバシーでVisual Studio Codeの起動が止められたことがわかります。ここで「このまま開く」をクリックし、確認画面でもう一度「開く」をクリックするとVS Codeを起動できます。

VS Codeの起動画面です。

VS Codeの初回起動画面:すぐに日本語化できます。
VS Codeの基本インターフェイス

起動していたらこのまま日本語化まで行いましょう。アクティビティバーの一番下にあるExtensionsをクリックし、検索フィールドにJapaneseと入力してください。Japanese Language Pack for Visual Studio Codeというエクステンションが表示されるので、これをインストールします。

VS Codeを再起動すると、日本語インターフェイスのVS Codeが起動します。

起動画面で促されているように、VS Codeは一つ一つのファイルを開くよりも、フォルダーを開いて作業することを前提に設計されていますので、下のようなフォルダーを開きます。

フォルダーを開くと、制作者を信用するかどうかを確かめるアラートが表示されます。プログラミングエディタならではですね。もちろん信頼してフォルダーを開きます。

アクティビティバーでエクスプローラーをクリックすると、開いたフォルダーの内容がサイドバーに表示されます。ここでファイルを選択すると、ファイルをエディターで編集できます。

画面に収まりきれない長さの行が画面外に延びていますので、日本語を書くために最低限の設定を行います。

アクティビティバーの一番下にある「管理」をクリックし❶、メニューから「設定」を選択する❷と、エディターに設定画面が表示されます。設定項目は無数にあるので、目的の設定を探すには検索する必要があります。検索フィールドに「折り返し」を入力すると❸、Editor: Word Wrapという項目が出てきます。初期設定ではoffになっているので、onに切り替えます❹。これで長い行を折り返すことができるようになりました。

設定画面の構成や設定の方法などが一般的なデスクトップアプリケーションと違うことに戸惑うかもしれませんが、ファイル保存などの基本的な操作は、他のデスクトップアプリケーションと大差ありません。

次はVS Codeの中にある「黒い画面」に向き合って、Gitのインストールに進むことにしましょう。ようやくGitと対面です。

コンテンツ一覧

  1. 小説Git 1:はじめに
  2. 小説Git 2:黒い画面でタタタターン
  3. 小説Git 3:VS Codeのインストールと最低限の設定
  4. 小説Git 4:Gitのインストール
  5. 小説Git 5: VS CodeのGit拡張機能

小説Git 2:黒い画面でタタタターン

緑色の文字だ流れる画面にタタタとコマンドを入力してリターンキーをターンと叩く映像はでハッカーを表現する映像作品はまだまだ後を絶ちません。現実のプログラマーやネットワークエンジニアが映画のように忙しなくコンピューターを操作することはほとんどないのですけどね……とはいえ、この表現のすべてがデタラメというわけではなく「黒い画面」がエンジニアの友であることは間違いのないところです。

小説Gitをご覧になっているコンピューターでは、私たちがマウスやタッチ操作で扱うアプリケーションよりもずっとたくさんのソフトウェアが動いています。

この記事を書いているときに起動していたプロセス数は596個

その多くは人の手の介在しないアプリケーション間通信か、「黒い画面」を通して操作するコマンドラインインターフェイス(CLI: Command Line Interface)でしか動かすことができません。

Linuxで生まれ、CLIを好むソフトウエアエンジニアたちがメンテナンスしているGitも例外ではありません。Gitの主要なインターフェイスは「黒い画面」でコマンドを入力するCLIです。

ファイルの、ある時点での状態を登録予約(ステージング)するには % git add というコマンドを用いますし、予約した状態を登録するには % git commit とタイプします。過去に登録した状態に復元するには % git checkout というコマンドを使います。複数の状態を合成するには % git merge、分岐を操作するには %git branch……

Gitのヘルプ。よく使うコマンドが表示されています。全てを覚える必要はありません。

嫌になりそうですね。わかります。

ですが、GitがCLIでしか操作できないのなら私が小説のためにGitを使うことはなかったし、小説Gitも始まらなかったことでしょう。幸いなことに、多くのアプリケーションがユーザーに代わってGitのコマンドを実行してくれます。

「裏庭の競技場」をVS Codeで編集している画面
登録予約した変更が「ステージされている変更」に、それ以外の変更点が「変更」に並んでいる
エディタ側では11、18、20行目が前回の登録(コミット)から変わっていることがわかる
変更点を登録(コミット)した状態。Git GraphというVS Code用の機能拡張は、変更や分岐、統合の履歴をグラフィカルに表示してくれる

小説Gitでは、Gitの操作のほとんどをVisual Studio Code(VS Code)と、VS Code用のプラグインで行う方法を解説します。私自身は「黒い画面でタタタターン」とやる方が簡単に思うことも多いのですが、できるだけVS Codeで操作する方法を優先して紹介していきます。プログラム開発などでGitに慣れている方から見ると、まだるっこしいところもあるかもしれません。

ただ、「黒い画面」を最小限にとどめようとまでは考えていません。コマンド入力をする方が間違いがない場合や、他に方法がない場合には、躊躇なくコマンドを入力する方法を紹介していきます。

Gitのクラウドサービス、GitHubの機能を用いて分岐を統合していくところ
VS Codeに搭載されているターミナルを使っている

前置きが長くなりました。それでは、次回から環境を作っていきましょう。

コンテンツ一覧

  1. 小説Git 1:はじめに
  2. 小説Git 2:黒い画面でタタタターン
  3. 小説Git 3:VS Codeのインストールと最低限の設定
  4. 小説Git 4:Gitのインストール
  5. 小説Git 5: VS CodeのGit拡張機能

小説Git 1:はじめに

このエントリーに続く一連の記事で、小説の執筆にGitを使う方法について、紹介します。

小説GitではGit対応エディタとしてMicrosoftのVisual Studio Code(VS Code)を用い、リモートレポジトリにはGitHubを使います。他のソフトウェアを使いたい方は、コマンド名などを読み替えてください。Gitのコマンドは可能な限り併記します。スクリーンショットはMac OS版を用いますが、WindowsでもLinuxでも同じように運用できるはずです。

小説をGitで管理し、差分表示に対応したエディタで編集すると、はじめてファイルを登録(コミットと呼びます)した瞬間から入稿に至るファイルの履歴を追いかけられるようになり、連載時に文字数や締め切りの関係で削除することになったエピソードにも簡単にアクセスできるようになります。

東京新聞掲載短編「裏庭の競技場」の執筆履歴
登録作業に名前をつけられるので、何を変更したのかすぐにわかります

また、日々の執筆でも、昨日、または先週からどのように原稿が変化したのかを確かめられるようにもなります。

東京新聞掲載短編:裏庭の競技場の再校と入稿の差分表示
変更のあった行と文字がハイライトされているのがわかる

数千人もの開発者が共同作業することを想定して作られたGitには、分岐したソースコードを評価しながら再統合する機能も搭載されています。今まで、プリントアウトにエンピツを入れていた編集者が分岐(ブランチと呼びます)した原稿に提案を書き込んで修正提案(プルリクエストと呼びます)を行えば、作者は一つ一つの提案を取り入れるか入れないか、すぐに決めることができます。エンピツの入った場所を探すために、マウスホイールを回して数十メートルにも及ぶWordファイルの中を彷徨う必要はなくなります。

技術文書では、すでにGitの管理機能を用いているものも少なくありませんしWebへの公開を前提としたインストラクションはたくさん書かれています。しかし、小説となると、実例を詳しく紹介した読み物はそれほど多くありません。

この記事が、執筆にGitを使おうと考えた方の背中を押せれば幸いです。

さて、どこから始めましょう……

コンテンツ一覧

  1. 小説Git 1:はじめに
  2. 小説Git 2:黒い画面でタタタターン
  3. 小説Git 3:VS Codeのインストールと最低限の設定
  4. 小説Git 4:Gitのインストール
  5. 小説Git 5: VS CodeのGit拡張機能