フロントエンドを超短期でチーム開発する

超短期のチーム開発

先日ハッカソンに参加した際、初めて会うチームメンバーと2日間でWebアプリケーションを開発しました。メンバーによって全く技術スタックが異なる状況での開発だったこともあり、時間が足りず非常に苦戦しました。その際に行った工夫や、課題点について以下にまとめて行きたいと思います。

記事の対象

超短期（出会って2~3日）でチーム開発（リモート）を行う方々
チームメンバーの技術レベルは以下を想定

• テックリード
  
  • Web開発の経験がある
  • React.jsのチュートリアルを一通り終わらせ、基本的な使い方をマスターしている
  • Next.jsの使い方を知っているとベスト
    特有のコンポーネント（Link、Imageなど）、ディレクトリ構成、CSSサポートなど
• 他メンバー
  • Webアプリ（とくにフロントエンド）の開発経験が乏しい、もしくは無い
  • 基本的なHTML、CSSの文法を理解している
    

Next.js（React.js）特有の文法や作法があるため、経験の少ないメンバーのサポートや、高度な部分（動的なUIやAPI Routeの活用など）を実装できるテックリードが、最低でも1人いることを前提にしています。アプリ開発やWeb開発に慣れた方が複数人いるならば、その場その場で適した技術を、チームで検討して行けばいいと思います。

開発環境

フロントエンド開発用のWebエディターCodeSandBox

CodeSandBox

今回、サーバーサイド（PHPやPython、Go）＋HTMLテンプレートでの開発ではなく、フロントエンド開発を選択した最大の理由です。以下の機能を備えており、今回のような超短期間でのチーム開発において、すばらしい開発体験を提供してくれます。

• 開発環境のワンクリック作成
  • PrettierやESLintも自動で設定
  • 外部ライブラリの追加可
  • 既存プロジェクトのインポートも可能
• 高度なエディター機能（VS Codeベース）
• ホットリロード機能付きプレビュー
• LiveShareによる複数人での同時編集
• GitHubやVercelなど外部ツールとのシームレスな連携

環境構築やGitHubによるコードの共有といった面倒な作業を全て省けます。テックリードの技術の見せ所でもありますが、超短期の開発では、ここに時間を掛けられないため効率を最優先にしています。

使用技術

• HTML
• CSS
  • CSS Modules
    • Next.jsが標準で採用しているため
    • 参考記事
  • CSSフレームワーク
    • BootstrapやSemantic UI
• JavaScript
  • 経験が浅いことを前提にしているため、TypeScriptは不採用
• Next.js
  • ルーティングやCSS Modules、各種コンポーネント（Link、Imageなど）を始め、便利な機能が初めから用意されている
  • 開発時は。読み込むページに関連する部分のみコンパイルするため、複数人で同時に編集しても問題が起きにくい
  • バックエンドの実装（API Routes）も可能

本記事ではNext.jsを中心にしていますが、CodeSandBoxにはVue.js（Nuxt.js）や、最近話題のRemixなどのテンプレートもあります。テックリードの技術スタックに応じて柔軟に変更しましょう。

開発の流れ

1. アプリの構想

1. 解決したい問題の設定
2. アプリによる解決手段の提案
3. アプリの基本機能の考察
4. アプリのプロトタイピング作成

• 作業時間の目安：1日目の半分
  • 作業時間が8時間あれば4時間程度
• プロトタイピングは、主要な画面のイメージ程度で済ませる
  • XDやFigmaなどで作り込むと、開発時間が足りなくなる可能性が大

2. 技術選定

• 基本は上述の使用技術を参照
• CSSフレームワークについては事前にしっかり決める
  • 筆者が開発した際、Bootstrap5とBootstrap4がいり交わって面倒なことになった
  • 使用しない選択肢もあり
    • メンバーの技術スタックと要相談
• その他の便利なライブラリ
  • 必要になった際に適宜テックリードと相談する
  • 状態管理（Redux？Recoil？）や通信（Axios？Fetch API？）など

3. モックの作成

• コンポーネント化などは考えずに、ページごとにHTMLベースで実装する
• CodeSandBoxで同じファイルを同時に編集ができるが、混乱しやすくなるため、基本的に異なるページを分担して実装する
• 細かいUIの調整（色やフォント）については、常に全員で相談しながら進める

4. 動的な変更の実装

• ページ遷移や、クリック時の動作などを実装
• コンポーネント化も可能であれば進める
• 時間に余裕があればバックエンドも実装する
  • 残り時間によってはバックエンドは諦め、ローカルでのみ動作させる選択肢も考える
  • Next.jsのAPI Routes、Python＋Flask（Fast API、Djangoなど）、Firebaseなど
    • PythonやGo、Rubyなどを用いる場合は別途環境構築が必要な点には注意
    • PythonはSQLiteが標準ライブラリで使える
    • CodeSandBox上でFirebaseを活用するのは難しい可能性がある
      • firebase-toolsが思ったように動作しなかった

テックリードに作業が集中しやすいことには注意が必要。モックのデータを作成や開発以外の作業を任せたり、適宜やり方を教えたりすることで、テックリードの作業を分担する。

Next.jsを使う上で最低限知っておくこと

HTML

• 属性
  • classではなく、classNameを用いる
    • この他にも一部異なる属性があることに注意
  • aタグは必ずNext.jsのLinkコンポーネントで囲む
  • 画像はNext.jsのImageコンポーネントを使用する
    • パスを指定する際のルートディレクトリは、publicディレクトリであることに注意
    • width、heightをしてしないとコンパイルエラーになることに注意
• scriptタグは使わない

CSS

• CSS Modules
  • 全体で読み込ませたいCSS（Bootstrapなど）は_app.jsでインポートする
  • 拡張子は.module.cssとする
  • _app.js以外で読み込ませる場合、タグを指定してスタイルを当てることができないため、必ずクラス指定で記述する

最後に

なかなか2～3日でチーム開発を行うことは少ないと思いますが、実際に行ってみると全く時間が足りず、いくつかの機能やバックエンドの実装を諦めることになりました。しかし、限られた時間で折り合いをつけながら、チームで開発することは非常に楽しかったですし、勉強になることも多くありました。このような機会があれば、是非参考にしていただければと思います。

本記事について、もっとこうした方がいいとか、おすすめのサービスがあればコメントを頂けると幸いです。