はじめてのLaravel+Vue.js開発：環境構築から使い方まで

By /

はじめてのLaravel+Vue.js開発：環境構築から使い方まで

Web開発の世界では、バックエンドとフロントエンドの技術を組み合わせることで、よりリッチでインタラクティブなアプリケーションを効率的に開発することが求められています。数ある組み合わせの中でも、PHPのWebフレームワークであるLaravelと、プログレッシブJavaScriptフレームワークであるVue.jsは、多くの開発者に選ばれている非常に強力なペアです。

Laravelはその堅牢性、開発の速さ、豊富な機能でバックエンド開発を容易にし、Vue.jsは学習のしやすさ、パフォーマンス、コンポーネント指向のアプローチでフロントエンド開発を効率化します。この二つを組み合わせることで、高い生産性を維持しつつ、モダンなWebアプリケーションを構築できます。

この記事は、「これからLaravelとVue.jsを使ってWeb開発を始めたいけれど、何から手をつければいいか分からない」「環境構築から実際の開発の流れまで知りたい」という初心者の方を対象としています。

この記事を読むことで、以下のことが学べます。

  • LaravelとVue.jsを組み合わせるメリット
  • 開発に必要な環境の構築方法
  • 新しいLaravelプロジェクトの作成と認証機能の導入
  • Laravelプロジェクト内でのVue.jsの基本的な使い方
  • バックエンド（Laravel）とフロントエンド（Vue.js）間でのAPI通信
  • Laravel Mixを使ったフロントエンドアセットのビルド
  • 基本的な開発ワークフロー

さあ、LaravelとVue.jsを使ったモダンなWeb開発の世界に飛び込みましょう！

1. なぜLaravel + Vue.jsなのか？そのメリットを探る

まず、なぜ多くの開発者がLaravelとVue.jsの組み合わせを選ぶのか、その理由を掘り下げてみましょう。

Laravelの強み:

Laravelは、Taylor Otwell氏によって開発された、PHPのフルスタックWebアプリケーションフレームワークです。その最大の魅力は、開発者が共通して行うタスク（認証、ルーティング、セッション、キャッシュ、データベース操作など）を簡単に行えるように設計されている点です。

  • MVCアーキテクチャ: Model-View-Controllerデザインパターンを採用しており、コードの整理と保守が容易です。
  • Eloquent ORM: データベース操作をオブジェクト指向的に行うことができ、SQLを直接書く機会を減らせます。
  • Bladeテンプレートエンジン: シンプルで強力なテンプレートエンジンにより、PHPコードとHTMLを分離して記述できます。
  • ルーティング: 直感的で表現力豊かなルーティング定義が可能です。
  • 認証・認可: セキュアな認証システムを簡単に構築できます。
  • 豊富なライブラリ: Composerによる依存関係管理と、Packagistにある膨大なライブラリを利用できます。
  • 高い生産性: DRY (Don’t Repeat Yourself) 原則に基づいた設計と、 artisanコマンドなどのツールにより、開発効率が非常に高いです。
  • セキュリティ: クロスサイトスクリプティング (XSS) やSQLインジェクションなどの一般的な脆弱性に対する保護機能が組み込まれています。

Vue.jsの強み:

Vue.jsは、Evan You氏によって開発されたJavaScriptのプログレッシブフレームワークです。他のフレームワーク（ReactやAngular）と比較して、学習コストが低いことが特徴です。

  • プログレッシブ: コアライブラリはView層のみに焦点を当てており、必要に応じてルーティング（Vue Router）や状態管理（Vuex/Pinia）などのライブラリを追加できます。既存のプロジェクトに少しずつ導入することも可能です。
  • 学習曲線が緩やか: HTML, CSS, JavaScriptの基本的な知識があれば、比較的すぐに習得できます。
  • コンポーネント指向: UIを再利用可能な小さな部品（コンポーネント）に分割して開発します。これにより、コードの管理が容易になり、大規模アプリケーション開発に適しています。
  • 高いパフォーマンス: 仮想DOM (Virtual DOM) を採用しており、効率的なDOM操作による高速なレンダリングを実現します。
  • 豊富なエコシステム: 公式のルーティング、状態管理ライブラリに加え、多くのサードパーティ製ライブラリやツールが存在します。
  • 単一ファイルコンポーネント (.vue): HTML (<template>), JavaScript (<script>), CSS (<style>) を一つのファイルに記述でき、コンポーネントごとにコードをカプセル化できます。

Laravel + Vue.jsの組み合わせのメリット:

この二つの技術を組み合わせることで、それぞれの強みを活かした開発が可能になります。

  • 役割の分離: Laravelがバックエンド（API、データベース連携、認証など）を担当し、Vue.jsがフロントエンド（UI、ユーザーインタラクション）を担当する、明確な役割分担に基づいた開発が可能です。これにより、開発チーム内での分業や、将来的な技術スタックの変更にも柔軟に対応しやすくなります。
  • SPA (Single Page Application) または MPA (Multi Page Application) に対応:
    • SPA: Vue Routerなどを用いて、リッチでインタラクティブな単一ページアプリケーションを構築できます。APIを通じてバックエンドと通信します。
    • MPA: 従来のLaravelのBladeテンプレートを使いつつ、特定の機能やページにVue.jsコンポーネントを部分的に組み込むことも可能です。LaravelのBladeとVue.jsを併用することで、必要に応じてSPAのような体験を提供できます。Laravel Mixがこの統合を容易にします。
  • Laravel Mix: Laravelに標準搭載されているアセットコンパイルツール（Webpackラッパー）です。Vue.jsの単一ファイルコンポーネントのコンパイル、SCSS/SassやLessのコンパイル、JavaScriptファイルの結合・ミニファイなどを簡単に行えます。これにより、Vue.jsを含むモダンなフロントエンド開発に必要なビルドプロセスが自動化されます。
  • エコシステムの活用: PHPの豊富なライブラリ（Composer経由）と、JavaScriptの豊富なライブラリ（npm/yarn経由）の両方を利用できるため、開発の選択肢が広がります。
  • コミュニティ: LaravelもVue.jsも非常に活発なコミュニティを持っており、ドキュメントが充実しているだけでなく、困ったときに助けを得やすい環境があります。

このように、LaravelとVue.jsは相互補完的な関係にあり、組み合わせて使うことで、効率的かつモダンなWebアプリケーション開発を実現できます。

