初めてのLaravel+Vue.js

わたしの100のリスト

Laravelや、Vueを勉強中です。
それらのアウトプットを考えていたところ、家族から「シンプルなやることリストが欲しい！」という要望をもらったので、シンプルなToDoアプリを作成しました。

その時の制作日誌として、学びと反省点をまとめます。
今後学ぶ人たちのヒントになればと思います。

公開URL
https://wishlist100.herokuapp.com

背景、目的

市場には多くのToDoアプリがあるが、多くは短期的なToDoをこなすことを目的としている。

人生では長期的な目標を成し遂げることがとても重要であり、そのような人生でやりたいことに焦点を当てたToDoアプリ「私の100のリスト」を作成した。

類似アプリとの差別化

すでに本アプリのような長期的な目標、夢をリスト化するアプリはあるが、リストを複数作れたり、いくつも追加できたりして本当に重要なものが明確になりにくい。

そこで、本アプリではリストに登録できる項目は100個までとした。

また、やりたいことと、すでにやったことを別々に表示して、やりたいことに集中できるように、またやったことは歴史として振り返られるようにした。

スペック

• 言語

  • PHP 7.3
  • JavaScript

• フレームワーク

  • Laravel 5.8.38
  • Vue.js 2.5.17

• サーバ

  • heroku

開発環境

• MacBook Air
• Homestead
• VSCode

機能一覧

• ユーザー登録
• アカウント編集
• 退会
• ログイン
• ログアウト
• やりたいこと一覧表示
• やったこと一覧表示
• カテゴリ別表示
• やりたいこと作成
• やりたいこと編集
• やりたいこと削除
• 達成、未達成の切り替え

機能詳細

• ユーザー登録
  • ユーザー名、Email、パスワードによりユーザーを登録する。
• アカウント編集
  • ユーザー設定から、ユーザー名、Email、パスワードを変更する。
• 退会
  • ユーザー設定から、退会ボタンの押下によりアラートを出し、OKであれば退会する。
  • 退会処理後は、トップページへ遷移する。
• ログイン
  • ログイン画面でEmailとパスワードを入力しログインボタンの押下によりログインする。
• ログアウト
  • ログアウトボタンの押下によりログアウトする。
• やりたいこと一覧表示
  • やりたいことのリストを表示する。
  • 各項目には、カテゴリアイコン、内容、達成ボタン、登録日時を表示する。
  • 達成ボタンを押すと一覧から除外され、やったことリストに移動する。
• やったことリスト
  • 達成したことをリストで表示する
  • 各項目には、カテゴリアイコン、内容、達成日時を表示する。
• やりたいこと作成
  • 入力エリアにやりたいことを入力、カテゴリ一覧からアイコンを選択、登録ボタンの押下により、一覧へ追加する。
  • やりたいことが空で登録された場合、エラーを表示する。
  • やりたいことは30文字以内で入力する。
• やりたいこと編集
  • やりたいことを押下により、やりたいこと、カテゴリを編集できる。
  • 変更ボタンの押下により、編集を終了し一覧を更新する。
• やりたいこと削除
  • やりたいことを押下により、削除ボタンを表示する。
  • 削除ボタンの押下により、削除確認のアラートを出す。OKであれば一覧から削除する。
• 達成、未達成の切り替え
  • 各やりたいことの達成ボタンを押下により、やったこと一覧へ移動する。
  • やったこと一覧において、Undoボタンの押下により、やりたいこと一覧へ移動する。

DB設計

• Usersテーブル・・・LaravelのAuthで作成されたテーブルをそのまま採用。
  • id, name, email, email_verified_at, password, remember_token
• Wishesテーブル
  • id, user_id
• Itemsテーブル
  • id, list_id, category_id, text, done_flg
• Categoriesテーブル
  • id, name

Users:Wishes = 1:1
Wishes:Items = 1:多
Items:Categories = 1:1

躓いた点、学び

1. bladeテンプレートでいくかVue.jsのコンポーネントでいくか悩んで手戻り発生

リストの表示、アイテムの追加、切り替え、削除などは、ページ遷移なしでSPA風に作った。

ただ、どこからどこまでシングルページのアプリとするか、できるところだけやってみるか、当初からどうするか迷っていた。

まずはbladeテンプレートで作ってみようという考えで作って、「モーダルで操作するならページ遷移しない方がよくない？」と、途中から方針変更。

その結果いろいろ作り直し。
最終的なコードももっとスマートな構成があるかも。

結論：方針をしっかり決めておくこと

結局、方針がしっかり定まっていなかったから。

モーダル使うなら使うでしっかり決めて、ページ遷移するところ、しないところしっかり決めること。

2. 本番環境で見ることは大事

herokuにアップして公開したが、ローカルではわからない、スマホで触ってみないと気づかない不具合が結構あり。

やりたいことの追加ボタンを押すと入力用のモーダルウインドウを表示するが、いざ入力しようとするとスマホの予測変換が被って入力範囲が見れない・・・。

モーダルの実装に問題があると思うが、これは開発環境じゃ見つけられなかった。
（ちなみに、入力順序を入れ替えて対応しているだけで、まだ根本解決できてません・・・）

結論：現地・現物・現場

三現主義は何にしても重要。

制作時間

ざっくりとした制作時間。
Laravelとvueの実装部分は、この作業はフロント側だなと感じたものを自己流に分けているだけで、何かを拠り所にしているわけではありません。

当初の見積もりに比べて、下記の原因で増加。

• UIの部分で時間がかかった
• 上記で挙げたbladeとvueの方針の部分でいろいろ悩んだ
• Homesteadの環境構築も初めてで時間取られた

工程	見積もり (h)	実質 (h)
機能洗い出し	1	1.5
画面設計	3	3
DB設計	0.5	0.5
モック作成	6	11.5
環境構築	0.5	2
フロント側実装	20	21
サーバー側実装	10	15.5
テスト、デプロイ	5	3
合計	46	56

まとめ

荒削りではありますが、LaravelとVue.jsを使って、一通りのCRUD処理を使ったアプリを作成することができました。