JavaScript 【JavaScript】JavaScriptのデバッグ手法まとめ
こんにちは、かつコーチです。前回はブラウザ互換性対応の考え方を解説しました。そして今回が、JavaScript基礎シリーズの最終回です。最後のテーマは「デバッグ」、つまり「コードがなぜ思った通りに動かないのかを調べる技術」です。エラーの読み...
JavaScript
JavaScript JavaScript 【JavaScript】ブラウザ互換性対応の考え方
こんにちは、かつコーチです。前回は非同期処理でハマりやすい罠を解説しました。今回のテーマは「ブラウザ互換性」です。自分のパソコンでは完璧に動いていたはずのコードが、別のブラウザや古い環境ではエラーになる、あるいは見た目が崩れる。こうした経験...
JavaScript 【JavaScript】非同期処理でハマりやすい罠と対処法
こんにちは、かつコーチです。前回はundefinedとnullの違いを解説しました。今回のテーマは、多くの学習者が一度は必ずつまずく「非同期処理」です。async/awaitやPromiseの書き方自体は覚えても、いざ実務で使うと「あれ、な...
JavaScript 【JavaScript】undefined・nullの扱い方でハマらないために
こんにちは、かつコーチです。前回はエラーメッセージの読み方を解説しました。その中でも何度も登場したnull、そしてよく似たundefined。この2つは見た目も意味も似ているようで、実は明確に役割が違います。違いを理解しないままコードを書い...
JavaScript 【JavaScript】よくあるJavaScriptエラーの読み方（Uncaught TypeError等）
こんにちは、かつコーチです。前回はsetTimeout・setIntervalでタイマー処理を扱いました。今回からは少しテーマを変えて、コードを書いていると必ず出会う「エラー」との付き合い方を解説していきます。コンソールに真っ赤な文字でエラ...
JavaScript 【JavaScript】setTimeout・setIntervalでタイマー処理を実装する
こんにちは、かつコーチです。前回は正規表現の基本を解説しました。今回は、「一定時間後に処理を実行する」「一定間隔で処理を繰り返す」といったタイマー処理を実装できる、setTimeout と setInterval を扱います。通知の自動非表...
JavaScript 【JavaScript】JavaScriptの正規表現入門
こんにちは、かつコーチです。前回はDateオブジェクトで日付・時刻を扱う方法を解説しました。今回は、文字列のパターンマッチングに使う「正規表現」の基本を扱います。正規表現は最初は記号だらけで難しく見えますが、フォームのバリデーション（入力チ...
JavaScript 【JavaScript】Dateオブジェクトで日付・時刻を扱う
こんにちは、かつコーチです。前回はCookieの操作方法を解説し、有効期限の計算で少しだけ Date が登場しました。今回はその Date オブジェクトについて、基本から丁寧に解説していきます。「投稿日時を表示したい」「何日後の日付を計算し...
JavaScript 【JavaScript】JavaScriptでCookieを操作する方法
こんにちは、かつコーチです。前回はLocalStorage・SessionStorageの使い方を解説しました。今回はもう一つのブラウザ保存手段である「Cookie」を扱います。Cookieは古くからある仕組みですが、LocalStorag...
JavaScript 【JavaScript】LocalStorage・SessionStorageの使い方
こんにちは、かつコーチです。前回は「ローディング表示を実装する」というテーマで、非同期処理中のUIについて解説しました。今回は、ブラウザ側でデータを保存できる仕組み「LocalStorage」と「SessionStorage」を扱います。「...
JavaScript 【JavaScript】ローディング表示を実装する（非同期処理中のUI）
こんにちは、かつコーチです。前回は「非同期処理のエラーハンドリング（try-catch）」で、通信が失敗したときの対処方法を解説しました。今回はAPI通信シリーズの締めくくりとして、「通信が終わるまでの間、ユーザーに何を見せるか」というテー...
JavaScript 【JavaScript】非同期処理のエラーハンドリング（try-catch）
こんにちは、かつコーチです。前回は「JSONの扱い方」で、APIとやり取りするデータの形式について解説しました。ここまでの記事では、通信が「成功する」前提でコードを書いてきました。でも実際の開発では、通信エラーやサーバー側の不具合など、うま...
JavaScript 【JavaScript】JSONの扱い方
こんにちは、かつコーチです。前回は「外部APIからデータを取得して表示する」で、実際に一覧データをAPIから取得して画面に表示する流れを扱いました。その中で何度も登場した .json() というメソッドや、{ } で囲まれたデータの形。今回...
JavaScript 【JavaScript】外部APIからデータを取得して表示する
こんにちは、かつコーチです。前回は「fetch APIの基本：外部データを取得する方法」で、fetchとasync/awaitを使ってデータを取得する基本の流れを解説しました。今回はその一歩先として、実際の外部APIから複数のデータを取得し...
JavaScript 【JavaScript】fetch APIの基本：外部データを取得する方法
こんにちは、かつコーチです。前回は「コピーボタン（Clipboard API）を実装する」で、ブラウザの便利な機能をJavaScriptから操作する方法を紹介しました。今回からは、Webサイト作りで避けて通れない「外部データの取得」について...
JavaScript 【JavaScript】コピーボタン（Clipboard API）を実装する
こんにちは、かつコーチです。前回は無限スクロールを扱いました。今回は「実践UI実装」シリーズの最終回として、クーポンコードやシェア用URLをワンクリックでコピーできるコピーボタンを実装します。初心者向けのテーマなので、これまでよりもシンプル...
JavaScript 【JavaScript】無限スクロールを実装する
こんにちは、かつコーチです。前回はドラッグ&ドロップを扱いました。今回はSNSのタイムラインやECサイトの商品一覧でおなじみの無限スクロールを実装していきます。上級者向けのテーマとして、パフォーマンスや多重発火といった実務で必ずぶつかる問題...
JavaScript 【JavaScript】ドラッグ&ドロップを実装する
こんにちは、かつコーチです。前回はトースト通知を扱いました。今回は、タスク管理ツールのカードや並べ替え可能なリストでおなじみのドラッグ&ドロップを、素のJavaScriptで実装していきます。ドラッグ&ドロップとは？HTML5 Drag a...
JavaScript 【JavaScript】トースト通知を実装する
こんにちは、かつコーチです。前回はカウントアップアニメーションを扱いました。今回は「保存しました」「エラーが発生しました」といった操作結果を、画面の隅にさりげなく表示するトースト通知を実装していきます。alert()と違って処理を止めず、数...
JavaScript 【JavaScript】カウントアップアニメーションを実装する
こんにちは、かつコーチです。前回は画像の遅延読み込み（Lazy Load）を扱いました。今回は「実践UI実装」シリーズの新しいテーマとして、数字がパラパラと増えていくカウントアップアニメーションを作っていきます。実績数値や統計データを見せる...