概要
僕が参加しているオンラインサロン「commew」でのやり取りから端を発し、2022年2月から一人称で企画段階から始めたプロジェクト「IT育成カリキュラム(仮)」がやっとプロトタイプのデプロイまで漕ぎ着けることができたので公開します。
※利用にはログインが必要です。悪用を防ぐため現在サロンのレビュー会でのみアカウントを共有しています。
実際の動きを見たい方はTwitterのDMよりご連絡ください。
本記事ではこれまでの動きやフィードバック、これからの展望などを技術的な観点を主体にお話しさせていただければと思います。
またNoteでも技術分野に限らない記事を投稿しているので、合わせてご覧ください。
成果物一覧
これまでに作成したドキュメントの内訳と使用ツールを参考までに共有です。
こちらも限定公開とし、基本クローズドとさせていただきます。
- 企画書(Googleスライド)
- プロジェクトのコンセプト
- 現状分析
- 目的と全体像
- 具体的な内容
- 要件定義書(Googleスプレッドシート)
- ユーザーストーリー
- 基本設計書(Googleスプレッドシート)
- 技術選定
- ページ構成
- ER図(draw.io)
- DB関連定義書(draw.io)
- ワイヤーフレーム(Adobe XD)
使用技術
画面構成
キャプチャベースで各画面を紹介します。
ログイン画面
ユーザーID、パスワードを入力してログイン。
ユーザー認証機能は今回 Firebase Authentication
を利用しました。
ただ機能次第では他のテーブルと同様、Firestore
でも可能かと思います。
- 実装できたこと
- メールアドレスを使用してのログイン機能
- 実装できなかったこと
- Auth0を使用してのログイン機能:今後検討予定
ダッシュボード
Vuetify
のスライドを使用したコンテンツを提供予定です。
今フェーズは基本的な機能の実装を目標にしたためPENDしましたが、ログインユーザーが参加しているプロジェクトや活動記録などの最新ログを取得するコンテンツも想定しています。
ポートフォリオ
ログインユーザーが他ユーザーや外部にアウトプットする用のポートフォリオのビュー画面。
基本情報や参加プロジェクトの閲覧・編集を行うことができます。
参照データはそれぞれ Firestore
で定義しています。
ユーザー基本情報変更
ポートフォリオで閲覧するユーザーステータスの編集画面。
基本的な自己紹介やスキルセット、将来のビジョンなど。
プロジェクト管理
ユーザーが参加しているプロジェクトの一覧画面。
現在は実装していませんが、リーダーやメンバーなどの権限設定を設け各権限に応じた表示処理などを行う想定です。
プロジェクト検索
Firebaseでの実装で最も悔やまれるのがこの画面。
本来は全文検索や特定条件下でのフィルタリング検索を実装したかったのですが、調べるうちにFirebase本来の機能だけでは難しいことが判明。
(外部の有償ライブラリが必要とのこと。学習・運用コストの面から断念)
トライアンドエラーのスタンスだったので失敗とは思っていませんが、バックエンド側の環境を見直す機会になりました。
今後の展望
上述と重複する部分もありますが、今回の実装で意識したのは以下の点です。
- フロント:現状の持っている技術スキル+αでできる範囲
- バックエンド:個人的にブランクは大きいものの、スピード感を持ってやりたい
- イメージできる範囲で実装して、可能・不可能の領域を判断したい
次以降のフェーズで見直す項目(特にバックエンド、インフラ)もありますが、「まずは根本的な機能を実装する」という目標についてはクリアできたかなという実感もありひとまず安心できたという印象です。
とは言え時間やコストも考えると一人称でできる範囲は限られているので、今後はスタートアップや起業系のコミュニティに成果物を展開し、有志の方を募って複数人でのプロジェクトにシフトしていくなど個人開発から起業に近いスタンスにシフトしていければと思っています。
これまでの経験則をもとにできる限りのアウトプットを続きていきたいと思うので、よろしくお願いします!!