JavaScript

スポンサーリンク
JavaScript

JavaScript | 配列・オブジェクト:パフォーマンス・設計 – 配列操作の計算量

配列操作の計算量とは何か「計算量」は、要素数を (n) としたとき操作に必要なステップ数の目安です。ここが重要です:操作ごとに増え方が違います。例えば末尾に追加(push)はほぼ一定時間ですが、先頭に...
JavaScript

JavaScript | 配列・オブジェクト:実務パターン – API レスポンス加工

API レスポンス加工とは何かAPI レスポンス加工は「外部サービスから受け取ったJSON(欠損・余分・型揺れが混在しがち)を、アプリで使いやすい“整った配列・オブジェクト”に変換する」ことです。ここ...
JavaScript

JavaScript | 配列・オブジェクト:実務パターン – フォームデータ整形

フォームデータ整形とは何かフォームデータ整形は「UIから入力された生の値(文字列中心・未入力混在・チェックボックスの揺れなど)を、バックエンドが扱いやすい“型の揃ったオブジェクト”に変換する」作業です...
JavaScript

JavaScript | 配列・オブジェクト:実務パターン – ページング用データ加工

ページング用データ加工とは何かページングは「長い配列をページ単位に切り分けて、必要な部分だけ表示・送信する」処理です。ここが重要です:順序(ソート)→フィルタ→ページ分割の“処理順”を守り、メタ情報(...
JavaScript

JavaScript | 配列・オブジェクト:実務パターン – フィルタ条件切替

フィルタ条件切替とは何かフィルタ条件切替は「現在の条件(カテゴリ、価格帯、検索語、ステータスなど)をON/OFFや値変更で切り替え、その都度配列を絞り込む」実務パターンです。ここが重要です:条件を“関...
JavaScript

JavaScript | 配列・オブジェクト:実務パターン – フラグ更新

フラグ更新とは何かフラグ更新は「オブジェクトや配列の中で、真偽値(true/false)や状態を表す小さな印(flag)を安全に切り替える」操作です。ここが重要です:配列やネスト構造では“直接書き換え...
JavaScript

JavaScript | 配列・オブジェクト:実務パターン – 並び替え

並び替えとは何か並び替え(ソート)は「配列の要素を一定の順序で並べ直す」処理です。ここが重要です:JavaScript の Array.prototype.sort は“文字列として比較する”のが既定...
JavaScript

JavaScript | 配列・オブジェクト:実務パターン – グループ化

グループ化とは何かグループ化は「配列の要素を“共通のキー”でまとめ、キーごとに要素の集合を作る」処理です。ここが重要です:グループの“鍵(キー)”をどう決めるかで実務の使いやすさが決まります。単純なキ...
JavaScript

JavaScript | 配列・オブジェクト:実務パターン – 重複削除

重複削除とは何か重複削除は「同じ値や同じレコードが複数含まれる配列から、重複を取り除き“1回だけ”にする」処理です。ここが重要です:何を“同じ”とみなすかで手法が変わります。プリミティブ(数値・文字列...
JavaScript

JavaScript | 配列・オブジェクト:実務パターン – 一意データの抽出

一意データの抽出とは何か一意データの抽出は「重複している要素を取り除き、同じものが1回だけ現れる集合にする」処理です。ここが重要です:何を“同じ”とみなすかで手法が変わります。プリミティブ(数値・文字...
JavaScript

JavaScript | 配列・オブジェクト:実務パターン – ID で検索

ID で検索とは何か「ID で検索」は、配列やオブジェクトの中から“特定の一件”を高速・安全に取り出す実務の基本パターンです。ここが重要です:配列から毎回探すのは線形検索で遅くなりがち。頻繁に検索する...
JavaScript

JavaScript | 配列・オブジェクト:ネスト構造の扱い – 再帰処理の基礎

再帰処理とは何か再帰は「関数が自分自身を呼び出して、問題を“同じ形のより小さな問題”に分解して解く」テクニックです。ここが重要です:必ず“止まる条件(ベースケース)”を先に書き、次に“1歩進める処理(...
JavaScript

JavaScript | 配列・オブジェクト:ネスト構造の扱い – 深いコピーの注意点

深いコピーとは何か深いコピーは「オブジェクトや配列の入れ子を“最深部まで”複製し、元データと完全に独立させる」操作です。ここが重要です:浅いコピー(スプレッドや Object.assign)は外側だけ...
JavaScript

JavaScript | 配列・オブジェクト:ネスト構造の扱い – データ正規化

データ正規化とは何かデータ正規化は「ネストの深い配列・オブジェクトを、“重複なく参照しやすい形”に整理すること」です。ここが重要です:同じエンティティ(ユーザー、商品、コメントなど)を“1か所だけ”に...
JavaScript

JavaScript | 配列・オブジェクト:ネスト構造の扱い – 不変性(イミュータブル)

不変性(イミュータブル)とは何か不変性(イミュータブル)とは「既存のオブジェクトや配列を直接書き換えず、“新しいインスタンス”を作って変更を表現する」考え方です。ここが重要です:直接代入は一見手軽でも...
JavaScript

JavaScript | 配列・オブジェクト:ネスト構造の扱い – 深い階層の更新

深い階層の更新とは何か深い階層の更新は「入れ子(ネスト)になったオブジェクトや配列の、何層も奥にある値を安全に書き換えること」です。ここが重要です:共有状態(UIやストア)では“非破壊更新(新しいオブ...
JavaScript

JavaScript | 配列・オブジェクト:ネスト構造の扱い – nullish coalescing

nullish coalescing(??)とは何かnullish coalescing(??)は「左側が undefined または null のときだけ、右側の“デフォルト値”を使う」演算子です。...
JavaScript

JavaScript | 配列・オブジェクト:ネスト構造の扱い – オプショナルチェーン

オプショナルチェーンとは何かオプショナルチェーン(?.)は「途中のオブジェクトや配列が null/undefined でも、エラーにせず安全に次へ進む(または止まる)」ための記法です。ここが重要です:...
JavaScript

JavaScript | 配列・オブジェクト:ネスト構造の扱い – 安全なアクセス(&&)

安全なアクセス(&&)とは何か「安全なアクセス」とは、ネストされたオブジェクトや配列を辿るときに、中間が欠損(null/undefined)でもエラーにせず安全に値を取り出す書き方です。ここが重要です...
JavaScript

JavaScript | 配列・オブジェクト:ネスト構造の扱い – ネスト配列

ネスト配列とは何かネスト配列は「配列の中にさらに配列が入っている構造」です。2次元(行・列の表)、階層(ツリーの子配列)、グループ化(カテゴリごとの要素)など、現実のデータを自然に表現できます。ここが...
JavaScript

JavaScript | 配列・オブジェクト:ネスト構造の扱い – ネストオブジェクト

ネストオブジェクトとは何かネストオブジェクトは「オブジェクトや配列の中に、さらにオブジェクトや配列が入っている構造」です。現実世界のデータ(ユーザー→住所→郵便番号、注文→明細の配列→各行のSKUなど...
JavaScript

JavaScript | 1 日 120 分 × 7 日アプリ学習:中級編

この中級編7日間で目指すことこの「1日 120 分 × 7 日・中級編」は、あなたがすでに「変数・if・for・関数・配列・DOM操作・イベント」あたりを触った前提で、「なんとなく動いてる」を卒業して...
JavaScript

JavaScript | 1 日 60 分 × 7 日アプリ学習:家計簿編

この7日間プランで作る家計簿アプリのゴールこの 7 日間では、ブラウザ上で動く「シンプル家計簿アプリ」を作ります。機能は次のようなイメージです。日付・内容・金額・種別(収入 / 支出)を入力して追加で...
JavaScript

JavaScript | 1 日 60 分 × 7 日アプリ学習:タイマー・ストップウォッチ編

この7日間で作るもののゴールこの 7 日間では、ブラウザで動く「ストップウォッチ+簡単なタイマー」を作ります。ボタンを押すと時間が進んだり止まったりする、“時間を扱うアプリ” なので、以下のような力が...
JavaScript

JavaScript | 1 日 60 分 × 7 日アプリ学習:TODOアプリ編

この7日間 TODOアプリ学習のゴールこの 7 日間では、「ブラウザ上で動くシンプルな TODO アプリ」を完成させます。機能は次の 4 つに絞ります。テキスト入力欄にやることを書く追加ボタンでリスト...
JavaScript

JavaScript | 1 日 60 分 × 7 日アプリ学習:電卓アプリ編

この7日間で作る電卓アプリのゴールこの 7 日間では、「ブラウザで動く電卓アプリ」を完成させながら、JavaScript の超基礎と、画面とプログラムをつなぐ考え方(DOM 操作)を身につけます。電卓...
JavaScript

JavaScript | 1 日 60 分 × 7 日アプリ学習:初級編

この 7 日・60 分でどこまで行くかこの「初級編・60 分 × 7 日」は、すでにconsole.log変数・if・関数・配列簡単なおみくじやボタン付きアプリあたりを「なんとなく触ったことがある」前...
JavaScript

JavaScript | 配列・オブジェクト:オブジェクト操作 – デフォルト値の設定

デフォルト値の設定とは何かデフォルト値は「値が未指定(または欠損)のときに使う“代替値”」です。ここが重要です:何を“未指定”とみなすかで手段が変わります。undefined/null だけを未指定と...
JavaScript

JavaScript | 配列・オブジェクト:オブジェクト操作 – 構造の分解(分割代入)

分割代入(構造の分解)とは何か分割代入は、オブジェクトや配列から「必要な部分だけ」を抜き出して、変数に一気に割り当てる書き方です。ここが重要です:オブジェクトは“キー名で取り出す”、配列は“位置で取り...
JavaScript

JavaScript | 配列・オブジェクト:オブジェクト操作 – JSON.parse / stringify

JSON とは何かJSON は「データを文字列で表すための軽量フォーマット」です。JavaScript のオブジェクトに“似ている”けれど、JSON はあくまで文字列。送受信・保存に向いており、プログ...
スポンサーリンク