👨‍💻

シンギュラリティ・ラボのチーム開発活動のご紹介

に公開
Next.js
React
チーム開発
オンラインサロン
ai駆動開発
idea

実践で学ぶチーム開発

オンラインサロン「シンギュラリティ・ラボ（通称シンラボ）」では、先端技術にキャッチアップしつつ、全体のスキルアップを図るため、今年から「チーム開発」プロジェクトを開始しました。
本記事では、私たちのチームがどのようにプロジェクトを推進しているかについて詳しく解説します。

1. チーム開発プロジェクトの背景と目的

昨今、AI技術の登場で、Web開発はエンジニア以外にも急速に普及しつつあります。ただ、個人開発に取り組む人が増える一方で、実務においては必須となるチーム開発を経験する場は多くありません。チーム開発は個人開発とは異なるスキルセットが必要であり、現場で活躍するためには早くから身につけることが重要です。

また、AI技術の発展は、Webアプリケーション開発のあり方を大きく変えています。コード生成AIによる開発効率の向上、デザインAIによるUI/UX制作の効率化、AIを活用したデバッグやテストの自動化、そしてドキュメント作成の効率化など、AIは開発の様々な側面で活用され始めています。しかし、AIを活用した効率的な開発手法はまだ発展途上であり、体系的なベストプラクティスは確立されていません。この状況は、先行者利益を獲得できる大きな可能性を秘めています。

こうした背景から、私たちのチーム開発プロジェクトは以下の目的を掲げています：

  • スキル向上の機会提供:
    • 実践的なチーム開発経験の獲得
    • モダンな技術スタック（React, Next.js, TypeScriptなど）の習得
    • AIツール（GitHub Copilot、Claude code等）の効果的な活用法の習得
  • ナレッジの共有と蓄積:
    • エンジニアコミュニティ内での知見共有
    • AIを活用した開発ノウハウの確立
    • チーム開発のベストプラクティスの構築
  • 実践的な学習環境の提供:
    • コードレビューを通じた相互学習
    • 実際のプロダクト開発による経験値の獲得
    • チームメンバー間でのスキル補完

これらの目的を達成することで、参加者は実践的なチーム開発スキルと最新技術スタックの経験を得られ、ポートフォリオとしての価値を高められます。また、コミュニティに対してはAIを活用した開発手法やチーム開発ノウハウの共有を通じて貢献し、継続的な技術力向上の仕組み作りとエンジニアコミュニティの活性化を目指します。

2. 私たちのチーム開発の進め方と開発環境

私たちのチームは、効率的かつ高品質なWebサービス開発のために、具体的な開発方針と環境を定めています。

2.1. 開発方針とコミュニケーション

  • スクラム開発: 2ヶ月のスプリントで短期スパンの開発を行い、1週間単位で開発状況を確認し、軌道修正します。
  • MVP（Minimum Viable Product）優先: 初期開発では機能を最小限にし、クオリティよりも成果物のリリースを優先し、クオリティはリリース後に向上させます。
  • 柔軟なタスクアサイン: タスクの均等割りではなく、稼働できるメンバーが優先してタスクを行い、スキルアップのためにはタスクを多くこなすことを推奨します。
  • チーム全体でのサポート体制: 分からないことはSlackで積極的に相談し、不明点はチーム全体でフォローします。このナレッジは別途ドキュメント化し、AI活用も検討します。
  • AI等の利便性の高いツールの積極的な活用: 最新ツールをフル活用し、最小限のリソースで成果物を制作します。GitHub Copilotは、コーディング支援、テスト自動化、ドキュメント生成、レビュー支援など多岐にわたって活用されます。
  • 新規参画者の段階的な育成: 参画にはHTML/CSSやJavaScriptの基礎スキルが必要ですが、満たさない場合は別途設ける基礎スキル習得に取り組んでもらいつつ、開発ミーティングや相談チャンネルには参加可能です。

コミュニケーション:

  • 週1回の定例会議: Webアプリ開発の基礎スキルの解説、スプリントレビュー、次週の計画策定、技術的課題の共有を行います。ミーティングは録画され、後から内容を確認できるようになっています。
  • Slack: 技術相談や一般連絡に利用します。
  • プルリクエスト（PR）でのレビュー: コードレビューの重要な手段として活用します。

2.2. 技術スタックと開発環境

