🐈

GitHub Enterprise導入前に！ユーザー名とSlugの重複チェックツールを作りました🔍

に公開
GitHub
JavaScript
Vercel
OAuth
idea

はじめに

このところ 以前にも増して GitHub Enterprise Cloud の導入を検討されているお客様が増えているなぁ～という印象です。

  • 「希望するGitHubユーザー名って使えるのかな？」
  • 「Enterprise Slugは重複してないよね？」

基本的に GitHub って実はそんなに深く浸透してるわけじゃないと思っていて、導入を指揮する部門の方もアカウントを持ってなかったりします。いざ導入となったときに「あ、その名前もう使われてます😅」と言われてしまい、せっかく決めた命名規則が台無しに...

そんなわけで、事前にサクッと確認できるツールを作ってみました

作ったもの

https://slug-checker-labq.vercel.app/

できること

1. GitHubユーザー名の重複チェック

  • GitHub APIを使ってリアルタイムで確認
  • 形式チェックも含めて一発判定
  • 「あ、これ使えない😭」がその場で分かります

2. Enterprise Slugの重複チェック

  • GitHub Enterprise組織のslugの利用可否を確認
  • GitHub公式Enterprise作成ページへの直接リンク
  • リアルタイムでのslug有効性確認

なぜこのツールが必要だったのか

GitHub Enterprise Cloud導入あるある

企業でGitHub Enterprise Cloudを導入するとき、こんな場面に遭遇しませんか？

  • 命名規則を決めたい：company-dev, company-prod みたいなユーザー名
  • Enterprise組織名を決めたい：https://github.com/enterprises/your-company のSlug部分
  • でも重複チェックが面倒：いちいち手動で確認するのは大変

特に、GitHub Enterprise Cloud Managed Users を検討している場合、事前の計画がとても重要ですよね。

使い方

GitHubユーザー名をチェックする場合

  1. ユーザー名を入力

    例：my-awesome-company

  2. 「チェック」ボタンをクリック

  3. 結果を確認

    • ✅ 利用可能 → そのまま使えます！
    • ❌ 利用できません → 別の名前を考えましょう

Enterprise Slugをチェックする場合

  1. 「GitHub Enterprise作成ページを開く」をクリック
  2. 新しいタブでGitHub公式ページが開く
  3. Enterprise nameフィールドにSlugを入力
  4. リアルタイムで有効性表示

技術的な話（サラッと）

使った技術

  • フロントエンド：HTML5, CSS3, JavaScript, GitHub OAuth 2.0
  • API：GitHub REST API v3, Node.js, Vercel API Routes
  • ホスティング：Vercel

とりあえず余計なフレームワークを入れずにシンプルにしたかった…

プロジェクト構成

slug-checker/
├── public/                 # 静的ファイル
│   ├── css/
│   │   └── styles.css     # メインスタイルシート
│   ├── js/
│   │   ├── auth.js        # GitHub認証クラス
│   │   └── main.js        # メインアプリケーションロジック
│   └── index.html         # メインHTML
├── api/                   # Vercel API Routes
│   └── auth/
│       ├── login.js       # OAuth ログイン
│       ├── callback.js    # OAuth コールバック
│       ├── user.js        # ユーザー情報取得
│       └── logout.js      # ログアウト
├── server.js              # ローカル開発サーバー
├── vercel.json           # Vercel設定
└── package.json          # 依存関係・スクリプト

工夫したポイント

GitHub の Slug を確認するエンドポイントについては、実は内部的には用意されていて、これを呼び出せればとてもシンプルだったのですが、非公開のAPIとなり、かつ、CORSの設定でブラウザで起動する場合は、github.comからでないと認可されない構造になってます。

https://github.com/account/enterprises/check_enterprise_slug

ですので、Slug を確認する機能として、GitHub Enterprise 作成ページ を分離する必要がありました。
サインイン/サインアウト機能はおまけで付けてみました。Vercel側のCallbackに伴い、GitHub Apps（OAuth）の挙動を確認したかったという意図もあります。

実際の活用シーン

ケース1：新規プロジェクトの準備

開発者A「新サービスのGitHub組織名、どうしよう？」
開発者B「とりあえず候補をチェックしてみよう」
→ ツールでサクッと確認 → 空いてる名前で決定！

ケース2：Enterprise移行の計画

情シス「既存のGitHub.comから Enterprise に移行したい」
→ 事前に希望するSlugが使えるか確認
→ スムーズな移行計画を立案

ケース3：複数候補の一括チェック

命名候補：company-dev, company-prod, company-staging
→ 全部チェックして使える組み合わせを発見

GitHub Enterprise導入を検討中の方へ

このツール、特に以下のような方におすすめです

  • GitHub Enterprise Cloud の導入を検討中
  • Managed Users の導入を検討中
  • 組織の命名規則を事前に決めたい
  • 「せっかく決めた名前が使えない😱」を避けたい

リンク集

おわりに

「ちょっとした困りごと」から思いつきで作りましたが、同じような悩みを持つ方の役に立てば嬉しいです。

GitHub Enterprise の導入は大きな決断ですが、事前の準備をしっかりすることで、よりスムーズに進められると思います。

みなさんのGitHub Enterprise導入が成功することを願っています！🎉

何か質問や改善案があれば、気軽にコメントやGitHubのIssueでお知らせください。

https://github.com/yutaka-art/slug-checker

GitHubで編集を提案

Discussion