Laravel 9 + Vue.jsで簡単なToDoアプリを作ってみました。

「Learning JavaScript」を読み終えたので、簡単なアプリを作成してみました。

初めてモダンなJavaScriptを触りましたが、jQueryが主だった時代と比べるとかなり改善されていて驚きました。

LaravelをAPIバックエンドとして、フロントエンドをVue.jsで作成しました。

プロジェクトの用意

laravel newでプロジェクトが作成可能になります。作成と削除を頻繁に繰り返すので非常に便利です。

1

composer global require laravel/installer

1

laravel new laravel9-vue-todo

1

DB_CONNECTION=sqlite

sqliteを利用する際は、「database/database.sqlite」を作成する必要があります。

1

touch database/database.sqlite

「laravel/ui」を利用して、Vue.jsを利用するための雛形を作成してもらいます。

1

composer require laravel/ui

1
2


./artisan ui vue
Vue scaffolding installed successfully.

完成したものは、GitHubにあります。

クローン後、sqliteのデータベースの用意と、npmでアセットをビルドするだけで利用できます。

1
2


npm run dev
./artisan serve

JavaScriptに関する知識が浅く、思うように実装ができていない部分がありますが、時間を見つけてリファクタリングしていこうと思います。

今回、コンポーネントは、「ToDoComponent」のみで、ルーターなどは用いていません。次回は、ルーターを用いて画面移動を伴う少し複雑なアプリを作ってみます。