個人開発プロジェクト「IT育成カリキュラム（仮）」プロトタイプ成果物を公開します

## 概要

僕が参加しているオンラインサロン「[commew](https://commew.net/)」でのやり取りから端を発し、２０２２年２月から一人称で企画段階から始めたプロジェクト「IT育成カリキュラム（仮）」がやっとプロトタイプのデプロイまで漕ぎ着けることができたので公開します。

https://prj-portfolio-manager.herokuapp.com/

※利用にはログインが必要です。悪用を防ぐため現在サロンのレビュー会でのみアカウントを共有しています。
実際の動きを見たい方は[Twitter](https://twitter.com/XI_no_me)のDMよりご連絡ください。

本記事ではこれまでの動きやフィードバック、これからの展望などを技術的な観点を主体にお話しさせていただければと思います。

またNoteでも技術分野に限らない記事を投稿しているので、合わせてご覧ください。

- 企画当初の思いは[こちら](https://note.com/npower_creative/n/n48dc5182423b)
- プロジェクト全体の振り返りは [こちら](https://note.com/npower_creative/n/nb57ec32cc871)


### 成果物一覧

これまでに作成したドキュメントの内訳と使用ツールを参考までに共有です。
こちらも限定公開とし、基本クローズドとさせていただきます。

- 企画書（Googleスライド）
    - プロジェクトのコンセプト
    - 現状分析
    - 目的と全体像
    - 具体的な内容
- 要件定義書（Googleスプレッドシート）
    - ユーザーストーリー
- 基本設計書（Googleスプレッドシート）
    - 技術選定
    - ページ構成
- ER図（draw.io）
- DB関連定義書（draw.io）
- ワイヤーフレーム（Adobe XD）


### 使用技術

- フロント: [Vue.js](https://jp.vuejs.org/index.html)
    - パッケージング: [Vue CLI](https://cli.vuejs.org/)
    - UIライブラリ: [Vuetify](https://vuetifyjs.com/ja/)
    - テスティング: ESLint + Prettier
- インフラ・DB： [Firebase](https://firebase.google.com/?hl=ja)
    - [Firebase Authentication](https://firebase.google.com/docs/auth?hl=ja)
    - [Firestore](https://firebase.google.com/docs/firestore/quickstart?hl=ja)



### 画面構成
キャプチャベースで各画面を紹介します。

##### ログイン画面
![スクリーンショット 2022-05-24 10.06.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/76115/8e62a677-290a-8d53-3989-d52488ba1cdb.png)

ユーザーID、パスワードを入力してログイン。
ユーザー認証機能は今回 `Firebase Authentication` を利用しました。
ただ機能次第では他のテーブルと同様、`Firestore` でも可能かと思います。

- 実装できたこと
    - メールアドレスを使用してのログイン機能
- 実装できなかったこと
    - Auth0を使用してのログイン機能：今後検討予定

##### ダッシュボード
![スクリーンショット 2022-05-24 10.43.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/76115/b6de6721-dc4d-e29d-da51-53c9d7b59617.png)

`Vuetify` のスライドを使用したコンテンツを提供予定です。
今フェーズは基本的な機能の実装を目標にしたためPENDしましたが、ログインユーザーが参加しているプロジェクトや活動記録などの最新ログを取得するコンテンツも想定しています。


##### ポートフォリオ
![スクリーンショット 2022-05-24 11.01.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/76115/ef500cc4-c07f-c258-7030-6dbe906e2047.png)
![スクリーンショット 2022-05-24 11.01.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/76115/12f059e3-7ad1-fcfc-2cde-056318f5bec7.png)

ログインユーザーが他ユーザーや外部にアウトプットする用のポートフォリオのビュー画面。
基本情報や参加プロジェクトの閲覧・編集を行うことができます。
参照データはそれぞれ `Firestore` で定義しています。


##### ユーザー基本情報変更
![スクリーンショット 2022-05-24 11.04.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/76115/7dc0696d-327b-83c9-feb7-b26e67dc1777.png)

ポートフォリオで閲覧するユーザーステータスの編集画面。
基本的な自己紹介やスキルセット、将来のビジョンなど。


##### プロジェクト管理
![スクリーンショット 2022-05-24 11.06.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/76115/85a9c392-6e77-6c66-3285-fd47baccefd5.png)

ユーザーが参加しているプロジェクトの一覧画面。
現在は実装していませんが、リーダーやメンバーなどの権限設定を設け各権限に応じた表示処理などを行う想定です。



##### プロジェクト検索
![スクリーンショット 2022-05-24 11.09.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/76115/b342ea1b-5fed-a98b-4b17-684de09409fc.png)

Firebaseでの実装で最も悔やまれるのがこの画面。
本来は全文検索や特定条件下でのフィルタリング検索を実装したかったのですが、調べるうちに[Firebase本来の機能だけでは難しい](https://firebase.google.com/docs/firestore/solutions/search?hl=ja&provider=elastic)ことが判明。
（外部の有償ライブラリが必要とのこと。学習・運用コストの面から断念）
トライアンドエラーのスタンスだったので失敗とは思っていませんが、バックエンド側の環境を見直す機会になりました。



### 今後の展望
上述と重複する部分もありますが、今回の実装で意識したのは以下の点です。

- フロント：現状の持っている技術スキル＋αでできる範囲
- バックエンド：個人的にブランクは大きいものの、スピード感を持ってやりたい
    - イメージできる範囲で実装して、可能・不可能の領域を判断したい

次以降のフェーズで見直す項目（特にバックエンド、インフラ）もありますが、「まずは根本的な機能を実装する」という目標についてはクリアできたかなという実感もありひとまず安心できたという印象です。

とは言え時間やコストも考えると一人称でできる範囲は限られているので、今後はスタートアップや起業系のコミュニティに成果物を展開し、有志の方を募って複数人でのプロジェクトにシフトしていくなど個人開発から起業に近いスタンスにシフトしていければと思っています。
これまでの経験則をもとにできる限りのアウトプットを続きていきたいと思うので、よろしくお願いします！！