2. 開発環境の準備

LaravelとVue.jsを使った開発を始めるには、いくつかのソフトウェアをローカル環境にインストールする必要があります。

必要なソフトウェア:

  1. PHP: LaravelはPHPで動作するため、PHPが必要です。推奨バージョンはLaravelのバージョンによって異なりますが、執筆時点（Laravel 10/11）ではPHP 8.1以降が必要です。
  2. Composer: PHPの依存関係管理ツールです。Laravelやその他のPHPライブラリのインストールに必須です。
  3. Node.js & npm/yarn: Vue.jsはJavaScriptで動作し、フロントエンドの依存関係管理やビルドツール（Webpack/Laravel Mix）の実行にNode.jsが必要です。npm (Node Package Manager) または Yarn というパッケージマネージャーもNode.jsに含まれています。
  4. データベース: アプリケーションのデータを保存するために必要です。MySQL, PostgreSQL, SQLiteなどが利用できます。
  5. ウェブサーバー: PHPアプリケーションを実行するためのウェブサーバーです。Apache, Nginxなどがありますが、開発中はLaravelに組み込まれている開発サーバー (php artisan serve) を使うのが最も簡単です。
  6. コードエディタ: コードを記述するためのエディタです。VS Code, PhpStormなどが人気です。

インストール方法:

ローカル開発環境を構築するにはいくつかの方法があります。

  • オールインワンパッケージ: XAMPP, MAMP, Laragon など。これらはPHP, Apache, MySQLなどがまとめてインストールされるため、初心者には最も手軽な方法です。
  • 個別にインストール: PHP, Composer, Node.js, データベースなどを個別にインストールします。OSのパッケージマネージャー（Homebrew for macOS, apt for Ubuntu/Debian, Chocolatey for Windows）を使うと比較的簡単です。
  • 仮想環境/コンテナ: Vagrant (Laravel Homestead), Docker (Laravel Sail) など。プロジェクトごとに独立した環境を構築でき、開発環境をクリーンに保てます。本番環境に近い環境で開発できるため、より本格的な開発に向いています。

ここでは、手軽さを重視しつつ、ComposerとNode.jsのインストールに焦点を当てて説明します。オールインワンパッケージを使う場合も、ComposerとNode.jsは別途インストールが必要な場合があります。

2.1 Composerのインストール

