Gitでソース管理: 「はじめてのAngular4」サポートページ

このページは「はじめてのAngular4」（工学社より2017年5月20日発刊、ISBN978-4-7775-2013-8））のサポートページのうち、「Angularのソース管理にGitを利用する」という追加の話題です。

Gitを無効にする

「Angularプロジェクト」は「Git」で管理されているフォルダをダウンロードして使っています。一方、「VSCode」ではGitでフォルダを管理する機能があります。
その結果、本書のプロジェクト「senkyo_app」をVSCodeで開くと、その中でファイルの内容を変更したとき、「Git」のソース管理機能が働いて通知が出ます。
このソース管理機能をうまく使うと、サンプルコードを描き進めながらバックアップしたり変更を取り消したり、任意の編集段階に戻したりということが自由にできますが、設定に手間がかかるので本書の内容からはズレます。

そこで本書では、設定ファイルを編集して「gitを無効に」しておきました。

図1 「Git」のソース管理機能による変更通知アイコン
図2 設定ファイルを編集
図3 「git.enabled」を「false」に
しかし、このページではGitを無効にしないで、積極的に使う方法を解説します。

(1)Gitファイルを作り直す：

今のプロジェクトでGitを積極的に使おうという場合一つ問題があります。今機能しているGitの設定では「Angular」のライブラリ自体を書き直すための設定になっています。わたしたちに必要なのは「src/app」フォルダのファイルで自分たちが編集したファイルの管理です。
そこで、Gitの設定ファイルを作り直しましょう。

Gitの設定ファイルは、フォルダ「senkyo_app」の「隠しフォルダ」である「.git」というフォルダに入っています。これをフォルダごと消してしまいます。

図4 ファイルウィンドウのメニューから「隠しファイルを表示」
図5 「senkyo_app」のフォルダの中にあった
　自動で作られていた「.git」フォルダを消してから、VSCodeで「senkyo_app」を開くと、図6のように「ソース管理」のウィンドウには何も表示されなくなります。
　そこで上部をみてください。図6のように小さなアイコンが現れます。これをクリックしてください。
図6 この小さなアイコンを
すると、今フォルダに存在する全てのファイルが「変更されたもの」として表示されます。まず最初にこれらを全て「コミット（レポジトリに転送。詳しくは後述）」しなければなりません。

図7 最初なので全てが「変更されたもの」

(2)Gitのユーザー情報を入力：

コミットなどファイルの入出力をともなう操作には、ユーザー名とメールアドレスの登録が必要です。ユーザー名は何でも構いませんが、普通は今のログインユーザーにします。メールアドレスは、今実践しているように自分のパソコンだけでGitを使っている場合でも必要です。重要な個人情報を送受信しないウェブメールのアドレスなどがいいでしょう。リスト1では、ユーザー名supportdocと、このウェブサイトの質問用公開メールアドレスを登録しています。（なお、リスト1及び下のリスト2での「$」は、Linuxの端末で一般ユーザーに表示される「プロンプト」を表します。

リスト1 ユーザー名とメールアドレスを登録
$ git config --global user.name supportdoc
$ git config --global user.email web@supportdoc.net

(3)初期状態をコミット：

さてコミットするには、まず「ステージング」します。「コミットするものとして選ぶ」という意味です。ステージングしたりしなかったりする操作についてはあとで実践しましょう。今は全部ステージングします。

それには図8のように,「changes」と表示されているあたりにマウスカーソルをおいてください。「全てステージング」を示す「+」と「全ての変更を破棄」を示す「反時計回り矢印」のアイコンが表示されますから、「+」のほうをクリックしてください。
図８ 「changes」のあたりにカーソルを置く
全てのファイルが「ステージング」されたら、メッセージを入力してコミットします。
ステージングしたものを全てコミットするには、常に上部に表示されている「チェックマーク」をクリックします。
図9 メッセージを入力してコミット
以後は自分で変更を行ったソースファイルのみが変更分として登録されますから、適切なメッセージを入力して順次コミットしてください。

TypeScriptでソースファイルを書くと、実行時にコンパイルされてJavaScriptファイルが生成しますが、ソース管理の画面にJavaScriptは登録されません。これはAngularプロジェクトの中に「.gitignore」という隠しファイルがあるからです。ここに「.js」ファイルは変更文として登録しないように書かれています。図5の中に図10のようなファイルがありますので知りたい方は確認してください。

図10 この隠しファイルがあるから「.js」ファイルは数えられない

