1
/
5

ちょっとした修正で差分だらけになるリポジトリを落ち着かせた話


こんにちはテクノロジーグループの岩橋です。最近は引越しをして新しい街で生活しています。リモートワークなので、平日の生活はさほど変化はありませんが、新しい部屋の構想を巡らせながら楽しい日々を過ごしています。飼い猫はまだ慣れないようでなんとなく落ち着きがありません(ごめん)。

今日のお話

今回はリポジトリを整理した話をしようと思います。

クラシコムの社内システムを管理するリポジトリなのですが、OSSのパッケージやminifyしたファイルなどを一纏めにしたファイルがGitHubのリポジトリで管理されてしまっており、一部のファイルの修正でもプルリクで大量の差分が表示されることにより、

  • 差分が多いのでレビューする側が消耗して、本来の修正を見逃す可能性がある
  • minify出力されたファイルの差分はチェックできないので、実はおかしな内容でも気づけない
  • 別々の箇所を変更しているのにコンフリクトが発生する

などなど困ったことになっていました。

                  ↑ 変更したかった内容はこれくらい

                  ↑ 差分として出る内容はたくさん

Bowerの廃止

Yarnによりパッケージ管理を行っているのですが、一部のパッケージはBowerというツールで管理されており、まるまるGitHubに保管するようになっていたため、これから消していきます。

ちなみにBowerについては、すでに公式サイトでも利用を奨励されていないようでした。

Bower
Web sites are made of lots of things - frameworks, libraries, assets, and utilities. Bower manages all these things for you. Keeping track of all these packages and making sure they are up to date (or set to the specific versions you need) is tricky. Bowe
https://bower.io/

また、Yarnへのmigrate方法も紹介されていたのでそれを参考に、bower.jsonを参照しながらpackage.jsonへ転記していきました

How to migrate away from Bower? · Bower blog
If you came here because of "Request to xxx failed with 410" error, it's enough to upgrade As you might have noticed, we started recommending Yarn as an alternative to Bower for new front-end projects.
https://bower.io/blog/2017/how-to-migrate-away-from-bower/

Yarn経由でパッケージをインストールできるようになったので、bower.jsonとパッケージを保管していたフォルダ以下を削除してこちらは完了です。

gulpにスポットで実行できるコマンドを追加

今回のリポジトリはgulpによってファイルを結合したりminifyなど(以下この一連の手順のことをビルドと呼びます)行ったファイルを、特定のディレクトリ以下に生成する処理が存在し、開発中はgulpにより変更を監視して、変更があるとファイルが再生成される。という仕組みになっていました。(この生成されるファイルが諸事情により200弱生成されるようになっていました。)

このファイルの生成は、監視対象のファイルに変更があった時にしか実行されない仕様になっていたため、CIなどの途中でビルドするにはスポットで実行できるコマンドを用意する必要がありました。

CI/CDでビルドする処理を追加

コマンドが用意出来たら、リポジトリのCI/CDに組み込めば完了です。

楽になりました🙌

最後に

今回お話したように、クラシコムにはレガシーな技術などまだまだ改善する必要のある課題がたくさんあります。サイトの改善運用だけでなく、開発者目線での改善もどんどんしていける環境です。もしご興味ある方いらっしゃいましたらご応募お待ちしております。

株式会社クラシコムでは一緒に働く仲間を募集しています

今週のランキング

株式会社クラシコムからお誘い
この話題に共感したら、メンバーと話してみませんか?