【フィヨルドブートキャンプ】チーム開発で、自分が欲しい機能を自分で作れてとても楽しかった

プログラミングスクールの フィヨルドブートキャンプ (以下、FBC)で学習中のsugiweです。

少し前の話になりますが、プラクティス「チーム開発」を修了しました。
(7月には修了していたのですがそこから自作サービス開発に入り、夢中になっている間に数ヶ月経ってしまいました汗)

今回はチーム開発の軽い振り返りと、自分が欲しい機能を自分で作ることができてとても楽しかったという話を書きます。

関連する話で、【フィヨルドブートキャンプ】チーム開発のgood first issueでモブプロをした話 という記事もありますので、よろしければご覧ください🙏

sugiwe.hatenablog.jp

🔖 目次

🧑‍🤝‍🧑 チーム開発とは?

一般用語で「チーム開発」と言えば文字通りチームで行う開発のことですが、ここでは、FBC終盤で取り組むプラクティス(課題)の1つを指します。FBC受講生が学習のために普段使っているEラーニング用Webアプリケーションの開発に参加し、自分たちが使っているアプリを自分たちで開発していきます。

github.com

チーム開発メンバーに加えてもらってからはプロダクトオーナー・スクラムマスターをされているメンターの方にIssueを割り振っていただき、対応していきます。各Issueには難易度に応じたポイントが割り振られていて、合計20ポイントのIssueを対応完了したらプラクティス修了、となります。

bootcampアプリはFBC入会してから毎日触っているものなので、どんなアプリなのかというのはチーム開発に到達した受講生であればよくわかっており、ずっと使ってきたアプリの開発メンバーに加わることができるというのはとてもエキサイティングだなと思っています😄

💪 「自分でIssueを立てて自分で担当する」ということ

チーム開発において僕が一番楽しかったのはこれで、このブログ記事で書きたかったことでもあります。

担当するIssueは、チーム開発序盤であればGood First Issueと呼ばれる軽微なIssueや易しめのIssueを割り振ってもらえたり、中盤〜終盤になると少し複雑なIssueや、それまで担当していなかった方向性のIssueを割り振ってもらえたりします。

なので基本的にはメンターさんにお任せでIssueを割り振ってもらうのがスタンダードな流れになりますが、「バックエンド系のIssueを多めにやりたい」とか「JS系をもう少しやりたい」とか、自分がより学びたいIssueを多めに割り振ってもらうような相談もできたりします。

一方、bootcampアプリはOSSなので誰でもリポジトリ内を見られるし、誰でもIssueを立てることができます。つまり、受講生自身もIssueを立てることができます。

僕はチーム開発に到達するまで数年間もこのbootcampアプリにお世話になっていて、チーム開発で自らそのアプリの開発メンバーに入れることを楽しみにしていました。 特にチーム開発が近づいてきてからは、「どんな機能があると嬉しいかな」「この部分、もっとこうなってると便利だな」といったことを考えながら日々アプリを触っていて、何か思いついたらメモしたり実際にIssueとして起票するようになりました。

そして、自分でIssueを立てて、それを自分で担当させてもらう、ということを多くやらせていただきました。

以下にスクリーンショットを貼ります(文字が小さい)。
現時点で僕が立てたIssueは18個あり、受講生の中では比較的多めなのではないかと思います。(すぐボツになったIssueとかもあります!Issueは立てるのはタダだしデメリットは何もないので、他の受講生の皆さんもガンガン立てることをお勧めします✨)

sugiweが立てたIssue一覧(チーム開発で担当させてもらったものを赤で囲っています)

