メインコンテンツまでスキップ

ログで見やすくなるソースコード

Gitに歩み寄るソースコードの運用をすれば、更に安全。更に効率的。

Gitありきの運用に変えていく​

後からGitを学習すると、つい「自分のソースコード管理にGitを取り込むにはどうしたらいいのだろう？」と、考えがちですが、それは逆です。

Gitでのバージョン管理がしづらくなってしまう「ソースコードの運用」「システムの構造」の方を変えていくべきです。

それくらい、「バージョン管理」は重要かつ汎用的なものであり、Gitがもたらしてくれる、開発の健全性と効率性は強力です。

今までの「ファイル管理」と違いすぎて…

最初は、Gitでコミットを行き来したり、スタッシュをしていると、ファイルの内容が自動で書き換わったり、削除されたりという動作に不安を感じるかもしれません。

ですが、Gitは実績のある、信頼できるソフトウェアなので、安心してください。

ファイルに分ける​

import などで分割ができるファイルは、分割しましょう。

scss ファイルや、js・ts ファイル、各種HTMLのテンプレートエンジン（EJSやPUG）が、ファイル分割が可能です。

後半でグループウェアとしてGitを学習していきますが、仲間同士での変更の「衝突」を避けやすくなります。

scssやその他のビルド環境がプロジェクトに導入されていない場合は、Gitのために導入を検討しましょう。

scss を使った分割の例​

index.scss


@use "header";
@use "topPageLead";
@use "footer";

header.scss

.ly_globalHeader {
  ...
}

.bl_globalHeaderLogo {
  ...
}


css や、php は？

この2つは、ファイルを分けると速度の低下が起こるので、説明には入れませんでしたが、許容出来る範囲であればOKです。

（といっても、css の @import は 同じ理由で公式に非推奨の機能になっています。scssをお勧めします。）

分け方のコツ

機能（ユースケース）で分けるようにします。コンポーネントやパーツも機能で分けていると言えると思います。

作成時間や担当者で分けてしまわないように気をつけましょう。

1ラインで書かないようにする。適度に改行する。​

Diffの最小単位は、「行」なので、長い行になるソースコードを書くことは避けましょう。

また、Gitクライアントによっては、長い行になるとDiffの算出時間が長くなるので、すぐに確認できる文字数に制限があります。

見通しが悪くなってしまします。

場合によっては、引数や属性も一つずつ改行しておくと良いと思います。

改行して書く例​

JavaScript


function hookAnchorLink (
  targetQuery, // こんな感じに改行
  prefix,
  baseUrl
) {
  // ...
}

HTML


<input
  id="selectInformationType"
  name="selectInformationType"
  type="radio"
  value="default"
  checked
  data-hook-event="radioChange"
>

コーディングルールを厳守する。Lintを導入する。​

たとえば、JavaScript であれば、「最後の;は、必ず付ける」だとか、「インデントはスペース2文字で表現する」だとかのルールです。

これがまちまちだったりしてしまうと、余計なDiffで画面が汚れてしまいます。

IDEの設定を統一したり、ビルドやプラグインでLintを導入することを検討しましょう。

Lintって何ですか？

「この書き方、放っておいても動くけど、バグの温床になるんじゃないか？コードが見にくくなるんじゃないか？」という場所を発見して、「警告」をしてくれるツールです。

警告に留まらず、修正をしてくれるものもあります。

出来るところから少しずつ​

色々上げましたが、すべてを叶える環境にいきなり移行するのは、大変だと思いますし、そもそも現場に揃っているスキル・リソース的に無理だ！ということもあると思います。

なので、出来るところから少しずつ変えていくということが大切です。

例えば、弊社では、WordPress で構築されたサイトをGitで管理する場合、主に theme フォルダに限定します。

WP-CLIなどで、ストラクチャーもGitで管理するというような方法もあるにはあるのですが、そうなると、それを採用するよりも、WordPress を使わないメリットの方が多くなるので、そのような折衷案で落ち着いています。

（WordPress の基礎構造がそもそも前時代的なので、仕方ありません）

Git管理下にコードを押し込める工夫を考える

WordPress を例に上げたので、そのままテクニックをご紹介しますと、「固定ページ」や投稿の一部分などで、HTMLを直接挿入するすることはよくあると思いますが、このソースコードもHTMLファイルにメモして、Gitで管理することを義務付けましょう。

同時期に触ったscssや、新たにアップロードした静的画像ファイルなども、Gitのログに残ります。