Laravel 9 + Vue.jsで簡単なToDoアプリを作ってみました。
Contents
「Learning JavaScript」を読み終えたので、簡単なアプリを作成してみました。
初めてモダンなJavaScriptを触りましたが、jQueryが主だった時代と比べるとかなり改善されていて驚きました。
LaravelをAPIバックエンドとして、フロントエンドをVue.jsで作成しました。
プロジェクトの用意
laravel/installerの導入
laravel new
でプロジェクトが作成可能になります。作成と削除を頻繁に繰り返すので非常に便利です。
|
|
プロジェクト作成
|
|
データベースに「sqlite」を利用するように調整
|
|
sqliteを利用する際は、「database/database.sqlite」を作成する必要があります。
|
|
laravel/uiの導入
「laravel/ui」を利用して、Vue.jsを利用するための雛形を作成してもらいます。
|
|
|
|
完成品
完成したものは、GitHubにあります。
クローン後、sqliteのデータベースの用意と、npmでアセットをビルドするだけで利用できます。
|
|
感想
JavaScriptに関する知識が浅く、思うように実装ができていない部分がありますが、時間を見つけてリファクタリングしていこうと思います。
今回、コンポーネントは、「ToDoComponent」のみで、ルーターなどは用いていません。次回は、ルーターを用いて画面移動を伴う少し複雑なアプリを作ってみます。
Author almajiro
LastMod 2022-03-24