laravel + vue - 結局なんだろう？

(2025-02-20)

この 2 ヶ月ほど、laravel + livewire でいろいろと試行錯誤してきましたが、リアルタイムチャットまではかなりのスピードでプログラムを作成できたものの、基本的な部分を深く理解できていないので最終的には壁にぶち当たって挫折しました。当初から少しだけ予想できていたことではありました。

それで laravel + vue.js になったのですが、よく見てみるとこちらの方が livewire よりもわかりやすい気がします。

JavaScript は昔に導入した際に、「なんでこんなに難しく書くんだろう？」と思っていましたが、jQuery が出現して景色が一変した記憶があります。

例えば「getElementById()」なんてまるで呪文のようですが、しかしよく見ると html のタグを検索して id の要素のプロパティを取得するわけで、そう理解すればわかり易いといえばわかり易い。

html 文書

2000 年ごろからレンタルサーバーを借りて自分のホームページを作成していましたが、最初は html 文書をローカルでガリガリ書いて ftp ソフトでアップロードしていました。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>hello</title>
</head>
<body>
<p>Hello</p>
</body>
</html>

テンプレート

しかし、こういう静的（static）なドキュメントはとても効率が悪いと気づきます。特に、ドキュメントを根本的に変更したい場合には数ある html ドキュメントをすべて変更しなければなりません。

でも、以下のようなテンプレートがあれば

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<link href="../../../CSS/bootstrap.min.css" rel="stylesheet"/>
<link href="../../../CSS/res.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="../../../CSS/prism.css"/>
<script src="../../../CSS/prism.js"></script>
<style type="text/css">
.pleft{border:solid 1px #ccc;padding:4px;}
.green{margin-left: 50px;margin-bottom: 0px;}
</style>
<title>Laravel - 導入とデータベース</title>
</head>
<body>
    <div>
        content
    </div>
</body>
</html>

この中の content を動的に貼りけるシステムであれば、このテンプレートを変更するだけで一瞬ですべてを変更することができます。

最終的に作成したいのは html 文書

ブラウザが html 文書を認識して描画するために、あれこれ工夫して動的に効率よく html 文書を作成するシステムのひとつが laravel + vue.js だと思います。

例えば以下のような html 文書を作りたいとします。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Laravel + Vue + Tailwind</title>
    @vite(['resources/css/app.css', 'resources/js/app.js']) <!-- resources/js/app.js を読み込む -->
</head>
<body class="bg-gray-200">
    <div id="app">
        <hello-world>
            <div>
                <h1>Hello, Laravel + Vue + Tailwind!</h1>
            </div>
        </hello-world>
    </div>
</body>
</html>

ここで、以下の部分だけを home.blade.php + app.blade.php の php で作成します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Laravel + Vue + Tailwind</title>
    @vite(['resources/css/app.css', 'resources/js/app.js']) <!-- resources/js/app.js を読み込む -->
</head>
<body class="bg-gray-200">
    <div id="app">
        <!-- home.blade.php はここから -->
        <hello-world></hello-world>
        <!-- ここまで -->
    </div>
</body>
</html>

これがバックエンド。

あとは、フロントエンド・JavaScript(app.js) で <hello-world>タグに埋め込むコンポーネントを作成して、 <div id="app">にマウントします。

import HelloWorld from './components/HelloWorld.vue'; // HelloWorld コンポーネントをインポート
const app = createApp({});
app.component('hello-world', HelloWorld);
app.mount('#app');

HelloWorld.vue は、

<template>
    <div>
        <h1>Hello, Laravel + Vue + Tailwind!</h1>
    </div>
</template>

この部分をバックエンドで作成した2段のテンプレートにはめ込みます。

うーん、やはりこの部分は少しわかりにくい。

<div id="app"> にベタッと貼り付けてもいいような気がしますが、それではダメなんでしょうね。

でも、livewire がよく理解できないのに対して、vue.js の方がまだわかりやすいかもしれません。