Laravel(+Vue)での管理画面作成のベストプラクティスについて考える
Laravelで管理画面の作成をしていたのですが、要件を満たすものを探して実装するまでに二転三転としていたので、こちらにまとめました。導入する際の検討材料にしていただければ幸いです。
想定読者
- Laravel(+vue)における環境下での管理画面作成におけるベストプラクティスが知りたい人
- Laravel(+vue)での管理画面作成における技術調査において、
方向性
Laravel(+Vue)の環境でフロントエンドを実装する際、
- Laravelの管理画面作成ツールを使う(Vueを使わない)
- Vueでフロント側を実装し、LaravelでAPIを作成する
という二つの方向性があると思われるのですが、それぞれツールを用いた使用感も含めて、
メリット・デメリットを上げていこうと思う。
Laravel-Admin
メリット
- 日本語記事が豊富にある
- Githubのスター数が多い
デメリット
- Laravel5.5において開発が終了している
冒頭部分おいて、
Since I don't have much time to maintain this project, laravel-admin only supports the LTS version of >Laravel (currently Laravel 5.5).
インストール部分において、
This package requires PHP 7+ and Laravel 5.5+
First, install laravel 5.5, and make sure that the database connection settings are correct.
とあるように、Laravel5.5しか対応していないので、Laravel8系を使用したい場合は導入を見送ることになると思われる。
Voyager
Voyagerの使用感についてはこちらに記載したので、詳細は下記を参照してください。
メリット
- 爆速で管理画面の機能が実装できる。
- 個人開発で、複雑な要件でない場合の最適なツールであるように思える。
- Githubのスター数が多いので、使用者が多い。
デメリット
- 管理画面から生成したデータやテーブルを出力する術がデフォルトの機能にないと思われるので、複数人での開発に不向きであるように思える。
- 複雑な要件に対応するのが、難しそうに感じる。
- 描画部分をblade.phpに記載していく形になるので、コードの可読性が悪い。
- 日本語記事が少ないため、英語文献に当たる機会が多くなりそう。
Vue-Element-Admin
LaravelでAPIを作成してデータをDBからVueに渡して、Vue側で変更を加えたデータをDBに送る形にしようとも考えた。
メリット
- カスタマイズ性能が高く、リッチな管理画面を作成することができる
デメリット
- element-ui自体が、レスポンシブ対応がなされていないdesktop向けのUIであるため、
管理画面をスマホで見たいなどの要件が出てきた時に対応できない。
https://element.eleme.io/#/en-US - LaravelでのAPI作成の工数とVueでの管理画面のUIの作成の工数がかかる。
Vuetify-admin
上のVue-Element-Admin同様、LaravelでAPIを作成してデータをDBからVueに渡して、Vue側で変更を加えたデータをDBに送る形にしようとも考えた。
メリット
- Vue-Element-Adminで直面したUIの問題を解消できる。
デメリット
- 日本語の記事がほとんどない
最後に
Githubのスター数や、他者の技術ブログを見ながら自分自身Laravel+vueにおける管理画面の作成におけるベストプラクティスを検討していったが、他にもこのようなツールが良いよなどあれば、コメント欄で教えていただけると幸いです。
この度は本技術ブログを読んでいただき誠にありがとうございました！
Discussion