はじめに
この記事はWordCampOsaka 2018で登壇した内容のフォローです。
お伝えしたいこと
- 中規模案件と水平分業、垂直分業
- ツール（Docker、CI）を使うと便利
- お互いを尊重しよう
小規模案件と中規模案件
中規模案件と分業について
小規模案件の例
中規模案件についてお話する前に、まずはどういったものが小規模案件になるのでしょうか。
上記は一般的なコーポレートサイトのサンプルのデザインカンプです。（これはちなみにWordBench富山で作りたいテーマのデザインカンプで、実在しないお店です。）
地方の飲食店用ウェブサイトをイメージしています。
左上にホームに戻れるお店のロゴバナー、右上にグローバルナビ、メインビジュアルにメインコンテンツコンテンツ、サイドバーという構成です。
グローバルナビを見てみると
- ホーム
- こだわり
- お品書き
- 店舗紹介
- お知らせ
- お問い合わせ
と並んでいます。
WordPressで案件をこなしていると、こだわり、お品書き、店舗紹介あたりは固定ページで、お知らせはカスタム投稿タイプで、お問い合わせはContactForm7かMW WP Formで…、と実装系をすぐにイメージできますね。
小規模案件のチームビルド
こちらはこの規模の案件をこなす際のチームメンバー構成です。
すべてを取りまとめるディレクターさん、デザイナーさん、コーダーさんの３人一組です。
クライアントさんから要望を聞いたディレクターさんがデザインの支持を出し、デザイナーさんから出来上がってきたデザインカンプをコーダーさんに渡し、コーダーさんが静的コーディングとテンプレートへの組み込みを行います。
WordPressの管理画面での設定周りはディレクターさんかコーダーさんが行います。
このぐらいのチーム感がWordPressでは最も一般的かなと思います。
中規模案件とは
では中規模案件とはどれぐらいの規模の案件でしょうか。
私の考える中規模案件とは
- チームメンバー5人以上
- 作業に分業が発生
と考えています。
（実際の発表では実例を出したのですが、Qiitaではその紹介を控えます）
中規模案件のチーム例
こちらは中規模案件のチーム例です。
小規模案件に比べてプログラマーが２名、テスターが３名増えています。
全体で８名で案件に取り掛かっています。
プログラマーの内１名はリードエンジニアとして、もうひとりのプログラマーとテスターを束ねてディレクターさんの補佐を行いながらタスクの割り振りを行っています。
この規模のチームで案件をこなす場合には中規模案件と言えるでしょう。
小規模 vs 中規模
小さめの案件、中くらいの規模の案件の実例を元に分類を行いました。
私の考える小規模案件、中規模案件とは以下のように分類できます。
| 小規模 | 中規模 |
|---|---|
| 職種が被らない | 職種が被る |
| 概ね5名以下 | 概ね5名以上 |
この「同じ職種が２名以上いる」ということは実際に案件をこなす上で衝突を
中規模案件の問題点
中規模案件のこなしかた
まとめ
小規模案件について
- 一般的なWeb制作現場
- 個人的な定義
- コーポレートサイト
-- トップページ、お知らせ、ブログ、会社概要、アクセス、お問い合わせ - 製作期間は一ヶ月
小規模案件のチームビルド
- ディレクター
- デザイナー
- コーダー
- エンジニア（兼任あり）
といったものが小規模案件
では中規模案件とは?
中規模案件
- チームメンバーが5人ぐらい
- 分業
中規模案件の例1
- 製造業メーカー系企業
- 商品1000点を掲載したい
- 商品ページでそれなりにレイアウトが異なる
小規模案件の例1
- チームメンバー
-- ディレクター
-- デザイナー
-- コーダー 3人
-- エンジニア
中規模案件の例2
- 勤怠管理システム
中規模案件の例2
- ディレクター
-- デザイナー
-- コーダー
-- プログラマ * 3人
中規模案件の例3
- ウェブ系イベント管理システム
- 顧客向け（フロント）＋イベント管理システム（サーバサイド）
-- 先方担当者
-- ディレクター
-- デザイナー * 2名
-- コーダー * 3名
-- プログラマ * 5名 - 開発期間6ヶ月
小規模 vs 中規模
- 小規模
-- 職種が被らない
-- チーム5名以下 - 中規模
-- 中規模
-- 職種が被る
-- チーム5名以上
中規模案件と分業
- 小規模案件では別の職種をそれぞれ用意
-- 職種の掛け持ちあり（デザイナーさんがコーディング、ディレクターさんがデザイン、コーディング） - 中規模案件では同じ職種で分業が発生
-- コーダーさんが手分けして対処
-- エンジニアが5人
垂直分業と水平分業
- チームメンバーが違う職種の場合 => 垂直分業
- 同じ職種の分業 => 水平分業
小規模 vs 中規模
- 小規模
-- 垂直分業のみ - 中規模
-- 水平分業あり
中規模案件での問題点
垂直分業では
- お互いの領域が異なる
- やるべきタスクがはっきりしている
- 衝突しにくい
水平分業では
- お互いの領域が被る
- コードレベルで衝突する
- タスクの分担が曖昧になる
衝突: コードレベルでの衝突
- ある場所のプログラムが他人のコードを破壊する
- CSSの崩壊
- 人のCSSが影響を及ぼす
衝突: タスク分担
- 「問い合わせフォームの作成」タスク
- 「問い合わせフォームのCSV出力」タスク
これを複数人で分業すると - 「フォームに漏れがあった場合」が発覚した場合「フォームの修正」「CSV出力部分の修正」
で複数人にまたがる
解決の例
コードレベルでの衝突
- コーディングにルールを設ける
-- コード規約
-- ファイル名の決定方法
衝突: タスク分担、ソフトの解決
- お互いを補い合えるチーム作り
- バグを憎んで人を憎まず
- git blame（責める）とgit annotate（脚注）
- 「誰がなぜこのバグを埋め込んだか」を明らかにするが、チーム内で絶対に責めない
（冗談はOK。ただし冗談で有ることを明らかにしてバグを埋めたことを責めない）
衝突: タスク分担: ハードの解決
- コーディング規約の導入
- みんなの環境で同じように動くことの導入（べき等性）
- 自動テスト環境の導入
コーディング規約
- コーディングのルール
- 参考資料
べき等性の確保（Docker)
- Dockerの導入（Vagrant）
- WordPressの場合、データベースの同期システム導入
Docker導入時の注意点
- 垂直分業と水平分業と開発環境
- 垂直分行事は冪等性にこだわらなくてOK
-− それぞれの職種が独自の開発環境でOK
--- 開発用レンタルサーバ、XAMPP、MAMP、Vagrant、Docker - テストを行える環境づくり
-- 全般的にエンジニア（フロントエンジニア、サーバサイドエンジニア）のサポートが必須
-- エンジニアチームがサポートする意識
自動テスト環境
- CI
-- 今回の例ではCircleCIを導入
CircleCI
- プライベートリポジトリも時間制限付き無料
- Dockerサポート
- Dockerを取り入れていればそのまま使える
CircleCIを使った例
- スクリーンショットなどをここに
まとめ
全体を通して
- コーディング、プログラム部分の責任者の選定
-- 名称、リードエンジニア、プロジェクトマネージャ、リーダー - メンバー図の作成
-- メンバー図を作成することで意識付けが捗る
-- ただし責任境界を明確にせず、踏み入っても助け合うチームに。
全体を通して2
- 意外にも原始的
- 責任者とはいえ現場兼任
- スクラム開発の理想としてはリーダーは開発を行わないこと
- とはいえそこまで人数を割けない
- プログラマが5人を超える場合には専任リーダーを
ウェブ系プロジェクトマネージャの仕事
- 良い雰囲気づくり
- コーディング規約、コーディングルールの策定
- CIの設定周り
- タスクの割り振り
- ディレクターの補佐、議事録