この記事は、Laravel+Vue+Vue-Router+Vuexを使って、iphone標準リマインダーのようなTODOアプリを作ってみたの後編です。
前編の作成背景やアプリ概要は以下から。
【Laravel + Vue + Vue Router + Vuex】iphone標準のリマインダーみたいなTODOアプリをSPAとして作ってみた ①作成背景とアプリ概要
■開発環境
開発環境、使用ツールのバージョンは以下の通りです。
| OS | PHP | Laravel | Node | npm | Vue.js | Vuex | Vue-router | jQuery |
|---|---|---|---|---|---|---|---|---|
| windows10 | 7.4 | 8.83 | 18.0 | 8.6.0 | 2.6 | 3.2.1 | 3.5.4 | 3.6.0 |
■インフラ構築
インフラは以下の通りです。
- Apache
- MySQL
- AWS
- VPC
- EC2
- RDS
- Route53
- ALB
- ACM
- IAM
- S3
■データベース設計
データベースはmySQLを使用しました。設計は以下の通りです。
■作成期間
・開発期間：2022年6月～2022年9月
・開発時間：約270時間
■アプリ搭載機能
アプリのGIFは以下のような感じです。
以下の機能をSPAで作成しました。
・新規ユーザー登録機能
・ログイン・ログアウト機能
・パスワードリマインダー機能
・アプリ退会機能
・アカウント情報変更機能
・リスト作成・編集・削除機能
・アイコンの色を変更できる機能
・カテゴリー（リストの子要素）作成・編集・削除機能
・アイコンの色を変更できる機能
・TODO追加機能
・メモ欄で詳細を記述できる機能
・リスト・カテゴリーを選択できる機能
・日付・時間を選択できる機能
・自動でTODOを繰り返しできる機能
・GoogleMApと連携した場所追加機能
・AWS S3と連携した画像アップロード・取得機能
・優先度追加機能
・TODO表示
・全てのTODO表示機能
・今日のTODO表示機能
・期限付きTODO表示機能
・期限切れTODO表示機能
・TODOの並び替え機能
・実行済みTODOの表示切り替え機能
・スワイプ機能（スマートフォン・タブレット）
・右スワイプでTODOピン止め機能
・左スワイプで、TODOの詳細・編集・削除機能
■開発時にこだわった点・今後の課題や改善点
1.ユーザビリティ
①処理速度
API通信の回数を減らす、または通信タイミングを分散し、ページ表示時間を可能な限り短縮させるようにこだわりました。具体的には、TODOやリスト、カテゴリーといった各種データは、テーブルごとに一度のみ取得し、取得したデータをフロントエンド側で処理しなおし、表示させるといった工夫を行い、都度都度API通信を行わないように工夫しました。その結果、API通信に関しては、初回表示時の各種取得・更新・新規追加時のPOST送信および追加更新後の新規データ取得のみとなり、ページ負荷の軽減につながりました
SPAにすることによって、画面の一部分のみの更新を可能とし、URL遷移時の再読み込みなどのロスタイムを減らし、ユーザビリティの向上に努めました。
②操作性
ラインと同様の右フリックでピン止め、左フリックで編集・削除を実装し、操作性がメジャーなアプリと同様になるように配慮しました。
次に、アニメーションとして、iphoneリマインダーを参考に、fade、bottom-up、sliderightの3アニメーションを実装。3種類に限定することにより、アニメーション過多で逆にユーザビリティが下がらないように配慮しました。アニメーション自体もモダンなアプリのよくあるアニメーションに近づけることによって、操作性の違和感を軽減することに努めました。
最後にTODO追加・リスト追加・カテゴリー追加については、バリデーションエラー（required等）の際にエラーメッセージを画面上に表示させるのではなく、バリデーションエラーの場合はフロントエンド側で、項目追加ができないようにCSSを動的に制御することによって、不必要なエラーを抑制するように実装しました。
今後の課題として、TODO追加・編集時の画像データが指定のサイズ以上の場合、画面でバリデーションエラーが表示されるようになっているため、フロントエンド側でファイルサイズを確認し、バリデーションエラーを出さずとも適切なファイルサイズを選択できるように改善していきます。
③画面表示
セッションメッセージの表示は、リスト削除・ログイン・ログアウト・新規登録といった、画面遷移を伴う処理のみに限定しました。処理が完了したかどうか目視で確認できる処理（TODOの編集や追加等）については、セッションを使わないようにすることで、画面ヘッダー部分がセッション表示ばかりにならないように配慮しました。
2.開発段階での工夫
Vue-routerを導入することによって、ラインのようなアプリをイメージし、操作性を高めました。
また、各コンポーネント間のデータのやり取りが複雑化することを想定し、vuexを導入しました。Storeでコンポーネントをまたくデータや、API通信で取得したデータを一括管理することによって、各コンポーネントのデータのやり取りを最小限にしました。
セキュリティ面では、csrf対策としてxrsfトークンを発行できるようにし、セキュリティ対策を強化しました。また、他ユーザーのページを開くことができないよう、自分自身のidのもの以外は404ページに遷移するように工夫し、URLへの不正入力も、正しいURL以外は404エラーページに飛ぶようにしました。
Vuexではページ更新時にstoreのデータが保持できない問題に気づきデータ保持用のプラグインを導入。再読み込み時にもデータが保持できるようにしました。
3.開発において難しかった点・振り返り
Vue.jsとLaravelの学習をしたのみで開発を行ったため、vuexやvue-router、axiosの非同期通信等を、各ドキュメントやquitaで一つずつ調べながら実装していった点が難しかったです。特に、当初の想定ではvue-routerを使用するくらいしか想定していなかったため、vuexやaxiosについては開発途中での導入でした。アプリ開発を進めていく中で問題が発生すると、その問題を解決するためのライブラリやプラグインを調べて実装していきました。後から都度都度導入したためプラグイン間の互換関係等が当初調整できず、エラーが出ていたこともありました。
また、vueのみ、laravelのみ、vue+vue-routerのみといった、それぞれ単独の実装についてはインターネット上に情報が数多く存在していたのですが、vue、vuex、vue-router、laravelをすべて組み合わせて実装する情報が主に1～2記事しかなかったため、単独のインターネット上の情報や公式の情報を組み合わせて、自分自身の開発環境であればどうなのか？といったことを常に考えながら開発をしていく点が難しかったです。
しかし、開発をする中で、自分自身で必要な情報をキャッチし、開発を進めていく四苦八苦さは非常に楽しいものでもありました。エラーで悩まされる日々もありましたが、そのエラーを解消したときの爽快感や、自分自身で考えたアプリが少しずつ形になり、ユーザーに新たな価値を提供できる可能性があることに、プログラミングの無限の可能性を感じることができました。
4.今後の開発予定について
今後の開発予定は以下の通りです。
よりユーザーにとって使いやすいアプリを追求したいと考えています。今後の開発に必要なスキルや技術についてはわからない点もあるため、都度都度調べながら実装していきます。
①TODOやリスト、カテゴリーを自由に移動できる機能の追加
現状では、TODOの並び替えを指定順で行えるだけのため、ユーザー自身の好きな順番で配置できるよう機能を追加していきます。
②他ユーザーとの友達・グループ機能およびリスト共有機能
TODOアプリ内で、友達やグループを作成できる機能を追加していく予定です。LINEの友達やグループのようなイメージです。また、友達やグループの中で、作成したリストを共有して、複数人で進捗管理を行えるように開発していきたいです。
③トーク機能の追加
①②を実装後に、最終的にはトーク機能を実装し、複数人によるTODO管理とその進捗等を話すことができるトークルームを両方とも実装していきたいです。その結果、個人でのTODO管理、複数人でのTODO管理とその複数人でのオンラインでのコミュニケーションをとることができるようになり、非常に便利なアプリになるのではと考えています。