この記事は クラウドワークス グループ Advent Calendar 2024 シリーズ2の14日目の記事です。
はじめに
株式会社ソニックムーブでフロントエンドエンジニアとして働いている伊藤と申します！
現在入社2年目でもうすぐ3年目になる時期に差し掛かり、貴重な経験をたくさんさせていただいている一方で自分自身に課題感を感じることも多くなってきました。
ソニックムーブでは半期ごとに個人目標を立てて達成に向けた取り組みをしているのですが、その目標に向けた取り組みと自己学習も兼ねてちょっとした個人的な課題を改善するような取り組みをやってみようと思います。
概要
ソニックムーブではプロジェクト・タスク管理ツールとしてBacklogを主に活用しています。
Backlogの運用として、プロジェクトの責任者がエンジニアに対して起票した課題を割り振ることが多く、エンジニアは主にステータスの変更やコメントや担当者の変更などを主に行います。
上記の通り、Backlogにはステータスや担当者などの項目があり、他にも期日やカテゴリーなど入力できますが、カスタム属性という新たなフィールドを作成することができます。（プレミアムプラン以上で利用可能）
その機能で「予定時間」と「実績時間」というカスタム属性と呼ばれる入力欄がプロジェクトごとに設置されており、
そのタスクが完了するまでの時間、実際にかかった時間を入力することができます。
この入力欄を活用して、課題単位で工数を入力して自身の工数の把握に役立てることは可能ですが、
- ステータス変更時に予定・実績時間の入力を忘れがち
- 課題ごとの工数は把握できるが、プロジェクト全体のタスクの工数の合計が見えない
と、いくつか不満が出てきたのでもっと全体を把握できないかな🤔と思い立ち、
そのプロジェクトの課題に入力された
予定時間の合計、実績時間の合計とそれらの差分の出力を行おうという試みです。
BacklogではAPIが提供されており、
課題やプロジェクトの取得や追加、更新などさまざまなことが可能なのでこちらを活用していきます。
前準備：API Keyの取得
まず、Backlogログイン後に画面右上の「個人設定」から「API」へ遷移し、任意のメモを添えて登録をします。
取得したAPIキーはリクエスト時のパラメータに含める必要があるので、環境変数に格納しておきます。
環境構築
以下の構成で作成します。
React + Vite
npm create vite@latest
Material UI
UIは楽をしたいので、ライブラリを使います。
npm install @mui/material @emotion/react @emotion/styled
アイコンも一部使いたいのでついでに
npm install @mui/icons-material
axios
フェッチライブラリの導入
npm i axios
※ 永続化はローカルストレージで行います
Backlogから情報を取得する
axiosインスタンスの作成
先ほど取得したAPI Keyは環境変数から読み込み、パラメータに付与します。
import axios from 'axios';
export const backlogApi = axios.create({
baseURL: 'https://xxx.backlog.jp/api/v2/',
params: {
apiKey: import.meta.env.VITE_BACKLOG_API_KEY,
},
});
自身のユーザー情報を取得する
今回特に自身のユーザー情報は必要あったわけではないですが、担当者IDで課題の取得を絞り込む時にユーザーのIDが必要だったため確認のために取得しました。
※ Backlogのメニュー「課題」の中で担当者を絞り込むと、その人の担当者ID（assignerId）がURLから確認できるようです。
ユーザーのIDの他、名前や権限、Nulab IDなども取得できます。
アイコンはユーザー情報には含まれていないので別途取得する必要があります。
export const getCurrentUser = async (): Promise<User> => {
try {
const user = await backlogApi.get<User>('/users/myself');
return user.data;
} catch (error) {
console.error(error);
throw new Error('ユーザー情報の取得に失敗しました');
}
};
プロジェクト情報を取得する
プロジェクト名の出力のために叩いています。
プロジェクトIDはAPIを叩かなくても、Backlogのプロジェクトのサイドメニュー「プロジェクト管理」に遷移後、URLから確認することができます。
export const getProject = async (projectId: number): Promise<Project> => {
try {
const projects = await backlogApi.get<Project>(`/projects/${projectId}`);
return projects.data;
} catch (error) {
console.error(error);
throw new Error('プロジェクト情報の取得に失敗しました');
}
};
課題一覧を取得する
以下はプロジェクト内の課題の取得です。projectIdをパラメータに渡すことで、そのプロジェクトの課題一覧が取得できます。
countは取得課題数ですが、一度に多く受け取ってもテーブルが見辛くなるので初期値は20件とします。一度に最大100件まで取得できるそうです（参照）
export const getIssues = async ({
projectId,
assigneeId,
count = 20,
offset = 0,
}: GetIssuesOptions): Promise<Issue[]> => {
try {
const issues = await backlogApi.get<Issue[]>('/issues', {
params: {
projectId: [projectId],
assigneeId: [assigneeId],
count,
offset,
},
});
return issues.data;
} catch (error) {
console.error(error);
throw new Error('課題一覧の情報の取得に失敗しました');
}
};
取得した課題はテーブルコンポーネントに出力させます。課題の詳細も取得できるので、せっかくなので表示させたく、行ごとにアコーディオンになっているテーブルを使用しています（長いので省略しますがこちらを使用しました）
最終的な成果物
以下はキャプチャのためにダミーデータを出力させていますが、実際はBacklogの課題情報が出力されています。
かなりシンプルですが、以下の機能を持ちます。
- 「プロジェクトID」を入力して、そのプロジェクトの課題一覧を取得
- 担当者で絞り込みたい場合は「担当ユーザーID」（数字）にユーザーのIDを入力
これだけでも課題ごと、ある程度全体的な工数を把握できるため、今後も活用しつつ改善していきたいです。
もっと改善できるところ
- 工数入力した課題の担当者がずっと自分とは限らない
- 自分自身がずっと課題を持っていることは少なく、処理済みとなった時点でプロジェクトの責任者へ担当を変更することが多いので、担当が自分だけの課題を取得しても正確な情報が得られない
- 取得の対象をプロジェクト責任者+自分としていても、他のメンバーが工数を入力してプロジェクトの責任者に担当を変更した場合、その数値も混ざってしまう
- 自分が一度でも担当になった課題の絞り込みが必要？
- 一度に全て課題化がされて、すべて工数入力をしないと全体の工数の把握が難しい
- 担当者の絞り込みは複数人で絞り込めるようにしたい
- 現状、20件の課題に記入されている工数の合計しか取得できていないので、その月の課題の工数の合計を取得したい（ひと月なら最大取得件数の100件は超えないはず…）
色々と改善点はありますが、はじめの一歩は踏み出せたと思うので次に活かせられればと思います！
Discussion