はじめに
今回はLaravel8から導入されたInertia.js(イナーシャ)について書いていきたいと思います。
https://inertiajs.com/
初めはブラックボックス化していて掴みづらかったInertia.jsですが、その分かなり記述量も減りとても効率よく開発していけると感じたので、今回は従来の記述と比較しながら解説していきたいと思います。
Inertia.jsとは
Inertia.jsは、フロントエンドとバックエンドを繋いでくれる役割をしてくれるものです。
これまでは画面表示を行うタイミングで、表示のためのAPIを記述する必要や、
Vue-RouterなどでURLに応じたルーティングする必要もありましたが、
それらの部分をInertia.jsが受け持ってくれることで記述する必要なくなり簡単にSPAを構築できるようになりました。
従来の記述
まずは復習も兼ねて、画面表示が表示されるまでのInertia.jsを使わない従来の流れを実際のコードを追って解説していきたいと思います。
あとでInertia.jsの場合の流れを書くのでそれと比較してどのくらいシンプルな構造になったかを見比べていただきたいです。
http://localhost/user_list にアクセスが来た場合にユーザー一覧を表示されるざっくりとした流れを書いていきます。
import Router from 'vue-router';
import Template from './Pages/UserList.vue';
export default new Router({
routes: [
{
path: '/user_list',
name: 'user_list',
component: UserList
}
]
});
まずrouter.jsで、path: /user_listに紐ずくUserList.vueを指定します。
<template>
<div>
<li v-for="user in users" v-bind:key="user.id">
{{user.name}}
</li>
</div>
</template>
<script>
export default {
data() {
return {
users: []
}
},
created() {
this.getUserList()
},
methods: {
getUserList: function(){
axios.get('/user/list')
.then((res)=>{
this.users = res.data
})
},
}
}
</script>
router.jsから紐づいたUserList.vueでは、created()(このページにアクセスが来たときに最初に走る関数)によって指定されたgetTemplate()が走り、
userの一覧情報を取得するapiを飛ばします。
Route::get('/user/list', 'UserController@index');
api.phpではvueから飛ばされた/user/listに紐ずくコントローラーのメゾットを指定します。
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\User;
class UserController extends Controller
{
public function index(Request $request) {
$users = User::all();
return $users;
}
}
コントローラーではUserモデルを通じてuserの情報を全て取得して、その取得した情報をリターンしています。
<template>
<div>
<li v-for="user in users" v-bind:key="user.id">
{{user.name}}
</li>
</div>
</template>
<script>
export default {
data() {
return {
users: []
}
},
created() {
this.getUserList()
},
methods: {
getUserList: function(){
axios.get('/user/list')
.then((res)=>{
this.users = res.data
})
},
}
}
</script>
コントローラーでリターンされたユーザー情報をresが受け取り、
this.users = res.dataここの行でusersにコントローラーがリターンしたデータを入れてあげてます。
そして最後に、v-for="user in usersこの部分で複数人分のusersのデータをuserに1つずつ渡すことで、ユーザー一覧が表示される流れとなります。
Inertia.jsの場合
次は、上記で説明した画面表示まで従来の流れをInertia.jsを使って書いていきたいと思います。
Route::get('/user/list', 'UserController@index')->name('user.index');
まず、http://localhost/user/list にアクセスがあった場合、web.phpで、/user/listに紐ずくコントローラーのメゾットを指定します。
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\User;
use Inertia\Inertia;
class UserController extends Controller
{
public function index(Request $request) {
return Inertia::render(
'UserList', ['users' => User::all()]
);
}
}
returnの第一引数では、vueファイルの指定をしています。ここでは、src/resources/js/Pagesの下に保存されているファイルを参照するのでこの場合、src/resources/js/Pages/UserList.vueファイルが指定されます。
第二引数では、ユーザーデータを全て取得してusersに入れています。
<template>
<div class="container">
<li v-for="user in users" v-bind:key="user.id">
{{user.name}}
</li>
</div>
</template>
<script>
export default {
props: {
users: Array,
}
}
</script>
コントローラーで第二引数に指定していたusersが、propsのusersが受け取ります。
それをv-forで回してユーザー一覧が表示されます。
比較してみて
上記の2つのを比べてわかるように、Inertia.jsでは、router.jsとapi.phpの記述が必要なくなります。
従来の記述に比べ、APIを設計して実装し、フロントではそれを呼び出して描写するという手間が省けて、効率よく構築していくことができるため、記述量が少なくなりシンプルなものにできます。
まだまだInertia.jsについての記事は少ないですが、是非、使って見てください！