Fjord Boot Campの卒業生が作成したサービスの技術スタックデータベースをリリースしました🎄
これは、「フィヨルドブートキャンプ Part 2 Advent Calendar 2022」25日目の記事です。
昨日は、Part 1がshu91327さんの質問しながら出来るようにしていく、 Part 2がsaeyamaさんのRails/Vue 編集時に画像をD&Dで入れ替えした時のActive Storageの保存方法 でした。
今年のアドベントカレンダーは以下になります。
フィヨルドブートキャンプ Part 1 Advent Calendar 2022 - Adventar
フィヨルドブートキャンプ Part 2 Advent Calendar 2022 - Adventar
目次
- はじめに
- サービス概要
- 機能紹介
- 開発のきっかけ
- どう解決するか
- 技術スタックの類似サービス
- FBC Stackの技術スタック
- FBC Stackのシステム構成
- FBC Stackに掲載している自作サービス
- 開発をした上での気づき
- どう使って欲しいか
- 今後の展望
- おわりに
はじめに
mhと申します。 Fjord Boot Camp(以下、FBC*1と記載)で2021年の6月頃に卒業し、早いもので卒業してから1年半くらい経ちました。 卒業した時にEvent Follow という技術イベント発見というサービスを開発し、Heroku上で今も元気に 動いています。よろしければ、ぜひ使ってみてください😄。
リリース時のブログ：「EVENT FOLLOW」という技術イベント発見サービスをリリースしました！
今回は FBCの卒業生が作成したサービスの技術スタックデータベースのサービスをリリースしましたので、そのサービスのご紹介になります。 特に卒業制作のサービスというわけではなく、ちょうど解決したいFBC関連のサービスがあったので、 このアドベントカレンダーをリリース日に設定し、開発を行いました。
サービス概要
FBC Stackは、FBC卒業生が自作したサービスの技術スタックの情報が有効に蓄積されていない問題を解決したい、FBC卒業生の自作サービスの技術スタックデータベースです。ユーザーは 卒業生の自作サービスの技術スタックを見ることができ、卒業生のWebサービス一覧のドキュメントから個別に自作サービスを発見することとは違い、採用している技術スタックのツールから卒業生の自作サービスを発見できるのが特徴です。
ここでは、卒業生のWebサービス一覧のリンクを参照していますが、実際はFBCのサービス内に同様のドキュメントがあります。 こちらのドキュメントには卒業生が卒業式の時に発表したサービスのデモ動画があります。
機能紹介
サービスでできる機能は以下になります。
- トップ画面で卒業生のサービス一覧を表示
- サービス詳細画面でサービスの技術スタックを表示
- みんなのツールを選択し、各サービスで採用されているツールを一覧表示（現在はアルファベット順）
- ツール一覧をキーワードで検索
- ツール詳細画面でツールを採用しているサービスを一覧表示
卒業生のサービス一覧画面
表示するサービスの数がそこまで多くないため、全てのサービスを表示しています。
サービスの詳細画面
サービスに関連するリンクや技術スタックをカテゴリ別に表示しています。
ツールを採用しているサービス一覧
技術スタック内のツールを選択すると、ツールを採用しているサービス一覧を表示します。ここでは、Next.jsを選択した画面になります。
ツール一覧画面
ツール一覧画面では、現在サービスで採用されているツールを全て一覧表示しています。
ツールの検索画面
ツールのキーワードで検索することで、ツールを絞り込みます。
Amazon EC2を採用しているサービス一覧
ツールの検索画面でAmazonを検索し、Amazon EC2を選択すると採用しているサービス一覧を表示します。
開発のきっかけ
開発背景として２点あります。
1点目
最近は、自作サービスの開発に採用する技術が高度化されてきたなぁと耳にする機会が増えてきました。 通常は、卒業生の数も月に2名くらいでしたが、2022年の3月は7人、4月は6人といっきに増えた時期があり、 このあたりから、自作サービスの技術スタックもモダンな構成が増えてきた印象があります。
他に、最近FBCのDiscordやミートアップとかで、
- 自作サービスの技術レベルが高くなってきている。
- 自作サービスでReact/Next.jsを採用する人が増えてる。
- プラクティスで学んだ技術以外の採用例が増えている。
- OpenAPIを採用している人が他にいたけどだれだっけ？
- ○○さんはChakra UIを採用してましたっけ？
といった声も聞こえてきます。 ただ、こういった感覚値は、自作サービス関連の情報を積極的に追っていてないと 把握することが難しいとも感じていました。
FBCの自作サービスの情報というのは、
- 自作サービスの開発ミーティング(Discord上)
- 自作サービスのDiscord チャンネル
- 自作サービス関連の日報
- 自作サービス関連の開発ドキュメント
- 自作サービス関連のQ&A
- 自作サービスのプラクティスの提出物
- 卒業生のWebサービス一覧のドキュメント (GitHubのリポジトリ、リリースブログ、サービスURL、卒業式のデモ動画)
などを見たり、参加することで知ることができるかと思いますが 、情報がバラバラに点在しているため、自作サービス関連のプラクティスに携わっていないとなかなか厳しいとも感じます。
2点目
Kaigi on Rails で、komagataさんが卒業生の自作サービスをみんなに知って欲しいと紹介するLTを見ました。
このLTを見て、どうやったら、サービスを知ってもらえるかを考えたことがきっかけでもあります。 LTの最後に紹介されている卒業生のサービス一覧は、FBCのサービス内のドキュメントの方の自称メンテナー（笑）として度々更新しているので多少愛着があります。このドキュメントをメンテナンスしていく中で、今後卒業生が増え、自作サービスも蓄積されていくので、その卒業生のサービス一覧のデータを有効に活用していけないかと感じました。
この２点を雑にまとめると、
- 卒業生の自作サービスの技術情報を蓄積することで、自作サービスのトレンドを把握するとともに、 FBC内外の人にも自作サービスを知ってもらう情報を提供できるのではないかと考えた次第です。
どう解決するか
技術情報の蓄積として着目したのが、サービスのリリースブログの広報でもよく使われる技術スタックの情報になります。 FBCでも、リリースブログの他、卒業式のデモの時やGitHubリポジトリに必ずといって記載される内容となっています。
現在は卒業生のWebサービス一覧でGitHubリポジトリやサービスURL、リリースブログなどは一覧で網羅されていますが、 自作サービス間でのつながり（共通点）を見つけることはできません。
そこで、サービスの技術スタックのツールを登録することで、採用しているツール経由でサービスを見つけやすくなると考えました。
FBC内の在校生や卒業生の得られる期待としては、
- 自分の知らない新しいツールを発見できる。
- 自分が検討してい技術スタックに近しいサービス（卒業生）を探せる。
- 検索したツールを使っているサービスを探せる。
例えば、Firebase Authenticationで検索すると、それを使っているサービスを探せます。 ここから、サービスの採用している技術スタックを確認できたり、GitHubのリポジトリのソースコードや FBC内での提出物や日報を見て参考にすることもできるかと思います。
FBC内のメンター（アドバイザー）や運営の方の得られる期待としては、
- 在校生の自作サービスの技術のトレンドを把握できる。
- 誰がどういったツールを使っているかを知ることで、他の生徒にアドバイスができる。
FBC外のスクールを検討している方の得られる期待としては、
- どういったサービスを作れるようになるのか知ることができる。
- どういった技術を使っているのか知ることができる。
FBC外の企業の採用担当の方の得られる期待としては、
- どういった技術を使ってサービスを作ったかを把握できる。
- FBCの技術トレンドを把握できる。
技術スタックの類似サービス
もちろん、技術スタックを調査する類似サービスはいくつか存在します。
技術スタックを調査できる同様のサービスとしては、StackShareやWappalyzarとwhat we useなどのサービスが存在してます。 ただ、これらのサービスは企業や任意のサイトで採用されている技術スタックを調査するのに使われています。
StackShareはサイトや公開リポジトリの技術スタックを登録できますが、ツールのキーワードから横串で採用しているサイトやリポジトリは検索できません。 URLを入力すると、技術スタックのツールを自動スキャンしてくれますが、使った感じでは精度は高くない印象です。
WappanalyzerはChrome拡張で、訪問したサイトでChrome拡張機能を使うと、サイトで採用しているツール情報をバージョン付きで表示してくれます。 ただし、単体でサイトの技術スタックの情報を表示するだけで、登録したサイトや公開リポジトリの技術スタックを横串で検索することはできません。
what we useは企業の技術スタックデータベースではありますが、ツールのキーワードからツールを採用している 企業を横串で検索できることが本サービスと類似しています。ただ、企業版なので、卒業生の技術スタックデータベースとしては活用できません。
FBC Stackの技術スタック
- フロントエンド
- TypeScript 4.9.3
- ChakraUI 2.4.3
- Next.js 13.0.7
- React 18.2.0
- react-markdown 8.0.4
- Linter/Formatter
- ESLint 8.30.0
- Prettier 2.8.1
- テスト
- Cypress 12.2.0
- インフラ
- Vercel
- ストレージ
- CI/CD
- GitHub Actions
サービスの技術スタックの情報やツール情報を登録したMarkdownとツールのロゴデータをGitHubをストレージとして管理しています。
卒業生の自作サービスの登録頻度は高くなく静的サイトでサービスを提供できるため、SSGで静的サイトを生成でき、学習コストが低いNext.jsを採用しました。 また、Next.jsの公式のチュートリアルがYAML Front Matterのメタデータを埋め込んだMarkdownを使ってブログサイトの構築しており、このメタデータで技術スタックの情報をMarkdownに埋め込む方法を思いつきました。
Chakra UIは、UIコンポーネントがあり、StackとHStackといったコンポーネントがあります。自分はiOSアプリ開発をやっていたので、 これらのコンポーネントがUIStackViewやSwiftUIのVStackやHStackのレイアウト方法と似てたこともあり、馴染みやすいと感じ、即採用しました。あと、Chakra UIのチャクラは、漫画のNARTOのチャクラが由来らしく、親しみを感じたことも 後付けながら理由になります(笑)
FBC Stackのシステム構成
- サービスの技術スタックのMarkdownやロゴデータを登録します。
- GitHubにプッシュします。
- GitHubでPRを作ります。この時点でGitHub ActionsのビルドとVercelのプレビューデプロイが行われます。
- PRがマージされたらVercelの本番環境にデプロイされます。
FBC Stackに掲載している自作サービス
現在掲載している自作サービスは以下の基準で掲載しています。
- リリースブログで広報して、自作サービスをリリース済み
→ これは、卒業生のリリースブログの広報を優先したいからです。
- 卒業生がスクールで作成したサービスと異なる自作サービス
→ 例えば、自分が今回作ったFBC Stackのサービスです。
- FBCのBootcampアプリ
→ これは、卒業生全員がチーム開発で実質開発に携わったサービスなので、Bootcampアプリの技術スタックを登録しています。
開発をした上での気づき
Bootcampアプリの開発は、1年半前にチーム開発で携わっていましたが、Bootcampアプリの技術スタックを調査するなかで、ReactやDockerがされているなど、使用されている技術自体の変遷を感じ取ることができました。現在は、VueとReactが混在しているようで、Vue.jsからReactに置き換えが進んでいることを感じ取れましたし、こういった技術スタックの変遷も、バージョン管理してみれると過去の経緯も把握しやすくなるかと思いました。
自作サービスに自作gemを組み込んでいる人がいることを知りませんでした。
自作サービスの採用している技術スタックのツールから、自作サービスのシステム構成がある程度把握できたように思いました。
サービスのデプロイ先もHerokuの無料化のアナウンス以降、別のサービスをデプロイ先に選定している事例が増えてきています。
- フロントエンドはVercel
- バックエンドは、Railway、Fly.io
Herokuで運営していた自作サービスが結構クローズされています。
- 知らないLinterとか知ることができました。
- Next.jsの採用が増えてきていますが、Nuxt.jsを採用した自作サービスが自分しかいなかったです。
どう使って欲しいか
主に技術選定する際に、サービスや新しいツールを知るきっかけになると思います。 また、FBCの人は使っているツールからサービスを知ることで、サービスを開発した人の日報や提出物などをみたり、開発した人とコンタクトするなど、コミュニケーションが発生すると思います。その他、自作サービスの開発にハマった際に、同様のツールを使っているサービスのリポジトリを参考にすると、解決の際のヒントになるかもしれません。
今後の展望
検討している内容を箇条書きで列挙します。
技術スタックのツールだけでなく、タグをつけて、サービスを見つけやすくする。 例えば、SPAやMPAの構成のサービスを見つれるようにする。
技術スタックの変遷がわかるように技術スタックのバージョン管理をする。
- ツールのバージョンで使用しているサービスを検索できるようにする。（Vue2を使っているサービス、Vue3を使っているサービス） 例えば、メジャーバージョンで機能が大きく変わるケースもあるので、バージョンでサービスを絞り混むことができるといいケースもあるかともいます。
おわりに
この自作サービスのアイデアが浮かんだのが、Kaigi on Rails 2022の komagataさんのLTを見たのと、what we useという企業の技術スタックデータベースのQiita記事を読んだことが影響していると思います。
その時にアドベントカレンダーの記事としてFBCを卒業してからの2回目の自作サービスのリリースを行おうと考えました。
たしか、11月の後半くらいは、Next.jsのチュートリアルを触っていて、YAML Front MatterというMarkdwonのメタデータの埋め込みについて知り、12月の初旬はこのメタデータを埋め込んだ技術スタックのデータ構造について技術検証をしていたと思います。
実際に開発を始めたのは、2週間前くらいで、Next.jsのチュートリアルのサンプルコードを拡張していく形で、プロトタイプ的に試行錯誤しながら実装しました。 この時にチュートリアルのサンプルコードのリポジトリのまま実装していたので、一旦動作する形になった1週間前に、新しいリポジトリに新規プロジェクトとしてコードをプッシュしました。そのため、リポジトリの初期コミットが結構でかいサイズになっています。
新しいリポジトリでの初期コミット以降は、Issueを作って、PRベースで開発を行うようにしました。このIssueを作って、PRベースで開発するようになってから、テンポよく作業が進んだので、開発の最初期にきちんとプロジェクトの準備をすべきだったなと反省も感じています。
FBCの自作サービスの開発の時と比べると雑に進めてしまいましたが、2回目の自作サービスは短期間でもありますが目標を定めることで 楽しく開発できたように思います。
ということで、長くなりましたが、この自作サービスがFBC内外の方に少しでもお役に立てれば幸いです！ あと、メリークリスマス🎄
