🧑‍⚖️

.gitignore の挙動確認アプリを React で作ってみた

に公開
AWS
React
ポートフォリオ
gitignore
idea

はじめに

.gitignore の挙動を webブラウザで確認できるアプリを作ってみました。
作成したアプリの概要や使い方に加えて、開発の背景や工夫したポイント、そこから学んだことについてまとめます。

▶ アプリURL: https://d14csvmoeha0t5.cloudfront.net/

アプリ概要

このアプリは .gitignore ファイルの設定に基づいて、特定のファイルやディレクトリが Git のバージョン管理対象になるかどうか を簡単に確認できるアプリです。

使い方

  1. .gitignore ファイルをアップロード、またはファイル内容をテキストエリアに入力します。
  2. もう一方のテキストエリアに、バージョン管理されるか確認したいファイル名やディレクトリ名を入力します。
  3. 入力したファイル・ディレクトリが「バージョン管理される」か「無視される」かの判定結果が自動で表示されます。

利用シーン

  • .gitignore の記述が正しく機能しているかを確認したいとき。
  • 新しい除外ルールを追加する前に検証したいとき。
  • 意図せずバージョン管理される（または、されない）場合の原因調査が必要なとき。

特徴

  • 複数のファイル名、ディレクトリ名を 同時に判定可能 です。
  • テキストエリアの入力内容変更が リアルタイムで判定に反映 されます。
  • どのルールによってバージョン管理対象外になるかも表示 されます。
  • 表示言語を切り替え可能 です（英語、日本語）。

使用技術

フロントエンド

分類 技術要素
言語 TypeScript
ライブラリ React
スタイル Tailwind CSS, Shadcn UI
開発環境 Docker, Docker Compose
ホスティング S3 + CloudFront

バックエンド

なし（フロントエンドのみの構成）

システム構成図

開発のきっかけ

Reactの勉強として 「React だけで完結するエンジニア向けのアプリを作りたい」 と思ったのがきっかけです。

当初は 「.gitignore を自動生成するアプリ」 を考えていたのですが、既に似たようなサービスがいくつかあったので、そこに 「ファイルが無視されるかどうかを判定する機能」 を足すことを考えました。気づかないうちにファイルが管理対象外になっていたり、逆に除外されていなかったりする経験があったので、判定機能があると便利そうだなと思ったからです。

ですが最終的には 「シンプルに判定だけできるアプリ」 に振り切りました。そのほうが分かりやすくて使い勝手も良いと感じたからです。

難しかったところ

  • ドット（.）やアスタリスク（*）で始まる文字列の扱い
    正規表現と解釈されて誤動作が多発して大変でした。
  • 日本語/英語の言語切り替えによるレイアウト崩れ
    言語によって文の長さが違うとレイアウトが崩れるので調整が難しかったです。
  • .gitignore ファイルダウンロード機能
    判定に使用したテキストエリアの内容を .gitignore ファイルとしてダウンロードする機能を追加予定でしたが、ダウンロードファイル名を .gitignore にできず断念しました。（ドット始まりのファイル名は指定できない？）

工夫したところ

初めて触る人でもすぐに使えること、多くの人が使えることを意識して以下の点を工夫しました。

  • サンプルの入力と結果をデフォルトで表示
  • UI は白と黒を基調にして、判定結果やエラー表示だけに色を使うことでシンプルさを重視
  • 日本語と英語の切り替えに対応

学び

  • React だけでも意外といろいろなことができる
    これまではフロントエンドとバックエンドを組み合わせた構成ばかりだったので、新しい発見でした。どこまでできるか試してみたくなりました。
  • シンプルな UI を作るのは難しい
    入力欄とボタンと結果表示だけでは直感的に分かりづらい、説明を増やすとごちゃごちゃする。とはいえ別ページを作るほど複雑な仕様でもないので、バランスを取るのが大変でした。
  • 機能は欲張らない方がいい
    当初は .gitignore の生成やダウンロード機能も考えていましたが、判定機能に絞ったことで工数も減り、UI もすっきりして、結果的にメイン機能の使い勝手を高められたと思います。

今後やってみたいこと

今回は .gitignore をテーマにしたアプリを作成しましたが、他にもエンジニア向けのアプリを作ってみたいと思いました。いくつか作って便利ツール集のようなものを作ることも考えているところです。
今回作成したアプリの機能やコンポーネント（言語切り替え、アップロード・コピー・リセットボタン等）は他のアプリにも使えそうなので、うまく使いまわして効率的に開発できたらと思います。

おわりに

今回は自身の経験から着想を得た .gitignore 判定アプリを作りました。
初見の人にも使い方がわかるように作ったつもりですが、実際に使った人の意見を聞かないと結果はわからないので、使ってみた感想をぜひ教えていただきたいです。
いろいろな感想や意見を取り入れて今後の開発に活かしたいと思います。

Discussion