JavaScript 【Vue】script setupの書き方：Composition APIの基本
こんにちは、かつコーチです。前回は v-for ・ v-if を使ったリスト表示と条件分岐を解説しました。今回からは一歩進んで、Vue.jsの現在の主流である「Composition API」を扱っていきます。その入り口となるのが <scr...
Vue
JavaScript JavaScript 【Vue】v-for・v-ifでリスト表示と条件分岐を書く
こんにちは、かつコーチです。前回は v-model によるフォームの双方向バインディングを扱いました。今回は、Vueの基本文法シリーズの締めくくりとして、リストを繰り返し表示する v-for と、条件によって表示・非表示を切り替える v-i...
JavaScript 【Vue】v-modelでフォームの双方向バインディングを実装する
こんにちは、かつコーチです。前回は v-bind で属性を動的にバインドする方法を扱いました。今回は、フォーム入力とデータをつなぐ v-model について解説します。v-model はVueの中でも特に「魔法っぽく見える」機能ですが、中身...
JavaScript 【Vue】v-bindで属性・プロパティを動的にバインドする
こんにちは、かつコーチです。前回は v-on によるイベントハンドリングを扱いました。今回は、HTML属性やコンポーネントのプロパティを「動的に」切り替える v-bind ディレクティブを解説します。v-on が「操作を検知する」仕組みなら...
JavaScript 【Vue】methodsとイベントハンドリング（v-on）の書き方
こんにちは、かつコーチです。前回はcomputedで算出プロパティを扱いました。今回は、ボタンのクリックやフォームの入力など「ユーザーの操作」に反応する仕組み、v-on ディレクティブとイベントハンドラの書き方を解説します。画面が「動く」感...
JavaScript 【Vue】computedで算出プロパティを使いこなす
こんにちは、かつコーチです。前回は ref と reactive の違いを扱いました。今回は、Vue.jsの学習でほぼ全員がつまずく「computed」について解説します。「メソッドで同じことができるのに、なぜcomputedを使うの？」と...
JavaScript 【Vue】refとreactiveの違い：Vueのリアクティブシステム入門
こんにちは、かつコーチです。前回は記法対応表でuseStateとrefの対応を軽く紹介しました。今回はそのrefをもう少し深掘りしつつ、もう一つの選択肢であるreactiveとの違いを整理していきます。「結局どっちを使えばいいの？」という疑...
JavaScript 【Vue】Reactを知っている人向け：ReactとVueの記法対応表
こんにちは、かつコーチです。前回はテンプレート構文の基本として、Mustache構文とディレクティブを解説しました。今回は少し趣向を変えて、「ReactではこうだったけどVueではどう書くのか」を、記法ごとに対応表で整理していきます。Rea...
JavaScript 【Vue】テンプレート構文の基本：Mustache構文とディレクティブ
こんにちは、かつコーチです。前回はViteでVueの開発環境を作りました。今回は、.vueファイルの<template>部分に書く、Vue独自のテンプレート構文を解説していきます。ここを押さえると、Vueらしいコードがぐっと読み書きしやすく...
JavaScript 【Vue】Vue.jsの環境構築：Viteで開発環境を作る
こんにちは、かつコーチです。前回はVue.jsとReactの立ち位置の違いについて解説しました。今回は、実際に自分のパソコンでVueを動かせるようにする「環境構築」をやっていきます。手を動かして初めて実感が湧く部分なので、ぜひ一緒に進めてみ...
JavaScript 【Vue】Vue.jsとは？Reactとの違いを初心者向けに解説
こんにちは、かつコーチです。React編50記事、お疲れさまでした。ここからは、いよいよVue.js編がスタートします。「Reactは学んだけど、Vueってどう違うの？」という方にも、「Vueから初めてのフロントエンドフレームワークに触れる...
JavaScript 【Vue】Vitestの基本：Vueでテストを書く準備
こんにちは、かつコーチです。前回は、VueアプリのXSS対策について解説しました。認証・セキュリティ編はここで一区切りとなり、今回からは「テスト編」に入ります。まずはVueプロジェクトで定番のテストランナーであるVitestの基本を押さえて...
JavaScript 【Vue】VueアプリのXSS対策
こんにちは、かつコーチです。前回は、Vueアプリに認証機能を実装するパターンを解説しました。認証・セキュリティ編の2本目となる今回は、Webアプリの代表的な脆弱性であるXSS（クロスサイトスクリプティング）への対策を扱います。XSSとは？悪...
JavaScript 【Vue】Vueアプリに認証機能を実装するパターン
こんにちは、かつコーチです。前回までのデータ連携編で、axios・VueUse・VeeValidateを使ったAPI連携とフォーム実装を扱いました。ここからは認証・セキュリティ編に入ります。第一弾は、Vueアプリに認証機能を組み込む際の代表...
JavaScript 【Vue】VeeValidateでフォームバリデーションを実装する
こんにちは、かつコーチです。前回は、VueUseを使ってブラウザAPIまわりの処理を効率化する方法を解説しました。今回は、Vueアプリで避けて通れない「フォームバリデーション」を、専用ライブラリのVeeValidateで実装する方法を扱いま...
Laravel 【Laravel】Vuejs、Inertia、Laravelでの画像アップロードの方法
こんにちは、かつコーチです。今回は、Vuejs、Inertia、Laravelを使って開発しているときの、画像アップロードの方法について解説します。Laravelで開発しているときに、結構ハマったところなので、備忘録として書いておきます。方...
Laravel 【Laravel】Laravelでファイルを扱う際のパターン集
こんにちは、かつコーチです。Laravelにおけるファイルアップロードは、フロントエンドとバックエンドの組み合わせによって異なる実装パターンがあります。それぞれのフレームワークやライブラリでの実装方法と、それぞれの特徴・注意点について解説し...
JavaScript 【Laravel × Inertia.js】Inertia.jsを利用するときとは？
こんにちは、かつコーチです。前回はInertia.jsに基本について解説しましたが、実際にはどのようなときに使うのでしょうか？今回はInertia.jsを使うときについて解説します。Inertia.jsは、バックエンド（Laravelなど）...