投稿者アーカイブ: taiyofujii

novel-writerで新聞寄稿

小説を含め、ほとんど全ての文章をVS Codeの小説執筆支援機能拡張 novel-writerで書くようになった。新聞の書評や、3月14日から始まった「どこから来たの？」も、VS Code + novel-writerで書いてGit + GitHubで管理している。

自分で作っておいてなんだが、novel-writerの縦書きプレビューはかなり出来がいい。段落ではなく行番号を表示し、ページ区切りも確認できるし、禁則処理も標準的な形で行われる。本紙の組版とほとんど同じ字切りを見ながら執筆できるので、文字が多過ぎたり少なすぎたりすることはなくなった。

最近はスクリーンショットのようにエディターの下に横中のプレビューを配置することにしている。1.7.1ではクリックした場所にカーソルを動かす機能も少し強化した。

新聞連載でPDFを出すタイミングも増えたので、PDFのフッターに「16文字25行」のように柱を追加することにした。本当はPDFにも罫線と行番号をつけるオプションが欲しいのだけど、そこまでは手が回らない。

本誌と同じ組版を確認しながら執筆することができるようになった

ストレスなく書けるようになったけど課題は多い。

縦書きプレビューの組版はかなり良くできているのだが、句読点をブロックの外に追い出す「ぶら下げ」はまだできない。Safariはぶら下げを行うcss「hanging-punctuation: allow-end」に対応しているけれど、VS CodeのWeb Viewではまだ動かない。利用できるようになったらぶら下げのオンオフスイッチも搭載する予定。最近はぶら下げをする媒体もそんなに多くないけどね。

「どこから来たの？」開始

2023年の3月14日から、西日本新聞でエッセイの短期連載を始めました。予定回数は50回なので、5月の中旬ごろまで続く予定です。

文字数は16文字50行で原稿用紙にすると二枚より少し多い程度。紙面ではイラストレーションを挟んで二段で組まれています。この短いエッセイで、故郷のことや育児、コンピューターなど、思いついたことを少しずつ紹介してこうと思っています。

川を流れていくような題字とあちらこちらと飛ぶ話題を的確に捉えてくださっている週替わりのイラストレーションはおおがまめおさん。

エッセイのタイトル「どこから来たの？」は、ポール・ゴーギャンの油絵「我々はどこから来たのか？　我々は何者か？　我々はどこへ行くのか？」からタイトルをいただいています。私にとってのＳＦはこれらの問いに向き合う行為なのですが、さすがに全文は長すぎるので冒頭の問いだけを抜き出しました。

普段はフィクションでこの問いに向き合おうとしているのですが、今回は「私」を題材にやってみようと思います。

連載は西日本新聞のウェブサイトの「どこから来たの？」コーナーにも掲載されています。

日本語のシンタックスハイライト

