workflow

workflow.md

対象

この記事ではSPA(Single Page Application)を開発する際の開発フローをまとめています。以下の技術、サービスを採用しています。

• Slack
• GitHub
• Angular
• Firebase
• Visual Studio Code

この記事は随時更新されます。

概要

GitHubのIssue、マイルストーン、リリース機能を軸に開発を進めます。ポイントとしては、タスク管理ツールやSlackに依存せず、コミュニケーションと品質管理、タスク管理をGitHubで一元管理することです。これにより開発メンバーはスイッチングコストが軽減され、開発に集中できます。また、途中で開発メンバーの入れ替わりがあってもIssueを見れば直ちに開発に入れる状況が整います。

Slack準備

1. Slackのチャンネル概要にGitHubリポジトリや資料へのリンクを記載
2. Slackチャンネルに通知を流す

Slackはログが流れやすいため、基本的には通知ツールとして作動させ、基本的なコミュニケーションはIssueの作成、コメントで行います。これにより、後から来たメンバーが情報を追いやすくなる。

GitHub準備

1. GitHubでマイルストーンを作成する（β、リリース）
2. GitHubでIssueを作成する（ラベルや担当者、マイルストーンの設計を行う）
3. PullRequest Templateを追加する
4. masterブランチをプロテクト(CI連動、レビュー必須）
5. CircleCI(将来的にはGitHub Actions）を接続

PULL_REQUEST_TEMPLATE とCIによる自動テストによりPRの質を高める。また、GitHub Issueによるタスク管理で情報流通を一限管理する。GitHubのショートカットを覚えることで効率化する。

Angular準備

ng set --global packageManager=yarn # yarnを使う場合
ng new <PROJECT_NAME> --routing --style=scss

Angular CLIコマンドで環境構築を行う。routing,styleのオプションは推奨。

Firebase準備

firebase init
firebase use --add # 公開用プロジェクトを追加する場合

• Single Page Application の質問で y とする

本格的なサービス開発においては、開発用と公開用でFirebaseプロジェクトを分ける。その上で、ローカルからdeploy対象を選択できるよう、　firebase use --add で公開用プロジェクトを追加しておく。

開発

• GitHub Flowで開発を行う
• 適宜Releaseタグを切る（CHANGELOG.md をメンテナンスする）

Gitflow は冗長なのでGitHub Flowを採用する。その分、PullRequestのハードルを高くし、品質管理を徹底する。