「草」が生えるだけじゃ物足りなくて、GitHubに宇宙を作った話 🪐

はじめに

エンジニアの皆さん、**「草（Contributions）」**生やしてますか？

緑色のタイルが埋まっていくのは確かに気持ちいい。
でも、ふと思ったんです。

「僕たちの血と汗と涙の結晶であるコミットが、ただの平面の四角形でいいのか？」 と。

もっとこう、深夜のデバッグの苦しみとか、機能が動いた瞬間の輝きとか、そういう情熱をもっと壮大に、美しく可視化したい。

そんな深夜のテンションと衝動だけで、GitHubの活動履歴を3D惑星化する「GitHub Planet」 というサービスを作りました。

この記事は、技術的な解説というよりは、「これを作って、展示して、どう世界が変わったか」 というポエム（体験記）です。

(↑ 実際に生成される、僕の惑星です)

なぜ作ったのか：承認欲求とゲーミフィケーション

動機は不純で、純粋でした。
「自分の頑張りを、めちゃくちゃカッコよく見せびらかしたい」。ただそれだけです。

RPGでレベルが上がると装備が豪華になるように、エンジニアの活動も**「コミットすればするほど、自分の世界（惑星）が育つ」**ようになったら、日々の開発がもっと楽しくなるんじゃないか？

そう思って、Three.js の世界に飛び込みました。

• 言語によって惑星の色が変わる
• コミット数に応じて、周囲を回る星（衛星）が増えていく
• 誰かがPushすると、リアルタイムで流星が降る

こだわったのは**「手触り」と「没入感」です。
ただのデータ可視化ではなく、そこにある種の生命感**を持たせたかった。GLSL（シェーダー）を書いて、惑星が呼吸するように発光させたのもそのためです。

孤独な宇宙に「流星」を降らせた理由

このサービスには、もう一つこだわりの機能があります。
「誰かがコードをPushすると、リアルタイムで流星が降る」 という機能です。

なぜ作ったのか？

開発作業って、基本的には孤独じゃないですか。
深夜3時にエラーと戦っている時、「今、世界で自分だけが起きているんじゃないか」という錯覚に陥ることがあります。

でも実際には、同じ瞬間にどこかで、誰かが同じようにコードを書いているはずなんです。
「その『誰かの気配』を可視化したかった」。

自分の惑星を眺めている時に、ふと画面を横切る流星を見て、「お、今どこかの誰かがコミットしたんだな。お疲れ様」と思えるような、ゆるやかな連帯感を作りたかったんです。

どうやって作ったか？

技術的には、GitHub Webhook と Socket.IO を組み合わせて実装しました。

1. 検知: 誰かがリポジトリに push すると、GitHubからサーバーへ Webhook が飛んでくる。
2. 解析: サーバー（Node.js）でコミット内容を解析し、「どの言語のファイルが変更されたか？」を判別。
3. 配信: その言語に対応した色（例: TypeScriptなら青、JavaScriptなら黄色）を決定し、Socket.IO で全接続クライアントに meteor イベントを一斉配信。
4. 描画: 受け取ったクライアント側（Three.js）で、アニメーションと共に3Dの流星を生成して飛ばす。

これにより、言語の色をまとった流星が、ユーザーの宇宙をリアルタイムで彩るようになりました。

展示をして気づいた「コードが感情になる瞬間」

先日、このプロダクトをオフラインのイベントで展示する機会がありました。

正直、怖かったです。
「ふーん、で？」と言われたらどうしよう。「技術的にここが甘いね」とマサカリが飛んでくるんじゃないか。

でも、蓋を開けてみれば、そこにあったのは**「笑顔」**でした。

自分のGitHub IDを入力して、惑星が生成された瞬間。
「うわっ、すげー！俺の惑星デカい！」
「私のはピンク色だ、かわいい！」
「もっとコミットして星増やさなきゃ（笑）」

参加者の皆さんが、画面の中の自分の惑星を見て、子供のように目を輝かせていました。

その時、ハッとしたんです。
僕が書いていたのは、ただのJavaScriptのコードでした。window.innerWidth で計算したり、行列計算をしたりしているだけの文字列です。

でも、それが画面を通した瞬間に、誰かの心を動かす「体験」 に変わっていた。
「コードって、人を笑顔にできるんだ」
そんな当たり前のことに、展示を通して初めて、本当の意味で気づかされました。

作ってどう変わったか

1. 「機能」ではなく「体験」を作るようになった

以前は「この技術が使いたいからこれを作る」という思考でした。
でも今は、「ユーザーがこの画面を見た時、どう感じるか？」 を最初に考えるようになりました。
きらきらのパーティクルを画面サイズに合わせて微調整したり、スクショ映えを気にしたり。そういう「神は細部に宿る」部分にこそ、愛着が生まれると知ったからです。

2. アウトプットへの恐怖が消えた

未完成でもいい。バグがあってもいい。
「自分の作りたい世界」を形にして世に出せば、面白がってくれる人が必ずいる。
この成功体験が、エンジニアとしての自信を底上げしてくれました。

3. GitHub活動が楽しくなった（これ重要）

自分の惑星を育てたいがために、無駄に（？）コードを書くモチベーションが上がりました。
まさに計画通りです。

さいごに：みんなも惑星を作ろう！

技術は手段です。でも、「ワクワクする」 という感情は目的になり得ます。

もし、何か作りたいけど足踏みしている人がいたら、ぜひ**「自分が一番テンションが上がるもの」**を作ってみてください。
誰かのためじゃなくていい、自分の承認欲求のためでもいい。
その熱量は、きっと画面越しに誰かに伝播します。

そしてお願いです。
ぜひ、あなたの惑星を作ってみてください！

🌍 GitHub Planet の使い方

1. GitHub Planet にアクセスして、惑星を誕生させます
2. 生成された惑星をじっくり眺めます
3. 画面右上のボタンを押し、続いてカード内のボタンをクリックします
4. 画面下部に表示される内容をコピーします
5. コピーした Markdown を GitHub のプロフィール（README.md）に貼り付ければ完了です！

あなたのプロフィールに、あなただけの惑星を浮かべてみませんか？
みんなの惑星が集まって、GitHub全体がもっと賑やかな銀河になることを夢見ています。

🚀 Try it: GitHub Planet
📂 Repository: GitHub Link