(5)ログを表示する：

メッセージを入力するのはログ（記録）として表示するためです。
ログ画面を表示させるには、「ソース管理」の管理画面で右クリックのメニューを出して「Git出力」を選ぶのが近道です。しかし表示される内容はVSCodeの管理ログなので、我々が見たいものではありません。
図11 「Git出力」を出せば出るのだが・・・
エディタ下部に画面が出たら、下部画面の切り替えタブを「端末」にしてください。Linuxの端末画面が現れます。
図12 「端末」を表示させる
その端末上でリスト2のようにgit ユーザーのログを表示させるコマンドを打ってください。
リスト2 gitユーザーのログを表示させるコマンド
$ git log
図13のように、コミット時の説明とともに、ログが表示されます。
図13 コミットの記録が表示された

(6)変更を取り消す：

保存した内容を取り消すには、いろいろな段階での方法があります。今保存した内容を、前回保存した直後にまで戻すのはステージング前の段階で、ひとつずつ行うには各ファイル名のところで(図15）、一気に行うには「CHANGES」のところで（図16）カーソルを出現させます。

図14 各ファイルについてアイコンを出す
図15変更分全体についてアイコンを出す

ステージングしてしまったファイルであれば、一部または全部をステージング解除してから変更を破棄します。
図16　ステージングを破棄
コミットしてしまったファイルであれば、今回のコミットを破棄してステージングに戻します。そこから必要なファイルだけステージングを解除します。
図17 今のコミットをステージングに戻す

(7)いろいろな段階を保存する：

図14-図17の変更は「直列」的です。今の変更を破棄してから「やっぱり破棄しなければよかった」と思っても効きません。ある段階を保存しつつ、それを編集したソースファイルも作って行くのであれば、レポジトリの「ブランチ（分岐点）」を作ります。

VSCodeのウィンドウの左下側を見てください。「master」と書いてあります。これは、修正の中心となっていく内容を表します。「ブランチ」とは「枝」のことなので、「master」は（意味は違いますが）「幹」に相当します。

図18「master」と書いてある

(1)ブランチの作成：たとえば、第3章までの作業を行ったところで、これをバックアップするブランチ「chap3」を作りましょう。ブランチを作成するには、VSCodeで「コマンドパレット」と呼ばれるコマンドの一覧を表示させます。Linuxであれば「Shift+Ctrl+P」を押してください。
エディタ上部に小さなウィンドウが現れます。これが「コマンド・パレット」です。
最初に「>」という記号があるのに注意してください、それが「コマンド」のしるしです。もしパレット上に「>」がなければ自分で打ってしまっても同じことです。そこに「git branch」と入力します。「git b」あたりで、すでに「create branch（分岐を作成）」という表示がなされるでしょう。

図19「git b」で必要なコマンドが現れる
同じウィンドウに、「ブランチの名前」を入力する欄が現れるので「chap3」などと入力します。
図20 ブランチ名を入力

(2)ブランチにコミット：ブランチを作成すると、作業環境がその「ブランチ」になります。ウィンドウの左下側をみると、「master」が「chap3」になっています。

図21 ブランチ名 が表示される

これに何の意味があるかは、具体的な作業で知ることになります。そこで、今この状態から修正することなく、このまま「変更点」として「ソース管理」画面に上がっているものを全てコミットしてください。これが「第3章のバックアップ」に相当します。

(3)masterにチェックアウト：第4章以降の作業の続行は「master」に環境を戻して（チェックアウト）から行います。チェックアウトするためには、今ウィンドウの左下に表示されている図21のブランチ名の部分をクリックしてください。上部にまたパレットが現れ、今作成してあるブランチの一覧が表示されます。

図22 ブランチまたはmasterを選んでチェックアウト
ここでは「master」を選んでください。

図21のように見ていたウィンドウの左下が図18のように「master」に戻ったら、第4章の内容を実践します。第4章を全て実践したところでブランチ「chap4」を作成しコミットして第4章の内容をバックアップします。再び「master」に戻って第5章を続けます。

このようにすれば、ファイルブラウザ上で何度もフォルダを他の場所にコピーすることなくバックアップが取れます。「master」では常に最新の事項へと進みつつ、各段階を「ブランチ」として残しておくというのが自然な方針です。

しかしめんどくさいといえばめんどくさいですね。Gitを使う練習くらいに思ってやってみてください。

「Angular4サポートページ」のトップへ

このサイトのトップへ