ComposerはLaravelのインストールやPHPライブラリの管理に必須です。

  • Windows:
    公式サイト (https://getcomposer.org/download/) から Composer-Setup.exe をダウンロードして実行します。インストール中にPHPの実行ファイル (php.exe) の場所を指定する必要があります。

  • macOS / Linux:
    ターミナルを開き、以下のコマンドを実行します。

    bash
    php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
    php -r "if (hash_file('sha384', 'composer-setup.php') === 'e21205b207c3ff031906575712ed95e5cdb524cf9fa1d96bd5cf04087d71fae05d777fd0ccd96cfbb9ec5e6590013f10') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"
    php composer-setup.php
    php -r "unlink('composer-setup.php');"

    これで現在のディレクトリに composer.phar ファイルがダウンロードされます。どこからでも composer コマンドを使えるようにするには、このファイルをPATHが通っているディレクトリ（例: /usr/local/bin）に移動します。

    bash
    sudo mv composer.phar /usr/local/bin/composer

インストール後、ターミナルで以下のコマンドを実行してバージョン情報が表示されれば成功です。

bash
composer --version

2.2 Node.jsとnpmのインストール

Vue.jsの実行やフロントエンドアセットのビルドに必要です。Node.jsにはnpmがバンドルされています。

公式サイト (https://nodejs.org/) から、お使いのOSに合わせたインストーラーをダウンロードして実行するのが最も簡単です。多くの場合、「LTS (推奨版)」を選べば問題ありません。

インストール後、ターミナルで以下のコマンドを実行してバージョン情報が表示されれば成功です。

bash
node -v
npm -v

yarn はnpmの代替となるパッケージマネージャーです。npmよりも高速な場合があり、好みに応じてインストールしても良いでしょう。npmを使ってインストールできます。

bash
npm install --global yarn

インストール後、バージョンを確認します。

bash
yarn -v

この記事ではnpmを主に使いますが、yarn コマンドに置き換えても同様に動作します。

2.3 データベースの準備

XAMPP, MAMP, Laragonなどを使っている場合は、既にMySQLがインストールされており、管理ツール（phpMyAdminなど）も利用できるはずです。個別にインストールした場合は、別途データベースサーバーを起動し、必要に応じてデータベースユーザーとデータベースを作成しておいてください。

2.4 Laravel Installer (オプション)

Composerを使ってLaravelプロジェクトを作成することもできますが、Laravel Installerをグローバルにインストールしておくと、より簡単に新しいプロジェクトを作成できます。

bash
composer global require laravel/installer

インストール後、laravel new project-name の形式でプロジェクトを作成できるようになります。composer create-project を使う方法でも全く問題ありません。

2.5 コードエディタの設定

VS Codeを使う場合、以下の拡張機能をインストールしておくと開発効率が向上します。

  • PHP Intelephense: PHPの静的解析、補完、定義ジャンプなど。
  • Vetur または Vue Language Features (Volar): Vue.jsのシンタックスハイライト、補完、エラーチェックなど。VolarはVeturの後継であり、Vue 3に最適化されています。
  • Laravel Blade Snippets: Bladeテンプレートのシンタックスハイライトやスニペット。
  • ESLint, Prettier: コードの整形や品質チェック。

これで、Laravel + Vue.js開発に必要な基本的な環境が整いました。

3. 新しいLaravelプロジェクトの作成と認証機能の導入

環境の準備ができたら、新しいLaravelプロジェクトを作成し、Laravelが提供する認証スキャフォールディング（BreezeまたはJetstream）を使って認証機能を導入します。ここでは、シンプルでVue.jsスタックが用意されているLaravel Breezeを使用します。

3.1 Laravelプロジェクトの作成

ターミナルでプロジェクトを作成したいディレクトリに移動し、以下のいずれかのコマンドを実行します。

Laravel Installerを使う場合:

bash
laravel new my-laravel-vue-app

Composerを使う場合:

bash
composer create-project --prefer-dist laravel/laravel my-laravel-vue-app

my-laravel-vue-app はプロジェクト名です。このコマンドを実行すると、ComposerがLaravelの最新版と依存ライブラリをダウンロードし、プロジェクトディレクトリを作成・初期設定します。

プロジェクト作成後、作成されたディレクトリに移動します。

bash
cd my-laravel-vue-app

3.2 .env ファイルの設定

プロジェクトルートにある .env ファイルを開き、データベース接続情報などを設定します。デフォルトではSQLiteが設定されていますが、MySQLなど別のデータベースを使う場合は以下のように変更します。

dotenv
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=your_database_name # 作成したデータベース名
DB_USERNAME=your_db_user # データベースユーザー名
DB_PASSWORD=your_db_password # データベースパスワード

他の設定項目（APP_NAME, APP_URLなど）も必要に応じて設定してください。

3.3 開発サーバーの起動（一時確認）

プロジェクトが正しく作成されたか確認するために、Laravelの開発サーバーを起動してみましょう。

bash
php artisan serve

ターミナルに http://127.0.0.1:8000 のようなURLが表示されるので、ブラウザでアクセスしてみてください。Laravelの初期画面が表示されれば成功です。

開発サーバーは Ctrl+C で停止できます。

3.4 Laravel Breezeのインストールと設定

Laravel Breezeは、認証（登録、ログイン、パスワードリセット、メール認証など）に必要なルート、コントローラー、ビュー（またはフロントエンドコンポーネント）を簡単に追加できるパッケージです。Vue.jsを使った認証画面を構築するために、BreezeのVueスタックを使用します。

プロジェクトルートディレクトリで、以下のコマンドを実行します。

  1. Breezeパッケージのインストール:

    bash
    composer require laravel/breeze --dev

    これにより、開発環境でのみ使用するBreezeのPHPパッケージがインストールされます。

  2. Breezeのスキャフォールディングのインストール:

    bash
    php artisan breeze:install vue

    このコマンドを実行すると、どのスタックを使うか聞かれるので vue を選択します。さらに、TypeScriptを使うか、Pestを使うか聞かれます。今回はシンプルにJavaScriptとPHPUnit (デフォルト) を選択します。

    このコマンドは、Vue.jsの認証コンポーネント、対応するルーティングやコントローラー、そしてフロントエンドの依存関係 (package.json) をプロジェクトに追加・更新します。

  3. フロントエンドの依存関係のインストールとビルド:

    BreezeのVueスタックをインストールすると、package.json にVue.js関連の依存パッケージ（Vue本体、Vite、Piniaなど）が追加されます。これらのパッケージをインストールし、フロントエンドアセットをビルドする必要があります。

    bash
    npm install
    npm run dev

    • npm install は、package.json に定義されているNode.jsパッケージを node_modules ディレクトリにインストールします。
    • npm run dev は、package.json の scripts セクションに定義されている開発用ビルドコマンドを実行します。Laravel Mix (またはLaravel 9以降はVite) が設定されており、VueファイルやJavaScript、CSS/Sassなどをブラウザで読み込める形式にコンパイルします。開発中は npm run watch を実行すると、ファイルの変更を監視して自動的にビルドし直してくれるので便利です。Laravel 9以降のViteを使う場合は npm run dev で開発サーバーが起動し、ホットリロードも有効になります。

  4. データベースマイグレーションの実行:

    Breezeはユーザー認証に必要なテーブル定義（例: users テーブル）をマイグレーションファイルとして提供しています。これらのテーブルをデータベースに作成します。

    bash
    php artisan migrate

    php artisan migrate コマンドは、database/migrations ディレクトリにある実行されていないマイグレーションファイルを探し、順番に実行します。データベース接続情報が正しく設定されていれば、必要なテーブルが作成されます。

3.5 認証機能の確認

これで、LaravelプロジェクトにVue.jsを使った認証機能が組み込まれました。開発サーバーを起動して確認してみましょう。

bash
php artisan serve

ブラウザで http://127.0.0.1:8000 にアクセスします。以前はLaravelの初期画面でしたが、Breezeをインストールした後は異なる画面が表示されるはずです。（Breezeのバージョンや設定によるが、トップページにリンクが表示されるか、ルートが変更されている可能性がある）。

通常、認証関連のルートが追加されます。例えば、http://127.0.0.1:8000/register にアクセスすると、Vue.jsで構築された登録画面が表示されるはずです。同様に /login にアクセスするとログイン画面が表示されます。

これらの画面は、resources/js/Pages/Auth ディレクトリにあるVueファイル (Login.vue, Register.vue など) によってレンダリングされています。Laravel Breezeは、Laravel側のルーティング、コントローラーと、Vue.js側のこれらのコンポーネントを連携させることで、認証フローを実現しています。

4. Laravel Mix/ViteとVue.jsコンポーネントの組み込み

Laravelプロジェクト内でVue.jsを動かすためには、フロントエンドアセットをコンパイルして、Laravelのビュー（Bladeテンプレート）から読み込む必要があります。Laravelは標準で Laravel Mix (Laravel 9まで) または Vite (Laravel 9以降、推奨) を提供しており、これがこのプロセスを非常に簡単にしてくれます。Breezeをインストールした場合、これらの設定は自動的に行われています。

4.1 Laravel Mix (または Vite) の設定ファイル

プロジェクトルートにある webpack.mix.js (Mixの場合) または vite.config.js (Viteの場合) が、フロントエンドアセットのビルド設定ファイルです。

  • webpack.mix.js (Laravel Mix):

    “`javascript
    const mix = require(‘laravel-mix’);

    mix.js(‘resources/js/app.js’, ‘public/js’)
    .vue() // Vue.jsを有効にする
    .sass(‘resources/sass/app.scss’, ‘public/css’);
    “`

    Breezeをインストールした場合、これに加えて認証関連のJavaScriptファイルなども含まれることがあります。mix.js() は、指定したJSファイルを起点に依存関係を解決・コンパイルし、指定した出力ディレクトリ（public/js）に配置します。.vue() を呼び出すことで、.vue ファイルを処理できるようになります。

  • vite.config.js (Vite):

    Laravel 9以降でBreeze Vueスタックをインストールした場合、Viteがデフォルトになります。

    “`javascript
    import { defineConfig } from ‘vite’;
    import laravel from ‘laravel-vite-plugin’;
    import vue from ‘@vitejs/plugin-vue’;

    export default defineConfig({
    plugins: [
    laravel({
    input: ‘resources/js/app.js’, // エントリーポイント
    }),
    vue({ // Vueプラグインを有効化
    template: {
    transformAssetUrls: {
    base: null,
    includeAbsolute: false,
    },
    },
    }),
    ],
    });
    ``
    Viteも同様に、    resources/js/app.jsを起点として、@vitejs/plugin-vue` プラグインを使ってVueファイルを処理します。

これらの設定ファイルは、npm run dev, npm run watch, npm run prod といったコマンドを実行する際に参照され、フロントエンドアセットのコンパイル方法を定義します。

4.2 エントリーポイントファイル (resources/js/app.js)

resources/js/app.js は、Vue.jsアプリケーション全体のエントリーポイントとなるファイルです。ここでVueアプリケーションのインスタンスを作成し、必要なコンポーネントを登録したり、ルーターや状態管理ライブラリを設定したりします。

BreezeのVueスタックをインストールした場合、このファイルは以下のような内容になっているはずです（LaravelのバージョンやBreezeのバージョンによって細部が異なる場合があります）。

“`javascript
import ‘./bootstrap’; // axiosなどの設定

import { createApp } from ‘vue’;
import { createPinia } from ‘pinia’; // 状態管理ライブラリ（Pinia）

import App from ‘./Layouts/AuthenticatedLayout.vue’; // メインレイアウトなど
// または Inertia.js を使う場合は、 Inertia アプリケーションを初期化するコードになる

const pinia = createPinia();
const app = createApp({}); // または Inertia アプリケーションをマウントするコード

app.use(pinia);
// 他のプラグイン (routerなど) を必要に応じて使用

// グローバルコンポーネントの登録（必要な場合）
// app.component(‘example-component’, require(‘./components/ExampleComponent.vue’).default);

// HTML上のIDが’app’の要素にVueアプリケーションをマウント
app.mount(‘#app’);
“`

Laravel BreezeのVueスタックでは、Inertia.js というライブラリが使用されています。Inertia.jsは、SPA開発のような体験を、従来のサーバーサイドレンダリング（LaravelのBladeなど）のアプローチで実現するライブラリです。Bladeテンプレートを使いつつ、ページ遷移はJavaScriptで行い、ページの更新が必要な部分だけVueコンポーネントで置き換えるという動作をします。

したがって、Breeze Vueスタックの場合、resources/js/app.js は少し異なり、Inertiaアプリケーションの初期化コードが記述されています。

“`javascript
import ‘./bootstrap’;
import ‘../css/app.css’; // スタイルの読み込み

import { createApp, h } from ‘vue’;
import { createInertiaApp } from ‘@inertiajs/vue3’;
import { resolvePageComponent } from ‘laravel-vite-plugin/inertia-helpers’;
import { ZiggyVue } from ‘../../vendor/tightenco/ziggy/dist/vue.m’; // LaravelのルートをJSで使う

const appName = import.meta.env.VITE_APP_NAME || ‘Laravel’;

createInertiaApp({
title: (title) => ${title} - ${appName},
resolve: (name) => resolvePageComponent(./Pages/${name}.vue, import.meta.glob(‘./Pages/*/.vue’)),
setup({ el, App, props, plugin }) {
return createApp({ render: () => h(App, props) })
.use(plugin)
.use(ZiggyVue) // LaravelのルートヘルパーをVueで使えるようにする
.mount(el);
},
progress: {
color: ‘#4B5563’,
},
});
``
このコードは、Vue 3とInertia.jsを使ってアプリケーションを初期化しています。resolve関数は、Laravelから指定されたページコンポーネント（resources/js/Pagesディレクトリ内の.vue` ファイル）を読み込む役割をします。

4.3 Bladeテンプレートへの組み込み

コンパイルされたフロントエンドアセット（public/js/app.js, public/css/app.css など）を、LaravelのBladeテンプレートから読み込む必要があります。Laravelでは、アセットのURLを生成するために mix() または @vite() ヘルパー関数を使用します。これにより、開発環境ではソースマップ付きのファイルが、本番環境ではハッシュ化されたファイル名（キャッシュ対策）が自動的に使用されます。

Laravel Breezeのレイアウトファイル (resources/views/layouts/app.blade.php や resources/views/layouts/guest.blade.php など) を見てみましょう。<head> セクションや <body> 終了タグの直前あたりに、以下のような記述があるはずです。

Laravel Mix を使用している場合 (旧バージョン):

“`html

{{– ここにVueアプリケーションがマウントされる –}}
@yield(‘content’)


“`

Vite を使用している場合 (Laravel 9以降、Breeze Vueのデフォルト):

“`html


@vite([‘resources/js/app.js’, ‘resources/css/app.css’]) {{– Viteヘルパー –}}



“`

Viteの場合、HTML要素に特定のID (#app など) がなくても、VueコンポーネントはInertiaによって自動的に指定された要素（通常はBladeテンプレート内の <main> タグや特定の div）にレンダリングされます。

重要なのは、フロントエンドのアセット（JavaScriptやCSS）がBladeテンプレートで正しく読み込まれていること、そしてVueアプリケーションがマウントされる（またはInertiaによってページコンポーネントがレンダリングされる）場所がHTML内に存在することです。

4.4 独自のVueコンポーネントを作成して組み込む

Breezeによって認証機能が追加されましたが、独自のVueコンポーネントを作成してLaravelアプリケーションに組み込んでみましょう。Inertia.jsを使っている場合、ページ全体をVueコンポーネントとして作成し、それをLaravelのルートからレンダリングするのが一般的な方法です。

例として、簡単なメッセージ表示コンポーネントを作成し、それを新しいページとして表示させてみます。

  1. Vueコンポーネントの作成:
    resources/js/Pages ディレクトリ内に Welcome.vue を作成します。（Breezeインストール時に既に存在するかもしれません。その場合は内容を変更するか、別のファイル名にします）。

    “`vue

    ``
    このコンポーネントは、メッセージを表示し、ボタンをクリックするとメッセージが変更される簡単な例です。    setup` スクリプトブロックはVue 3のComposition APIを使用しています。

  2. Laravelルートの定義:
    このVueコンポーネントを表示するためのLaravelルートを定義します。routes/web.php を開きます。

    “`php
    <?php

    use Illuminate\Support\Facades\Route;
    use Inertia\Inertia; // Inertiaファサードをインポート

    Route::get(‘/’, function () {
    // resources/js/Pages/Welcome.vue コンポーネントをレンダリング
    // 第2引数は、Vueコンポーネントに渡すデータ（Props）
    return Inertia::render(‘Welcome’, [
    ‘message’ => ‘Hello from Laravel to Vue!’
    ]);
    });

    // Breezeが追加した認証関連ルートはここより下にあるはず
    require DIR.’/auth.php’;
    ``Inertia::render(‘Welcome’, …)は、Inertiaに対してresources/js/Pages/Welcome.vue` コンポーネントをレンダリングするように指示します。第2引数で渡した配列は、VueコンポーネントのPropsとして利用できます。

  3. VueコンポーネントでのPropsの受け取り:
    resources/js/Pages/Welcome.vue コンポーネントを修正し、Laravelから渡されたPropsを受け取るようにします。

    “`vue

    ``definePropsマクロを使って、受け取りたいPropsを定義します。ここではinitialMessage` という名前の文字列型のPropsを定義しました。

  4. フロントエンドアセットのビルド:
    変更をブラウザに反映させるには、フロントエンドアセットを再ビルドする必要があります。開発中は npm run dev または npm run watch (Viteの場合は npm run dev) を実行しておくと、ファイルの変更が自動的に検知されてビルドされます。

    “`bash
    npm run dev

    または

    npm run watch # Laravel Mixの場合
    “`

  5. 開発サーバーの起動と確認:
    Laravel開発サーバーを起動し、ブラウザでアクセスします。

    bash
    php artisan serve
    http://127.0.0.1:8000 にアクセスすると、作成した Welcome.vue コンポーネントがレンダリングされて表示されるはずです。Laravelから渡されたメッセージが表示され、ボタンをクリックするとメッセージがローカルで変更されることを確認できます。

これで、基本的なVueコンポーネントの作成、Laravelルートからの呼び出し、Propsの受け渡しができるようになりました。

5. バックエンド（Laravel）でのAPIルート定義

モダンなWebアプリケーションでは、フロントエンド（Vue.js）がバックエンド（Laravel）と非同期にデータ通信を行うことが一般的です。このために、LaravelでAPIエンドポイントを定義します。APIルートは、通常 routes/api.php ファイルに記述します。

5.1 APIルートファイルの理解

routes/api.php に定義されたルートは、自動的に /api のプレフィックスが付き、api ミドルウェアグループが適用されます。api ミドルウェアグループには、throttle (レート制限) や auth:api (トークンベースの認証) などが含まれることがあります（Breeze/Jetstreamの設定による）。

5.2 簡単なAPIエンドポイントの作成例

例として、商品リストを返す簡単なAPIエンドポイントを作成してみましょう。

  1. Controllerの作成:
    APIリクエストを処理するControllerを作成します。

    bash
    php artisan make:controller Api/ItemController --api
    --api オプションを付けると、index, store, show, update, destroy といったRESTfulなアクションメソッドがあらかじめ定義されたAPIコントローラーが生成されます (app/Http/Controllers/Api/ItemController.php)。

  2. Controllerの実装:
    app/Http/Controllers/Api/ItemController.php を開き、index メソッドに商品リストを返す処理を記述します。ここでは簡単のために静的なデータを返しますが、実際にはデータベースから取得します。

    “`php
    <?php

    namespace App\Http\Controllers\Api;

    use App\Http\Controllers\Controller;
    use Illuminate\Http\Request;

    class ItemController extends Controller
    {
    /*
    * Display a listing of the resource.
    /
    public function index()
    {
    // ここでデータベースから商品リストを取得する
    $items = [
    [‘id’ => 1, ‘name’ => ‘Laptop’, ‘price’ => 1200],
    [‘id’ => 2, ‘name’ => ‘Keyboard’, ‘price’ => 75],
    [‘id’ => 3, ‘name’ => ‘Mouse’, ‘price’ => 25],
    ];

        return response()->json($items); // JSON形式でデータを返す
}

// store, show, update, destroy メソッドも必要に応じて実装

    }
    ``response()->json()` ヘルパー関数を使うと、PHPの配列やオブジェクトを自動的にJSON形式に変換してレスポンスとして返してくれます。ステータスコードなども指定できます。

  3. APIルートの定義:
    routes/api.php を開き、作成したControllerのアクションに対応するルートを定義します。

    “`php
    <?php

    use Illuminate\Http\Request;
    use Illuminate\Support\Facades\Route;
    use App\Http\Controllers\Api\ItemController; // コントローラーをインポート

    // ログインユーザー情報を返すルート (Breeze/Jetstreamで追加される)
    Route::middleware(‘auth:sanctum’)->get(‘/user’, function (Request $request) {
    return $request->user();
    });

    // 商品リストを取得するAPIルート
    Route::get(‘/items’, [ItemController::class, ‘index’]);

    // 他のRESTfulなルートも追加可能
    // Route::post(‘/items’, [ItemController::class, ‘store’]);
    // Route::get(‘/items/{item}’, [ItemController::class, ‘show’]);
    // Route::put(‘/items/{item}’, [ItemController::class, ‘update’]);
    // Route::delete(‘/items/{item}’, [ItemController::class, ‘destroy’]);
    ``Route::get(‘/items’, [ItemController::class, ‘index’]);は、/api/itemsへのGETリクエストが来た際に、ItemControllerのindex` メソッドを実行するようにルーティングします。

  4. APIエンドポイントの確認:
    開発サーバー (php artisan serve) を起動した状態で、ブラウザまたはPostmanなどのツールから http://127.0.0.1:8000/api/items にアクセスしてみてください。定義した商品リストがJSON形式で表示されれば成功です。

    json
    [
    {
    "id": 1,
    "name": "Laptop",
    "price": 1200
    },
    {
    "id": 2,
    "name": "Keyboard",
    "price": 75
    },
    {
    "id": 3,
    "name": "Mouse",
    "price": 25
    }
    ]

これで、バックエンド側でフロントエンドが利用できるAPIエンドポイントを定義する準備ができました。

6. フロントエンド（Vue.js）からのAPI通信

バックエンドでAPIエンドポイントを定義したら、次はフロントエンド（Vue.jsコンポーネント）からそのAPIを呼び出してデータを取得し、表示する処理を実装します。API通信には、JavaScriptの標準機能であるFetch APIを使うこともできますが、より使いやすいライブラリとして Axios がよく利用されます。Laravel Breeze/JetstreamにもAxiosが含まれています。

6.1 Axiosのインストール

Axiosがプロジェクトにインストールされていない場合は、以下のコマンドでインストールします。（Breeze/Jetstreamを使っている場合は通常不要です）

“`bash
npm install axios

または

yarn add axios
“`

resources/js/bootstrap.js ファイルを見ると、Axiosが設定・インポートされていることが確認できます。ここでAxiosインスタンスを作成したり、共通ヘッダーを設定したりできます。

“`javascript
import axios from ‘axios’;

window.axios = axios;

window.axios.defaults.headers.common[‘X-Requested-With’] = ‘XMLHttpRequest’;
// 必要に応じて他の設定を追加
``window.axiosに代入することで、他のJavaScriptファイルからaxios` グローバル変数として簡単にアクセスできるようになります。

6.2 APIからデータを取得するVueコンポーネントの実装

先ほど作成した商品リストAPI (/api/items) を呼び出して、Vueコンポーネント内に表示してみましょう。新しいページコンポーネントとして作成します。

  1. Vueコンポーネントの作成:
    resources/js/Pages ディレクトリ内に ItemsList.vue を作成します。

    “`vue

    ``
    *    ref([]): 空の配列でitemsというリアクティブな状態を定義します。
    *    onMounted(async () => { … }): Vue 3のライフサイクルフックです。コンポーネントがDOMにマウントされた（画面に表示された）直後に実行される処理を記述します。非同期関数 (async) を使用しています。
    *    axios.get(‘/api/items’):/api/itemsエンドポイントにGETリクエストを送信します。awaitを使うことで、レスポンスが返ってくるまで待機します。
    *    response.data: Axiosのレスポンスオブジェクトには、APIから返されたデータがdataプロパティに含まれています。
    *    items.value = …:refで作成したリアクティブな変数に新しい値を代入する際は.valueを使います。これにより、テンプレートが自動的に更新されます。
    *    v-if=”items.length > 0″:items配列に要素がある場合にのみリストを表示します。
    *    v-for=”item in items” :key=”item.id”:items配列の各要素をループしてリストアイテムを生成します。:key` はVueが要素を効率的に更新するために必要です。

  2. Laravelルートの定義:
    この ItemsList.vue コンポーネントを表示するためのLaravelルートを定義します。routes/web.php を開きます。

    “`php
    <?php

    use Illuminate\Support\Facades\Route;
    use Inertia\Inertia;
    // … その他のuse文

    Route::get(‘/’, function () {
    return Inertia::render(‘Welcome’, [
    ‘message’ => ‘Hello from Laravel to Vue!’
    ]);
    });

    // 商品リストを表示するルート
    Route::get(‘/items’, function () {
    // resources/js/Pages/ItemsList.vue コンポーネントをレンダリング
    return Inertia::render(‘ItemsList’);
    });

    require DIR.’/auth.php’;
    ``/itemsというURLでItemsList.vue` が表示されるようにしました。

  3. フロントエンドアセットのビルド:
    Vueコンポーネントを変更したので、フロントエンドアセットを再ビルドします。

    bash
    npm run dev # または npm run watch

  4. 開発サーバーの起動と確認:
    Laravel開発サーバーを起動し、ブラウザで http://127.0.0.1:8000/items にアクセスします。

    bash
    php artisan serve
    「Loading items…」と表示された後、APIから取得した商品リストが表示されれば成功です。ブラウザの開発者ツール（Consoleタブ）でエラーが出ていないかも確認しましょう。

これで、Vue.jsコンポーネントからLaravelのAPIを呼び出し、取得したデータを画面に表示する基本的な流れが完成しました。

7. Vue.jsの基本的な使い方（データバインディング、イベント処理など）

APIからデータを取得して表示するだけでなく、ユーザーからの入力を受け付けたり、イベントに応じて画面を更新したりすることも、モダンなフロントエンド開発では重要です。ここでは、Vue.jsの基本的な機能であるデータバインディング、ディレクティブ、イベント処理について簡単に解説します。

先ほどの ItemsList.vue を少し改造して、アイテムを追加するフォームとボタンを追加してみましょう。

“`vue

“`

解説:

  • v-model (データバインディング):
    v-model="newItemName" や v-model.number="newItemPrice" は、フォーム要素 (<input>) の値とVueコンポーネントのリアクティブな状態 (newItemName, newItemPrice) を双方向にバインディングします。ユーザーが入力フィールドに値を入力すると、対応するリアクティブ変数の値が自動的に更新されます。逆に、リアクティブ変数の値をコードで変更すると、入力フィールドの値も更新されます。.number モディファイアは、入力値を数値として扱うように指定します。
  • v-if (条件付きレンダリング):
    v-if="items.length > 0" は、条件 (items 配列の長さが0より大きい) が真の場合にのみ、その要素（<ul>）と子要素をレンダリングします。条件が偽の場合は、v-else ディレクティブを持つ要素（<p>Loading items...</p> または <p>No items found.</p>) がレンダリングされます。
  • v-for (リストレンダリング):
    v-for="item in items" :key="item.id" は、items 配列をループして、各要素 (item) に対してリストアイテム (<li>) をレンダリングします。:key="item.id" は必須ではありませんが、リストの変更（追加、削除、並べ替えなど）をVueが効率的に、かつ正しく追跡するために推奨されます。各アイテムにユニークなキーを指定します。
  • @click (イベントハンドリング):
    @click="addItem" や @click="deleteItem(item.id)" は、要素（<button>）のクリックイベントにイベントハンドラー関数 (addItem, deleteItem) を紐付けます。クリックされると、対応するJavaScript関数が実行されます。deleteItem のように引数を渡すことも可能です。@click は v-on:click の省略記法です。
  • ref() と .value:
    Vue 3のComposition APIでは、リアクティブな状態を ref() 関数で作成します。作成された ref オブジェクトは .value プロパティを通じてその値にアクセス・変更できます。テンプレート内では .value は不要です。
  • onMounted():
    コンポーネントがDOMにマウントされた後に実行されるライフサイクルフックです。APIから初期データを取得するのに適しています。
  • Axiosを使ったPOST/DELETEリクエスト:
    axios.post('/api/items', { ... }) で新しいアイテムデータを /api/items にPOST送信します。第2引数に送信したいデータをオブジェクトとして渡します。axios.delete(/api/items/${itemId}) で指定したアイテムIDに対応するエンドポイントにDELETE送信します。

バックエンドAPIの実装（補足）:

上記のVueコンポーネントの addItem や deleteItem 関数は、それぞれ /api/items へのPOSTリクエストと /api/items/{id} へのDELETEリクエストを送信していますが、これらのリクエストを受け付けて処理するバックエンドのAPIエンドポイント（Controllerメソッド）はまだ実装していません。実際にこのコードを動作させるには、Api/ItemController に store メソッドと destroy メソッドを実装し、routes/api.php に対応するルートを追加する必要があります。

例（app/Http/Controllers/Api/ItemController.php に追加）：

“`php
// … use statements …

class ItemController extends Controller
{
// … index method …

/**
 * Store a newly created resource in storage.
 */
public function store(Request $request)
{
    // バリデーション（ここでは省略）
    $request->validate([
        'name' => 'required|string|max:255',
        'price' => 'required|numeric|min:0',
    ]);

    // データベースに保存する処理（ここでは静的なデータを返す例）
    // $item = Item::create($request->validated()); // Eloquentを使う場合

    // 保存されたアイテムを返す（仮のIDを付与）
    $newItem = [
        'id' => rand(100, 1000), // 実際はDBによって生成されるID
        'name' => $request->name,
        'price' => $request->price,
    ];

    return response()->json($newItem, 201); // 201 Created ステータスコードと共に返す
}

// ... show method ...

/**
 * Remove the specified resource from storage.
 */
public function destroy(int $id) // ルートパラメータでIDを受け取る
{
    // データベースから指定されたIDのアイテムを削除する処理（ここでは成功を返すだけ）
    // $item = Item::findOrFail($id);
    // $item->delete(); // Eloquentを使う場合

    return response()->json(null, 204); // 204 No Content ステータスコード（成功だがコンテンツなし）
}

}
“`

例（routes/api.php に追加）：

“`php
// … existing routes …

Route::get(‘/items’, [ItemController::class, ‘index’]);
Route::post(‘/items’, [ItemController::class, ‘store’]); // 追加
Route::delete(‘/items/{id}’, [ItemController::class, ‘destroy’]); // 追加
“`

これらのバックエンドの実装を追加することで、Vueコンポーネントからのアイテム追加・削除が実際に動作するようになります。

8. Laravel Mix/Viteによるアセットビルドのコマンド

開発中に npm run dev または npm run watch を実行してフロントエンドアセットをビルドしてきましたが、本番環境にデプロイする際には、より最適化されたアセットをビルドする必要があります。

  • 開発用ビルド: npm run dev または yarn dev
    開発中に使用します。ソースマップが含まれたり、最適化が控えめだったりします。変更を素早く反映するために使用します。Laravel 9以降のViteでは、このコマンドで開発サーバーも起動します。

  • 変更監視ビルド: npm run watch または yarn watch (Mixの場合)
    開発中に使用します。ソースファイルの変更を監視し、変更があった際に自動的にビルドを実行します。手動で何度もコマンドを実行する手間が省けます。Viteでは npm run dev がこの機能を含みます。

  • 本番用ビルド: npm run prod または yarn prod
    デプロイ前に使用します。JavaScriptやCSSがミニファイ（圧縮）され、不要なコードが削除されるなど、パフォーマンスを最大限に引き出すための最適化が行われます。アセットファイル名にハッシュ値が付加されることもあります（app.js -> app.abcdef123456.js）。Bladeテンプレートでは mix() や @vite() ヘルパーがこのハッシュ化されたファイル名を自動的に解決してくれます。

デプロイする際は、必ず npm run prod を実行して、生成されたアセットをサーバーにアップロードしてください。

9. 開発ワークフローのまとめ

Laravel + Vue.js開発の一般的なワークフローは以下のようになります。

  1. 機能要件の定義: どのような機能が必要かを明確にします。
  2. バックエンド設計:
    • データベーススキーマの設計（マイグレーションファイルを作成）。
    • Eloquentモデルの定義。
    • APIエンドポイントの定義（routes/api.php）。
    • ControllerでのAPIロジックの実装（データの取得、保存、更新、削除など）。
    • 必要に応じてRequestクラスでのバリデーション定義。
    • 認証、認可ロジックの実装。
  3. フロントエンド設計:
    • UIコンポーネントの設計（どの部分をVueコンポーネントにするか）。
    • コンポーネントの作成（.vue ファイル）。
    • Vueコンポーネント内での状態管理（ref, reactive, Piniaなど）。
    • ユーザーインタラクション（イベント処理、データバインディング）。
    • バックエンドAPIとの通信ロジックの実装（Axiosなど）。
    • Inertia.jsを使用している場合は、LaravelルートとVueコンポーネントのマッピングを定義（routes/web.php で Inertia::render(...)）。
  4. 連携とテスト:
    • フロントエンドからバックエンドAPIを呼び出し、期待通りにデータが取得・更新できるかテストします。
    • ローカルで php artisan serve と npm run dev または npm run watch (Viteの場合は npm run dev) を実行して開発を進めます。
    • 必要に応じてPHPUnit (Laravel) やJest (Vue.js) などで自動テストを記述します。
  5. ビルドとデプロイ:
    • 本番環境へのデプロイ準備として、npm run prod を実行してフロントエンドアセットをビルドします。
    • プロジェクトファイルをサーバーにアップロードします。
    • サーバー側で依存関係をインストール (composer install --no-dev, npm install --production)。
    • .env ファイルを設定します。
    • マイグレーションを実行 (php artisan migrate --force)。
    • キャッシュをクリア (php artisan optimize:clear など)。
    • ウェブサーバー（Nginx, Apache）を設定します。

このワークフローは一般的なものです。プロジェクトの規模やチームの体制によって最適なワークフローは異なりますが、バックエンドとフロントエンドの役割を明確に分けて開発を進めることが重要です。

10. デプロイの基本

ローカルでの開発が完了したら、アプリケーションをインターネット上に公開するためにサーバーへデプロイする必要があります。Laravelアプリケーションのデプロイ手順は多岐にわたりますが、ここでは基本的な考え方と最低限必要なコマンドを説明します。

基本的なデプロイ手順:

  1. 本番用ビルド:
    ローカルまたはデプロイサーバー上で、本番用のフロントエンドアセットをビルドします。
    bash
    npm install --production # 本番環境に必要なNode.jsパッケージのみインストール
    npm run prod # 本番用ビルドを実行
    このコマンドで public/js, public/css ディレクトリなどに、最適化されたファイルが生成されます。

  2. サーバーへのファイル転送:
    ローカルのプロジェクトファイルをサーバーにアップロードします（Gitを使ってクローンするのが一般的です）。.env ファイルは機密情報を含むため、バージョン管理システムには含めず、サーバー側で別途設定します。

  3. サーバー上での環境設定:

    • プロジェクトルートに .env ファイルを設置し、データベース接続情報やAPP_KEY（php artisan key:generate で生成）、その他の環境固有の設定を行います。
    • storage ディレクトリと bootstrap/cache ディレクトリにウェブサーバーから書き込み可能なパーミッションを設定します。

  4. PHP依存関係のインストール:
    サーバー上でComposerを使ってPHPの依存ライブラリをインストールします。開発環境のみで必要なパッケージはインストールしないように --no-dev オプションを付けます。
    bash
    composer install --optimize-autoloader --no-dev

  5. データベースマイグレーションの実行:
    本番環境のデータベースにテーブルを作成・更新します。本番環境でマイグレーションを実行する場合は、確認なしで実行するために --force オプションを付けるのが一般的です。
    bash
    php artisan migrate --force

  6. キャッシュのクリア:
    設定キャッシュやルートキャッシュなどをクリアして、.env ファイルやコードの変更が反映されるようにします。
    bash
    php artisan optimize:clear
    または、個別にキャッシュをクリアするコマンドを使います。
    bash
    php artisan cache:clear
    php artisan config:cache
    php artisan route:cache
    php artisan view:cache

  7. ウェブサーバーの設定:
    ApacheやNginxなどのウェブサーバーを設定し、ドキュメントルートをLaravelプロジェクトの public ディレクトリに指定します。これにより、アプリケーションへのアクセスがすべて public/index.php を通るようになります。

これらの手順は基本的なものであり、使用するサーバー環境（共用サーバー、VPS、クラウドサービスなど）やデプロイツール（Deployer, Laravel Forge, Envoyerなど）によって具体的なコマンドや手順は異なります。

11. さらに学ぶために

この記事では、LaravelとVue.jsを使った開発の基本的な流れを網羅しましたが、それぞれのフレームワークにはさらに多くの機能や高度な使い方があります。ステップアップのために、以下のトピックについて学ぶことをお勧めします。

Laravel:

  • Eloquent ORM: リレーション（一対一、一対多、多対多）、リレーションのロード、スコープ、ミューテーター、アクセサーなど、より高度なデータベース操作。
  • Laravel Collections: 配列や連想配列を扱うための強力な機能。
  • ミドルウェア: リクエスト/レスポンスの処理パイプライン。認証以外のカスタムミドルウェアの作成。
  • サービスコンテナとサービスプロバイダ: Laravelの基盤となるDI (Dependency Injection) とアプリケーションの起動処理。
  • Artisanコマンド: カスタムコマンドの作成。
  • タスクスケジューリングとキュー: 定期実行タスクや非同期処理。
  • テスト: PHPUnitを使ったユニットテスト、機能テスト、ブラウザテスト。
  • セキュリティ: CSRF対策、XSS対策、パスワードハッシュ、暗号化。

Vue.js:

  • Vue Router: SPAを構築するためのルーティングライブラリ。
  • Pinia (または Vuex): アプリケーション全体で共有する状態を管理するためのライブラリ。大規模アプリケーションでは必須になることが多いです。
  • コンポーネントの詳細: Propsのバリデーション、Emitを使った子コンポーネントから親へのイベント通知、Slotsを使ったコンテンツ配布、Provide/Injectを使った祖先/子孫コンポーネント間のデータ受け渡し。
  • コンポジションAPIの詳細: computed, watch, watchEffect などの使い方。
  • カスタムディレクティブとプラグイン: 再利用可能なDOM操作や機能拡張。
  • テスト: JestやVue Test Utilsを使ったコンポーネントテスト。
  • TypeScript: Vue.jsアプリケーションをTypeScriptで開発する方法。
  • その他のエコシステム: Vuetify, Quasar Framework (UIフレームワーク)、Element Plus (UIコンポーネントライブラリ) など。

Laravel + Vue.js連携:

  • Inertia.js: LaravelとVue.js (またはReact, Svelte) を組み合わせてSPAのような開発体験を、従来のサーバーサイドレンダリングのアーキテクチャで実現するライブラリ。Laravel BreezeのVueスタックで使用されています。
  • Server-Side Rendering (SSR): Vue.jsコンポーネントをサーバー側でレンダリングし、初期表示速度やSEOを改善する方法。

これらの技術やトピックを学ぶことで、より複雑なアプリケーションを効率的に開発できるようになります。

12. まとめ

この記事では、LaravelとVue.jsを組み合わせたWebアプリケーション開発の最初の一歩として、環境構築から基本的な使い方、API通信、ビルドプロセスまでを詳細に解説しました。

  • Laravelはその堅牢なバックエンド機能で開発を効率化し、Vue.jsはプログレッシブで学習しやすい性質を持ちながらリッチなUIを実現します。
  • 両者を組み合わせることで、バックエンドとフロントエンドの役割を明確に分け、それぞれの得意な部分を活かした開発が可能になります。
  • Laravel Breezeを使えば、Vue.jsを使った認証機能を素早く導入できます。
  • Laravel Mix/Viteがフロントエンドアセットのビルドを担い、Bladeテンプレートへの組み込みを容易にします。
  • AxiosなどのHTTPクライアントライブラリを使って、VueコンポーネントからLaravel APIを呼び出し、データをやり取りできます。
  • Vue.jsのデータバインディング、ディレクティブ、イベント処理を理解することで、インタラクティブなUIを構築できます。

初めてのLaravel+Vue.js開発は、学ぶべきことが多くて圧倒されるかもしれませんが、一つずつ着実に進めていけば必ず習得できます。この記事が、あなたの学習ジャーニーの良い出発点となることを願っています。

現代のWeb開発において、バックエンドとフロントエンドを連携させるスキルは非常に重要です。LaravelとVue.jsは、そのための優れた選択肢となるでしょう。ぜひ、実際に手を動かして、コードを書きながら学んでいってください。

あなたの学習と開発の成功を応援しています！

コメントする

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

上部へスクロール