👌

Vue.jsとLaravelの連携って何がいいの?

3 min read

はじめに

Vue.jsとLaravelの組み合わせでの開発をしたものの、そもそもこれなんぞや?感が拭えてないので個人的な理解を深めるために調べたことをまとめました。
基礎的なことしか書いて無いので暇つぶしの読み物にでも使ってください。

そもそもVue.jsってなに?

公式HPにはこう。(https://jp.vuejs.org/v2/guide/index.html)
「Vue (発音は / v j u ː / 、 view と同様)はユーザーインターフェイスを構築するためのプログレッシブフレームワークです。」

全然分からんから単語調べるよ。

ユーザーインターフェイスって?

「利用者が対象を操作するために接する部分。パソコンの場合、マウスやキーボード、ディスプレーといった機械的な要素、どのように操作するかという手順、画面に表示されるメニューやアイコン、ウインドウといった視覚的要素、警告音や文字の読み上げといった聴覚的要素などを指す。」
(https://kotobank.jp/word/ユーザーインターフェース-14016)

なるほど、一般的にフロントエンドって呼ばれてるヤツのことかな。

プログレッシブフレームワークって?

「アプリケーションの段階的(Progressive)な要求変化に応じて問題解決できる方法を提供できるのがプログレッシブフレームワークです。プログレッシブフレームワークは,必要になった時に問題解決するライブラリを適宜導入して問題を解決するという姿勢を持っています。最初に始めるときは小さく,大規模になるにつれて適切なライブラリやツールを導入することで大きく対応できる柔軟性を持ちます。」
Vue.js入門 ―最速で作るシンプルなWebアプリケーション(https://gihyo.jp/dev/serial/01/vuejs/0001)

あと足しができる柔軟性のあるフレームワークってことかな。
でもそもそもフレームワークが分からんから調べるよ。

フレームワークって?

「システム開発を楽に行えるように用意された、プログラムとかのひな形のこと」
(https://wa3.i-3-i.info/word12470.html)

必要なものをあらかじめ用意してくれてる開発便利ツール的なことかな。

つまりVue.jsはフロントエンドを構築するための柔軟性のある開発便利ツールってことね、理解。
エンジニアの記事はいちいち言葉が難しくて困る。

じゃあLaravelはなに?

公式にはこう。(http://laravel.jp/)
「ウェブ職人のためのPHPフレームワーク。」

あ、シンプルでいいですね。
一応特徴とかも書いとこう。

Laravelの特徴

  • 世界で最も人気のフレームワーク
    世界で最も利用されているPHPフレームワークと称され、2019年には世界1位のシェア率となりました。
  • MVCモデルを採用している
    MVCモデルとは、処理をModel(データ処理)View(画面表示)Controller(全体制御)の3つに分別し、機能ごとに開発を進める開発方法のことです。
  • 機能やプラグインの開発が盛ん
    比較的に新しいPHPフレームワークであると共に人気が高いため、新機能を追加するバージョンアップが頻繁に行われています。
  • Composerでパッケージ管理できる
    Composerとは開発に必要なパッケージやライブラリを管理・インストールする機能を持つツールです。・・・Composerがあれば使用に必要なライブラリも同時にインストールされますので、ライブラリ使用の利便性が向上するでしょう。
  • データベースの操作が容易
    Webアプリケーション開発で必要なデータ操作を簡易化するために、LaravelにはEloquent ORM(エロクアントORM)とMigration(マイグレーション)が備わっています。
    Eloquent ORMとはデータベースとモデルにリレーション(関連性)を持たせることで、データの扱いを柔軟にするものです。Migrationとはテーブル定義の変更内容を記述したファイルを生成するものとして、データベースの管理を簡単にしてくれるものです。
  • バリデーションチェックを自動でやってくれる
    バリデーション(入力値チェック)はフォーム作成時などに活用しますが、このチェックをLaravelでは効率的に行うことが可能です。
    (https://www.acrovision.jp/career/?p=2776)

こう見るとなんかとても便利そう。

それにLaravelは別にバックエンド専門ってことはなくてフロントエンドもできる。
でもそうなるとなんでVue.jsと連携しなきゃなの?って思うわけです。

LaravelとVue.jsは連携すると何がいいの?

調べてみると色々な意見があったけど、自分が個人的に納得できたものだけここでは紹介します。

1.学習コストが低い

非SPAと比べると勿論構築は面倒なものの、SPAを実現するフレームワークの中では学習コストが低いそうです。
Laravelは、オブジェクト指向プログラミング、PHP、およびWeb開発の基本的な知識さえあれば、すぐにフレームワークを学ぶことができると言われています。
LaravelでSPAを作って、「UXをよりよくしたいな〜」となった時に登場するのがVue.js。
Vue.JSは完全にJavaScriptに基づいて構築されているので、Vanilla JS、Angular JS、React JS、jQuery、JavaScript、HTML、またはデータをバインドするその他の言語を使用したことがある場合は、Vue.JSのスキルを簡単に身に付けることができるとのこと。

ちなみに自分ははどちらもまだ身に付いてません。

2.Vueでしか実現できないことがある

Laravelで実現できなくてVue.jsにしか実現できないことがあるならそれは仕方ないね。
参考サイトで例として載ってたのは

  • 無限スクロールをさせるためデータバインディング
  • 選択した月に応じて選択できる日を変える処理

等でした。

まぁ、無理くりやればVue.js以外で何でもできるんでしょうけど、シンプルに面倒なんじゃ無いですかね。

3.開発しやすさ

自分はこれが1番なんじゃ無いかなって思います。
Laravelはとても便利ですが、デメリットもあります。

Laravelのデメリット

  • コードが複雑化しやすい
    自分の思う通りにコードを記述できるのは魅力ですが、複雑化に注意しないと記述の意味と場所が分かりにくくなります。
  • 処理速度は速くない
    多機能であるがために、処理速度が比較的遅い傾向にあります。

こういうデメリットを考えるとサーバーサイドと表示サイドをLaravelとVue.jsで分業させるのは、コードをまとめやすかったり、表示して確認がしやすかったりするんじゃないでしょうか。

まとめ

自分はまだLaravelとVue.js連携の恩恵は受けて無いものの、プロジェクトが大きくなる程開発のしやすさが実感できるんじゃないでしょうか。

Laravelで取り敢えず作ってみて、困ったところをVue.jsで補完するって人も多いみたいです。

まぁ私は先人に従って取り敢えず連携してみます。

*参考

Discussion

ログインするとコメントできます