「GitHub難しい!!」を30分で解決するサイトを共同開発しました🚀
はじめに
先日、初心者でも簡単に参加できる GitHub チュートリアル
『First Contributions JA』を共同開発しました！
振り返りも兼ねて、プロジェクトの背景や使用技術について、紹介していきます。
▼ GitHub のリンク：
なぜ First Contributions JA を構築したのか？
さて、First Contributions JA には、次のような特徴があります：
- React/ Next.js で構築されたWebサイト
- 初心者向けのGitHubチュートリアル
- オープンソースのプロジェクト
上記を踏まえて、プロジェクトの経緯は、主に２つあります。
（技術スタックは、後で詳しく説明します）
1. JavaScript/ React 学習コミュニティで、共同開発を提案した！
以前、
「JavaScript/ React を学習するコミュニティを、期間限定で開催する！」
という旨の投稿をしました。
▼ その時の、コミュニティの概要の記事：
そして、上記コミュニティ内で、
「実践的な共同プロジェクトをやりたい！」
という提案をしたところ、プロジェクトが立ち上がったことが、始まりです。
なので、開発で React/ Next.js を使用することは、当然の流れでした！
2. 実践的なGitHubの活用と、オープンソースの作法を学ぶため
では、実際に何を開発するかですが、
「誰でも簡単に参加（コントリビュート）できる、日本語のオープンソースプロジェクトを作りたい」という、ざっくりしたアイデアからスタートしました。
というのも、英語圏の開発者コミュニティでは、
「OSSへの参加に慣れるために構築された、初心者向けのプロジェクト」が、たくさんあります。
この手の、「初心者向けのOSS」の良い点は、以下の通りです：
- GitHub の実践的な使い方を学ぶことができる
- 同時に、実際の共同開発の流れを知ることができる
- そして、開発者とGitHub上でコミュニケーションが取れるのが、楽しい
一方、日本語の「初心者向けのOSS」は、ほとんど見つかりませんでした。
（筆者が調べた限りでは）
初心者にとって、英語のドキュメントを読むというだけで、参加の敷居が上がってしまう印象があったので、「同様のプロジェクトの日本語版があれば役に立ちそうだなー」というアイデアが、以前からありました。
結果として、その方向性のアイデアで、プロジェクトがスタートしました！
First Contributions JA は何で、どのように開発したか
First Contributions JA の基本的な構成は、以下のとおりです:)
- ⚡ Next.js v14/ App Router による、静的サイト生成
- 🔥 TypeScript による型チェック
- 💎 Tailwind CSS でのスタイリング
- 📏 ESLint を使用したLinter
- 💖 Prettier によるコードフォーマッタ
- prettier-plugin-tailwindcss を追加し、Tailwindのclassの並び順を整形
また、開発の過程でフォーカスしたことは、下記などがあります !!
- 🚀 GitHub Pages に静的サイトをデプロイ
- 💚 GitHub Actions を用いて、Next.js サイトのビルドプロセスを自動化
- 📄 明確なドキュメンテーションと、コミュニティによるサポート
- 🙂 Noto Emoji/ Google font を用いた、絵文字のアニメーションを実装
- 🦊 huskyとlint-stagedを導入し、 ユーザーのローカルのフォーマッタが影響しないようにした
これらについては、詳しく説明する価値があるので、やりましょう！
🔥GitHubの機能を使い倒す !!
初心者向けのチュートリアルを作成するにあたって、
開発メンバー自身も、実践的なGitHubの使い方や、オープンソースの作法について学ぶ必要がありました。
なので、「GitHubの機能を使い倒す」ことが、このプロジェクトのテーマの１つでした！
- 🚀 GitHub Pages に静的サイトをデプロイ
- 💚 GitHub Actions を用いて、Next.js サイトのビルドプロセスを自動化
上記の他にも、：
- 🪧 Issue テンプレートを作成
- 📮 Pull request テンプレートを作成
- ✨ 絵文字に対応した prefix 付きのコミットメッセージガイドラインを作成
- 🏷️ バージョンタグと自動リリースノート生成機能の活用
- 🖼️ リポジトリの Social preview 画像の設定
- 💬 Discussions の活用
- ⛑️ Wiki の活用
- 🗓️ GitHub Projects やマイルストーンの活用
色々な機能を使い、試行錯誤を繰り返しながら、開発プロセスに取り入れました！
📃明確なチュートリアルにするため、ドッグフーディングを行った！
- 📄 明確なドキュメンテーションと、コミュニティによるサポート
GitHub の初心者が、迷わずチュートリアルを完了できるように、ドキュメントを明確かつ簡潔に保つことを意識しました。
そのため、ユーザーの利用を想定して、ドッグフーディングを行いました！
その際、figjam を活用し、修正点や気になった表現などを洗い出し、コメントを付け合って、適宜 Issue を立て、修正を加えました。
また、不明点や質問を受け付けるための Discussions のスレッドも用意し、ユーザーからのフィードバックを得る経路も設置しています !!
😎絵文字をアニメーションさせて、POPなWebサイトを構築した:)
参加のモチベーションを高めるため、
POPでカラフルなWebサイトを構築しました。
具体的には、サイト全体のデザインに、絵文字（Noto Emoji）を使ったアニメーションや、吹き出し風のセクションを実装しました。
これにより、参加者が JSON ファイルに変更を加えることで、
Web サイトのデザインが動的に変化する設計を実現しています！
以下の URL から、確認してみてください !!
また、ユーザーが JSON ファイルに変更を加える際に、ローカルのフォーマッタが影響しないように、huskyとlint-stagedを導入しました。
これにより、コミットするタイミングで、自動で ESLint と Prettier を実行しています ！
おわりに
個人としては、改善点も見つかりました。
それは、「早めに仕様を固めた方がいい」ということです。
個人開発では、詳細はふわふわした状態でも「一旦ここまではやってしまおう！」的な感覚で進めがちです。しかし、共同プロジェクトだと、これは認知負荷が高いことだと思いました。リモートでのやり取りであれば尚更、認識の齟齬が生まれないように、共通認識を持つことを優先させるべきですね。
総じて、学びも多かったですが、楽しいプロジェクトでした !!
プロジェクトのメンバーの方には、感謝です🙏
また、既に First Contributions JA のチュートリアルを利用していただいた方に対しても、とても嬉しく思っています！！！
長くなりましたが、最後まで読んでいただだき、ありがとうございます🥳
First Contributions JAは、
初学者向けに設計されたオープンなプロジェクトです。
チュートリアルに沿って、実際に共同開発を体験しながらGitHubを学べます！
よかったら、以下の URL から参加してみてください！
そして、もし First Contributions JA が役に立つと思ったら、
GitHub のページの上部から ⭐star ボタンを押してください！または、このプロジェクトを広めるために、フォロワーや知り合いに共有してください！
Happy Hacking :)