Vue – エンジニア見習い https://otonan-syusyoku.work 三流プログラマー Mon, 15 Apr 2024 14:08:12 +0000 ja hourly 1 https://wordpress.org/?v=6.9.4 https://otonan-syusyoku.work/wp-content/uploads/2023/10/cropped-名称未設定のデザイン-16-32x32.png Vue – エンジニア見習い https://otonan-syusyoku.work 32 32 LaravelにVueコンポーネントをバインドする方法 https://otonan-syusyoku.work/archives/1720 https://otonan-syusyoku.work/archives/1720#respond Mon, 15 Apr 2024 14:06:40 +0000 https://otonan-syusyoku.work/?p=1720 Laravelプロジェクトを運用している方が jQuery を卒業して Vue または React を導入したい！という悩みに直面する事はしばしばあると思います。

SPAを構築するのはコスト的に対応が難しいため、Laravelプロジェクトの一部にVueを導入する方法を解説しまっす。

環境

  • PHP8.2
  • Laravel10
  • Vue3
    • node v18.19.1
    • npm 10.5.0

やりたいこと

Laravel10の一部にVue.jsを適用する

  • Vueコンポーネントを定義する
  • Vueコンポーネントをバインドする
  • Vueコンポーネントにバックエンドからデータを渡す

手順

Let`s GO

なにわともあれVueのインストール

LaravelはビルドツールにViteを採用しているため、ViteのプラグインとしてVueをインストールします。
（CLIでインストールしても良いと思いますよ！

$ npm install @vitejs/plugin-vue

$ npm install @vitejs/plugin-vue --save-dev

vite.config.js の設定

インストールしたVueを設定ファイルに追記します

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue'; // 追記

export default defineConfig({
  plugins: [vue()] // 追記
});

app.jsを使える状態に持っていく

Vueコンポーネントをグローバルコンポーネントとして登録するために、以下の形でapp.jsを編集します。

下記の記述でやりたいこととしては、コンポーネントの作成及びコンポーネントのマウントです。

import './bootstrap';
import {createApp} from 'vue';
import Alpine from 'alpinejs';
import VueDatePicker from './Components/Utility/CsrfToken.vue';
import VueDatePicker from './Components/Utility/DatePicker.vue';
import AddSalesListModal from "./Components/AddSalesListModal.vue";

window.Alpine = Alpine;

Alpine.start();

const app = createApp({});

// グローバルコンポーネント
app.component('csrf-token', CsrfToken);
app.component('add-sales-list-modal', AddSalesListModal);
app.component('date-picker', VueDatePicker);

// #appにマウント
app.mount('#app');

 

マウント先の指定

app.js でマウント先を id=’app’ としたため、以下のように blade ファイルにマウント先となる記述を設定します。

<body id="app" class="font-sans antialiased flex flex-col min-h-screen">
~
~
~
</body>

コンポーネントの作成

試しにLaravelで生成されるCSRFトークンを扱うコンポーネントを作成します。

このコンポーネントはaxios等で非同期通信を実装するときなどに重宝されるはずですので、皆さんも作っておくと便利ですよん。
（今回は擬似的にpタグにCSRFトークンを出力していますが、本来はしません

<script>
import { ref, onMounted } from 'vue';

export default function useCsrfToken() {
    const csrfToken = ref('');

    onMounted(() => {
        const token = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
        if (token) {
            csrfToken.value = token;
        }
    });

    return csrfToken;
}
</script>

<template>
<p>{{ csrfToken }} </p>
</template>

コンポーネントの呼び出し

以下の通りに記述したらVueで取得したCSRFトークンが出力されているはずですぅぅ

<csrf-token></csrf-token>

Vueにバックエンドのデータを渡したいときには、以下の通りに実装してみてください

// Blade
<csrf-token :test='@json($test)'></csrf-token>

// Vue
<script setup>
import { defineProps, ref } from "vue";

const props = defineProps({
    test: Object,
});
</script>

最後に

SPAカッコいいから時間さえあればSPA化したい。

]]> https://otonan-syusyoku.work/archives/1720/feed 0 RESTful APIとSPAの関係についてReactとPHPで解説します https://otonan-syusyoku.work/archives/1674 https://otonan-syusyoku.work/archives/1674#respond Sun, 25 Feb 2024 12:40:20 +0000 https://otonan-syusyoku.work/?p=1674 RESTful APIとは？

What`s up

RESTful APIは、ウェブアプリケーションやウェブサービスで使われるプログラミングインターフェースです。
REST（Representational State Transfer）の原則に基づいて設計されており、ウェブ上のリソースへのアクセスや操作を統一的な方法で提供します。
リソースはURLで識別され、HTTPメソッド（GET、POST、PUT、DELETEなど）を使ってアクセスされます。

[getpost id=”1672″ cat_name=”1″ date=”0″]

SPA（シングルページアプリケーション）とは？

SPAは、ユーザーがアプリケーションを操作する際にページの再読み込みをせずに、必要なデータのみをサーバーから非同期に取得し、動的にページの内容を更新するウェブアプリケーションの形式です。