(sugiweが立てたIssue一覧の GitHubリンク

❤️ 特に気に入っている機能追加3選

ここで、自分でIssueを立てて担当した中で特に気に入っている機能について幾つか紹介します。

企業一覧の各企業の「メンター」「アドバイザー」「現役生」の並びに「卒業生」が欲しい

github.com

bootcampアプリ内には、メンターさん・アドバイザーさんが所属している企業さんや、就職紹介先として提携していただいている企業さんなどを一覧で見られるページがあります。 これまでは、その企業に所属している「メンター」「アドバイザー」「現役生」の人数が表示されていたのですが、ここに「卒業生」も加えられるといいなと思いました。

フィヨルドブートキャンプはプログラミングスクールであり、どの企業でどれくらいの卒業生が活躍されているのかを一覧で見られることはとても価値があると考えました。というか、僕自身がどの企業にどれくらいの卒業生が在籍されているのを見たかったので、このIssueを立てました。

実装としてはとてもシンプルで、もともと卒業生側(というかユーザー側)の持つ情報として所属企業があったので、企業側でその数字をカウントして一覧側で出してあげる、というビューを追加するだけで実現できました。

この機能は今でもたまに自分で使っていて、実装はシンプルでも良い機能を追加できたなぁと思っています😄

現在のページURLをコピーするボタンが欲しい

github.com

僕はスマホでbootcampアプリを開いて他の受講生の日報などをチェックすることも多いです。 他の受講生の日報は自分にとっても学びになることが多く、「このページのURLをメモしておこう」と思うことも多いのですが、スマホ(PWA)でbootcampアプリを開いているとURLバーが出ないのでURLがわからない、という問題がありました。

そこで、URLコピーボタンを用意することでスマホで見ていても手軽に見ているページのURLをコピーできるようにしたいと思って立てたIssueです。

実装としては、レビューを経てJSのイベントリスナーを使って現在開いているページのURLをクリップボードにコピーできるようにしました。

日報提出お祝いメッセージの表示数を拡張したい

github.com

これは完全に自分のために作った機能です笑。

もともと過去に実装されていた機能として、「日報提出で1000回までのキリ番においてお祝いのメッセージを表示させる」というものがありました。コツコツ学習をして毎日日報を提出するなかで、たまにお祝いメッセージが表示されるのはとても嬉しいものです。

しかしこの機能に問題が発生しました。
卒業するにあたって、日報1000回を超える受講生が現れ始めました。僕です。

1000回以降、何もお祝いがなくなるというのが寂しくて、だったら自分で表示数の拡張をしようということでIssueを立てました。

実装としてはこれもシンプルで、上述した1000回目までの表示をするための機能追加の際にお祝いを表示するための回数を定数で定義してくださっていてそこに数字を追加するというのがメインでした。元の実装が非常にシンプルで機能追加しやすかったです。(machidaさんがめっっちゃ良い感じのお祝い画像をたくさん用意してくれました!!)

そして6月にめでたく、実装した僕自身が日報提出1100回目を迎えて、本番環境で正しく機能していることを確認できました🎉

現在、僕以外にも日報1000回を超える受講生の方が出てきており、1000回目以降もキリ番でお祝いできる機能を追加できて良かったです。

〜〜〜〜〜

まとめてから気づきましたがこの3つは比較的シンプルに実装を進められたIssueだったと思います。進めるにあたって何もわからず数週間止まってしまったり、レビューで色々と修正が必要になったり、機能の一部を切り出してnpmとして公開したり、他にも大変だったIssueはたくさんあるのですが、ここでは紹介を割愛します。

🧑‍💻 プロダクト志向?

プロダクト志向・技術志向という言葉があります。
ものすごくざっくり言えば、「プロダクトを良くすることが第一目的で、その手段として技術を使って開発したいと考える人」か「プロダクトそのものというよりは、プログラミングの技術に対する興味が強い人」という違いになると思います。

明確にどちらか1つに決められるものでもないし、ましてやどちらが良いとかいう話でもないと思っていますが、チーム開発を経て、自分は「ユーザーとしてこのプロダクトがどうなっていると嬉しいか、どういう機能があると便利か」といったことを起点にしてIssueを立てるのが好きだなと感じましたし、それを自分自身で担当し実現できることにこの上ない喜びを感じるなと思いました。

技術を疎かにするつもりはありませんし、むしろやればやるほどもっと知識・スキルを高めたい気持ちが膨らんでいますが、根っこの部分では「プロダクトを良くしたい」という感情があることを自覚できたのは、チーム開発で得た大きな収穫だなと感じています。

📝 担当PRとレビューさせていただいたPR

最後におまけとして、僕が担当したIssue(PR)とレビューさせていただいたIssue(PR)の一覧を紹介します。

担当したIssueとそのPull Request

Point Issue PR
1 PodCastのリンクがフッターに欲しい #8093 #8182
2 企業一覧の各企業の「メンター」「アドバイザー」「現役生」の並びに「卒業生」が欲しい #7872 #8189
2 現在のページURLをコピーするボタンが欲しい #8179 #8219
2 日報提出お祝いメッセージの表示数を拡張したい #8192 #8232
1 ユーザー一覧のタグ別ページで表示されるタグごとの人数と、
タグごとのページで表示される人数が異なっている #8571
#8587
2 「近日開催のイベント」で、当日の開催時間を過ぎたイベントは非表示になってほしい #8221 #8280
3 Markdownでfigureタグが使えるようにしたい。 #8075 #8545
2 管理画面のユーザー一覧を就職希望と決済方法で絞り込みたい #8440 #8737
3 Flakyなテストを修正する #8550 無し
1 escapeHTML関数内のタイポ(3箇所) #8674 #8696
2 Flakyなテストを1つ修正する #8594 #8844

合計 : 21pt

レビューさせていただいたIssueとそのPull Request

チーム開発の大きな特徴として、メンバー同士の相互レビューがあります。
チーム開発までのプラクティスでは自分が書いたコードに対してメンターさんからレビューをしてもらっていましたが、ここで初めて他の人のコードを読んで自分がレビューをする側になるということになります。これがこのプラクティスのユニークな点で、開発現場に近い経験を積める、とても学びの多いプラクティスだと思います。

Point Issue PR
2 Markdownエディタ内でstyleタグとonloadを実行できないようにしたい #6805 #8450
1 ユーザー個別ページにおけるコメントタブの数値とプロフィールページ内の
コメントカウント数がズレる #7618
#8223
5 管理者ページのお問い合わせ個別にコメントを付けたい。 #7452 #8262
1 現在、休会からの自動退会されるタイミングを6ヶ月にしているが、
それを規約通り3ヶ月に変更したい。 #8267
#8432
3 コースにサマリーというカラムを作成したい。 #8320 #8434
2 Markdown記法の記号でイベント名が始まると、Discord通知でがHTMLが
認識され表示くずれが起きる。まずは、イベントに対応。 #7916
#8199
1 使われていないページ「thanks」を削除する。 #8456 #8519
3 ベストアンサーが決まらないまま一定期間が過ぎたQ&Aを自動的に
クローズする #8086
#8687
2 ユーザー一覧 > 研修生一覧 研修終了の人は非表示したい #8138 #8848
1 ログイン前の画面のフッターにFBCのXアカウントへのリンクを置きたい #8606 #8612
1 給付金対象講座ページの最下部に受講申請のボタンを置きたい #8611 #8652
2 企業ロゴをwebpにする #8710 #8752
3 日報の気分を sad soso happy から、Negative, Neutral, Positive に
変更する。 #8681
#9117

合計 : 27pt

まとめてみたら、担当Issueよりも多くのポイント数のレビューをさせていただいたことがわかりました。
これはプラクティスにかかる時間が長くなればなるほどレビュー依頼される回数も増えがちな性質があるからだと思います。色々な方のPRを見られるのは貴重な勉強のチャンスだと思います!

👋 おわりに

書きたいことは全部上で書いたので以上になりますが、冒頭に紹介した記事【フィヨルドブートキャンプ】チーム開発のgood first issueでモブプロをした話 のほうで、以下のように書いていました。

最後に余談となりますが、僕はチーム開発で「出来るだけ自分で立てたissueを担当する」という裏目標を掲げています。

(※チーム開発ではメンターさんからissueを割り振ってもらい取り組んでいきますが、issueは誰でも自由に立てることができます)

自分が立てたissueを担当するというのはメリット・デメリット両面あると思いますが、個人的には大きなやりがいを感じています。(毎日自分が使っているアプリで自分が欲しいと思った機能を自分で実装できるなんてサイコーだと思いませんか?)これについてはチーム開発のプラクティスが全て終わってから改めて別記事で書きたいと思っています🚀

10ヶ月を経てようやくこの伏線を回収できて、良かったです😄

(「メリット・デメリット両面ある」と書いてるけど、デメリットあったかな?もし仮に全部のIssueを自分で立てたもので担当していたら偏りが出ていたかもしれませんが、結果的に半々くらいになったので、自分で立ててないものでバグ修正やテスト修正、JSのMarkdown関連のIssueなどやらせていただけたので、バランス的にも良かったのではないかと思います)