JavaScript

スポンサーリンク
JavaScript

JavaScript | 翻訳辞書を用意して本格的に i18n(多言語対応)する方法

では「翻訳辞書を用意して本格的に i18n(多言語対応)する方法」を見てみましょう。ゴール言語ごとに翻訳辞書を用意する関数の中で「キー」を使って文言を取り出す日本語・英語以外にも簡単に拡張できる翻訳辞...
JavaScript

JavaScript | JavaScriptで使える小さなCSVユーティリティ

短いコードで「CSVの読み込み(文字列→配列/オブジェクト)」と「書き込み(配列/オブジェクト→文字列)」を扱えるユーティリティです。標準ライブラリだけで動き、カンマ・ダブルクオート・改行に対応します...
JavaScript

JavaScript | 3次元配列を図と例題で理解する

配列の中に配列、その中にまた配列。最初はややこしく見えるけれど、「箱の中に箱が入っていて、さらにその中に箱がある」と想像できたらぐっと楽になります。3次元配列は、データを「階層」と「位置」で整理するた...
JavaScript

JavaScript | 「部分失敗時にログだけ出して続行」するコード例

ここでは 複数の非同期処理のうち、一部が失敗しても処理を止めず、成功した分だけ使うパターン を解説します。ポイントは Promise.allSettled + finally を使うことです。シナリオ...
JavaScript

JavaScript | Promise.allSettled + finally で部分成功・部分失敗を安全に処理するフロー図

では 「Promise.allSettled + finally」 を使った場合の処理フローを、「部分成功・部分失敗を安全に処理する」観点で図解します。前提シナリオ3つの API を同時に呼び出す:f...
JavaScript

JavaScript | 「Promise.all + finally」を図でフロー解説(成功/失敗ルート図付き)

では 「Promise.all + finally」 の処理フローを、初心者でも理解しやすい図で解説します。今回は「成功ルート」と「失敗ルート」の両方を示します。前提シナリオ3つの API を同時に呼...
JavaScript

JavaScript | 複数の fetch を並列で実行 → どれか失敗しても安全に処理を続ける

ここでは、複数の fetch を並列で実行して、どれか1つ失敗しても他を続行できる安全な書き方 を、初心者向けに丁寧に解説します。目的複数のAPIを同時に呼び出すとき、1つでも失敗すると全部が止まる ...
JavaScript

JavaScript | finally と async/await の中で return や throw を組み合わせた高度な制御

ここでは async/await と finally を組み合わせたときの制御の流れ、特にreturn や throw を使うとどうなるか、を 具体的な例で丁寧に 解説します。目的try / catc...
JavaScript

JavaScript | 非同期例外をデバッグで追う