プログラム用のエディターは賑やかだ。変数や修飾子、プロパティ、関数、制御用の予約語などが異なる色でハイライトされている。下のスクリーンショットはnovel-writerの「〜た」「〜る」変換を行うコードの一部だが、この短い部分だけでも、色分けされていなければコードを読み解くのに苦労してしまう。

    // 対象の文だけ処理する
    if (processingSentence === targetSentence) {
      // 自立「〜る」の変換
      if (
        token.conjugated_form === "基本形" &&
        token.conjugated_type.match(/.+ガ行$/) &&
        nextToken.pos_detail_1 === "句点" &&
        nextToken.surface_form === "。"
      ) {
        const attributedVerbeForm = token.surface_form.replace(
          /(.+)[ぐ]/,
          "$1いだ"
        );

もちろん読める。だけど括弧やクォーテーションの閉じ忘れひとつとっても、色分けされているのに越したことはない。

というわけで、日本語でも品詞ごとにハイライトするといいんじゃないかと思った次第。VS Codeを使い始めて三日目で作ったのが、会話の部分を色分けする言語拡張だった。行頭が「、行末が」で終わる行を、プログラミング言語のコメントアウトに指定するだけの簡単な色分けだ。ついでに、青空文庫のルビにも色をつけることにした。

もちろん鉤括弧があるかどうかなんて読めばわかる。しかし色分けをしたことで視認性は上がった。エディターの右にあるミニマップ（テキストの縮小表示）では、会話が続くか続かないかを俯瞰することもできた。

書いている時に見やすくても、出版した後で読みにくければ意味がない。そこで縦書きプレビューを表示することにした。VS Codeを使い始めた時は、n-fukujuさんの作った縦書きプレビューを使っていた。これが想像していたよりもずっと良かったので、自分でも機能拡張を作ろうと決意したのだ。

Novel-writerで縦書きプレビューを表示しているところ

色分け機能だけだったnovel-writerは縦書きプレビューを内蔵してサーバー化し、原稿用紙のような見た目に変え、文字数カウントをつけ、バラバラに書いたテキストファイルをひとつに結合する機能をつけて、PDF出力もできるようにした。Textlintも導入して、正規表現を使う校正機能や、タイプミスで生まれる助詞の連続をエラー表示できるようにもなった。

仕事に使えるようになったVS Codeだが、どうしようもない弱点もあった。

テキストが単語分割されていないので、カーソルを単語ごとに移動できなかったのだ。「てにをは」や「、。」などを区切り文字にして凌いでいたがストレスから解放されるには、日本語を単語に分解する形態素解析をするしかない。形態素解析ができれば、日本語のハイライトをもう一段階進められるし、「です・ます」を「だ・である」に変換したり、「していた」を「している」に変換できることもわかっていた。ルビの読み仮名も自動で挿入できる。

というわけで、昨年の秋にようやくKuromoji.jsという形態素解析ライブラリを導入することに成功した。日本語をハイライトできるようになったのだ。

動き出した時にようやく気づいたのだけど、日本語の品詞がハイライトされているのを見るのは初めてだった。色分けはちょっとだけ難航した。

文法が緩い会話はグリーン系統で統一することにした。「あはははっ」のように、2文字目の「は」と3文字目の「は」が異なる品詞に分解されてしまう可能性がある。地の文の色分けは、品詞の種類が多いので少し悩んだ。名詞グループの中でも、普通名詞と代名詞、固有名詞は扱いを変えたいのだ。

特に代名詞は可読性を落とすので積極的に消していきたい品詞のひとつだ。逆に名詞の中でも接尾語として使われる単語は目立たせたくないし、普通名詞には主張してほしくない。動詞は重要なので目立ってほしい。副詞は本質的に不要だ。なければない方がいいので思い切り目立たせたい。助詞は、タイプミスが一番多く現れる部分なので見えてほしいが意味は欲しくない――そんな基準で色をつけてみた。

結果的にびっくりするような色合いになってしまったが、使うと違和感はすぐに消えると思う。単語は探しやすくなるし、入力ミスにも気付きやすくなる。読む速度も上がるはずだ。難点は、見た目がちょっと煩雑ということか。いずれ、カラーリングを簡単に指定できる画面も作ってみようとは思う。

ルビ追加機能の搭載

novel-writer 1.7.0で青空文庫記法ルビの追加機能を搭載しました。

novel-writer – Visual Studio Marketplace

テキストエディターでルビを追加したい場所を選択して ⌘+R（WindowsやLinuxではCtrl+R）すると、ルビを入力するためのダイアログボックスが現れます。

選択範囲がある場合には、その範囲全体に有効なルビを追加します。たとえば「国際宇宙ステーション」に「ＩＳＳ」というルビを付与したいときは以下のように選択しておきます。

今日の夕方、国際宇宙ステーションが東京の空を飛んだ。

ここで⌘+R（WindowsやLinuxではCtrl+R）を押してルビの追加を行うと、ルビを指定する入力ボックスが現れます。ここでＩＳＳと入力してEnterを押すと、ルビが挿入されます。

今日の夕方、｜国際宇宙ステーション《ＩＳＳ》が東京の空を飛んだ。

「｜（縦棒）」は青空文庫記法で漢字以外の文字グループにルビをつける時の開始記号です。novel-writerは選択範囲が漢字だけでない場合には開始記号を自動的に挿入します。

novel-writerは、選択範囲がない場合にルビ追加を行うと、直前の単語、またはカーソルの入っている単語にルビを追加します。

今日の夕方、国際宇宙ステーションが東|京の空を飛んだ。
今日の夕方、国際宇宙ステーションが東京|の空を飛んだ。

上のいずれかの状態でルビを追加すると、ルビ入力ボックスが現れます。

この時には、読み仮名も推測したものが入っていますのでこのままEnterを押すと、ルビが挿入されます。

今日の夕方、国際宇宙ステーションが東京《とうきょう》の空を飛んだ。

novel-writerはカーソルが入っている場所の単語と読みを判定するために、Kuromoji.jsによる形態素解析を行なっています。

ちょっとした機能ですが、とても快適になりました。

たんごカーソル

2021年の春から、マイクロソフト社のプログラム開発用エディター、Visual Studio Codeで執筆のほとんどを行うようになりました。

高速なユニコードエディターに複数ファイルを閲覧できるエクスプローラー、正規表現を用いた検索置換、このブログの「小説Git」でも紹介したGitとの連携機能、統合されたターミナルに魅力的なエクステンションの数々は、これで小説を書こうと思うのに充分な動機になりました。

しかし欠陥がないわけではありません。

行が折り返す部分での日本語入力の表示の崩れ方は見苦しいし、あらゆる設定がプログラミング用なので、標準の状態ではとても日本語の執筆に向いているとは言えません。何より致命的なことに、VS Codeは日本語の単語分割を理解してくれないのです。

Optionキーを押しながら右カーソルキーを押すと、VS Codeのカーソルは次の単語の先頭ではなく行末に移動してしまいます。

わ|たしは今日、旅に出ます。　　「わ」の後ろにカーソルがある時に
　　　　　　↓　　　　　　　　　　option + → キーで
わたしは今日、旅に出ます。|　　　行末に移動してしまう

本当は下のように動いて欲しいんですよね。選択なら右のような感じ。削除も単語単位でやりたいわけです。

わたし|は今日、旅に出ます。→　　　　わたしは今日、旅に出ます。⇧→
わたしは|今日、旅に出ます。→　　　　わたしは今日、旅に出ます。⇧→
わたしは今日|、旅に出ます。→　　　　わたしは今日、旅に出ます。⇧→
わたしは今日、|旅に出ます。→　　　　わたしは今日、旅に出ます。⇧→
わたしは今日、旅|に出ます。→　　　　わたしは今日、旅に出ます。⇧→
わたしは今日、旅に|出ます。→　　　　わたしは今日、旅に出ます。⇧→
わたしは今日、旅に出|ます。　　　　わたしは今日、旅に出ます。

ないのなら作ってしまえ、ということで作ってしまえるのがVS Code用のいいところです。

たんごカーソル

紹介ページの先頭にも書いてありますが、独力で書いた機能拡張ではありません。VS Codeとのインターフェイスは、Suguru Yamamoto氏のJapanese Word Handler（zlib License）のコードを丸ごと使っています。日本語の単語分割はTaku Kudo氏のTinySegmenter 0.1（修正BSDライセンス）を組み込むことで、実用的な速度で動作するようになりました。

たんごカーソルはWebブラウザ版のVS Code、codespacesでも動作しますので、github.devやvscode.devからオンライン編集を行う時にもお使いいただけます。

小説の執筆だけでなく、ドキュメント執筆にも有用な機能拡張になりました。どうぞご自由にお使いください。

PDF出力の方法

novel-writerを用いると、CSS組版ソフトウェアVivliostyleで縦書きのPDFを出力できます。

VivliostyleはVS Codeのターミナルで以下のコマンドを入力することでインストールできます。

npm install -g @vivliostyle/cli

エディターでテキストファイルを開いた状態でコマンドパレットからNovel: PDFプレビューを選ぶと、縦書きプレビューの書式でPDFを作成します。

VivliostyleはGoogleのWebブラウザーChromeの開発版である「Chromium」で縦書きレイアウトを作ります。初回起動のときは最新版のChromiumをダウンロードするために、少々時間がかかります。

しばらく待つとChromiumが起動し、A5用紙に縦書きレイアウトされた原稿が表示されます。

1行の文字数が少ない場合などには、段組で表示を行います

文字組みの様式は縦書きプレビューで設定する字数行数になりますが、日本語の表示機能がVS CodeのプレビューとVivliostyleでは異なるため、レイアウトは微妙に異なります。

VivliostyleのChromiumを開いたまま、原稿や行あたりの文字数やページあたりの行数を変更してPDF生成を行うと、レイアウトの変更はすぐに反映できます。

PDFを保存するときは、Novel:PDF出力を実行してください。プレビューしているものと同じPDFを保存します。

PDFの出力には少々時間がかかりますので、保存終了のダイアログが出るまでお待ちください。novel-writerで保存するPDFは右綴じになっていますので、Acrobatから見開き印刷することが可能です。

Mac OSの標準PreviewやiPad、iPhoneで見開き印刷を行うときは、印刷ダイアログのレイアウトを選び、ページ数を「2」に、レイアウト方向を右から左に設定することで、見開きの印刷が可能になります。

novel-writerのPDF出力は、著者自身の推敲や、テキストファイルで納品する原稿に添付する棒組み原稿を想定して開発しています。冊子を作る場合には、PDF出力時に保存するpublish.htmlに手を入れて、Vivliostyleで調整していくことをお勧めいたします。

小説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 4：Gitのインストール

お待たせしました。Gitのインストールを始めましょう。手順は以下の通りです。

  1. VS Codeでターミナルを立ち上げる
  2. Homebrewのインストール
  3. Gitのインストール
  4. 動作確認

HomebrewはMac OS用のオープンソースソフトウェアパッケージ管理ソフトウェアです。この説明で意味のわかる方は、1. Homebrewのインストールに進んでください。Windowsをお使いの方は、Google検索などで探してみてください。

小説Git 2：黒い画面でタタタターンでも書いたように、コンピューターの中には、アイコンがついていて独自のウインドウを持ち、マウスやタッチで操作できるグラフィカルユーザーインターフェイス（GUI）のアプリ以外にも、多くのソフトウェアが動いています。Gitも含め、それらの多くはプログラムのソースコードが公開されていて、誰でも組み立てて使うことのできるオープンソースソフトウェア（OSS）で、Homebrewは、そんなOSSをダウンロードしてインストールしたり、アップグレードしたりするソフトウェアです。

「なんだ、インストーラーみたいなものか」という印象を持たれたかもしれません。扱う上では「黒い画面で使うソフトをインストールするプログラム」程度に考えておけばいいでしょうが、起動したときに画面に流れる大量のログを見て驚かないように、少しだけ補足しておきます。

多くのOSSは、他の多数のOSSに依存しています。例えばプログラミング言語のPythonは以下のようなソフトウェアに依存しています。

python@3.9
├── gdbm
├── mpdecimal
├── openssl@1.1
│   └── ca-certificates
├── readline
├── sqlite
│   └── readline
└── xz

つまり、Pythonを動かすには、gdbm、mpdecimal、openssl@1.1とopenssl@1.1が依存しているca-certificates、readline、sqliteと、sqliteが依存しているreadline、xzの7つのOSSが必要になります。簡単に想像できると思いますが一つ一つをインストールしていくのでは大変ですし、何より間違いも起こります。

そこで、このような依存関係を管理するパッケージ管理ソフトウェアが必要です。ターミナルでbrew install python@3.9 と入力すると、Homebrewはレシピに従って依存する7つのソフトウェアを、必要なバージョンも確かめながらインストールします。

インストール中、ターミナルには自分が入力した覚えのないソフトウェアの名前がずらずらと並ぶことになりますが、怖がらずによく見てください。それはHomebrewが依存関係を解消するために必要なソフトウェアをかき集めているところなのです。

ちなみに、Gitの依存ツリーは以下の通り。

git
├── gettext
└── pcre2

多機能ぶりを考えると信じられないぐらいシンプルですが、それでもインストールすると、下記のログが画面を流れていきます。

==> Downloading https://ghcr.io/v2/homebrew/cor
Already downloaded: /Users/taiyo/Library/Caches/Homebrew/downloads/55b48329bd6c0c280bccbfcdd2e977bda9fba5fb7d7061e9323dae9142f3efb1--git-2.37.0.bottle_manifest.json
==> Downloading https://ghcr.io/v2/homebrew/cor
Already downloaded: /Users/taiyo/Library/Caches/Homebrew/downloads/f691c27a9f4a36e8760104c596627d982bffb4b52a2669cc5076462e12368191--git--2.37.0.monterey.bottle.tar.gz
==> Reinstalling git
==> Pouring git--2.37.0.monterey.bottle.tar.gz
==> Caveats
The Tcl/Tk GUIs (e.g. gitk, git-gui) are now in the git-gui formula.
Subversion interoperability (git-svn) is now in the git-svn formula.

zsh completions and functions have been installed to:
/usr/local/share/zsh/site-functions

Emacs Lisp files have been installed to:
/usr/local/share/emacs/site-lisp/git
==> Summary
🍺 /usr/local/Cellar/git/2.37.0: 1,552 files, 44.6MB
==> Running brew cleanup git…
Disable this behaviour by setting HOMEBREW_NO_INSTALL_CLEANUP.
Hide these hints with HOMEBREW_NO_ENV_HINTS (see man brew).

それでは、インストールです。小説Git 2で説明したVS Codeのインストールはお済みですか？

1. VS Codeでターミナルを立ち上げる

VS Codeを起動して、ウインドウのタイトルバーの右端に並んでいる❶パネル表示ボタン（下）をクリックしてパネルを表示させ、ウインドウの下部に現れるパネルの切り替えボタンからTERMINAL（ターミナル）をクリックすると、パネルの中には文字入力のコマンドで対話的にコンピューターを操作する環境「ターミナル」が現れます。

VS Codeのパネルにはさまざまな機能がありますが、小説Gitではターミナルしか使いません。

ターミナルに表示されている文字は、コマンドの入力を受け付けられる状態であることを示しています。この文字列のことをプロンプト、あるいはコマンドプロンプトと呼びます。

taiyofujii@iMac ~ %

ユーザー名：taiyofujii
コンピューター名：iMac
場所：~ （ホームの略称）
動作モード：% 一般ユーザー
■：カーソル

基本的なコマンドを入力してみましょう。小説を書いているときは使わなくても構いませんが、Gitのインストールやトラブルシューティングなどで、たまに必要になりますので、覚えておいてください。

最も基本的なコマンドの「cd（シーディー：change directoryの略称）」を使って、デスクトップに移動してみましょう。

yourname@yourMac ~ % cd Desktop↩️（リターンキー）
yourname@yourMac Desktop % ■

プロンプトの場所がDesktopに変わりました。日本語Mac OSのファインダーでは「デスクトップ」と表示されていますが、ターミナルでは「Desktop」と表記されます。

それでは、ホームに戻りましょう。

yourname@yourMac Desktop % cd
yourname@yourMac ~ % ■

cdの後に何も指定しなければホームディレクトリに戻ります。日本語Mac OSのファインダーではホームフォルダです。呼び方が異なりますが、ディレクトリとフォルダはほとんど同じものだと考えても構いません。ファイルを置いてある場所です。CLIではディレクトリと呼び、GUIでは書類バサミ（フォルダー）のメタファーを使ってフォルダーと呼びます。小説Gitでは両方の呼び方を、おそらく意識せずに使い分けていきます。

「ホーム」とホームディレクトリが同じ場所だということを確かめるために、「ls（エルエス：listの略）」コマンドを使って内容を一覧表示してみましょう。

yourname@yourMac ~ % ls↩️

Applications            Documents               Public                  
Downloads               Movies                  Music                   
Desktop                 Library                 Pictures

yourname@yourMac ~ % ■

英語で表記されていますがMacの「ホーム」に並んでいるフォルダーがあることがわかります。

ここで、小説Gitで時々使うMac用のコマンドをひとつ紹介します。「open」という、ターミナルから、Mac OSのファインダーを通して指定したファイルを開くコマンドです。コマンドラインであなたのMacを操作できることを体験してみてください。

yourname@yourMac ~ % open .↩️（ピリオド＋改行）

## ピリオドは「この場所」を意味します。
## プロンプトに示される「場所」がホームディレクトリなので、
## open . はホームディレクトリをファインダーで開け、という意味になります。

ファインダーでホームのウインドウが開きます。

それではHomebrewをインストールしましょう。

2. Homebrewのインストール

Homebrewの公式Webサイトに、インストールの方法が書いてありますので解説します。

下のコマンドをコピーして（先頭の/から最後の”まで）、ターミナルにペーストし、リターンキーを押してください。

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

不安でしょうから、コマンドの意味を解説します。説明が鬱陶しい方は、一画面分ぐらい飛ばしてください。

先頭の「/bin/bash」で、インストールのためのスクリプト（手続き書です）を実行するプログラム、bash（バッシュ）を指定しています。bashはシェルと呼ばれるプログラムの一つで、ファイル操作やプログラムの起動に用います。

/bin/bashの後ろについている「-c」はbashの動作モードを指定しています。-cは、この後ろにある文字列を評価する、という意味を持ちます。「評価」というと難しいですが、bashを立ち上げて、”（ダブルクオート）で挟まれる文字列を入力し、リターンキーを叩け、ということになります。

ダブルクオートで挟まれた文字列は、bashで実行するコマンドです。内容は、curl（カール）を起動し、githubsecontent.comからHomebrewのインストールスクリプトをダウンロードして、$（管理者モード）で実行せよ、という意味です。

さて、実行しましょう。

==> Checking for sudo access (which may request your password)…
Password:

すぐにこのようなプロンプトが表示されます。ここで、Macの管理者パスワードを入力してください。

==> This script will install:
/usr/local/bin/brew
/usr/local/share/doc/homebrew
/usr/local/share/man/man1/brew.1
/usr/local/share/zsh/site-functions/_brew
/usr/local/etc/bash_completion.d/brew
/usr/local/Homebrew

Press RETURN/ENTER to continue or any other key to abort:

インストールを実行するかどうかを確認するプロンプトが表示されます。リターンキー、あるいはエンターキーを押すとHomebrewのインストールが始まります。

ひょっとするとこの段階で、xcode command line toolsをインストールするか、Xcodeをインストールするか選ぶように求められるかもしれません。その場合にはxcode command line toolsを選んでください。これを機会にMacやiPhoneのアプリを作ってみたいと思う方はXCodeをインストールするといいでしょう。

==> Downloading and installing Homebrew...
remote: Enumerating objects: 498, done.
remote: Counting objects: 100% (498/498), done.
remote: Compressing objects: 100% (363/363), done.
remote: Total 476 (delta 152), reused 282 (delta 86), pack-reused 0
Receiving objects: 100% (476/476), 289.21 KiB | 50.00 KiB/s, done.
Resolving deltas: 100% (152/152), completed with 16 local objects.
From https://github.com/Homebrew/brew
   8dd96ae8b..3689ecd24  master     -> origin/master
Updating files: 100% (3162/3162), done.
HEAD is now at 3689ecd24 Merge pull request #13551 from Homebrew/dependabot/bundler/Library/Homebrew/activesupport-6.1.6.1
Updated 3 taps (homebrew/core, homebrew/cask and caskroom/cask).
==> Installation successful!

==> Homebrew has enabled anonymous aggregate formulae and cask analytics.
Read the analytics documentation (and how to opt-out) here:
  https://docs.brew.sh/Analytics
No analytics data has been sent yet (nor will any be during this install run).

==> Homebrew is run entirely by unpaid volunteers. Please consider donating:
  https://github.com/Homebrew/brew#donations

==> Next steps:
- Run brew help to get started
- Further documentation:
    https://docs.brew.sh

yourname@yourMac $ ■

インストールが終了すると、コマンドプロンプトが入力待ちに戻ります。では、インストールが終わったかどうかを確かめてみましょう。

brew -v と入力します。brewはHomebrewのコマンド名です（長いですからね）。-vはバージョン表示を行う動作オプションです。

yourname@yourMac ~ % brew -v↩️
Homebrew 3.5.4
Homebrew/homebrew-core (git revision 3112e690293; last commit 2022-07-12)
Homebrew/homebrew-cask (git revision 7ba04fd629; last commit 2022-07-13)

バージョン名が表示されたら、インストールができたことになります。それではGitのインストールに進みましょう。

3. Gitのインストール

Gitの配布サイトにある、Download for Macページに、インストールの方法が書いてあります。

Homebrewのインストールは終わっているので、Homebrewでインストールする方法でインストールします。コマンドをコピーして実行します。

yourname@yourMac % brew install git↩️

==> Downloading https://ghcr.io/v2/homebrew/core/git/manifests/2.37.0
Already downloaded: /Users/yourname/Library/Caches/Homebrew/downloads/55b48329bd6c0c280bccbfcdd2e977bda9fba5fb7d7061e9323dae9142f3efb1--git-2.37.0.bottle_manifest.json
...

  /usr/local/share/emacs/site-lisp/git
==> Summary
🍺  /usr/local/Cellar/git/2.37.0: 1,552 files, 44.6MB
==> Running `brew cleanup git`...
Disable this behaviour by setting HOMEBREW_NO_INSTALL_CLEANUP.
Hide these hints with HOMEBREW_NO_ENV_HINTS (see `man brew`).

yourname@yourMac % ■

バージョンを確認しましょう。

yourname@yourMac % git -v↩️
git version 2.37.0

おめでとうございます。Gitがインストールできました。

Gitの初期設定を行なって動作確認をしていきましょう。まずは名前だけで構いません。

git config --global user.name 任意の名前（英数がいいです）↩️

4. 動作確認

おつかれさまでした。それではデスクトップにフォルダーを一つ作って、Gitが動くかどうか確かめてみましょう。

サイドバーのエクスプローラーかソース管理をクリックして、サイドパネルのフォルダーを開くをクリックし、デスクトップに新しいフォルダーを作って、そのフォルダーを開いてください。流れを下にスクリーンショットで示します。

フォルダーを開くと、前回のインストラクションでも表示されたアラートが現れます。たった今作ったフォルダーですので安心して「はい、作成者を信頼します」ボタンをクリックしてください。

エクスプローラーでファイルをひとつ作り、何か書いて保存しましょう。

Gitの動作確認からは外れますが、ここでタイムラインをクリックすると保存したファイルの履歴が一覧できます。自動保存していると、ほぼ全ての編集履歴をこの「タイムライン」で追いかけることもできますので「あーっ！　さっき消しちゃった文章どこだー！」と探すような時は、エクスプローラーのタイムラインを探してみましょう。

本当にお待たせしました。それでは、新しく作ったフォルダーをGitで管理しはじめます。

アクティビティバーのソース管理をクリックし、サイドパネルのリポジトリを初期化するをクリックします。Gitは管理するファイル群のまとまりを「リポジトリ」と呼びます。

初期化を行うと、サイドパネルの内容が変わります。

それぞれの意味合いはこれから小説Gitで説明していきますので、まずは「バージョン管理」を試してみましょう。

ファイルの横にマウスポインターを移動させ「+」ボタンをクリックします。

ファイルが「変更」タブから「ステージされている変更」に移動します。この操作を「ステージング」と呼びます。ステージにされた変更に名前をつけてコミットします。ここでは「プロローグ冒頭」と名前をつけ、コミットをクリックします。

何が起こっているのかわからないので辛いと思いますが、ファイルを修正して、再度「ステージング→コミット」をしておきます。同じ名前でコミットしても構いませんが、別の名前に変えておきましょう。

ここでターミナルを開いて、git log↩️を実行してみましょう。

ターミナルには以下のようなテキストが出てきて、二つの状態があることがわかります。

yourname@yourMac 傑作 % git log
commit 53f582de2ff7472af9df2503deb8b45dc23d0c46 (HEAD, main)
Author: Taiyo Fujii <taiyo@taiyolab.com>
Date:   Wed Jul 13 10:27:59 2022 +0900

    言い切りに変更

commit 889989364af1369562f82a78d8f7662fa255bae3
Author: Taiyo Fujii <taiyo@taiyolab.com>
Date:   Wed Jul 13 10:18:08 2022 +0900

    プロローグ冒頭
yourname@yourMac 傑作 %

ここで、以下のコマンドを実行してみてください。色文字で示したcheckoutの後ろには、git logで出てきたハッシュを入れます。

git checkout 889989364af1369562f82a78d8f7662fa255bae3↩️

ファイルの状態が「プロローグ冒頭」に戻ります。Gitによるバージョン管理の第一歩です。次回からはVS Codeの機能拡張を用いたバージョン管理へと進んでいきます。

機能拡張のGit Graphでこのレポジトリを見ているところ

コンテンツ一覧

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