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

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

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

プロジェクトの用意

laravel/installerの導入

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

1
composer global require laravel/installer

プロジェクト作成

1
laravel new laravel9-vue-todo

データベースに「sqlite」を利用するように調整

1
DB_CONNECTION=sqlite

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

1
touch database/database.sqlite

laravel/uiの導入

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

1
composer require laravel/ui
1
2
./artisan ui vue
Vue scaffolding installed successfully.

完成品

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

almajiro/laravel9-vue-todo

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

1
2
npm run dev
./artisan serve

感想

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

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