知人エンジニアから実際の案件としてReact.js + Node.js + Express + MongoDB組み合わせ(MERN stack)でSPAができることを知り、何か作って見たいと思っていた。 わたし自信が参加していたコーチングのmeetupで、振り返り内容の記録ツールとしてGoogleスプレッドシートを使用していたため、Webアプリ化してデータベースに保存して見たいと思った。
コーチングmeetupでの振り返りを記録し、いつでも見返すことができるアプリ。 コーチはメンバーの記録を見ることができる。
ユーザーが使いやすいReflection App（振り返りアプリ）
- ユーザーmeetupでの振り返りの内容をいつでもさっと確認できるように、ログイン後のホーム画面はユーザーコンテンツ画面（振り返り一覧）にした。
- クライアントの雰囲気に合わせて、シンプルで新鮮な印象を与えるNeumorphismデザインを採用した。
Chrome 89.0.4389.114
- React.js 16.14.0
- Node.js 14.16.0
- MongoDB 4.4.0
- mongoose 5.11.13
- 新規登録機能
- ログイン機能
- 振り返り内容の記録機能
- 振り返り内容の一覧表示機能
- ユーザー情報表示機能
- 権限ごとの画面表示機能
- Reflection App - ホーム画面
| HTTP | url | 意味 |
|---|---|---|
| POST | /api/auth/signup | ユーザー登録 |
| POST | /api/auth/signin | ログイン |
| post | /api/create | 振り返り内容の登録 |
| GET | /api/test/all | パブリックコンテンツの取得 |
| GET | /api/test/user | ユーザーコンテンツの取得 |
| GET | /api/test/mod | モデレーターコンテンツの取得 |
| GET | /api/test/admin | 管理者コンテンツの取得 |
| GET | /api/reflections | 振り返り内容の取得 |
| HTTP | url | 意味 |
|---|---|---|
| GET | /signup | ユーザー登録画面 |
| GET | /login | ログイン画面 |
| GET | /, /public | パブリックコンテンツ画面 |
| GET | /, /user | ユーザーコンテンツ画面 |
| GET | /mod | モデレーターコンテンツ画面 |
| GET | /admin | 管理者コンテンツ画面 |
| GET | /add | 振り返り内容も登録画面 |
| GET | /profile | ユーザー情報表示画面 |
| Users Collection | Role Collection | Reflection collection |
|---|---|---|
| name | name | user_id |
| first_condition | ||
| password | realization | |
| roles | action | |
| last_condition |
今回作ったアプリは、私が学びたい技術の組み合わせでチュートリアルを進めながら実装したため、実用的なものにならなかった。 技術はクライアントの欲しい機能や要望を実装するために最適な物を選ぶことが大切だと思うので、これからもアンテナを張っていろんな技術に触れていこうと思う。
- チュートリアルを進めながら、気になる用語を調べてブログにまとめていくことで理解を深めていった。
- npmコマンドによるモジュールなどのインストール、require・inportして使用する流れ
- サーバーサイドでデータベースとのやりとりを行い、クライアントサイドではJSONデータのを受け取って必要箇所のみを変更するSPA開発の仕組み
- MongoDBのコマンド操作、SQLデータベースと違い、ドキュメント型データベースは事前に列名やデータタイプを設定する必要がないこと
- Promiseなど非同期処理などJavascriptの基礎、React・Nodeの基礎の理解がまだまだ薄かった。「現代のJavascriptチュートリアル」にそって習得する。
- ログイン機能を実装するにあたって、実装したことのなかったJWTを選択したが、クライアントサイドのローカルストレージにトークンを保存する方法では、XSSで悪意のあるJSに情報を抜き取られてしまう恐れがあり、セキュリティを強化するためには、「Access Token および Refresh Token」の概念の理解が必要である。