JavaScript 【Vue】v-bindで属性・プロパティを動的にバインドする
こんにちは、かつコーチです。前回は v-on によるイベントハンドリングを扱いました。今回は、HTML属性やコンポーネントのプロパティを「動的に」切り替える v-bind ディレクティブを解説します。v-on が「操作を検知する」仕組みなら...
Vue
JavaScript 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で実装する方法を扱いま...