JavaScript 【TypeScript】any型・unknown型・never型の違い
こんにちは、かつコーチです。前回は関数の型について解説し、最後に「any型に逃げると型チェックの恩恵を受けられなくなる」という話をしました。今回はその続きとして、TypeScript特有の3つの型、any・unknown・never の違い...
2024-05
JavaScript JavaScript 【TypeScript】関数の型：引数と戻り値に型をつける
こんにちは、かつコーチです。前回はオブジェクトの型定義について解説しました。今回は、TypeScriptのもう一つの基本である「関数の型」を扱います。関数に型をつけられるようになると、「この関数に何を渡せばよくて、何が返ってくるのか」がコー...
JavaScript 【TypeScript】オブジェクトの型を定義する方法
こんにちは、かつコーチです。前回は配列とタプルの型の書き方を解説しました。今回は、TypeScriptを使ううえで避けて通れない「オブジェクトの型定義」について解説します。ユーザー情報や商品データなど、実務のコードではオブジェクトを扱う場面...
JavaScript 【TypeScript】配列とタプルの型の書き方
こんにちは、かつコーチです。前回はstring・number・booleanという基本の型注釈を解説しました。今回は、複数の値をまとめて扱う「配列」の型の書き方と、配列に似ているけれど少し特殊な「タプル」という型を紹介します。配列の型の書き...
JavaScript 【TypeScript】基本の型注釈：string・number・booleanの書き方
こんにちは、かつコーチです。前回はJavaScriptとTypeScriptで同じコードを書き比べて、型があることの安心感を確認しました。今回からは、実際に型注釈の書き方を1つずつ学んでいきます。まずは一番よく使う、文字列・数値・真偽値の3...
JavaScript 【TypeScript】JavaScriptとTypeScript、同じコードを書き比べてみる
こんにちは、かつコーチです。前回はtscコマンドとtsconfig.jsonを使った環境構築をやりました。今回は、実際に同じ処理をJavaScriptとTypeScriptの両方で書いて、見た目や動きの違いを具体的に比べてみます。「型がある...
JavaScript 【TypeScript】TypeScriptの環境構築：tscコマンドとtsconfig.jsonの基本
こんにちは、かつコーチです。前回は「TypeScriptとは何か」「JavaScriptとの違い」について解説しました。型があることでミスに気づきやすくなる、という話でしたね。今回は実際に手を動かして、TypeScriptのコードをJava...
JavaScript 【TypeScript】TypeScriptとは？JavaScriptとの違いを初心者向けに解説
こんにちは、かつコーチです。JavaScript基礎編、65記事お疲れさまでした。とはから始まり、変数、条件分岐、DOM操作、非同期処理、そしてデバッグ手法まで、本当によく頑張ったと思います。さて、今日からは新シリーズ「TypeScript...
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とやり取りするデータの形式について解説しました。ここまでの記事では、通信が「成功する」前提でコードを書いてきました。でも実際の開発では、通信エラーやサーバー側の不具合など、うま...