JavaScript

スポンサーリンク
JavaScript

JavaScript 逆引き集 | 配列のソート(数値)

JavaScript配列のソート(数値)の基本と実践数値配列を正しく並べ替えるには、比較関数を渡して「数値として」比較させるのがポイントです。デフォルトのsortは文字列として比較するため、数値だと期待通りの順序になりません。構文と考え方/...
JavaScript

JavaScript 逆引き集 | スプレッドで配列コピー/結合

JavaScriptスプレッド構文で配列コピー/結合配列を「そのままコピーしたい」「複数の配列をつなげたい」ときに便利なのが スプレッド構文(...)。初心者でも直感的に書けて、concatよりも短く表現できるのが魅力です。構文と考え方//...
JavaScript

JavaScript 逆引き集 | concat で配列結合

JavaScript配列の結合(concat)の基本と実践「2つ以上の配列をつなげたい」ときに使うのが concat。初心者でも直感的に扱えるメソッドで、元の配列を壊さず新しい配列を返してくれるのが特徴です。構文と考え方const resu...
JavaScript

JavaScript 逆引き集 | flatMap の変換+平坦化

JavaScript配列の変換+平坦化(flatMap)の基本と実践「mapで変換した結果が配列になってしまう → そのままでは二重配列になる」そんなときに便利なのが flatMap。mapとflatを同時にやってくれるので、初心者でもスッ...
JavaScript

JavaScript 逆引き集 | flat で1階層平坦化

JavaScript配列の平坦化(flat)の基本と実践配列の中に配列が入っていると「二重配列」「ネスト配列」と呼ばれます。これを「1階層だけまっ平らにしたい」ときに使うのが flat。初心者でも直感的に扱える便利メソッドです。構文と考え方...
JavaScript

JavaScript 逆引き集 | every で全件判定

JavaScript配列の全件判定(every)の基本と実践「配列のすべてが条件を満たす?」を一度で確かめるなら every。すべてが条件に合えばtrue、1つでも合わなければfalseを返します。最初の不一致で評価を打ち切るため、無駄が少...
JavaScript

JavaScript 逆引き集 | some でいずれか判定

JavaScript配列のいずれか判定(some)の基本と実践「条件に合う要素がひとつでもある?」を真っ直ぐに確かめるなら some。true/falseだけ返すので、存在チェックやバリデーションに向いています。構文と考え方// 基本con...
JavaScript

JavaScript 逆引き集 | includes で存在確認(原始値)

JavaScript配列の存在確認(includes)の基本と実践「この値、配列に入ってる?」を一発で確かめるなら includes。true/falseだけ返すシンプルさが強みで、indexOfより読みやすく、初心者にも扱いやすいです。構...
JavaScript

JavaScript 逆引き集 | findIndex でインデックス取得

JavaScript配列のインデックス取得(findIndex)の基本と実践「条件に合う要素が配列のどこにあるか」を知りたいなら findIndex。見つかった最初の位置(インデックス)を返し、見つからなければ -1。インデックスが分かれば...
JavaScript

JavaScript 逆引き集 | find で最初の一致を取得

JavaScript配列から最初の一致を取得(find)の基本と実践「条件に合う最初の要素を1つだけ取り出したい」なら find が最適です。filterは「全部」を返しますが、findは「最初の1件」だけを返すので、検索や探索に向いていま...
JavaScript

JavaScript 逆引き集 | reduce で集計

JavaScript配列の集計(reduce)の基本と実践「配列の値をまとめて1つにしたい」ときに使うのが reduce。合計・平均・最大値・オブジェクト化など、集計処理の万能ツールです。初心者には少し難しく見えますが、仕組みを理解すると一...
JavaScript

JavaScript 逆引き集 | filter で条件抽出

JavaScript配列の条件抽出(filter)の基本と実践「条件に合う要素だけを取り出して新しい配列を作りたい」なら、filterが最短で安全。元の配列は変えず、判定関数がtrueを返した要素だけが残ります。書き味はシンプルで、読みやす...
JavaScript

JavaScript 逆引き集 | map で配列変換

JavaScript配列変換(map)の基本と実践「配列の各要素を加工して、新しい配列を作りたい」なら map が最短ルート。元の配列には触れず、処理結果だけを返してくれるので、初心者でも安全に“変換”を積み上げられます。構文と考え方con...
JavaScript

JavaScript 逆引き集 | 配列のループ(forEach)

JavaScript配列のループ(forEach)の基本と実践「配列の全要素に同じ処理をサッと当てたい」なら、forEachがいちばん手軽。カウンターや終了条件を意識せず、読みやすく安全に“全件処理”を書けます。初心者がまず身につけたい、実...
JavaScript

JavaScript 逆引き集 | 配列のループ(for…of)

JavaScript配列のループ(for...of)の基本と実践最初は「インデックスって必要?」と迷うかもしれないけれど、値だけ順に扱いたいなら for...of がいちばん素直で読みやすい。配列から要素を一つずつ取り出して処理する、という...
JavaScript

JavaScript 逆引き集 | 配列のループ(for)

JavaScript配列のループ(for)の基本と実践最初の一歩って、つまずきやすい。でも「for」は味方。配列を順番に処理するためのいちばん素直なやり方で、仕組みがわかると一気に視界が開けます。ここでは、初心者向けに「for」の型、よくあ...
JavaScript

