Vue.js Vueプロジェクトの構造：App.vue と main.js を読む – 4/12
Vueも「どこに何を書くか」で迷子になりがちです。ここでは最重要ファイルの役割と、コンポーネントを追加する場所を整理します。重要ファイルの全体像Vite + Vueの典型構造は次の通りです。index.html：<div id="app">...
Vue.js
Vue.js Vue.js Vue開発環境を作る：ViteでVue 3プロジェクトをセットアップ – 3/12
VueもViteでの開発が主流です。ここではプロジェクト作成から起動確認までを行い、つまずきポイントも整理します。必要なものNode.js（推奨：LTS）npmエディタバージョン確認：node -vnpm -vViteでVueプロジェクト作...
Vue.js Vueの仕組み：リアクティブシステムと再描画を理解する – 2/12
Vueを理解する鍵は「リアクティブ（反応する）なデータ」です。内部実装の詳細よりも、開発者がバグらせないための考え方に絞って説明します。リアクティブとはVueではデータ（state）が変わると、依存しているUIが自動で更新されます。これをリ...
Vue.js Vue.jsとは？初心者向けにわかりやすく解説 – 1/12
この記事ではVue.jsの位置づけ、Reactとの違い、学習の前提、そして本連載のゴールを整理します。Vue 3（Composition API）を前提に進めます。Vue.jsは何を解決するのかVue.jsは、UIを作るためのJavaScr...
PHP Vue.js問い合わせフォームを強化！reCAPTCHA利用有無の切り替えと項目追加の実装
1. はじめにこの記事では、Vue.js を使用した問い合わせフォームの機能拡張について解説します。具体的には、以下のポイントを中心に変更と追加を行いました。reCAPTCHA利用有無の切り替え機能を追加 - 環境変数からreCAPTCHA...
PHP Vue.js お問い合わせフォームにMySQL保存機能を追加する方法
はじめにWebアプリケーションにおいて、お問い合わせフォームは非常に重要な機能です。この記事では、Vue.jsとPHPを使用したお問い合わせフォームに、MySQLデータベースへの保存機能を追加する方法を詳しく解説します。1. データベースの...
PHP Vue.js | お知らせ管理機能への掲載期間と掲載ステータス追加
はじめにお知らせ機能はユーザーとの重要なコミュニケーション手段の一つです。今回、既存の「お知らせ管理」機能に以下の新機能を追加しました：掲載期間の設定：お知らせの掲載開始日と終了日を指定できるように。掲載ステータスの設定：お知らせが「下書き...
PHP Vue.js | お知らせ機能の追加と管理者用管理機能の実装
はじめに今回、メールアカウント申請システムに「お知らせ機能」を実装しました。この機能により、利用者に重要なお知らせを迅速に共有でき、管理者はお知らせの作成や編集、削除を行えるようになりました。本記事では、実装したコードを交えて、機能の概要を...
PHP Vue.js | ユーザー管理にCRUD機能を追加
Webアプリケーションで効率的な運用を支えるためには、管理機能の強化が欠かせません。今回、メールアカウント申請システムに「ユーザー管理」のCRUD機能（Create, Read, Update, Delete）を追加しました。この機能により...
PHP Vue.js | 権限管理とユーザー管理機能の追加について
はじめに権限管理とユーザー管理は、多くのシステムにおいて不可欠な要素です。本記事では、既存の「メールアカウント申請システム」に権限管理とユーザー管理機能を追加したプロセスを紹介します。この機能追加により、システム管理者が他のユーザーの管理を...
PHP Vue.js | 社内用メールアカウント申請システムを開発しました
はじめに日々の業務の中で、メールアカウントの発行申請プロセスに非効率を感じていませんか？手動での申請や承認フローは、対応漏れや申請状況の不透明さにつながりやすく、担当者にとっても負担が大きい課題です。そこで、申請から承認、ステータス管理まで...
PHP Vue.js お問い合わせフォームに CSV 保存機能を追加する方法
この記事では、Vue.js を使用したお問い合わせフォームに CSV 保存機能 を追加する方法を説明します。さらに、reCAPTCHA や CSRFトークン を導入し、セキュアなフォームを実現します。プロジェクトのファイル構成以下のような構...
PHP Vue.js フォームに CSRF 対策を追加する方法
お問い合わせフォームを開発する際、CSRF（クロスサイトリクエストフォージェリ）攻撃を防ぐことは重要です。本記事では、Vue.jsとPHPを用いて、CSRF対策を組み込んだ安全なフォームを作成する方法を解説します。概要CSRF（Cross-...
PHP Vue.jsのフォームにreCAPTCHAを導入する方法
この記事では、Vue.jsを使ったお問い合わせフォームにGoogle reCAPTCHAを導入し、スパム対策を強化する方法を解説します。このフォームは、入力画面、確認画面、完了画面の3ステップで構成され、メール送信機能も実装されています。ま...
PHP Vue Routerを使ってお問い合わせフォームを作成しよう
本記事では、Vue.jsのVue Routerを使用して、3ステップ構成のお問い合わせフォームを作成する方法を紹介します。Vue Routerを利用することで、画面ごとにURLを分けて直感的な操作性を実現します。使用技術とバージョン情報Vu...
PHP Vue.jsとPHPで作るお問い合わせフォーム
お問い合わせフォームは、多くのウェブサイトで必要とされる重要な機能です。本記事では、Vue.jsを使って動的なユーザーインターフェイスを作り、PHPを使って問い合わせ内容を処理・送信するシンプルなフォームを構築します。使用したツールとバージ...