小説Git 5: VS CodeのGit拡張機能

初めて使うGit、初めて使うコマンドラインインターフェイス(CLI)はどうでしたか?

緊張したかもしれませんし、もう懲り懲りだと思った方もいたかもしれませんが、ご安心ください。VS CodeのようなGit対応エディタを使うと、ターミナルを通さずにGitによるバージョン管理ができます。

まずはGit Graph(ギットグラフ)をインストールしてみましょう。❶アクティビティバー拡張機能をクリックし、❷検索フィールドに git graph と入力します。トップに出てくるGit Graphの❸インストールボタンをクリックするとインストールが終わります。

アクティビティバーでソース管理をクリックし、サイドパネル上部のツールバーを見ると、Git Graphのアイコンが増えています。前回作ったレポジトリを開いた状態でGit Graphのアイコンをクリックすると、エディターグループにGit Graphで管理されるレポジトリのコミット履歴が表示されます。

太字になっているのが、現在の状態です。小説Git 4を最後までやった方は、最後にcheckout(チェックアウト)した「プロローグ冒頭」のバージョンが太字になっているはずです。ではここで、最新のコミット「言い切りに変更」にチェックアウトして、ファイルの状態を最新版に変更してみましょう。

ターミナルは要りません。

「言い切りに変更」の行にあるを右クリックして、Checkout Branch を選んでください。

Git Graphの状態が変わります
ファイルも最新の状態に戻りました

実行すると、main言い切りに変更の両方が太字になります。ブランチについては、特別に章をあらためて解説します。

前回、git checkout 889989364af1369562f82a78d8f7662fa255bae3 で行ったチェックアウトはGit Graphを使うことで右クリックから実行できるようになりました。

それでは、もう少しだけGit GraphとVS Codeを見ていきましょう。

Git Graphで最新のコミット名をクリックしてください。操作方法は、アクティビティバーでソース管理をクリック❶し、Git Graphを表示❷させ、コミット名(ここでは「言い切りに変更」)を選択❸すると、コミット情報パネルが表示されます。

パネルの右ペインにはコミットのハッシュID(前回使った長い英数文字列です)、コミットしたユーザーの名前とメールアドレス、コミットの日時、コミットの名前が表示されます。

左ペインには、変更されたファイルが表示されます。前回はプロローグ.txtだけ編集しているので、一つしか表示されていません。

ここで プロローグ.txt ( +1 | -1) をクリックすると、このコミットと前回のコミットの違いを差分エディターで開いて見ることができます。

差分エディターで開いたところ
拡大表示

左が前回のコミットの時の状態で、右が新しくコミットしたファイルです。変更のあった行に色がついているのがすぐにわかりますが、その中でも変更した文字にはさらに濃い(明るい)ハイライトがついています。

VS CodeとGit Graphを使うことで、ほとんどターミナルに触ることなくGitを使うことができるようになります。

次回は実践的なファイルを使ってファイルを管理してみましょう。

コンテンツ一覧

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

小説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拡張機能