目次
はじめに
この記事ではフォルダ機能・タスク機能の実装をしていきます。
目的(ゴール)/今回試したいこと
1.フォルダ機能の実装
2.タスク機能の実装
参考教材に関して
入門Laravelチュートリアル (1) イントロダクションと環境構築
(以下、これらを大変恐縮ではございますが教材と呼ばせていただきます。)
1.フォルダ機能の実装
工程1.モデルの作成
①マイグレーションファイル作成
php artisan make:migration create_folders_table
②編集
Schema::create('folders', function (Blueprint $table) { $table->bigIncrements('id'); + $table->unsignedBigInteger('user_id'); + $table->string('title'); $table->timestamps(); + $table->foreign('user_id')->references('id')->on('users'); //外部キー制約 });
③マイグレートでテーブルに反映
php artisan migrate
phpMyAdminで確認。

④モデルの作成(テーブルの単数形で自動的に紐づけされる)
php artisan make:model Folder
⑤モデルの編集
Userモデルを編集します。リレーションを追加。
public function folders(){ return $this->hasMany('App\Folder'); } }
工程2.コントローラの作成
①コントローラの作成
php artisan make:controller FoldersController
②編集
use App\Folder; // add
工程3.フォルダ機能実装
※こちらを基にAxiosのインストールを済ました状態で進めます。
①js/components/Folder.vueの編集
②api.phpの編集
③Karnel.phpの編集
セッションをAPIでも保持できるようにする。参考
ここまでで以下の表示。追加・削除・更新が問題なく動作するか確認します。

2.タスク機能の実装
工程1.モデルの作成
①マイグレーションファイル作成
php artisan make:migration create_tasks_table
②編集
Schema::create('tasks', function (Blueprint $table) { $table->bigIncrements('id'); + $table->unsignedBigInteger('folder_id'); + $table->unsignedBigInteger('user_id'); + $table->string('title', 100); + $table->integer('status')->default(1); // 数字で管理 + $table->date('due_date'); $table->timestamps(); + $table->foreign('folder_id')->references('id')->on('folders'); + $table->foreign('user_id')->references('id')->on('users'); });
③マイグレートでテーブルに反映
php artisan migrate
phpMyAdminで確認。

④モデルの作成(テーブルの単数形で自動的に紐づけされる)
php artisan make:model Task
⑤モデルの編集
Folderモデルを編集します。リレーションを追加。
public function tasks(){ return $this->hasMany('App\Task'); } }
工程2.コントローラの作成
①コントローラの作成
php artisan make:controller TasksController
②編集
use App\Task; // add
工程3.タスク機能実装
①js/components/Task.vueの編集
※Folder.vueのfolderをtaskに変更しただけです。
②api.phpの編集
※folderをtaskに変更して追記しただけです。(リレーション周りを配慮する前に、とりあえずの実装です。)
ここまでで以下の表示(デザイン性は皆無です。笑)。追加・削除・更新が問題なく動作するか確認します。
躓いた点
1.マイグレーションできない
起因:外部キー制約していカラムの型違い
解決策: 型をそろえる
参照:Laravel 外部キー制約エラー General error: 3780 Referencing column
2.APIが取得できない
起因:コピペでコードの土台を作成したことで、未定義のメソッド(またエラーの出るメソッド)があった。
解決策: 未定義のメソッドを消す。
Vue.js側は順を追ってコードを記載していかないといけないといけない。
おわりに
Folder.vueに記載したAxiosのメソッドをApp.vueを経由しても表示されるか不安だったが無事表示された◎
予定ではテーブルの関連付けまで書きたかったけど、予想以上に躓く&量が多くなりそうだったので分けて書きます。
関連記事
【Laravel×Vue】メモアプリ制作の記録①~設計~
【Laravel×Vue】メモアプリ制作の記録②~トップページの作成~
【Laravel×Vue】メモアプリ制作の記録③~フォルダ/タスク機能の実装~
【Laravel×Vue】メモアプリ制作の記録④~テーブルの関連付け~
参考
Vue.jsの書き方実例集(随時追加)※逆引きリファレンス的な
Laravel+Vue.jsでVue.jsの使い方を考えてみたNotSPA
【Vue】単一ファイルコンポーネントの命名規則まとめ【ファイル名から記法まで】