これにより、従来のマルチページアプリケーションに比べてユーザーエクスペリエンスが向上します。

僕が所属しているチームでもページのリロードが嫌だというユーザーの使用感からSPAへの移行が少しづつ始まってきています。
世間的にもSPAは流行っていますよね。（流行っているから偉いというわけではない。知ることが大事

RESTful APIとSPAの関係性

Let`s GO

SPAでは、ページの初回読み込み時にアプリケーションの全てのコード（HTML、CSS、JavaScript）がロードされます。

その後のユーザーの操作によってデータが必要になる場合、SPAはRESTful APIを通じてサーバーからデータを非同期に取得します。
このデータはJSONやXML形式で返され、JavaScriptを用いてクライアントサイドで処理され、ページの一部分だけが動的に更新されます。

このアーキテクチャにより、SPAはユーザーにスムーズで反応の良いインターフェイスを提供できます。

RESTful APIはこのプロセスの背後にあるデータ通信の基盤となります。

PHPとReactを使った例

ここでは、PHPで書かれた簡単なRESTful APIと、Reactを使ったSPAの例を示します。

PHPによるRESTful API

PHPで簡単なAPIエンドポイントを作成します。この例では、GETリクエストを受け取り、簡単なJSONデータを返します。

<?php 
    header('Content-Type: application/json');
    $response = ['message' => 'Hello, world!'];
    echo json_encode($response); 

    // Response
    //{"message": "Hello, world!"} ?>

このPHPスクリプトは、サーバーに配置してのようにアクセスするとJSONが返されます。

ReactによるSPA

Reactで簡単なSPAを作成し、上記のAPIからデータを取得して表示します。

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function App() {
  const [message, setMessage] = useState('');

  useEffect(() => {
    axios.get('http://yourserver.com/index.php')
      .then(response => {
        setMessage(response.data.message);
      })
      .catch(error => console.error('There was an error!', error));
  }, []);

  return (
    <div>
      <button>{message}</button>
    </div>
  );
}

export default App;

このコードは、コンポーネントがマウントされた後にAPIからデータを取得し、取得したメッセージを表示します。
React（クライアントサイド）とPHP（サーバーサイド）を使った、RESTful APIとSPAの基本的な連携を示しています。

今回のコードでは、データを取得して表示するだけのコードになっていますが、Event処理などによりリロードされることなく動的にページの内容を変更させることが可能です。

セキュリティとパフォーマンスの考慮

SPA（シングルページアプリケーション）とRESTful APIを使用する際には、セキュリティとパフォーマンスの両方に配慮することが重要です。
以下では、これらの観点から基本的なガイドラインをいくつか紹介します。

セキュリティ

  1. HTTPSを使用する
    データの暗号化を確実に行うため、APIとの通信には常にHTTPSを使用します。（当たり前です）
    これにより、中間者攻撃（MITM）のリスクを減らすことができます。
  2. CORSポリシーを適切に設定する
    クロスオリジンリソースシェアリング（CORS）ポリシーを適切に設定し、信頼できるオリジンからのリクエストのみを許可します。
    不適切なCORS設定は、セキュリティリスクを招く可能性があります。
  3. 認証と認可
    JWT（JSON Web Tokens）やOAuthなどの堅牢な認証メカニズムを使用して、APIへのアクセスをセキュアに管理します。
    また、ユーザーの権限に基づいてアクセスを制御する認可も重要です。
  4. 入力の検証とサニタイズ
     SQLインジェクションやクロスサイトスクリプティング（XSS）攻撃を防ぐため、サーバー側とクライアント側の両方で入力値の検証とサニタイズを行います。
  5. 依存関係のセキュリティ
    使用するライブラリやフレームワークのセキュリティ脆弱性に注意し、定期的に更新を行い脆弱性を修正します。

この辺の対策については過去に記事にしていますので時間ある人は読んでみてくださーい

[getpost id=”1618″ cat_name=”1″ date=”0″][getpost id=”1256″ cat_name=”1″ date=”0″]

パフォーマンス

  1. コードの分割
    ユーザーが必要とするコードのみをダウンロードするように、コード分割（Code Splitting）を実装します。
    これにより、初期ロード時間を短縮できます。
  2. キャッシュ戦略の利用
    静的リソースやAPIレスポンスのキャッシュを適切に利用することで、パフォーマンスを向上させることができます。
    ブラウザのキャッシュやCDNの利用が有効です。
  3. 遅延ローディング（Lazy Loading）
     画像やコンポーネントなど、必要になるまでロードしないようにします。
    これにより、初期ロードのパフォーマンスを向上させることができます。
  4. APIの最適化
    不必要なデータの送受信を避けるため、APIのレスポンスをできるだけ小さく保ちます。
    また、必要なデータのみを取得するためのフィルタリングやページネーションをAPI側でサポートします。
  5. フロントエンドのパフォーマンス最適化
    Reactなどのフロントエンドフレームワークを使用する場合は、不要な再レンダリングを避け、メモ化（memoization）や仮想DOMの効率的な利用などのテクニックを活用します。

セキュリティとパフォーマンスは、アプリケーションの設計と開発の初期段階から考慮する必要があります。
これらの基本的なガイドラインを実践することで、ユーザーに安全で快適な体験を提供することができます。

]]> https://otonan-syusyoku.work/archives/1674/feed 0 【Laravel】BladeファイルからVue3コンポーネントに配列を渡す方法-備忘録(解説なし) https://otonan-syusyoku.work/archives/1281 https://otonan-syusyoku.work/archives/1281#respond Sun, 12 Mar 2023 13:36:32 +0000 https://otonan-syusyoku.work/?p=1281 散々迷った

3ファイル間の設定でBladeからVueコンポーネントに配列渡せます。

test.blade.php

//Contorollerから渡しても良い
//ここではBladeファイル内で配列作成
@php
        $photes_data = array(
            array(
                'img_no'=> '0',
                'path' => 'laundry.jpg',
                'alt' => 'サーフボード'
            ),
            array(
                'img_no'=> '1',
                'path' => 'harusa.jpg',
                'alt' => '農業'
            ),
            array(
                'img_no'=> '2',
                'path' => 'ht-beach.jpeg',
                'alt' => 'ht_1'
            )
        );
@endphp

//コンポーネント作成
<div id="phote_gallery">
　　　　//配列をJSONに変換
    <template-photegallery v-bind:photes_data="'{{ json_encode($photes_data) }}'"></template-photegallery>
</div>

 

resources/js/app.js

import {createApp} from 'vue';
import Test from './components/Test.vue';
if(document.getElementById('phote_gallery')){
    console.log("test.blade.php")
    createApp({})
        .component("template-photegallery", Test)
        .mount('#phote_gallery');
}

Laravelにおいてresources/js/app.jsがVue.jsのエントリーポイントになるので、当ファイルにてVue.jsのコンポーネントをインスタンス化しています。

ただしこのファイルは全てのBladeファイルで読み込んでいるので、このコンポーネントを使わないファイルでもインスタンス化してしまいます。

それを防ぐためにid=”phote_gallery”があるときだけインスタンス化したいいと考えて、js構文でhmtl内のID属性取得。

 

Vue3からVueアプリを作成する場合はcreateApp({})関数を使う様になったので、仕様通りに作成。
※Vue2の書き方では動作しませんでした。

人様のブログ記事なんですけど大変参考になったので、Vue2とVue3の違いが分からない人はぜひ目を通してみてください。
Vue 3の新しい機能と変更点・全11件

 

Test.vue

<script setup>
import { defineProps } from "vue";
const props = defineProps({
    photes_data: {
        type: String,
        required: true,
    },
});
console.log(props.photes_data);
</script>

Propsを定義し、test.blade.phpで作成した<template-photegallery></template-photegallery>の「template-photegallery」を呼び出すことでBladeからVue3へのデータ連携が完了です。

 

]]> https://otonan-syusyoku.work/archives/1281/feed 0 【Laravel】axiosを使った非同期通信が404になる https://otonan-syusyoku.work/archives/1270 https://otonan-syusyoku.work/archives/1270#respond Mon, 06 Mar 2023 06:03:34 +0000 https://otonan-syusyoku.work/?p=1270 エラー内容

レスポンス：

AxiosError {message: 'Request failed with status code 404', name: 'AxiosError', code: 'ERR_BAD_REQUEST',

 

考えられる原因：

  • ルーティングを間違えている
  • 通信先のURLが間違えている

 

404になる原因

Routeの設定を行っているのにレスポンスがになってしまう。

解決方法はエラーの文言通り、ページが存在していない事が原因です。

エラーになるコード

routes/api.php

Route::get(
    '/test',
    [Test::class, 'test_function']
);

 

resources/js/components/EnduserSearchstore.vue

import axios from 'axios';

    export default {
        data() {
            return {
                users: {},
            }
        },
        methods: {
            getBigCategory() {
                axios.get('/api_search_storeCategory')
                    .then((response) => {
                        // this.users = response.data.users
                        response(console.log(response))
                    })
            }
        },
        created() {
            this.getBigCategory()
        }
    }

 

 

正常動作するコード

routes/api.php

Route::get(
    '/test',
    [Test::class, 'test_function']
);

 

resources/js/components/EnduserSearchstore.vue

import axios from 'axios';

    export default {
        data() {
            return {
                users: {},
            }
        },
        methods: {
            getBigCategory() {
                axios.get('/api/test')
                    .then((response) => {
                        // this.users = response.data.users
                        response(console.log(response))
                    })
            }
        },
        created() {
            this.getBigCategory()
        }
    }

 

 修正内容

axiosでURLを指定している箇所を「axios.get(‘/api/test’)」と指定してあげる。

Laravelでは、route/api.phpで指定したルーティングではデフォルトで接頭辞に「/api」が付くことになっているっぽいです。
そのため、エラーになるコードではVue側で呼び出しているURLは存在しない遷移先となっています。

LaravelのAPIのルーティングはデフォルトが付くのを忘れないようにしましょう〜。

]]> https://otonan-syusyoku.work/archives/1270/feed 0