開発環境は、開発物や時期の流行によって変更する可能性があります。

  • バージョン管理プラットフォーム: GitHub（無料プラン） を使用し、リポジトリは公開設定（Public）です。

    • ブランチ戦略: 以下のブランチ運用ルールを採用しています。
      • release: 本番環境
      • main: テスト環境
      • feature/*: 新機能開発
    • mainブランチとreleaseブランチは保護されており、特定の条件（レビュー承認、テスト通過など）を満たさない限りマージできません。

  • CI/CD (継続的インテグレーション/継続的デプロイ):

    • GitHub Actions を活用し、自動テストの実行も検討しています。
    • Vercel と連携し、mainブランチへのマージでPreview環境、releaseブランチへのマージでProduction環境に自動デプロイされます。

  • 認証・データベース:

    • データベース: Supabase（無料プラン） を利用し、開発環境用と本番環境用のデータベースを分けて管理します。PostgreSQLを基盤としており、データのアクセス権限を細かく設定できるRLS（Row Level Security）機能も活用します。
    • 認証: Supabase Auth を利用し、ユーザー認証（Googleアカウント連携など）を行います。

  • Webデザイン:

    • デザイン制作には bolt.new を活用します。
    • UI（ユーザーインターフェース）構築には React を用います。UIを「コンポーネント」（部品）として捉える「コンポーネント思考」に基づいて開発を進め、再利用性やコードの整理を重視します。
    • Reactアプリケーションのフレームワークとして Next.js を採用し、React Server Componentsやデータフェッチング、クライアントコンポーネントなどの概念を学習・活用します。ページ遷移にはNext.jsの「Linkコンポーネント」を使用し、ディレクトリ構造がそのままURLパスに対応します。
    • UI部品ライブラリとして Mantine を利用し、効率的にUIを実装します。
    • CSSフレームワークとして Tailwind CSS を使用し、効率的なスタイル適用を実現します。
    • アイコンライブラリには Lucide React などを使用します。

  • 開発言語: JavaScriptに「型」の概念を導入する TypeScript を使用し、大規模開発やチーム開発におけるコード品質と保守性を高めます。

  • 開発環境と効率化ツール:

    • Visual Studio Code (VS Code) を推奨エディタとし、以下のプラグインを推奨しています。
      • Tailwind CSS IntelliSense (Tailwind CSS のクラス名を自動補完)
      • Prettier - Code formatter (コードフォーマッター)
      • GitHub Copilot (AI コーディング アシスタント)
      • ESLint (JavaScriptやTypeScriptなどの静的解析ツール)
    • NPM run dev コマンドでローカル環境でアプリケーションを起動し、リアルタイムでコードの変更がブラウザに反映されるため、高い開発効率を実現します。
    • .env ファイルを使用して、データベース接続キーなど公開してはいけない重要な情報を安全に管理し、Gitによるバージョン管理から除外します。

2.3. 品質管理とドキュメント管理

  • コードレビュー: プルリクエスト（PR）レビューが必須であり、プロジェクトリーダーが中心となって実施します。mainブランチとreleaseブランチへのマージには、レビュー承認とテスト通過が必須条件です。
  • ドキュメント管理: GitHubリポジトリ内に docs ディレクトリを設け、環境構築（setup.md）、設計書（architecture）、ナレッジ共有（knowledge）などのドキュメントを管理します。プロジェクトのセットアップ手順や基本的な情報は README.md ファイルにも記載します。

3. チーム参画のために

チーム参画には、HTML/CSSとJavaScriptの基本的なスキルが必要です。具体的には、HTMLの基本構造、CSSでの基本的なスタイリング（Flexbox含む）、JavaScriptの変数・配列・オブジェクト操作、関数定義、条件分岐、ループ処理、イベント処理、ES6以降の文法（イテレータメソッド、テンプレートリテラルなど）が挙げられます。
シンラボでは、これらのスキルを身につけるための学習の場も準備しております。

チーム参画後には、前述の技術スタック（React, Next.js, TypeScript, Tailwind CSS, Mantine/Shadcn/ui, Git/GitHub, Clerk, Supabase & SQL）に加え、実際の開発現場のフロー（ブランチ運用、プルリクエスト & コードレビュー、マージなど）や、チーム開発スキル（チームコミュニケーション、Issue管理、AIを使ったチーム開発）を実践的に学ぶことができます。

このプロジェクトは、AIを活用した開発手法を確立し、エンジニアコミュニティに貢献するとともに、参加者一人ひとりのスキル向上を支援する実践的な学習の場を提供します。

プログラミングイベントのご案内

毎月数回、GASを中心としたプログラミングを学べるオンライン講座を開催しております。直接学びたい方はぜひご参加ください。
申し込みフォームはこちら
過去のプログラミングイベントの紹介はこちら

シンギュラリティ・ラボのご案内

オンラインサロン「シンギュラリティ・ラボ」（通称シンラボ）では、GASも含めたプログラミングをはじめ、さまざまなITスキルやチーム開発について学び、実践する場を準備しております。 初心者から経験者まで、どなたでも参加可能です。
少しでも興味がございましたらお気軽にお越しください。

シンギュラリティ・ラボHP https://sinlab.future-tech-association.org/join

お問い合わせ先 sinlab-recruit@future-tech-association.org

Discussion