Docker
Docker | 2週間で実務レベルに到達するDocker学習：仕上げ（本番意識） － Day14
JavaScript
JavaScript JavaScript | 「thisの仕組み」をアニメーション付きで図解
「thisの仕組み」は JavaScript 初心者が最初につまずく代表ポイント です。ここでは、🧭 直感的なアニメーション（矢印と動き）＋図解🧩 実際にブラウザで動くデモコード（HTML + JS）...
JavaScript JavaScript | プロトタイプと継承の「中の仕組み」や「落とし穴」
ここまで理解しているなら、プロトタイプと継承の「中の仕組み」や「落とし穴」を丁寧に掘り下げていける段階。初心者でも「仕組みを感覚でつかめる」ように、図解イメージ＋コード実験付きで説明していく。ステップ...
JavaScript JavaScript | WeakMap / WeakSet の動作（GCで自動削除）を視覚化
以下は WeakMap / WeakSet の「自動ガベージコレクション（GC）によりエントリが消える様子を視覚化するデモページ」 です。実際のブラウザでは GC の発生タイミングは制御できないため、...
JavaScript JavaScript | 実際に Map / Set を操作するデモ
ラウザ上で 実際に Map / Set を操作して結果をリアルタイム表示できるインタラクティブデモ（HTML + JavaScript） です。「値の追加」「削除」「存在確認」などを自分で試せます。 ...
JavaScript JavaScript |キー付きコレクション ミニテスト（Map vs Set）
「Map vs Set」理解チェック用の自動採点ミニ練習ページ（HTML＋JavaScript）」です。ブラウザでそのまま開くと、選択肢を選んで採点できます。 See the Pen Map vs S...
JavaScript 「Keyed collections（Map・Set・WeakMap・WeakSet）」学習ワークブック
JavaScript「Keyed Collections」ワークブック構成🏁 第1章：MapとSetの基本（初級）💡 学習ポイントオブジェクトとの違いMap と Set の作り方・基本操作（追加・削除...
JavaScript 配列メソッド 実践アプリ（HTML + JS）
配列メソッド実践アプリ（sort / splice / flat / find など） を ブラウザ上で自動採点できる練習ページ（HTML + JS） として作成します。配列メソッド 実践アプリ（HT...
JavaScript JavaScript | 「AsyncFunction（非同期関数）」の基本
async / await と「AsyncFunction（非同期関数）」の基本を、プログラミング初心者向けにやさしく解説します。1. まずはざっくり説明AsyncFunction（非同期関数） は、...
JavaScript 無料で使えるAPI（2025年版）
無料で使える汎用API 一覧（2025年版）分野API名無料プラン概要主な用途登録要否備考🌦️ 天気OpenWeatherMap API月1,000回リクエスト無料現在・予報・過去の天気データ要登録（...
JavaScript JavaScript | サーバーサイド（Node.js）で Accept-Language を使ってロケールを判定する方法
では「サーバーサイド（Node.js）で Accept-Language を使ってロケールを判定する方法」を見てみましょう。ゴールブラウザから送られてくる Accept-Language ヘッダー を...
JavaScript JavaScript | ユーザーのロケール（ブラウザやOSの設定言語）を自動で使って表示を切り替える方法
では「ユーザーのロケール（ブラウザやOSの設定言語）を自動で使って表示を切り替える方法」を見てみましょう。ゴールユーザーが日本語環境なら「◯分前」「昨日」など日本語で表示英語環境なら「5 minute...
JavaScript JavaScript | Intl.RelativeTimeFormat を使って分・時間・月など、さまざまな単位で相対時間を表示する方法
では「Intl.RelativeTimeFormat を使って分・時間・月など、さまざまな単位で相対時間を表示する方法」を見てみましょう。Intl.RelativeTimeFormat の基本form...
JavaScript JavaScript | Intl.RelativeTimeFormat を使って ‘◯日前’ や ‘in ◯ days’ を表示する方法
では「Intl.RelativeTimeFormat を使って '◯日前' や 'in ◯ days' を表示する方法」を見てみましょう。Intl.RelativeTimeFormat とはJavaS...
JavaScript JavaScript | Intl API を使って多言語フォーマット対応
では「Intl API を使って多言語フォーマット対応」を見てみましょう。これを使うと、金額や日付の表記を自動で言語・地域に合わせて整えてくれるので、実務でとても役立ちます。Intl.NumberFo...
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 XserverにNode.jsを導入する方法
全体像：XserverでNode.jsを動かすとは何をしているのかまず前提として、Xserverは一般的な「レンタルサーバー」です。標準ではPHPやMySQLはすぐ使えますが、Node.jsはそのまま...
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 での例外処理を確実に理解すること。各問題は「問題 → 予想 → 実行例（...
JavaScript JavaScript | 非同期エラーの「良い書き方・悪い書き方」を比較するサンプル
ここでは、「非同期処理での例外（エラー）をどう扱うか」について、初心者がよくやってしまう「悪い書き方」と、実務的に安全な「良い書き方」を、コメント付きで比較解説します。テーマ：setTimeout な...
JavaScript JavaScript | try…catch…finally 文による例外処理
主な内容の要点JavaScriptのtry...catch...finallyは、エラーが起きてもプログラムを安全に続けるための仕組みです。特にfinallyは「必ず最後に実行される処理」を書けるのが...
JavaScript JavaScript | 非同期処理をブレークポイントで止める
初心者が 「非同期処理をブレークポイントで止める」 のは少し難しく感じますが、実はブラウザの開発ツール（DevTools）を使えば fetch や setTimeout の中の処理も止めて中身を確認 ...
JavaScript JavaScript | 「例外＋非同期」のデバッグ実践（Promise の中のエラー追跡）
ここからは、「例外 × 非同期処理（Promise・async/await）」で発生するエラーをデバッグする方法を、初心者向けにやさしく、具体例つきで解説します。（ブラウザ開発ツールを使った実践手順つ...
JavaScript JavaScript | 非同期エラーの落とし穴（Promise を返さない async と catch の罠）
JavaScript の「非同期エラー」まわりは、初心者が一番つまずくところの1つです。ここでは、Promise・async/await・try/catch の関係と、「Promise を返さない a...
JavaScript JavaScript | 例外のデバッグ方法
「例外（エラー）をデバッグする力」は、プログラミング初級から中級に進む大きなステップです。ここでは、「stack（スタックトレース）」の見方と活用方法を、初心者でもわかるようにかみ砕いて解説します。1...
JavaScript JavaScript | 例外処理（try…catch文）
主な内容の要点JavaScriptでエラーが起きるとプログラムが途中で止まってしまいます。これを防ぐために try...catch文 を使うと、エラーをキャッチして安全に処理を続けられます。ポイント解...
JavaScript JavaScript | デフォルト引数
JavaScriptのデフォルト引数「引数を渡し忘れても、賢く初期値が入る仕組み」がデフォルト引数です。関数のパラメータに「= 値」を書いておくと、その引数が未指定または undefined のときに...
JavaScript JavaScript | 可変長引数（rest パラメータ）
プログラミングを始めたばかりだと「…（ドット3つ）」が何をしているのか戸惑いますよね。rest パラメータは「引数の数が決まっていなくても関数で受け取れる」便利な仕組みです。例を交えながら、直感的に理...
JavaScript JavaScript | コールバック関数 と 高階関数
主な内容の要点JavaScriptでは「関数」を変数に入れたり、関数に渡したり、関数から返したりできます。こうした仕組みを使うと「コールバック関数」や「高階関数」が扱えるようになり、非同期処理やイベン...
JavaScript JavaScript | 「メモ化」を使って再帰関数を高速化する方法
ここでは、「メモ化（memoization）」を使って再帰関数を高速化する方法を、ステップ実行（呼び出しの流れを1つずつ追う）つきでわかりやすく解説します。そもそも「メモ化」とは？メモ化（memoiz...
JavaScript JavaScript | 「再帰関数」でツリー探索（Tree Traversal）
では今回は、再帰の「本領発揮」分野である ツリー探索（Tree Traversal） を、プログラミング初心者でも「実感して理解できる」ように、段階的にやさしく解説します。1. まず「ツリー構造」って...
JavaScript JavaScript | 再帰関数
主な内容の要点再帰関数とは「関数の中で自分自身を呼び出す関数」のことです。無限ループにならないように「終了条件」を必ず書くのが大事です。代表的な使い方は「階乗の計算」など、同じ処理を繰り返しながら少し...
JavaScript JavaScript | 関数関連の便利な仕組み・プロパティ
関数まわりの「ちょっと特殊な性質」を整理しておくと、JavaScript の理解がグッと深まります。初心者向けに、代表的なものをわかりやすくまとめますね。関数関連の便利な仕組み・プロパティ1. arg...
JavaScript JavaScript | 関数で受け取る引数の数を取得する
主な内容の要点JavaScript の関数には .length プロパティがあり、「その関数が定義時に受け取る引数の数」を調べることができます。ただし、実際に呼び出したときに渡された引数の数ではない点...