JavaScript 【Vue】VeeValidateでフォームバリデーションを実装する
こんにちは、かつコーチです。前回は、VueUseを使ってブラウザAPIまわりの処理を効率化する方法を解説しました。今回は、Vueアプリで避けて通れない「フォームバリデーション」を、専用ライブラリのVeeValidateで実装する方法を扱いま...
JavaScript
JavaScript 
JavaScript 【TypeScript基礎学習5】関数の型について理解する
こんにちは、かつコーチです。TypeScriptでは、関数の型定義は非常に重要で、関数の引数や戻り値に対して正確な型注釈を行うことで、型安全性を保ちながらコードを書くことができます。ここでは、TypeScriptにおける関数の型に関連する詳...
JavaScript 【TypeScript基礎学習4】関数の作り方について理解する
こんにちは、かつコーチです。プログラミングにおいて関数はとても重要な項目です。TypeScriptでは、関数の作成方法や型定義について強力な機能が提供されており、型安全なコードを書くことができます。ここでは、関数の基本的な作成方法から、関数...
JavaScript 【TypeScript基礎学習3】オブジェクト指向について理解する
こんにちは、かつコーチです。今回は、プログラミング界隈でよく言われるオブジェクト指向についてです。TypeScriptでもオブジェクト指向の考え方があり、習得する上では重要になってきます。TypeScriptでは、オブジェクト指向プログラミ...
JavaScript 【TypeScript基礎学習2】基本的な文法と型について理解する
こんにちは、かつコーチです。今回は、TypeScriptにおける基本的な文法と型について解説します。JavaScriptの変化版なので、ほとんど同じですが、おさらいしてみようと思います。TypeScriptの基本的な文法と型については以下の...
JavaScript 【TypeScript基礎学習1】TypeScriptとは？
こんにちは、かつコーチです。今日はTypeScriptについて解説します。最近、JavaScriptからVue.jsやReact.js、そのフレームワークとして、Nuxt.jsやNext.jsといったものも流行っていますね。そんな中、最も人...
JavaScript 【JavaScript】スタイルをJavaScriptから操作する方法
こんにちは、かつコーチです。前回はclassListを使ったクラスの操作を解説し、「見た目の切り替えはCSSに任せ、JavaScriptはクラスの付け外しに専念する」という考え方を紹介しました。とはいえ、実務では「マウスの位置に合わせて要素...
JavaScript 【JavaScript】classListでクラスを操作する方法
こんにちは、かつコーチです。前回は要素の追加・削除を解説しました。今回は、Webサイトでよく見る「メニューを開閉する」「タブを切り替える」「ボタンを押すと選択状態になる」といった動きの土台になる、クラスの操作方法を扱います。見た目の変化はC...
JavaScript 【JavaScript】要素の追加・削除（createElement, appendChild等）
こんにちは、かつコーチです。前回は querySelector を使って、DOMツリーの中から目的の要素を取得する方法を解説しました。今回は一歩進んで、DOMツリーそのものに新しい要素を追加したり、不要な要素を削除したりする方法を扱います。...
JavaScript 【JavaScript】querySelectorで要素を取得する方法
こんにちは、かつコーチです。前回はDOMの仕組みについて解説し、DOM操作は「要素を取得する」→「要素を操作する」の2ステップが基本だとお伝えしました。今回はその1ステップ目、「目的の要素をどうやって探し出すか」を扱っていきます。要素の取得...
JavaScript 【JavaScript】DOMとは？HTMLとJavaScriptをつなぐ仕組み
こんにちは、かつコーチです。前回までは、変数・条件分岐・繰り返し・関数・配列・モジュールといった、JavaScriptそのものの文法を扱ってきました。ここからは少し毛色が変わります。今回からは、JavaScriptを使って実際に「画面を動か...
JavaScript 【JavaScript】モジュール（import/export）の基本
こんにちは、かつコーチです。前回はasync/awaitを使った非同期処理の書き方を解説しました。今回のテーマは、コードを複数のファイルに分割して管理するための仕組み「モジュール（import/export）」です。これまでの記事のコードは...
JavaScript 【JavaScript】async/awaitで非同期処理をスッキリ書く
こんにちは、かつコーチです。前回はPromiseの基本と、.then()をつなげて非同期処理を書く方法を解説しました。今回はそのPromiseをさらに読みやすく書けるようにする「async/await」を扱います。async/awaitはP...
JavaScript 【JavaScript】Promiseの基本
こんにちは、かつコーチです。前回はコールバック関数と、ネストが深くなる「コールバック地獄」について解説しました。今回はその解決策として登場する「Promise」を扱います。fetchを使ったことがある人なら、.then()という書き方を見た...
JavaScript 【JavaScript】コールバック関数とは？非同期処理の入り口
こんにちは、かつコーチです。前回はthisの挙動について解説しました。今回は、非同期処理を理解するための最初の一歩となる「コールバック関数」を扱います。setTimeoutやaddEventListenerを使ったことがあれば、実は知らない...
JavaScript 【JavaScript】thisの挙動を理解する
こんにちは、かつコーチです。前回はクロージャについて解説しました。今回のテーマは、JavaScriptを学んでいる人の多くがつまずく「this」です。「thisって結局何を指してるの？」「さっきまで動いてたのに急にundefinedになった...
JavaScript 【JavaScript】クロージャをわかりやすく解説
こんにちは、かつコーチです。前回はデフォルト引数の使い方を解説しました。今回のテーマは「クロージャ」です。JavaScriptを学んでいると必ずどこかで出会う言葉ですが、名前の響きに反して難しそうに見えてしまい、苦手意識を持つ人が多いテーマ...
JavaScript 【JavaScript】デフォルト引数の使い方
こんにちは、かつコーチです。前回はスプレッド構文と残余引数を解説しました。今回は基本に立ち返って、「デフォルト引数」を扱います。関数の引数が渡されなかったときに困った経験がある人は多いと思いますが、デフォルト引数を使えば、そうした場面をとて...
JavaScript 【JavaScript】スプレッド構文・残余引数の使い方
こんにちは、かつコーチです。前回は分割代入で、オブジェクトや配列から値を取り出す方法を解説しました。今回は、同じ ...（ドット3つ）という記号を使う「スプレッド構文」と「残余引数（レストパラメータ）」を取り上げます。見た目は同じ ... ...
JavaScript 【JavaScript】分割代入（Destructuring）の使い方
こんにちは、かつコーチです。前回はテンプレートリテラルで文字列を扱う方法を解説しました。今回は「分割代入（Destructuring）」を取り上げます。オブジェクトや配列から値を取り出すコードは、慣れないうちは同じような記述が何行も続きがち...