ここでは、「非同期処理(fetch / async / Promise)で起きたエラーをデバッグで追う」 を、初心者にもわかるように ― 例題つきで ― 解説します。目的「非同期の中で発生したエラー(...
JavaScript

JavaScript | 「複数のAPIを並列処理 → 一部失敗時に安全に処理を続ける」を実例で比較(良いコード / 悪いコード)

これは「非同期処理を複数まとめて実行しつつ、一部が失敗しても全体を止めずに進める」という実践的なテーマです。API連携やWebアプリで「部分的にデータ取得に失敗しても、取れる部分だけ表示したい」という...
JavaScript

JavaScript | 「fetch+async+finally(後処理付き)」を実例で比較(良いコード / 悪いコード)

ここでは、「fetch × async/await × finally」 を組み合わせて、「通信成功・失敗どちらでも後処理を確実に実行する」コードを、初心者でも理解できるようにステップごとに解説します...
JavaScript

JavaScript | 「非同期(fetch / async/await)での例外処理のコツ」と「よくある落とし穴」を実例で比較(良いコード / 悪いコード)

JavaScript の 非同期処理(fetch / async/await) の例外処理は、初心者がつまずきやすいポイントの一つです。ここでは、よくある「落とし穴」→「なぜダメか」→「良い書き方」を...
JavaScript

JavaScript | 複数の fetch を並列で実行 → どれか失敗しても安全に処理を続ける

実務でも「finally の中で return や throw を書いてしまう」ミスは危険かつ気づきにくいため、ESLint(JavaScriptの静的解析ツール)で検出できるようにしておくのが効果的...
JavaScript

JavaScript | Prettier+ESLintを共存させて競合を防ぐ設定

Prettier と ESLint はどちらもコード整形・チェックを行いますが、ルールがかぶると競合して「保存時に勝手に戻される」などのトラブルが起きます。ここでは 競合を防ぎつつ両方を使う設定 をま...
JavaScript

JavaScript | チーム全員で統一する VSCode 拡張+設定テンプレート

チーム開発で VSCodeの拡張機能や設定を統一 するテンプレートを作ると、全員の開発環境で ESLint/Prettier のルールや警告が同じになり、コードスタイルの不一致やバグを減らせます。目的...
JavaScript

JavaScript | Promise.all + finally の複合制御

ここは「複数の非同期処理(fetch など)をまとめて実行して、最後に共通の後処理をする」という実務で非常に役立つテクニックです。以下で、❌ 悪い例(落とし穴あり)✅ 良い例(安全で読みやすい制御)を...
JavaScript

JavaScript | VSCodeで「保存時に自動修正&警告表示」する設定(.vscode/settings.json)

では、VSCodeで 「保存時に自動修正」+「リアルタイム警告」 を出す完全設定を、初心者にもわかるように丁寧に説明します。目的保存時に自動で ESLint を走らせて、コードの問題(例:finall...
JavaScript

JavaScript | 引数の数に応じて処理を変える関数

では「引数の数に応じて処理を変える関数」を一緒に作ってみましょう。お題引数が 1つ → その値を 2倍引数が 2つ → 2つを 掛け算引数が 3つ以上 → 全部を 掛け算コード例(arguments ...
JavaScript

JavaScript | eval() を使わずに安全に同じことをする方法

eval() を使わずに 安全に・再現可能に・制御された形で動的な振る舞いを実現する方法 を、実用的なパターンとサンプルコードで見せます。初心者でも試せるよう、短く分かりやすい例を中心にします。まとめ...
JavaScript

JavaScript | 関数を文字列化して eval で実行するのがなぜ危険なのか

ここでは、「関数を文字列化して eval で実行するのがなぜ危険なのか」 を、実際に動かして確かめられるように、ブラウザでそのまま試せる 練習用サンプル(安全に体験できるデモ) を紹介します。目的to...
JavaScript

JavaScriptとTypeScript

先にザックリ結論JavaScript(JS):ブラウザやサーバ(Node.js)で動く「実行される言語」。動的で柔軟。今すぐ書いてすぐ動く。TypeScript(TS):JavaScriptの上に「型...
JavaScript

JavaScript | タグでフィルタ表示の仕組み

「フォルダ内の画像をサムネイル化してHTMLギャラリーを作る」仕組みに、タグでフィルタ表示を加えます。これは JavaScript を少し組み合わせると実現できます。1. 基本の考え方各画像に「タグ情...
JavaScript

JavaScript | 配列の中にオブジェクトを入れて管理する方法

ここからは「配列の中にオブジェクトを入れる」という、実践的なデータ管理方法を初心者向けに、イラスト的なイメージ+実用的なコード例で丁寧に解説します!配列の中にオブジェクトを入れるとは?まず、オブジェク...
JavaScript

JavaScript | 正規表現ステップアップ練習

では、初心者が手を動かしながら正規表現を学べるミニ課題集(全10問)を作り、それぞれステップごとに解説します。問題1:数字だけの文字列かチェック条件:文字列が 1桁以上の数字だけ で構成されているかヒ...
JavaScript

JavaScript | 正規表現オブジェクト

主な内容の要点JavaScriptで正規表現を使うには「正規表現オブジェクト」を作成します。作り方は大きく2種類あり、/パターン/ と書く方法と new RegExp("パターン") を使う方法です。...
JavaScript

JavaScript | 例外処理(try…catch) のポイント

主な内容の要点JavaScriptのtry...catchは、関数の中で発生したエラーも呼び出し元のtry...catchで捕まえられる。ただし、非同期処理(例:setTimeout)の中で起きたエラ...
JavaScript

JavaScript | throw文

主な内容の要点JavaScriptでは、throw文を使うことで自分でエラー(例外)を発生させることができます。これにより「ここで処理を止めたい」「特定の条件でエラーを知らせたい」といった場面を自由に...
JavaScript

JavaScript | 非同期(fetch / async)でのエラーの落とし穴(良い書き方・悪い書き方)を具体コード比較で示す

ここでは、「非同期処理(fetch / async)」でよくあるエラーの落とし穴を、「悪い書き方 → なぜダメか → 良い書き方」に整理して解説します。初心者がつまずきやすいポイントを中心に、実際のコ...
JavaScript

JavaScript | 例外とエラーハンドリング

主な内容の要点JavaScriptではエラー(例外)がいくつかの種類に分かれていて、try...catchを使うと発生した例外をキャッチして処理できます。さらに、例外の種類ごとに処理を分けることができ...
JavaScript

JavaScript | 例外処理(try…catch) の練習問題セット(初心者向け)

目的try…catch の基本、例外の伝搬(同期)、非同期コールバックでの落とし穴、Promise / async–await での例外処理を確実に理解すること。各問題は「問題 → 予想 → 実行例(...
スポンサーリンク