JavaScript詳解ガイド｜型・関数・クラス・非同期処理を実例で理解する
MDNを参考にJavaScriptの型・比較・クロージャ・参照・クラス・モジュール・非同期処理を詳しく解説。実行結果つきコード、境界条件の練習、公式資料で仕組みを学べます。
A ROOM FOR DEVELOPERS
学んだことを、
つくる力に。
JavaScript・TypeScript・React.js・Next.jsを、基礎から実践まで。
ひとつの「わかった」が、次の開発を動かす。
35° → NEXT IDEA
< learn by building />
TSTypeScript
FROM KNOWLEDGE TO CREATION
+
WEB DEVELOPMENT JOURNAL小さな学びを、積み重ねよう。 ↓
01 / PICK UP
今日の学びを、
ここから。
新しく公開した開発ノート。
次の実装のヒントを見つけよう。
JavaScript詳解ガイド｜型・関数・クラス・非同期処理を実例で理解する
MDNを参考にJavaScriptの型・比較・クロージャ・参照・クラス・モジュール・非同期処理を詳しく解説。実行結果つきコード、境界条件の練習、公式資料で仕組みを学べます。
記事を読む ↗02 / DEVELOPMENT NOTES
開発ノートArticles
知りたいことから、読み進める。
45 ARTICLES
JavaScript上級：Classで並列数を制御する非同期タスクキューを作る
JavaScriptのClassとPromiseで同時実行数を制限するタスクキューを実装。同期例外、非同期の失敗、完了待ち、受付終了、デッドロックの注意点を解説します。
JavaScriptのClass入門：constructor・private・継承・thisを理解する
JavaScriptのClassを在庫管理の例で解説。constructor、privateフィールド、getter、static、extends、super、thisと不正な更新を防ぐ設計を学びます。
JavaScriptの非同期処理：Promise・async/await・fetchとエラー処理
JavaScriptの非同期処理をPromiseとasync/awaitで学習。fetchのHTTPエラー、JSONの検証、AbortControllerによる中断、finallyの後始末を解説します。
JavaScriptのDOMとイベント：入力・追加・削除ができるメモ一覧を作る
JavaScriptで入力・追加・削除ができるメモ一覧を実装。DOM取得、createElement、submitイベント、textContent、フォーカスの扱いを学びます。
JavaScriptの配列とオブジェクト：map・filter・reduceでデータを処理する
JavaScriptのmap・filter・reduce・find、オブジェクトのコピー、MapとSetを買い物データで解説。元のデータを変更しない更新方法を学びます。
JavaScriptの関数・スコープ・モジュール：処理を再利用する方法
JavaScriptの関数、引数と戻り値、アロー関数、クロージャー、exportとimportを実例で解説。平均値の計算と独立したカウンターを作ります。
JavaScript入門：変数・型・条件分岐・繰り返しを学ぶ
JavaScript入門。Node.jsでコードを動かし、const・let、型、if、for...of、数値変換とエラー処理を学びます。クラスの実践まで進む全7回の第1回です。
ReactのFragment・StrictMode・Suspenseとlazy：組み込み機能の使い方
ReactのFragment・StrictMode・Suspense・lazyを用語集の実装で解説。key付きFragment、遅延読み込み、開発時の追加チェック、待機と失敗の違いを学びます。
ReactのuseTransitionとuseDeferredValue：入力と一覧更新の優先度を分ける
useTransitionとuseDeferredValueを検索画面のコードで比較。入力と結果更新の優先度、更新中の表示、デバウンスとの違いをReact 18対応の例で学びます。
ReactのuseId入門：ラベルと説明を関連付けた入力フォームを作る
ReactのuseIdで重複しないIDを生成し、入力欄・ラベル・説明文を関連付ける方法を解説。TypeScriptのフォーム例、keyとの違い、SSR時の注意点を学べます。
ReactのuseMemoとuseCallback：商品検索で学ぶメモ化の使い分け
ReactのuseMemo・useCallback・memoの違いを商品検索のコードで解説。依存配列、propsの参照、React Compilerとの関係、計測して最適化する判断を学びます。
ReactのuseReducer入門：TypeScriptで買い物リストの状態更新を整理する
React公式リファレンスを参考に、useReducerで買い物リストを実装。TypeScriptのaction型、dispatch、純粋な更新関数、追加・購入済み切り替え・削除を学びます。
Reactの基本Hooks入門：useState・useEffect・useRef・useContextの使い方
ReactのuseState・useEffect・useRef・useContextをTypeScriptの動く例で解説。状態更新、イベントの後始末、入力欄へのフォーカス、テーマ共有と使い分けを学びます。
React.js入門：コンポーネント・props・stateを読書リストで学ぶ
React.jsのコンポーネント・props・stateを、検索と読了切り替え付きの読書リストで学びます。TypeScriptの完全なコード例、配列更新、key、useEffectの判断を解説。
TypeScriptのテンプレートリテラル型：文字列の組み合わせとイベント名を型安全に扱う
TypeScriptのテンプレートリテラル型を実践コードで解説。文字列の組み合わせによるパスの型、keyofとマップ型によるイベント名の生成、Uppercase・Capitalize、外部入力の検証方法を学べます。
TypeScriptのkeyof・typeof・as const：定数から型を作る実践ガイド
TypeScriptのkeyof・typeof・as constを使い、定数からキーや値の型を作る方法を解説。ファイル別のコード例で、型安全なプロパティ取得、配列からのユニオン型、readonlyと実行時の違いを学べます。
TypeScriptのtsconfig.json実践入門：strictと追加の型チェックを設定する
Node.js用のtsconfig.jsonを実践解説。strictと追加の型チェック、任意項目、NodeNext、型チェックとビルドの違いを実行できる例で確認します。
TypeScriptのPromiseとasync/await：戻り値の型・並行処理・エラー処理を学ぶ
TypeScriptのPromiseとasync/awaitを実践解説。順次処理、Promise.allとallSettled、unknownのエラー処理、非同期forEachの注意点を学びます。
TypeScriptのユーティリティ型入門：Partial・Pick・Omit・Record・Readonlyの使い分け
Partial・Pick・Omit・Record・Readonlyを会員管理の例で解説。更新項目の制限、実データの削除との違い、ネストやundefinedの注意点も確認します。
TypeScriptのユニオン型と型ガード：型の絞り込みからneverによる網羅チェックまで
TypeScriptのユニオン型と型ガードを配送状態の実装で解説。typeof、unknownの検証、判別可能なユニオン、neverによる処理漏れの確認を学びます。
TypeScriptの実践的な型設計：ユニオン・satisfies・unknownの使い分け
TypeScriptの実践的な型設計をコードで解説。判別可能なユニオンによる状態管理、neverの分岐漏れ検出、satisfiesによる設定の型検査、unknownを使ったAPI応答の検証を学べます。TypeScript 4.9以降に対応。
TypeScriptのジェネリクス入門：型推論・制約・共通関数の作り方
TypeScriptのジェネリクスを型推論・extends・keyofから解説。空の配列を扱う戻り値と、unknownを検証してJSONを読み込む実践例を掲載します。
Next.jsのuseContext入門：Providerでテーマと状態を共有する
Next.jsでuseContextを使い、テーマを共有する実践例を紹介。型付きProvider、専用Hook、更新と再描画、Pages RouterとApp Routerの配置の違いを解説します。
Next.jsのuseState実践：カウンター・フォーム・状態更新の注意点
Next.jsでuseStateを使う実践入門。カウンターと入力フォームから、型推論、関数による更新、オブジェクトの更新、Pages RouterとApp Routerの違いを解説します。
Next.jsのuseEffect実践：依存配列・後始末・SSRでの注意点
Next.jsのuseEffectをタイマーとブラウザイベントの例で解説。依存配列、クリーンアップ、Strict Mode、サーバー描画、非同期処理の注意点を学べます。
Next.jsのAPI Routes入門：GET・POST・入力検証とエラー応答
Next.jsのAPI RoutesをTypeScriptで実装。GET・POSTの処理、HTTPメソッドとJSON入力の検証、エラー応答、静的出力との違いを学べます。
Next.jsのSSG入門：getStaticProps・動的ルート・静的出力を解説
Next.jsのPages RouterでSSGを実装する方法を解説。getStaticPropsとgetStaticPaths、動的ルート、静的出力、データ更新とISRの違いを学べます。
Next.jsのSSR入門：getServerSideProps・キャッシュ・配信の注意点
Pages RouterのgetServerSidePropsでSSRを実装する方法を解説。リクエスト情報、props、キャッシュ、秘密情報の扱い、静的出力と併用できない理由を確認できます。
Next.jsのCSS入門：グローバルCSSとCSS Modulesの適用手順
Pages RouterでグローバルCSSとCSS Modulesを使う手順を解説。ファイルの配置、読み込み先、クラスの適用、スタイルの衝突を避ける考え方を紹介します。
Next.jsのコンポーネント実践：TypeScriptのpropsとコールバックで連携する
型付きpropsとコールバックで記事カードを作り、親ページで選択状態を管理します。ジェネリクスを使う一覧、安定したkey、コンポーネントの読み込み方も解説します。
Next.jsのコンポーネント入門：props・state・childrenを理解する
Next.jsのコンポーネントをTypeScriptで学ぶ入門記事。props・state・children、ページと部品の配置、型推論、App Routerでの境界をコードで解説します。
TypeScriptのクラス継承：extends・super・abstractの使い方
TypeScriptのクラスの継承を実行例で解説。extends・super・override・protected・抽象クラスの役割、親の契約、委譲との使い分けを学べます。
TypeScriptのクラス入門：constructor・private・readonly・staticを解説
TypeScriptのクラスの定義、コンストラクタ、アクセス修飾子、読み取り専用プロパティ、getter・setterを解説。privateと実行時のプライベート性の違いも扱います。
TypeScriptのオブジェクト指向設計：カプセル化・インターフェース・委譲
TypeScriptのオブジェクト指向をインターフェースとクラスの例で学びます。カプセル化・抽象化・多態性・継承と委譲、型と実行時の違いを解説します。
TypeScriptの関数入門：引数・戻り値・オーバーロードの型を指定する
TypeScriptの関数の引数と戻り値、型推論、関数型、オプション引数、デフォルト引数、残余引数、オーバーロードを実行できるコードで解説します。
TypeScriptのモジュール入門：import・exportとNode.jsの設定を理解する
TypeScriptのモジュールをファイル別のコードで解説。名前付きとデフォルトのexport、import type、相対パス、NodeNextとJavaScript出力の対応を学べます。
TypeScriptのinterfaceとtype：オブジェクトの型定義と使い分け
TypeScriptのインターフェースでオブジェクト、関数、クラスの契約を定義します。任意項目、readonly、extendsとimplements、構造的型付けの注意点も解説します。
TypeScriptのコンパイル方法：tsc・型チェック・JavaScript出力を解説
TypeScriptのコンパイルをtsconfig.jsonと実行例で解説。型チェック、出力先、noEmit・noEmitOnError、targetとmodule、watchとoutFileの違いを整理します。
TypeScriptの基本型一覧：string・number・配列・unknownと型推論
TypeScriptの基本型、型推論、配列・タプル、nullとundefined、unknownとany、voidとneverをコードで解説。型チェックと実行時の動作の違いを整理します。
Next.jsのディレクトリ構成：pages・app・publicと各ファイルの役割
Next.jsのPages Routerのディレクトリ構成を解説。pages・public・components・lib・typesの役割、_appと_document、生成物とApp Routerの違いを整理します。
Next.jsとは？Reactとの違いとPages Routerの基本を解説
Next.jsの役割をPages Routerのコードで解説。SSG・SSR・ハイドレーションの違い、静的出力の制約、SEOや安全性を考える際の注意点を学べます。
TypeScriptの環境構築：インストールから最初のコンパイル・実行まで
TypeScriptをプロジェクトへインストールし、型チェック・JavaScriptへのコンパイル・Node.jsでの実行まで確認します。ロックファイルと設定の役割も解説します。
TypeScriptとは？JavaScriptとの違いと基本の書き方を入門解説
TypeScriptでできることを基本のコードから解説。JavaScriptとの関係、型推論、関数とオブジェクトの型、外部入力の検証、コンパイルと実行の流れを学べます。
Next.jsの環境構築：Pages Routerでインストールから起動まで
create-next-appでTypeScriptとPages Routerの学習環境を作成。Node.jsの要件、作成時の選択、ページ編集、開発サーバーと本番ビルドの手順を解説します。
03 / EXPLORE TOPICS