Python JavaScript | プログラミングの繰り返し処理でマジックナンバーを避ける方法

「なんとなく書いた数字」が、後からあなたや他の人を困らせる。それがマジックナンバー。まずは意味をつかんで、繰り返し処理(ループ)での具体的な回避テクを身につけましょう。 マジックナンバーの基礎定義: コードの中に直接書かれた、意味が読み取れ...
JavaScript

JavaScript | 「ソースマップ」付きで TypeScript や Babel コードをデバッグする方法

ここでは、「ソースマップ付きで TypeScript や Babel 変換後のコードをブラウザでデバッグする方法」を、🔰 初心者向けにステップごとで分かりやすく解説します。そもそも「ソースマップ」って何?TypeScript や Babel...
JavaScript

JavaScript | VSCode のデバッガコンソールで式を評価して調べる方法

ここでは VSCode のデバッガコンソールを使って、デバッグ中に式や変数を確認・評価する方法 を初心者向けに丁寧に解説します。デバッグを「止まって眺めるだけ」から「動かしながら調べる」に進化させるテクニックです。1. デバッガコンソールと...
JavaScript

JavaScript | 非同期処理(Promise / async)のステップ実行を例で体験

では、非同期処理(Promise / async/await)のステップ実行を、VSCodeデバッガで体験する例を、初心者向けに手順付きで進めていきます。1. サンプルコードを作るまず小さな非同期処理のファイルを作ります。📄 async_d...
JavaScript

JavaScript | Node.js 環境での「–inspect」デバッグ手順(VSCode でのステップ実行)

ここでは、Node.js の --inspect モードを使って VSCode でステップ実行(デバッグ)する方法を、プログラミング初心者向けに 手順通りに進められるチュートリアル形式で解説します。目標✅ Node.js プログラムを✅ V...
JavaScript

JavaScript | 非同期エラー(Promiseやasync/await)のスタックトレース

「ブラウザ開発ツール(DevTools) を使ったデバッグ」は、初心者から“実務で通用する人”へ進むための大きな一歩です。ここでは、Chrome / Edge / Firefox に共通する操作を中心に、「ブレークポイント」 と 「ウォッチ...
JavaScript

JavaScript | 非同期エラー(Promiseやasync/await)のスタックトレース

非同期エラーのスタックトレースは「同期コードのそれ」とは挙動が違う部分が多く、つまずきやすいポイントです。以下は 初心者が実務で遭遇するパターン を中心に、具体的なコード例と「何を見ればいいか」「どう扱うか」を整理した実践ガイドです。1. ...
JavaScript

JavaScript | 月別アルバムページ × タグフィルタ × 地図表示

ここまでの要素を全部組み合わせて、「月別アルバムページ」+「タグフィルタ」+「地図表示」 を統合したギャラリーの仕組みを整理してみましょう。1. 処理の流れ画像を読み込みPillowでサムネイル生成EXIFから撮影日とGPS座標を取得ファイ...
JavaScript

JavaScript | フォームバリデーション(入力チェック)

特徴リアルタイム判定入力するたびにOK/NGを表示。NG時に修正候補をボタンで自動適用メール → 「@example.com」を補完電話 → 桁数を補正してハイフン整形URL → https:// を自動追加郵便 → ハイフン付き7桁に補正...
JavaScript

JavaScript | 再帰とループの性能比較

「再帰」と「ループ」は同じ処理を実現できることが多いですが、性能面では違いがあります。初心者向けに整理してみます。性能比較のポイント1. 関数呼び出しのコスト再帰関数を呼ぶたびに「呼び出しスタック」に情報を積む(引数や戻り先など)。呼び出し...
JavaScript

JavaScript | レベル別練習問題:エレメント(HTML要素・DOM要素操作)

「エレメント」をテーマに、基礎/中級/上級(応用)の3レベル、各5問ずつ、合計15問のオリジナル練習問題を作成し、解答と解説付きでまとめます。ここでいう「エレメント」は HTML要素・DOM要素操作 を前提にしています。【基礎レベル】(DO...
JavaScript

JavaScript | レベル別練習問題:関数

「関数」 をテーマに、基礎 / 中級 / 上級(応用) 各レベル 5 問ずつ、合計 15 問のオリジナル練習問題+解答+解説を作成しました。コードはそのままブラウザのコンソールで実行できます。基礎レベル(5問)問題1次の関数を呼び出したとき...
JavaScript

JavaScript | レベル別練習問題:オブジェクト

「オブジェクト」 をテーマに、基礎 / 中級 / 上級(応用) 各レベル 5 問ずつ、合計 15 問のオリジナル練習問題+解答+解説を作成しました。コードはそのままブラウザのコンソールで実行できます。基礎レベル(5問)問題1オブジェクト p...
JavaScript

JavaScript | レベル別練習問題:配列

「配列」 をテーマに、基礎 / 中級 / 上級(応用) 各レベル5問ずつ、合計15問のオリジナル練習問題+解答+丁寧な解説を作成しました。コードはそのままブラウザのコンソールで実行できます。基礎レベル(5問)問題1配列 fruits を作り...
スポンサーリンク