Java
Java | 再帰的なアルゴリズムの実例集
JavaScript
JavaScript JavaScript | 再帰的なアルゴリズムの実例集
再帰アルゴリズムとは何か（やさしい入口）「再帰（さいき）」という言葉は少し難しく聞こえますが、アイデア自体はシンプルです。 再帰とは「関数が自分自身を呼び出すこと」です。JavaScriptでは、ある...
JavaScript JavaScript | HTML / CSS 連携：CSS基礎 － 子孫セレクタ
子孫セレクタは「この中にある“全部の○○”にスタイルを当てるための選び方」子孫セレクタは、 「ある要素の“内側にある”別の要素たちをまとめて選ぶためのセレクタ」です。書き方はとてもシンプルで、 セレク...
JavaScript JavaScript | HTML / CSS 連携：CSS基礎 － IDセレクタ
IDセレクタは「ページの中で“この1つだけ”を指さすための名前」IDセレクタは、 「このページの中で、たった1つの特別な要素にスタイルを当てるための“固有の名前”」を扱う仕組みです。CSS側では # ...
JavaScript JavaScript | HTML / CSS 連携：CSS基礎 － クラスセレクタ
クラスセレクタは「意味のグループに“共通の見た目”を当てるための仕組み」クラスセレクタは、 「このクラス名が付いている要素たちに、共通のスタイルを当てる」ためのCSSの“選び方”です。CSS側では ....
JavaScript JavaScript | HTML / CSS 連携：CSS基礎 － セレクタ
セレクタは「どのHTML要素に、このCSSルールを“当てるか”を決めるもの」CSSの役割は「見た目のルールを書くこと」ですが、 その前に必ずやることがあります。「このルールを、どの要素に適用するか？」...
JavaScript JavaScript | HTML / CSS 連携：CSS基礎 － CSSの役割
CSSの役割は「見た目のルールをHTMLから“切り離して”管理すること」まず一番大事なところからいきます。HTMLの役割：ページの“中身”と“構造”を書くもの CSSの役割：その中身の“見た目”と“装...
JavaScript JavaScript | HTML / CSS 連携：フォーム応用 － autocomplete
autocomplete は「ブラウザに“ここには何の情報が入るか”を教えるための属性」autocomplete は、 「この入力欄には、ユーザーのどんな情報が入るのか」をブラウザに教えるための属性 ...
JavaScript JavaScript | HTML / CSS 連携：フォーム応用 － pattern
pattern は「この入力欄の“合格パターン”を正規表現で決めるためのルール」pattern は、 「この入力欄には、こういう形の文字列だけを“正解”として受け付けてほしい」 とブラウザに伝えるため...
JavaScript JavaScript | HTML / CSS 連携：フォーム応用 － required
required は「ここは“絶対に空で送らせない”ためのスイッチ」required は、 「この入力欄は必須です。空のままフォームを送信させないでください」 とブラウザに伝えるための属性です。ユーザ...
JavaScript JavaScript | HTML / CSS 連携：フォーム応用 － placeholder
placeholder は「入力欄の中に表示する“ヒントテキスト”」placeholder は、 入力欄の中に薄い文字で表示される「ここには何を書けばいいか」のヒント です。ラベルが「名前」だけだと、...
JavaScript JavaScript | HTML / CSS 連携：フォーム応用 － range入力
range入力は「スライダーで“数値の範囲”から直感的に選んでもらう入力欄」type="range" は、 ユーザーに「ある範囲の数値」を、スライダーを動かして選んでもらうための入力欄 です。テキスト...
JavaScript JavaScript | HTML / CSS 連携：フォーム応用 － color入力
color入力は「カラーピッカーで“色そのもの”を選んでもらうための入力欄」type="color" は、 ユーザーに「色」を選んでもらうための専用入力欄 です。テキスト入力で #ff0000 みたい...
JavaScript JavaScript | HTML / CSS 連携：フォーム応用 － date入力
date入力は「カレンダーUIで“正しい日付”を確実に受け取るための入力欄」type="date" は、 ユーザーに「日付」を入力してもらうための専用入力欄 です。テキスト入力と違い、 ブラウザが「カ...
JavaScript JavaScript | HTML / CSS 連携：フォーム応用 － file入力
file入力は「ユーザーのPCやスマホから“ファイルそのもの”を受け取るための入り口」type="file" は、 ユーザーの端末（PC・スマホ）の中から、画像やPDFなどの「ファイルそのもの」を選ん...
JavaScript JavaScript | HTML / CSS 連携：フォーム応用 － radioボタン
radioボタンは「グループの中から“必ず1つだけ”選んでもらうための入力欄」type="radio" は、 「いくつかの候補の中から、ユーザーに“1つだけ”選んでもらうための入力欄」 です。チェック...
JavaScript JavaScript | HTML / CSS 連携：フォーム応用 － checkbox
checkbox は「ON/OFF や“複数選択”を表現するためのスイッチ」type="checkbox" は、 「その項目を選ぶか選ばないか（ON/OFF）を表現するための入力欄」 です。「利用規約...
JavaScript JavaScript | HTML / CSS 連携：フォーム基礎 － button
button 要素は「ユーザーに“何かのきっかけ”を押してもらうためのスイッチ」<button> は、 「ユーザーにクリック（タップ）してもらうことで、何かの処理を始めるためのスイッチ」 です。フォー...
JavaScript JavaScript | HTML / CSS 連携：フォーム基礎 － option
option 要素は「select の中の“1つぶんの選択肢”」<option> は、 「select の中に並ぶ、1 つ 1 つの“選べる候補”」 を表すタグです。<select> が「選択メニュー...
JavaScript JavaScript | HTML / CSS 連携：フォーム基礎 － select
select は「候補の中から選んでもらうための“選択メニュー”」<select> は、 「あらかじめ用意した選択肢の中から、ユーザーに選んでもらうための入力欄」 です。テキストボックスや texta...
JavaScript JavaScript | HTML / CSS 連携：フォーム基礎 － textarea
textarea は「長文や複数行の文章を入れてもらうための入力欄」<textarea> は、 「ユーザーに“複数行の文章”や“長めのテキスト”を入力してもらうための専用の入力欄」 です。input ...
JavaScript JavaScript | HTML / CSS 連携：フォーム基礎 － number入力
number入力は「数値だけを入れてもらうための“賢い入力欄”」type="number" の入力欄は、 ユーザーに 「数字だけ」を入力してもらうための専用の入り口 です。年齢 個数 価格 点数 割合...
JavaScript JavaScript | HTML / CSS 連携：フォーム基礎 － email入力
email入力は「メールアドレス専用の“賢いテキスト入力欄”」type="email" の入力欄は、 「ユーザーにメールアドレスを入力してもらうための、ちょっと賢いテキスト入力」 です。見た目はほぼ ...
JavaScript JavaScript | HTML / CSS 連携：フォーム基礎 － password入力
password入力は「中身を隠しながら文字を受け取るための入力欄」type="password" の入力欄は、 「ユーザーに文字を入力してもらうけれど、画面上では中身を見えなくする」 ための特別なテ...
JavaScript JavaScript | HTML / CSS 連携：フォーム基礎 － text入力
text入力は「なんでも文字を入れてもらうための“1行の入力欄”」type="text" の入力欄は、 「ユーザーに自由な文字列を 1 行ぶん入力してもらうための入り口」 です。名前 タイトル ニック...
JavaScript JavaScript | HTML / CSS 連携：フォーム基礎 － inputタグ
input 要素は「ユーザーから“1つの値”を受け取るための入り口」<input> は、 ユーザーから たった 1 つの値を受け取るためのパーツ です。名前 メールアドレス パスワード チェックの O...
JavaScript JavaScript | HTML / CSS 連携：フォーム基礎 － formタグ
form 要素は「入力をひとまとめにして“送信するための枠”」<form> は、 「ユーザーの入力をひとまとまりにして、どこかへ送るための“フォーム全体の箱”」 です。テキストボックス チェックボック...
JavaScript JavaScript Tips | 配列ユーティリティ：並び順復元
テーマの整理：「並び順復元」とは何か「並び順復元」は、以前保存しておいた“並び順情報”を使って、最新の配列を同じ順番に並べ直すユーティリティのことです。 直前の「並び順保存」が「順番を覚える」だとした...
JavaScript JavaScript Tips | 配列ユーティリティ：並び順保存
テーマの整理：「並び順保存」とは何か「並び順保存」は、ユーザーが並べ替えた配列の順番を、あとで再現できるように“記録しておく”ユーティリティのことです。 業務だと、次のような場面でよく出てきます。画面...
JavaScript JavaScript Tips | 配列ユーティリティ：UI 用整形
テーマの整理：「UI 用整形」とは何か「UI 用整形」は、配列データを「画面コンポーネントが扱いやすい形」に変換するユーティリティのことです。 API や DB から取ってきた“生データ”は、そのまま...
JavaScript JavaScript Tips | 配列ユーティリティ：API レスポンス整形
テーマの整理：「API レスポンス整形」とは何か「API レスポンス整形」は、外部 API から返ってきた“生のレスポンス”を、アプリ側で扱いやすい配列・オブジェクトの形に変換するユーティリティのこと...
JavaScript JavaScript Tips | 配列ユーティリティ：可視化用変換
テーマの整理：「可視化用変換」とは何か「可視化用変換」は、生の配列データを「グラフライブラリがそのまま読める形」に整えるユーティリティのことです。 業務だと、次のような場面でよく使います。売上データを...
JavaScript JavaScript Tips | 配列ユーティリティ：統計情報生成
テーマの整理：「統計情報生成」とは何かここでの「統計情報生成」は、配列に入っている数値データから、もう一歩踏み込んだ“統計的な指標”を計算するユーティリティのことです。 サマリー生成が「合計・平均・最...
JavaScript JavaScript Tips | 配列ユーティリティ：サマリー生成
テーマの整理：「サマリー生成」とは何かここでの「サマリー生成」は、配列に入っているたくさんのデータを「要約・集計」して、業務で使いやすい形にまとめるユーティリティのことです。 「生データの配列」から、...
JavaScript JavaScript Tips | 配列ユーティリティ：バリデーション
テーマの整理：「配列バリデーション」とは何かここでの「バリデーション」は、配列の中身が「業務で期待している形・値になっているか」をチェックすることです。 特に「オブジェクト配列」（レコード一覧）に対し...
JavaScript JavaScript Tips | 配列ユーティリティ：型変換一括
テーマの整理：「型変換一括」とは何かここでの「型変換一括」は、配列の中のオブジェクトに対して「特定のプロパティの型をまとめて変換する」ユーティリティのことです。 業務だと、次のような場面でよく出てきま...
JavaScript JavaScript Tips | 配列ユーティリティ：欠損補完
テーマの整理：「欠損補完」とは何かここでの「欠損補完」は、配列の中にある「抜けている値・足りないレコード」を、一定のルールで埋めるユーティリティのことです。 業務だと、次のような場面でよく出てきます。...
JavaScript JavaScript Tips | 配列ユーティリティ：配列正規化
テーマの整理：「配列正規化」とは何かここでの「配列正規化」は、バラバラな形・揺れのある配列データを、「扱いやすい一定の形」にそろえるユーティリティのことです。 業務だと、次のような場面でよく出てきます...
JavaScript JavaScript Tips | 配列ユーティリティ：行列転置
テーマの整理：「行列転置」とは何かここでの「行列転置」は、二次元配列（表データ）で「行と列を入れ替える」ユーティリティのことです。 業務だと、次のような場面で出てきます。Excel で「行と列を入れ替...
JavaScript JavaScript Tips | 配列ユーティリティ：カラム削除
テーマの整理：「カラム削除」とは何かここでの「カラム削除」は、オブジェクト配列から「いらない列（プロパティ）」を取り除くためのユーティリティです。 業務だと、次のような場面でよく使います。機密情報（パ...
JavaScript JavaScript Tips | 配列ユーティリティ：カラム抽出
テーマの整理：「カラム抽出」とは何かここでの「カラム抽出」は、オブジェクト配列から「欲しい列だけ」を取り出すためのユーティリティです。 業務だと、次のような場面でよく使います。画面の一覧では 10 項...
JavaScript JavaScript Tips | 配列ユーティリティ：表データ生成
テーマの整理：「表データ生成」とは何かここで扱う「表データ生成」は、配列から「表として扱いやすい形」を作るためのユーティリティです。 業務だと、次のような場面でよく出てきます。画面に一覧テーブルを表示...
JavaScript JavaScript Tips | 配列ユーティリティ：Excel 行変換
テーマの整理：「Excel 行変換」とは何かここで扱うのは、「JavaScript の配列（オブジェクト配列）を、Excel の“行”として扱いやすい形に変換するユーティリティ」です。 業務だと、次の...
JavaScript JavaScript Tips | 配列ユーティリティ：JSON 変換
テーマの整理：「配列ユーティリティ × JSON 変換」とは何かここで扱うのは、「JavaScript の配列を JSON 文字列に変換する」「JSON 文字列から配列に戻す」ための、業務でそのまま使...
JavaScript JavaScript Tips | 配列ユーティリティ：CSV 変換
テーマの整理：「配列ユーティリティ × CSV 変換」とは何かここで扱うのは、「JavaScript の配列（オブジェクト配列）を、業務でそのまま使える CSV 文字列に変換するユーティリティ」です。...
JavaScript JavaScript Tips | 配列ユーティリティ：ログ出力
テーマの整理：「配列ユーティリティ × ログ出力」とは何かここで話したいのは、「配列を扱う処理の動きや結果を、きちんとログに残すための小さなユーティリティ」です。 業務コードでは、配列まわりでバグが起...
JavaScript JavaScript Tips | 配列ユーティリティ：差分検出
テーマの整理：「差分検出」とは何か「差分検出」は、“前の配列”と“今の配列”を比べて、「何が増えたか」「何が消えたか」「何が変わったか」をはっきりさせるためのテクニックです。 業務だと、次のような場面...
JavaScript JavaScript Tips | 配列ユーティリティ：配列変更監視
テーマの整理：「配列変更監視」とは何か「配列変更監視」は、配列の中身が変わった瞬間を検知して、何かの処理（再計算・再描画・ログなど）を自動で走らせるための仕組みです。 業務だと、例えば次のような場面で...
JavaScript JavaScript Tips | 配列ユーティリティ：メモ化配列
テーマの整理：「メモ化配列」とは何か「メモ化配列」は、配列を入力にする処理の結果を“覚えておいて”、同じ入力に対しては再計算せずに結果を返す仕組みです。 さっきの「配列キャッシュ」とほぼ同じ考え方です...
JavaScript JavaScript Tips | 配列ユーティリティ：配列キャッシュ
テーマの整理：「配列キャッシュ」とは何か「配列キャッシュ」は、一度計算した「配列に対する結果」を覚えておいて、同じ入力に対しては再計算せずに使い回すための仕組みです。 業務だと、こんな場面で欲しくなり...
JavaScript JavaScript Tips | 配列ユーティリティ：件数制御実行
テーマの整理：「件数制御実行」とは何か「件数制御実行」は、配列の要素に対する非同期処理を「一度に何件まで動かすか」をきちんと制御しながら実行するユーティリティです。 イメージとしては「同時実行数を制限...
JavaScript JavaScript Tips | 配列ユーティリティ：並列処理
テーマの整理：「並列処理」とは何かここでいう「並列処理」は、配列の要素に対する非同期処理を「同時に複数まとめて動かす」ことです。 順次処理（1 件ずつ）に比べて速く終わりやすい一方で、負荷やレート制限...
JavaScript JavaScript Tips | 配列ユーティリティ：順次処理
テーマの整理：「順次処理」とは何かここでいう「順次処理」は、配列の要素を「必ず 1 件ずつ、順番に」処理していくパターンのことです。特に「処理が非同期（async）」なときに、順番をきちんと守りたい場...
JavaScript JavaScript Tips | 配列ユーティリティ：Promise 配列制御
テーマの整理：「Promise 配列制御」とは何か「Promise 配列制御」というのは、ざっくり言うと「複数の非同期処理（Promise）を、配列としてまとめて扱い、どう待つか・どう制御するかを決め...
JavaScript JavaScript Tips | 配列ユーティリティ：非同期 reduce
そもそも reduce と「非同期 reduce」の違いArray.prototype.reduce は、配列を 1 つの値に“畳み込む”ための関数です。合計を出したり、オブジェクトに集計したり、「最...
JavaScript JavaScript Tips | 配列ユーティリティ：非同期 filter
何をしたいユーティリティか：「非同期 filter」「非同期 filter」は、配列の各要素に対して「async な条件チェック」を行い、条件を満たした要素だけを残すユーティリティです。普通の Arr...
JavaScript JavaScript Tips | 配列ユーティリティ：非同期 map
何をしたいユーティリティか：「非同期 map」「非同期 map」は、配列の各要素に対して「async な処理」をして、その結果を配列として集めるユーティリティです。普通の map は同期処理専用ですが...
JavaScript JavaScript Tips | 配列ユーティリティ：map + filter 合成
何をしたいユーティリティか：「map + filter 合成」「map + filter 合成」は、「変換（map）」と「絞り込み（filter）」を、きれいに組み合わせて使うためのパターンやユーティ...
JavaScript JavaScript Tips | 配列ユーティリティ：reduce ヘルパー
そもそも reduce って何をする関数かArray.prototype.reduce は、「配列を 1 つの値に“畳み込む”ための関数」です。合計を出したり、オブジェクトに集計したり、別の配列に変形...
JavaScript JavaScript Tips | 配列ユーティリティ：フィルタ合成
何をしたいユーティリティか：「フィルタ合成」「フィルタ合成」は、複数の条件（フィルタ）を組み合わせて、1つのフィルタ関数として扱えるようにするテクニックです。もう少しくだいて言うと、「小さな条件関数を...
JavaScript JavaScript Tips | 配列ユーティリティ：AND 条件検索
何をしたいユーティリティか：「AND 条件検索」「AND 条件検索」は、配列の中から「複数の条件をすべて満たす要素」だけを探す処理です。論理式でいう「A かつ B かつ C」の“AND（かつ）”です。...
JavaScript JavaScript Tips | 配列ユーティリティ：OR 条件検索
何をしたいユーティリティか：「OR 条件検索」「OR 条件検索」は、配列の中から「いくつかの条件のうち、どれか1つでも満たしていればOK」という要素を探す処理です。論理式でいう「A または B または...
JavaScript JavaScript Tips | 配列ユーティリティ：複数条件検索
何をしたいユーティリティか：「複数条件検索」「複数条件検索」は、「この配列の中から、いくつかの条件をすべて満たす要素だけを探したい」ときに使うユーティリティです。例えば、次のような“複数条件”が典型で...
JavaScript JavaScript Tips | 配列ユーティリティ：インデックス検索
何をしたいユーティリティか：「インデックス検索」「インデックス検索」は、配列の中から「条件に合う要素がどこにあるか」を調べて、その位置（インデックス）を返す処理です。「この値は何番目にある？」「id ...
JavaScript JavaScript Tips | 配列ユーティリティ：要素置換
何をしたいユーティリティか：「要素置換」「要素置換」は、配列の中の特定の要素を“別の値に差し替える”処理です。「インデックス 2 の要素を新しい値にしたい」「id が一致する要素だけ更新したい」など、...
JavaScript JavaScript Tips | 配列ユーティリティ：要素削除
何をしたいユーティリティか：「要素削除」「要素削除」は、配列から特定の要素を取り除く処理です。「このインデックスの要素を消したい」「この値を全部消したい」「条件に合うものだけ消したい」など、業務でめち...
JavaScript JavaScript Tips | 配列ユーティリティ：要素挿入
何をしたいユーティリティか：「要素挿入」「要素挿入」は、配列の好きな位置に新しい要素を差し込む処理です。 の「2 と 4 の間に 3 を入れたい」みたいなやつですね。業務だと、例えばこういう場面でよく...
JavaScript JavaScript Tips | 配列ユーティリティ：シャローコピー
何をしたいユーティリティか：「シャローコピー」ここでの「シャローコピー」は、配列そのものだけをコピーして、“中身（要素）への参照はそのまま共有する”コピーのことです。一言でいうと、「配列の箱だけ新しく...
JavaScript JavaScript Tips | 配列ユーティリティ：ディープコピー
ディープコピーとは何か（まずここを正しく理解する）ディープコピーは、配列やオブジェクトの“中身まで含めて完全に別物を作るコピー”のことです。浅いコピー（shallow copy）と違い、ネストされた配...
JavaScript JavaScript Tips | 配列ユーティリティ：配列コピー
何をしたいユーティリティか：「配列コピー」「配列コピー」は、元の配列を壊さずに、同じ中身を持つ“別の配列”を作る処理です。業務ではほぼ必ずと言っていいほど使います。なぜなら、元の配列を直接いじると「い...
JavaScript JavaScript Tips | 配列ユーティリティ：部分一致判定
何をしたいユーティリティか：「部分一致判定」「部分一致判定」は、「完全に同じかどうか」ではなく、「一部が条件を満たしているかどうか」を判定する処理です。ここでは主に、配列に対して次のような問いを投げる...
JavaScript JavaScript Tips | 配列ユーティリティ：完全一致判定
何をしたいユーティリティか：「完全一致判定」ここでの「完全一致判定」は、「この2つの値（配列やオブジェクトを含む）が“中身まで含めてまったく同じか”を判定する処理です。単なる === ではなく、配列の...
JavaScript JavaScript Tips | 配列ユーティリティ：配列比較
何をしたいユーティリティか：「配列比較」「配列比較」は、「この2つの配列は同じか？」を判定する処理です。ここでいう「同じか？」は、基本的に次の3つを満たすことを意味します。要素数（長さ）が同じ各インデ...
JavaScript JavaScript Tips | 配列ユーティリティ：安定ソート
そもそも「安定ソート」とは何かまず言葉から整理します。安定ソート（stable sort）とは、「同じキー（同じ値）同士の元々の順番を壊さないソート」のことです。もう少し具体的に言うと、並び替えの基準...
JavaScript JavaScript Tips | 配列ユーティリティ：順序反転
何をしたいユーティリティか：「順序反転」「順序反転」は、配列の要素の並びを逆向きにする処理です。 を にする、というイメージですね。業務だと、例えばこういう場面で使います。ログを「新しい順」に並べ替え...
JavaScript JavaScript Tips | 配列ユーティリティ：Map 変換
何をしたいユーティリティか：「Map 変換」ここでの「Map 変換」は、配列から Map（キーと値のペアのコレクション）を作るユーティリティのことです。「id からユーザーを一発で引きたい」「コードか...
JavaScript JavaScript Tips | 配列ユーティリティ：Set 変換
何をしたいユーティリティか：「Set 変換」ここでの「Set 変換」は、配列を Set に変換するユーティリティのことです。一言でいうと「重複をなくしたい」「含まれているかを高速に調べたい」ときに使う...
JavaScript JavaScript Tips | 配列ユーティリティ：マップ生成
何をしたいユーティリティか：「マップ生成」ここでの「マップ生成」は、配列から「キー → 値」の対応表（オブジェクトや Map）を作る処理のことです。「id からユーザーを引けるようにしたい」「コードか...
JavaScript JavaScript Tips | 配列ユーティリティ：条件変換
何をしたいユーティリティか：「条件変換」「条件変換」は、配列の中の「条件に合う要素だけ」を変換し、それ以外はそのまま残す処理です。英語で言うと mapIf、mapWhen、conditionalMap...
JavaScript JavaScript Tips | 配列ユーティリティ：条件抽出
何をしたいユーティリティか：「条件抽出」「条件抽出」は、配列の中から「ある条件に当てはまる要素だけ」を取り出す処理です。JavaScript 標準の Array.prototype.filter を、...
JavaScript JavaScript Tips | 配列ユーティリティ：条件削除
何をしたいユーティリティか：「条件削除」「条件削除」は、配列の中から「ある条件に当てはまる要素だけ」を取り除く処理です。英語だとイメージ的には「removeIf」「reject」「filter-out...
JavaScript JavaScript Tips | 配列ユーティリティ：undefined 削除
何をしたいユーティリティか：「undefined 削除」ここでの「undefined 削除」は、配列の中から undefined を取り除いて、扱いやすい配列に整える処理です。「null 削除」と似て...
JavaScript JavaScript Tips | 配列ユーティリティ：null 削除
何をしたいユーティリティか：「null 削除」ここでの「null 削除」は、配列の中から null（と必要なら undefined）を取り除いて、扱いやすい配列に整える処理です。さっきの「空要素削除」...
JavaScript JavaScript Tips | 配列ユーティリティ：空要素削除
何をしたいユーティリティか：「空要素削除」ここでの「空要素削除」は、配列の中から「いらない空っぽの値」を取り除いて、きれいな配列にする処理です。英語だと compact や clean などと呼ばれま...
JavaScript JavaScript Tips | 配列ユーティリティ：末尾取得
何をしたいユーティリティか：「末尾取得」ここでの「末尾取得」は、配列の「一番最後の要素」や「末尾から数件」を取り出す処理のことです。英語だと last や takeRight などと呼ばれます。業務で...
JavaScript JavaScript Tips | 配列ユーティリティ：先頭取得
何をしたいユーティリティか：「先頭取得」ここでの「先頭取得」は、配列の「一番最初の要素」や「先頭から数件」を取り出す処理のことです。英語だと head や first、take などと呼ばれます。業務...
JavaScript JavaScript Tips | 配列ユーティリティ：件数制限
何をしたいユーティリティか：「件数制限」ここでの「件数制限」は、配列の要素数を「最大 N 件まで」に制御する処理のことです。イメージとしては「取りすぎない」「持ちすぎない」ためのブレーキです。業務では...
JavaScript JavaScript Tips | 配列ユーティリティ：採番
何をしたいユーティリティか：「採番」ここでの「採番」は、配列の要素に「業務で使う番号（連番・管理番号）」を振る処理のことです。さっきやった「インデックス付与」とよく似ていますが、目的が少し違います。イ...
JavaScript JavaScript Tips | 配列ユーティリティ：インデックス付与
何をしたいユーティリティか：「インデックス付与」「インデックス付与」は、配列の各要素に「何番目か」という情報をくっつける処理です。JavaScript の配列はもともと 0, 1, 2…というインデッ...
JavaScript JavaScript Tips | 配列ユーティリティ：ネスト化
何をしたいユーティリティか：「配列のネスト化」ここでの「ネスト化」は、平らな配列を「階層構造（入れ子）」に組み立て直す処理のことです。フラット化の逆方向だと思ってください。例えば、次のようなことをした...
JavaScript JavaScript Tips | 配列ユーティリティ：フラット化
何をしたいユーティリティか：「配列のフラット化」ここでの「フラット化」は、ネスト（入れ子）になっている配列を、浅い配列に“平らにする”処理のことです。英語だと flatten、flat と呼ばれます。...
JavaScript JavaScript Tips | 配列ユーティリティ：結合
何をしたいユーティリティか：「配列の結合」ここでの「結合」は、複数の配列を 1 つの配列にまとめる処理のことです。英語だと「merge」「concat」と呼ばれます。例えば、こんな場面で使います。月ご...
JavaScript JavaScript | HTML / CSS 連携：リスト・表組み － tdタグ
td 要素は「表の“中身のマス”を表すセル」<td> は「このマスには“実際のデータ”が入っています」ということを表すタグです。table の中で、tr（行）の中に並ぶ「ふつうのセル」が td です。...
JavaScript JavaScript | HTML / CSS 連携：リスト・表組み － thタグ
th 要素は「このセルは“見出し側”ですよ」と宣言するタグ<th> は「このセルは、ただのデータじゃなくて“見出し・ラベル”です」とブラウザや機械に伝えるためのタグです。table の中で使われ、「列...
JavaScript JavaScript | HTML / CSS 連携：リスト・表組み － trタグ
tr 要素は「表の“1行分”をまとめるための行コンテナ」<tr> は「table の中で、横一列のセルをひとかたまりにする“行の箱”」です。table が「表全体の箱」だとしたら、tr は「その中の ...
JavaScript JavaScript | HTML / CSS 連携：リスト・表組み － tableタグ
table 要素は「行と列で“表形式のデータ”を並べるための箱」<table> は、「行（よこ）と列（たて）で整理されたデータ」を表にするためのタグ です。時間割料金表成績表比較表みたいな、「表で見る...
JavaScript JavaScript | HTML / CSS 連携：リスト・表組み － ddタグ
dd 要素は「ラベルに対する“中身・説明側”を表すタグ」<dd> は「これは“ラベルの中身・説明・値”ですよ」と示すためのタグです。単体では使わず、必ず <dl> の中で「ラベル（dt）」「その中身（...
JavaScript JavaScript | HTML / CSS 連携：リスト・表組み － dtタグ
dt 要素は「ラベル側（項目名・用語）」を表すタグ<dt> は「これは“名前・ラベル・用語”の側ですよ」と示すためのタグです。単体では使わず、必ず <dl> の中で「ラベル（dt）」「その中身（dd）...
JavaScript JavaScript | HTML / CSS 連携：リスト・表組み － dlタグ
dl 要素は「用語とその説明（ペアの一覧）」の箱<dl> は「用語（ラベル）と、その説明（値）」のペアを並べるための箱だと思ってください。“d” は definition（定義）、dl は defin...
JavaScript JavaScript | HTML / CSS 連携：リスト・表組み － liタグ
li 要素は「リストの“1項目”を表すパーツ」まずイメージから。li 要素は、「ul や ol の中に並ぶ“1つ1つの項目”」 を表すためのタグです。ul（順不同リスト）＝「箱」ol（番号付きリスト）...
JavaScript JavaScript | HTML / CSS 連携：リスト・表組み － olタグ
ol 要素は「順番に意味がある“番号付きリスト”の箱」<ol> は「1 → 2 → 3 の順番に意味がある項目の並び」を表すためのタグです。“o” は ordered（順序付き）の略で、「順番が大事な...
JavaScript JavaScript | HTML / CSS 連携：リスト・表組み － ulタグ
ul 要素は「順番を気にしない“箇条書きの箱”」まずイメージからいきます。<ul> は「順番はどうでもいいけど、いくつかの項目を並べて見せたい」ときに使う“箇条書きの箱”です。買い物リストサイトのナビ...
JavaScript JavaScript | HTML / CSS 連携：テキスト・リンク・画像 － 改行タグ（br）
br 要素は「ここで“行だけ”を折りたいときの改行スイッチ」<br> は「ここで行を折って、すぐ次の行から続けて書いて」とブラウザに指示するためのタグです。ポイントは、「段落を分ける」のではなく「同じ...
JavaScript JavaScript | HTML / CSS 連携：テキスト・リンク・画像 － 補足タグ（em）
em 要素は「言い方・ニュアンスを強めるためのタグ」<em> は「ここ、ちょっと“気持ち強め”で読んでほしい」という“ニュアンスの強調”を表すタグです。ブラウザのデフォルト表示だと斜体になりますが、目...
JavaScript JavaScript | HTML / CSS 連携：テキスト・リンク・画像 － 強調タグ（strong）
strong 要素は「見た目の太字」ではなく「意味として重要な部分」まずここをしっかり押さえたいです。<strong> は、「ここは文章の中で特に重要だよ」という“意味としての強調”を表すタグです。ブ...
JavaScript JavaScript | HTML / CSS 連携：テキスト・リンク・画像 － figcaptionタグ
figcaption 要素は「図のタイトル・説明を書くためのラベル」<figcaption> は、「この図は何なのか？」を説明するための“キャプション専用タグ” です。単体では使わず、必ず <figu...
JavaScript JavaScript | HTML / CSS 連携：テキスト・リンク・画像 － figureタグ
figure 要素は「画像やコードなど“ひとかたまりの図”の箱」まずイメージからいきます。<figure> は、「画像・図・コード・表など、“ひとつの図として意味を持つかたまり”を包む箱」です。単なる...
JavaScript JavaScript | HTML / CSS 連携：テキスト・リンク・画像 － alt属性
alt 属性は「画像が見えない人のための“言葉の代わり”」まず一番大事な本質からいきます。alt 属性は、「この画像は何なのか？」を“言葉で説明するための場所” です。画像がちゃんと表示されているとき...
JavaScript JavaScript | HTML / CSS 連携：テキスト・リンク・画像 － imgタグ
img タグは「ページに画像を埋め込むためのタグ」<img> タグは、「この場所に、この画像ファイルを表示して」とブラウザに伝えるためのタグです。テキストが <p> や <h1> なら、画像は <im...
JavaScript JavaScript | HTML / CSS 連携：テキスト・リンク・画像 － target属性
target 属性は「リンクを“どの窓で開くか”を決めるスイッチ」<a> タグの target 属性は、「このリンクをクリックしたとき、どこで開くか」 を指定するためのものです。行き先そのものを決める...
JavaScript JavaScript | HTML / CSS 連携：テキスト・リンク・画像 － href属性
href 属性は「このリンクの行き先はここです」という住所ラベルまず一番大事なところから。href 属性は、「このリンク（a タグ）は、どこへ飛ぶのか？」という“行き先”を指定するための属性です。hr...
JavaScript JavaScript | HTML / CSS 連携：テキスト・リンク・画像 － aタグ
a タグは「ページとページをつなぐ“リンクのタグ”」まず一番大事なことから。<a> タグは「ここをクリックすると、どこかへ移動します」という“リンク”を作るタグです。「a」は anchor（アンカー＝...
JavaScript JavaScript | HTML / CSS 連携：HTML基礎 － コメントの書き方
HTML のコメントは「未来の自分と他人へのメモ」まず前提から。HTML のコメントは、<!-- ここがコメント -->という形で書きます。ブラウザには表示されませんが、ソースコードを開くと見える「メ...
JavaScript JavaScript | HTML / CSS 連携：HTML基礎 － span要素
span 要素は「意味のついていない“文字レベルの小さな箱”」まずイメージから。<div> が「ブロック全体をまとめる大きめの箱」だとしたら、<span> は 「文章の一部分だけを囲う、小さな箱」 で...
JavaScript JavaScript | HTML / CSS 連携：HTML基礎 － div要素
div 要素は「意味のついていない“箱”」＝レイアウト用のコンテナまず一番大事なことから。<div> は「特別な意味を持たない、ただの“箱（コンテナ）”」 です。「段落」でもない「見出し」でもない「ボ...
JavaScript JavaScript | HTML / CSS 連携：HTML基礎 － 段落タグ（p）
p タグは「文章のひとかたまり」を表すタグまず一番大事なポイントからいきます。<p> は「文章のひとかたまり（段落）」を表すタグ です。「一文ごと」ではなく、「意味がひとまとまりになっている文章のかた...
JavaScript JavaScript | HTML / CSS 連携：HTML基礎 － 見出しタグ（h1〜h6）
見出しタグは「文章の見出し」と「ページのアウトライン」を作るもの見出しタグ（<h1>〜<h6>）は、文字を大きくするためのタグではなく、「ここがタイトルです」「ここがその中の小見出しです」と、文章の構...
JavaScript JavaScript | HTML / CSS 連携：HTML基礎 － body要素
body 要素は「ユーザーが実際に触る“本体”」HTML 全体を家にたとえると、<!DOCTYPE html> は「これは家ですよ」の宣言、<html> は家全体の外枠、<head> は電気・住所・設...
JavaScript JavaScript | HTML / CSS 連携：HTML基礎 － head要素
head 要素は「ページの設定・プロフィールを書く場所」まずイメージからいきます。<head> は、「画面に直接は見えないけれど、ページにとって超重要な情報」を書く場所です。タイトル文字コードスマホ向...
JavaScript JavaScript | HTML / CSS 連携：HTML基礎 － DOCTYPE宣言
DOCTYPE 宣言は「これはどのルールの HTML ですよ」という最初のひと言HTML ファイルの一行目に書くこれ：<!DOCTYPE html>これが DOCTYPE 宣言 です。役割を一言でいう...
JavaScript JavaScript | HTML / CSS 連携：HTML基礎 － HTML文書の基本構造
HTML 文書の基本構造は「家の骨組み」みたいなものまずイメージからいきます。HTML ファイルは、ただタグを並べればいいわけではなく、「決まった骨組み（ひな形）」 を持っています。その骨組みがあるか...
JavaScript JavaScript | HTML / CSS 連携：HTML基礎 － HTMLの役割
HTML の役割は「中身の意味を伝えること」まず一番大事なことから。HTML の役割は「見た目を決めること」ではなく「中身の意味（構造）を伝えること」 です。人間にとっては「画面にどう見えるか」ですが...
JavaScript JavaScript | Web API：パフォーマンス・セキュリティ － API 利用のベストプラクティス
API 利用のベストプラクティスは「安全・高速・壊れない」を同時に満たす設計API を使うときに初心者がつまずきやすいのは、「動くコード」と「正しいコード」の違い です。API は動くだけなら簡単です...
JavaScript JavaScript | Web API：パフォーマンス・セキュリティ － 権限管理設計
「権限管理設計」は“技術”じゃなくて“信頼”の設計位置情報、カメラ、マイク、通知、センサー、ストレージ…。Web API の多くは「権限（permission）」をユーザーに確認してから使います。ここ...
JavaScript JavaScript | Web API：パフォーマンス・セキュリティ － HTTPS の重要性
HTTPS は「盗み見・改ざん・なりすまし」をまとめて防ぐ“前提条件”まず一番大事なことから。今どきの Web 開発で「HTTP でいい場面」はほぼゼロ です。ログインがあるから HTTPSクレジット...
JavaScript JavaScript | Web API：パフォーマンス・セキュリティ － CSP（Content Security Policy）
CSP は「このページで何をしていいか」をブラウザに教えるルールブックCSP（Content Security Policy）は、「このページでは、こういうリソースだけ読み込んでいい／こういうスクリプ...
JavaScript JavaScript | Web API：パフォーマンス・セキュリティ － CSRF 対策
CSRF は「ユーザーになりすまして勝手に操作させる攻撃」まずイメージからいきます。CSRF（Cross-Site Request Forgery）は、「ログイン中のユーザーになりすまして、別サイトか...
JavaScript JavaScript | Web API：パフォーマンス・セキュリティ － XSS 対策
XSS は「ユーザーの入力が“そのままスクリプトになる”事故」まず、XSS（クロスサイトスクリプティング）のイメージからいきます。XSS は、ざっくり言うと「ユーザーが入力した文字列が、そのまま HT...
JavaScript JavaScript | Web API：パフォーマンス・セキュリティ － 非同期パフォーマンス
「非同期パフォーマンス」は“待ち時間をどう見せるか”の技術JavaScript のパフォーマンスって聞くと、「処理をどれだけ速くするか」をイメージしがちですが、非同期の世界ではもう一つ大事な視点があり...
JavaScript JavaScript | Web API：パフォーマンス・セキュリティ － メモリ監視
「メモリ監視」は“どれだけ詰め込んでいて、どれだけ片付いていないか”を見ることパフォーマンスは「速さ」だけじゃなくて、「どれだけメモリを使っているか」も重要です。メモリを使いすぎると、ブラウザが重くな...
JavaScript JavaScript | Web API：パフォーマンス・セキュリティ － 計測（time / mark）
「計測」は“なんとなく遅い”を数字に変えるための技術パフォーマンスの話で一番大事なのは、「速い／遅い」を 感覚ではなく数字で話せるようになること です。そのために使うのが、console.time /...
JavaScript JavaScript | Web API：パフォーマンス・セキュリティ － Performance API
Performance API は「なんとなく速い／遅い」を数字にするための道具「このページ、なんか重いな…」「この処理、体感遅いけど、どれくらい遅いんだろう？」Performance API は、こ...
JavaScript JavaScript | Web API：位置情報・センサー － プライバシー配慮
センサーとプライバシーは「技術」じゃなくて「人の生活」に触れている話位置情報・カメラ・マイク・DeviceMotion・DeviceOrientation…。これらは全部、「あなたがどこにいて、何をし...
JavaScript JavaScript | Web API：位置情報・センサー － センサー利用の注意点
センサー利用の「注意点」は“技術”と“人間”の両方を見ること位置情報・DeviceOrientation・DeviceMotion・カメラ・マイク…。どれも「現実世界のあなた」を Web に持ち込むた...
JavaScript JavaScript | Web API：位置情報・センサー － バッテリー API（廃止傾向）
バッテリー API は「端末の電池残量をブラウザから覗く仕組み」だったまずイメージからいきます。バッテリー API（Battery Status API）は、ブラウザから「この端末のバッテリー残量や充...
JavaScript JavaScript | Web API：位置情報・センサー － DeviceMotion
DeviceMotion は「端末がどれくらい“揺れているか・加速しているか”」を教えてくれるセンサーまずイメージからいきます。DeviceMotion は、スマホやタブレットの「動き」そのものを数値...
JavaScript JavaScript | Web API：位置情報・センサー － DeviceOrientation
DeviceOrientation は「端末がどっち向いているか」を教えてくれるセンサーまずイメージからいきます。DeviceOrientation は、スマホやタブレットの「向き」を教えてくれる仕組...
JavaScript JavaScript | Web API：位置情報・センサー － 権限管理
「権限管理」は“ユーザーの OK がないと触れない領域をどう扱うか”の話位置情報・カメラ・マイク・通知・センサー系は、どれも「ユーザーのプライバシーや安全」に直結します。だからブラウザは、こういう機能...
JavaScript JavaScript | Web API：位置情報・センサー － 精度と誤差
「精度と誤差」は“どれくらい当たっていて、どれくらいズレているか”の話位置情報を扱うときに絶対に避けて通れないのが「精度（accuracy）」と「誤差（error）」 です。地図アプリを開いたら、自分...
JavaScript JavaScript | Web API：位置情報・センサー － watchPosition
watchPosition は「動いたらそのたびに現在地を教えてもらう」仕組み前回の getCurrentPosition は「今どこ？」を一回だけ聞く API でした。watchPosition は...
JavaScript JavaScript | Web API：位置情報・センサー － 現在地取得
「現在地取得」は“ブラウザに今いる場所を一回だけ教えてもらう”こと「現在地取得」と聞いたら、まずイメージしてほしいのはこれです。ブラウザに「今どこにいる？」と一度だけ質問して、緯度・経度などの位置情報...
JavaScript JavaScript | Web API：位置情報・センサー － Geolocation API
Geolocation API は「ブラウザに“今どこにいるか”を教えてもらう窓口」まずイメージからいきます。Geolocation API は、ブラウザに対して「このユーザーが今どこにいるか教えて」...
JavaScript JavaScript | アルゴリズムと再帰関数 (recursive function)
前半：アルゴリズムと再帰関数の「土台」を固めるJavaScriptでアルゴリズムや再帰を学ぶのは、かなり良い選択です。ブラウザでもNode.jsでもすぐ試せるし、エラーもその場で見えるので「手を動かし...
JavaScript JavaScript | ゼロからはじめるプログラミング、30日で基礎を学ぶJavaScript：ミニWebアプリ開発 － Day30：総復習 練習問題
Day30 総復習の練習問題Day30 は「30 日間の学習で身につけた力を、自分の手で確認する日」です。ここでは、総復習の 5 つの柱に沿って、条件分岐・配列・DOM 操作・イベント処理・小規模 W...
JavaScript JavaScript | ゼロからはじめるプログラミング、30日で基礎を学ぶJavaScript：ミニWebアプリ開発 － Day30：総復習
Day30 前半のゴールここまで 29 日間かけて作ってきた TODO アプリは、「小さな Web アプリ」としてちゃんと成立しています。Day30 は総復習。前半では、次のポイントを一つずつ確認して...
JavaScript JavaScript | ゼロからはじめるプログラミング、30日で基礎を学ぶJavaScript：ミニWebアプリ開発 － Day29：TODOアプリ⑤ 練習問題
Day29：TODOアプリ⑤の練習問題Day29 のテーマは コード整理と関数分割。ここでは、前半・後半で学んだ内容をしっかり定着させるために、「実際に手を動かして理解できる」練習問題と丁寧な解答・解...
JavaScript JavaScript | ゼロからはじめるプログラミング、30日で基礎を学ぶJavaScript：ミニWebアプリ開発 － Day29：TODOアプリ⑤
Day29 前半のゴールDay29 のテーマは コード整理と関数分割。ここまでで TODO アプリはかなり機能が増えましたが、そのぶんコードが長くなり、「どこで何をしているのか」が少しずつ見えにくくな...
JavaScript JavaScript | ゼロからはじめるプログラミング、30日で基礎を学ぶJavaScript：ミニWebアプリ開発 － Day28：TODOアプリ④ 練習問題
Day28：TODOアプリ④の練習問題Day28 のテーマは 完了機能（チェックボックスでタスクの状態を切り替える）。ここでは、前半・後半で学んだ内容をしっかり定着させるために、段階的な練習問題と丁寧...
JavaScript JavaScript | ゼロからはじめるプログラミング、30日で基礎を学ぶJavaScript：ミニWebアプリ開発 － Day28：TODOアプリ④
Day28 前半のゴールここまでで、TODOアプリは「追加・削除・保存・復元」までできるようになりました。Day28 のテーマは 完了機能。前半でやるのは、ざっくり言うとこの2つです。タスクに「完了し...
JavaScript JavaScript | ゼロからはじめるプログラミング、30日で基礎を学ぶJavaScript：ミニWebアプリ開発 － Day27：TODOアプリ③ 練習問題
Day27：TODOアプリ③の練習問題Day27 のテーマは localStorage を使ったタスク保存と復元。ここでは、初心者でも確実に理解できるように、段階的な練習問題と丁寧な解答・解説をまとめ...
JavaScript JavaScript | ゼロからはじめるプログラミング、30日で基礎を学ぶJavaScript：ミニWebアプリ開発 － Day27：TODOアプリ③
Day27 前半のゴールここまでで、TODOアプリは「追加」と「削除」ができるようになりました。Day27 のテーマは localStorage 保存。前半ではまず、ページをリロードしてもタスクが消え...
JavaScript JavaScript | ゼロからはじめるプログラミング、30日で基礎を学ぶJavaScript：ミニWebアプリ開発 － Day26：TODOアプリ② 練習問題
Day26：TODOアプリ②の練習問題Day26 のテーマは タスク削除機能の実装。ここでは、前半・後半で学んだ内容をしっかり定着させるために、段階的な練習問題と丁寧な解答・解説をまとめます。削除ボタ...
JavaScript JavaScript | ゼロからはじめるプログラミング、30日で基礎を学ぶJavaScript：ミニWebアプリ開発 － Day26：TODOアプリ②
Day26 前半のゴールDay25 で「タスクを追加できる TODO アプリ」ができました。Day26 のテーマは タスク削除の実装。前半ではまず、「どのタスクを消すか」をどう特定するか削除ボタンをど...
JavaScript JavaScript | ゼロからはじめるプログラミング、30日で基礎を学ぶJavaScript：ミニWebアプリ開発 － Day25：TODOアプリ① 練習問題
Day25：TODOアプリ①の練習問題Day25 のテーマは TODOアプリのタスク追加機能。ここでは、前半・後半で学んだ内容をしっかり定着させるための練習問題と、丁寧な解答・解説をまとめます。タスク...
JavaScript JavaScript | ゼロからはじめるプログラミング、30日で基礎を学ぶJavaScript：ミニWebアプリ開発 － Day25：TODOアプリ①
Day25 前半のゴールいよいよ「ちゃんとした Web アプリ」に一歩踏み込むところです。Day25 のテーマは TODOアプリ①：タスク追加の実装。前半ではまず、タスクを入力する画面を作る「追加」ボ...
JavaScript JavaScript | ゼロからはじめるプログラミング、30日で基礎を学ぶJavaScript：ミニWebアプリ開発 － Day24：アプリ設計 練習問題
Day24：アプリ設計の練習問題Day24 のテーマは 入力・処理・出力。これはどんな Web アプリでも必ず存在する「3つの柱」です。ここでは、初心者でも確実に理解できるように、段階的な練習問題と丁...
JavaScript JavaScript | ゼロからはじめるプログラミング、30日で基礎を学ぶJavaScript：ミニWebアプリ開発 － Day24：アプリ設計
Day24 前半のゴールここからはいよいよ「ミニWebアプリ開発」のフェーズです。Day24 のテーマは アプリ設計。キーワードはとてもシンプルで、入力処理出力この 3 つです。前半では、なぜ「入力・...
JavaScript JavaScript | ゼロからはじめるプログラミング、30日で基礎を学ぶJavaScript：Webページを操作できるようになる － Day23：総合演習② 練習問題
Day23：総合演習②（簡易メモ帳）の練習問題Day23 のテーマは「簡易メモ帳」。ここまで学んだ DOM 操作・イベント・関数分割・localStorage・デバッグ を総動員して作る総合演習です。...
JavaScript JavaScript | ゼロからはじめるプログラミング、30日で基礎を学ぶJavaScript：Webページを操作できるようになる － Day23：総合演習②
Day23 前半のゴール今日のテーマは「総合演習②：簡易メモ帳」です。ここまで学んできたDOM 操作フォーム入力localStorage による保存関数分割デバッグ（console.log）を全部まと...
JavaScript JavaScript | ゼロからはじめるプログラミング、30日で基礎を学ぶJavaScript：Webページを操作できるようになる － Day22：デバッグ 練習問題
Day22：デバッグの練習問題デバッグは「バグを直す技術」ではなく、「バグの原因を見つける技術」です。Day22 の学習内容である console.log と エラー確認 を中心に、初心者でも確実に力...
JavaScript JavaScript | ゼロからはじめるプログラミング、30日で基礎を学ぶJavaScript：Webページを操作できるようになる － Day22：デバッグ
Day22 前半のゴールここまでで、かなりいろいろ書けるようになってきたはずです。でも、こう感じる瞬間が増えてきていない？「動かない。どこが悪いのか分からない。」「エラーが出てるけど、何を言われている...
JavaScript JavaScript | ゼロからはじめるプログラミング、30日で基礎を学ぶJavaScript：Webページを操作できるようになる － Day21：関数分割 練習問題
Day21：関数分割の練習問題関数分割は「大規模化の基礎」です。処理を整理し、読みやすく、変更しやすく、再利用しやすいコードを書くための必須スキルです。ここでは Day21 の内容に沿って、初心者でも...
JavaScript JavaScript | ゼロからはじめるプログラミング、30日で基礎を学ぶJavaScript：Webページを操作できるようになる － Day21：関数分割
Day21 前半のゴールここまでで、DOM 操作・入力チェック・localStorage など、かなり多くのことを学んできました。その結果、こう感じていないでしょうか。「コードが長くなってきて、どこに...
JavaScript JavaScript | ゼロからはじめるプログラミング、30日で基礎を学ぶJavaScript：Webページを操作できるようになる － Day20：localStorage 練習問題
Day20：localStorageの練習問題localStorage は「ブラウザにデータを保存する」ための仕組みで、Web アプリを作るうえで欠かせない機能です。ここでは Day20 の内容をしっ...
JavaScript JavaScript | ゼロからはじめるプログラミング、30日で基礎を学ぶJavaScript：Webページを操作できるようになる － Day20：localStorage
Day20 前半のゴールここまでで「入力して」「チェックして」「画面に表示する」ところまでは来ました。Day20 では、そこから一歩進んで、「データをブラウザに保存する」ことを学びます。キーワードは ...
JavaScript JavaScript | ゼロからはじめるプログラミング、30日で基礎を学ぶJavaScript：Webページを操作できるようになる － Day19.5：条件 + DOM応用 練習問題
Day19.5：条件 + DOM 応用の練習問題複雑なフォーム処理では、「複数の項目を複数の条件でチェックし、エラーをまとめて管理し、見た目にも反映する」という高度な DOM 操作が必要になります。こ...
JavaScript JavaScript | ゼロからはじめるプログラミング、30日で基礎を学ぶJavaScript：Webページを操作できるようになる － Day19.5：条件 + DOM応用
Day19.5 前半のゴールDay19.5 は、Day19 までに学んだ「入力チェック」「条件分岐」「DOM 操作」をもう一段レベルアップさせて、“ちょっと複雑なフォーム”を扱えるようになる日です。前...
JavaScript JavaScript | ゼロからはじめるプログラミング、30日で基礎を学ぶJavaScript：Webページを操作できるようになる － Day19：条件 + DOM 練習問題
Day19：条件 + DOMの練習問題入力チェックは「ユーザーの入力をそのまま信用しない」ための重要な技術です。ここでは、Day19 の内容を確実に身につけるために、段階的な練習問題と丁寧な解答・解説...
JavaScript JavaScript | ゼロからはじめるプログラミング、30日で基礎を学ぶJavaScript：Webページを操作できるようになる － Day19：条件 + DOM
Day19 前半のゴールDay19 は「条件分岐（if）＋ DOM ＋ フォーム入力」を組み合わせて、“ちゃんと入力されているかチェックする” という、超実務的なテーマに入ります。前半のゴールはこうで...
JavaScript JavaScript | ゼロからはじめるプログラミング、30日で基礎を学ぶJavaScript：Webページを操作できるようになる － Day18.5：フォーム操作② 練習問題
Day18.5：フォーム操作②の練習問題チェックボックスとラジオボタンは、テキスト入力とはまったく違う性質を持つフォーム要素です。「オンかオフか」「複数選択してよいか」「1つだけ選ぶのか」など、ユーザ...
JavaScript JavaScript | ゼロからはじめるプログラミング、30日で基礎を学ぶJavaScript：Webページを操作できるようになる － Day18.5：フォーム操作②
Day18.5 前半のゴールDay18 では「テキスト入力（input.value）」を扱いました。Day18.5 では一歩進んで、チェックボックスとラジオボタンを扱います。チェックボックスとラジオボ...
JavaScript JavaScript | ゼロからはじめるプログラミング、30日で基礎を学ぶJavaScript：Webページを操作できるようになる － Day18：フォーム操作 練習問題
Day18：フォーム操作の練習問題input の値を JavaScript で取得することは、Webアプリの基礎中の基礎です。ここでは、Day18 の内容をしっかり定着させるために、段階的な練習問題と...
JavaScript JavaScript | ゼロからはじめるプログラミング、30日で基礎を学ぶJavaScript：Webページを操作できるようになる － Day18：フォーム操作
Day18 前半のゴールDay18 では、いよいよ「フォーム操作」に入ります。ここまでで「クリックされたら文字を変える」「要素を増やす」はできるようになりました。ここからは、ユーザーが入力した値を J...
JavaScript JavaScript | ゼロからはじめるプログラミング、30日で基礎を学ぶJavaScript：Webページを操作できるようになる － Day17：イベント処理 練習問題
Day17：イベント処理の練習問題click イベントは「ユーザーの操作をきっかけに JavaScript を動かす」ための最重要機能です。ここでは、Day17 の内容をしっかり定着させるために、段階...
JavaScript JavaScript | ゼロからはじめるプログラミング、30日で基礎を学ぶJavaScript：Webページを操作できるようになる － Day17：イベント処理
Day17 前半のゴールDay17 は 「イベント処理」＝ユーザーの操作に反応して JavaScript を動かす仕組み を本格的に理解する日です。特に click イベント は、Webアプリの 80...
JavaScript JavaScript | ゼロからはじめるプログラミング、30日で基礎を学ぶJavaScript：Webページを操作できるようになる － Day16.5：DOM操作③ 練習問題
Day16.5：DOM操作③の練習問題classList・style・remove は「見た目を変える」「状態を表現する」「要素を消す」という、Webアプリの UI 制御に欠かせない機能です。ここでは...
JavaScript JavaScript | ゼロからはじめるプログラミング、30日で基礎を学ぶJavaScript：Webページを操作できるようになる － Day16.5：DOM操作③
Day16.5 前半のゴールDay16.5 では、DOM 操作をもう一段レベルアップさせます。これまで「要素を増やす・文字を変える」はできるようになりました。ここからは「見た目を変える」「要素を消す」...
JavaScript JavaScript | ゼロからはじめるプログラミング、30日で基礎を学ぶJavaScript：Webページを操作できるようになる － Day16：DOM操作② 練習問題
Day16：DOM操作②の練習問題createElement と appendChild は「新しい要素を作って、DOM に追加する」ための基本操作です。Day16 の内容をしっかり定着させるために、...
JavaScript JavaScript | ゼロからはじめるプログラミング、30日で基礎を学ぶJavaScript：Webページを操作できるようになる － Day16：DOM操作②
Day16 前半のゴールDay16 では、いよいよ「HTMLをあとから増やす」世界に入ります。これまでの document.getElementById / textContent は「既にある要素を...
JavaScript JavaScript | ゼロからはじめるプログラミング、30日で基礎を学ぶJavaScript：JavaScriptを使えるレベルにする － Day15：総合演習① 練習問題
Day15：総合演習①の練習問題ボタンクリックで文字を変更する仕組みは、DOM 操作の基礎をすべて含んだ「総合問題」です。document.getElementById、textContent、イベン...
JavaScript JavaScript | ゼロからはじめるプログラミング、30日で基礎を学ぶJavaScript：JavaScriptを使えるレベルにする － Day14：DOM操作① 練習問題
Day14：DOM操作①の練習問題document.getElementById と textContent は、DOM 操作の“入口”であり、Webアプリを作るための最初の大きな壁です。ここでは、初...
JavaScript JavaScript | ゼロからはじめるプログラミング、30日で基礎を学ぶJavaScript：JavaScriptを使えるレベルにする － Day14：DOM操作①
Day14 前半のゴールDay14 からいよいよ「画面（HTML）を JavaScript でいじる世界」に入ります。ここを超えると、「ただの計算」から「動くWebページ」を作る側に回れます。前半のゴ...
JavaScript JavaScript | ゼロからはじめるプログラミング、30日で基礎を学ぶJavaScript：JavaScriptを使えるレベルにする － Day13.5：非同期処理 練習問題
Day13.5：非同期処理 練習問題セットPromise / async / await は、JavaScript を「実務レベル」で扱うための必須スキルです。ここでは、初心者でも確実に理解できるよう...
JavaScript JavaScript | ゼロからはじめるプログラミング、30日で基礎を学ぶJavaScript：JavaScriptを使えるレベルにする － Day13.5：非同期処理
Day13.5 前半のゴール非同期処理は「今すぐ終わらない処理」と仲良くするための仕組みです。ネットワーク通信、ファイル読み込み、タイマーなどはすぐに終わらないので、JavaScript は「待ちなが...
JavaScript JavaScript | ゼロからはじめるプログラミング、30日で基礎を学ぶJavaScript：JavaScriptを使えるレベルにする － Day13：例外処理
Day13 前半のゴールDay13 は「エラーが起きたら終わり」から「エラーが起きても、ちゃんと受け止めて処理を続ける」世界に進む日です。前半のゴールはこの2つです。Day13 前半でつかみたい感覚t...
JavaScript JavaScript | ゼロからはじめるプログラミング、30日で基礎を学ぶJavaScript：JavaScriptを使えるレベルにする － Day12.5：オブジェクト応用 練習問題
Day12.5 オブジェクト応用の練習問題ネスト構造とデータ整形は、JavaScript の実務で最も重要なスキルのひとつです。ここでは、初心者でも確実に理解できるように、段階的な練習問題と丁寧な解説...
JavaScript JavaScript | ゼロからはじめるプログラミング、30日で基礎を学ぶJavaScript：JavaScriptを使えるレベルにする － Day12：配列応用 練習問題
Day12 配列応用の練習問題map / filter / forEach は JavaScript 実務で最も使われる三種の神器。ここでは、初心者でも確実に理解できるように、それぞれの特徴を活かした...
JavaScript JavaScript | ゼロからはじめるプログラミング、30日で基礎を学ぶJavaScript：JavaScriptを使えるレベルにする － Day12：配列応用
Day12 前半のゴールDay12 は「配列を“ただ回す”段階から、“意味を持って変換・抽出・処理する”段階」に進む日です。テーマは map / filter / forEach。しかも「実務で超重要...
JavaScript JavaScript | ゼロからはじめるプログラミング、30日で基礎を学ぶJavaScript：JavaScriptを使えるレベルにする － Day11：文字列操作 練習問題
Day11 文字列操作の練習問題template literal / split / replace を「実際に使える」レベルにするための練習問題です。初心者でも確実に理解できるように丁寧に解説します...
JavaScript JavaScript | ゼロからはじめるプログラミング、30日で基礎を学ぶJavaScript：JavaScriptを使えるレベルにする － Day11：文字列操作
Day11 前半のゴールDay11 は「文字列を“ただ表示する”から“自在に扱う”」ステージに進む日です。前半では特に次の感覚をつかむことをゴールにします。Day11 前半で身につけたいことtempl...
JavaScript JavaScript | ゼロからはじめるプログラミング、30日で基礎を学ぶJavaScript：JavaScriptを使えるレベルにする － Day10.5：条件分岐の応用 練習問題
Day11.5 条件分岐の応用の練習問題三項演算子と switch は、JavaScript の条件分岐を「短く」「読みやすく」「安全に」書くための重要ツールです。ここでは、初心者でも確実に理解できる...
JavaScript JavaScript | ゼロからはじめるプログラミング、30日で基礎を学ぶJavaScript：JavaScriptを使えるレベルにする － Day10.5：条件分岐の応用
Day11.5 前半のゴールDay11.5 は「条件分岐をもっとコンパクトに・読みやすく」書くための日です。テーマは三項演算子と switch。前半ではまず、それぞれをこういうイメージでつかむことを目...
JavaScript JavaScript | ゼロからはじめるプログラミング、30日で基礎を学ぶJavaScript：JavaScriptを使えるレベルにする － Day10：関数② 練習問題
Day10 関数②の練習問題Day10 のテーマは スコープ / 無名関数 / アロー関数。ここでは、理解を深めるための練習問題と、それぞれの解答・解説をまとめていきます。関数②は「書き方の幅が広がる...
JavaScript JavaScript | ゼロからはじめるプログラミング、30日で基礎を学ぶJavaScript：JavaScriptを使えるレベルにする － Day10：関数②
Day10 前半のゴールDay10 は「関数レベルを一段上げる日」です。テーマはスコープ・無名関数・アロー関数。前半では特に、Day10 前半で押さえたいポイントスコープ＝「変数が生きている範囲」とい...
JavaScript JavaScript | ゼロからはじめるプログラミング、30日で基礎を学ぶJavaScript：JavaScriptを使えるレベルにする － Day9：関数① 練習問題
Day9 関数①の練習問題Day9 のテーマは function / 引数 / return。ここでは、関数の基本をしっかり理解するための練習問題と、それぞれの解答・解説をまとめていきます。関数は「処...
JavaScript JavaScript | ゼロからはじめるプログラミング、30日で基礎を学ぶJavaScript：JavaScriptを使えるレベルにする － Day9：関数①
Day9 前半のゴールDay9 のテーマは「関数」です。ここから一気に「コードを部品として再利用する」力が手に入ります。前半では、まず次の3つをしっかり押さえることをゴールにします。Day9 前半で身...
JavaScript JavaScript | ゼロからはじめるプログラミング、30日で基礎を学ぶJavaScript：JavaScriptを使えるレベルにする － Day8：オブジェクト 練習問題
Day8 オブジェクトの練習問題Day8 のテーマは オブジェクト / key / value。ここでは、オブジェクトの基本操作をしっかり身につけるための練習問題と、それぞれの解答・解説をまとめていき...
JavaScript JavaScript | ゼロからはじめるプログラミング、30日で基礎を学ぶJavaScript：JavaScriptを使えるレベルにする － Day8：オブジェクト
Day8 前半のゴールDay8 のテーマは「オブジェクト」です。ここから一気に「現実世界の情報をそのままコードで表現する」力が手に入ります。前半では、とくに次の感覚をつかむことをゴールにします。Day...
JavaScript JavaScript | ゼロからはじめるプログラミング、30日で基礎を学ぶJavaScript：JavaScript文法の基礎 － Day7：配列 練習問題
Day7 配列の練習問題Day7 のテーマは 配列 / push / splice。ここでは、配列操作の理解を深めるための練習問題と、それぞれの解答・解説をまとめていきます。配列は JavaScrip...
JavaScript JavaScript | ゼロからはじめるプログラミング、30日で基礎を学ぶJavaScript：JavaScript文法の基礎 － Day7：配列
Day7 前半のゴールDay7 のテーマは「配列」です。ここから一気に「データをまとめて扱う」力が手に入ります。前半では、まず次の3つを目標にします。Day7 前半で身につけたいこと配列とは何かをイメ...
JavaScript JavaScript | ゼロからはじめるプログラミング、30日で基礎を学ぶJavaScript：JavaScript文法の基礎 － Day6：繰り返し 練習問題
Day6 繰り返しの練習問題Day6 のテーマは for と while。ここでは、繰り返し処理の理解を深めるための練習問題と、それぞれの解答・解説をまとめていきます。初心者がつまずきやすいポイントを...
JavaScript JavaScript | ゼロからはじめるプログラミング、30日で基礎を学ぶJavaScript：JavaScript文法の基礎 － Day6：繰り返し
Day6 前半のゴールDay6 のテーマは「繰り返し」です。ここから一気に「コンピュータらしさ」が強くなります。前半では、特に次の2つを目標にします。Day6 前半で身につけたいこと同じ処理を「何回も...
JavaScript JavaScript | ゼロからはじめるプログラミング、30日で基礎を学ぶJavaScript：JavaScript文法の基礎 － Day5：条件分岐 練習問題
Day5 条件分岐の練習問題Day5 のテーマは if / else / else if。ここでは、条件分岐の理解を深めるための練習問題と、それぞれの解答・解説をまとめていきます。初心者がつまずきやす...
JavaScript JavaScript | ゼロからはじめるプログラミング、30日で基礎を学ぶJavaScript：JavaScript文法の基礎 － Day5：条件分岐
Day5 前半のゴールDay5 のテーマは「条件分岐」です。ここから一気に「プログラムが考えて動く」感じが強くなります。前半では、まず if / else / else if の基本形 をしっかり押さ...
JavaScript JavaScript | ゼロからはじめるプログラミング、30日で基礎を学ぶJavaScript：JavaScript文法の基礎 － Day4：演算子 練習問題
Day4 演算子の練習問題Day4 のテーマは 四則演算・比較演算・論理演算。ここでは、学んだ内容をしっかり定着させるための練習問題と、それぞれの解答・解説をまとめていきます。初心者がつまずきやすいポ...
JavaScript JavaScript | ゼロからはじめるプログラミング、30日で基礎を学ぶJavaScript：JavaScript文法の基礎 － Day4：演算子
Day4 前半のゴールDay4 のテーマは「演算子」です。演算子は、値と値のあいだで「計算する」「比べる」「組み合わせる」といった操作をするための記号です。前半では、次の3つをしっかり押さえることを目...
JavaScript JavaScript | ゼロからはじめるプログラミング、30日で基礎を学ぶJavaScript：JavaScript文法の基礎 － Day3：データ型 練習問題
Day3 データ型の練習問題Day3 のテーマは string / number / boolean / null / undefined。ここでは、学んだ内容をしっかり定着させるための練習問題と、そ...
JavaScript JavaScript | ゼロからはじめるプログラミング、30日で基礎を学ぶJavaScript：JavaScript文法の基礎 － Day3：データ型
Day3 前半のゴールDay3 のテーマは「データ型」です。Day2 で「変数」という“箱”を学びましたが、今日は「その箱の中に入る中身の種類」を理解していきます。ここを押さえておくと、「この値はどう...
JavaScript JavaScript | ゼロからはじめるプログラミング、30日で基礎を学ぶJavaScript：JavaScript文法の基礎 － Day2：変数 練習問題
Day2 変数の練習問題Day2 のテーマ「let」「const」「変数命名」「基本は const」これらをしっかり理解できているか確認するための練習問題です。すべて 自分の手で書いて動かす ことを前...
JavaScript JavaScript | ゼロからはじめるプログラミング、30日で基礎を学ぶJavaScript：JavaScript文法の基礎 － Day2：変数
Day2 前半のゴールDay2 のテーマは「変数」です。ここをしっかり押さえられるかどうかで、この先の理解スピードが大きく変わります。前半では次の3つに集中します。Day2 前半でやること変数とは何か...
JavaScript JavaScript | ゼロからはじめるプログラミング、30日で基礎を学ぶJavaScript：JavaScript文法の基礎 － Day1：JavaScriptとは・環境構築 練習問題
Day1 練習問題Day1 の内容「JavaScriptとは」「ブラウザで動く仕組み」「HTMLとの関係」「VS Code導入」「scriptタグ」「Hello World」これらをしっかり理解できた...
JavaScript JavaScript | ゼロからはじめるプログラミング、30日で基礎を学ぶJavaScript：JavaScript文法の基礎 － Day1：JavaScriptとは・環境構築
JavaScript学習カリキュラム（30日完全基礎ロードマップ）カリキュラム全体像このカリキュラムは、プログラミング未経験者が「JavaScriptの基礎を理解し、自力で小さなWebアプリを作れる状...
JavaScript JavaScript Tips | 配列ユーティリティ：分割
何をしたいユーティリティか：「配列の分割」ここでの「分割」は、1つの配列を「小さな配列のかたまり」に切り分ける処理のことです。英語だと「chunk（チャンク）」と呼ばれることが多いです。例えば、こんな...
JavaScript JavaScript Tips | 配列ユーティリティ：ページング
何をしたいユーティリティか：「配列のページング」ここでの「ページング」は、たくさんのデータを「ページ番号」と「1ページあたり件数」に分割して扱う処理のことです。Web の一覧画面でよく見る「1〜10件...
JavaScript JavaScript Tips | 配列ユーティリティ：多段ソート
何をしたいユーティリティか：「多段ソート」ここでの「多段ソート」は、複数のキーを優先順位付きで使って並び替える処理です。SQL でいう ORDER BY category ASC, price DES...
JavaScript JavaScript Tips | 配列ユーティリティ：キー指定ソート
何をしたいユーティリティか：「キー指定ソート」ここでの「キー指定ソート」は、オブジェクトの配列を「特定のキー（プロパティ）」を基準に並び替える処理です。SQL の ORDER BY price ASC...
JavaScript JavaScript Tips | 配列ユーティリティ：グループ化
何をしたいユーティリティか：「配列のグループ化」ここでの「グループ化」は、配列の要素を「ある条件（キー）」ごとにまとめ直す処理です。SQL の GROUP BY や、Excel の「ピボットテーブルの...
JavaScript JavaScript Tips | 配列ユーティリティ：平均算出
何をしたいユーティリティか：「配列の平均算出」ここでの「平均算出」は、配列の中の数値を全部足して、その合計を要素数で割る処理です。学校で習った「平均」と同じですが、プログラムでやるときは「空配列のとき...
JavaScript JavaScript Tips | 配列ユーティリティ：合計算出
何をしたいユーティリティか：「配列の合計算出」ここでの「合計算出」は、配列の中の値を全部足して、ひとつの数値にまとめる処理です。一番シンプルなのは「数値配列の合計」ですが、業務では「オブジェクト配列の...
JavaScript JavaScript Tips | 配列ユーティリティ：最小値取得
何をしたいユーティリティか：「配列の最小値取得」ここでの「最小値取得」は、配列の中で一番小さい値を取り出す処理です。「最大値取得」の逆ですが、業務では同じくらい頻繁に使います。例えばこんな場面がありま...
JavaScript JavaScript Tips | 配列ユーティリティ：最大値取得
何をしたいユーティリティか：「配列の最大値取得」ここでの「最大値取得」は、配列の中で一番大きい値を取り出す処理です。一番シンプルなのは「数値配列の最大値」ですが、業務では「オブジェクト配列の中で、特定...
JavaScript JavaScript Tips | 配列ユーティリティ：ランダム要素取得
何をしたいユーティリティか：「ランダム要素取得」ここでの「ランダム要素取得」は、配列の中から 1 要素（または複数要素）をランダムに取り出す処理です。「配列シャッフル」が「順番を全部ランダムにする」の...
JavaScript JavaScript | Web API：グラフィック・メディア － アニメーション処理
アニメーション処理は「毎フレーム、画面を描き直す仕組み」を作ることグラフィック系の JavaScript でいう「アニメーション処理」は、ざっくり言うと「時間の経過に合わせて、毎フレームごとに“今の状...
JavaScript JavaScript | Web API：グラフィック・メディア － WebRTC の概要
WebRTC は「ブラウザ同士を直接つないで、映像・音・データをやり取りする仕組み」まず一言でいうと、WebRTC は「ブラウザ同士を“ほぼ直接”つないで、カメラ映像・マイク音声・任意のデータをリアル...
JavaScript JavaScript | Web API：グラフィック・メディア － ストリーム処理
「ストリーム処理」は“流れてくる映像・音を、そのまま扱う”考え方グラフィック・メディアの世界でいう「ストリーム」は、ざっくり言うと「時間とともに流れてくるデータ（映像・音）の連続」です。カメラからの映...
JavaScript JavaScript | Web API：グラフィック・メディア － MediaDevices（カメラ・マイク）
MediaDevices は「ブラウザからカメラ・マイクを借りるための窓口」スマホや PC には、カメラやマイクが付いています。普段はカメラアプリやビデオ通話アプリがそれを使っていますが、実は Web...
JavaScript JavaScript | Web API：グラフィック・メディア － Audio API
Audio API は「ブラウザの中にある音のミキサー＆シンセサイザー」JavaScript で音を扱う方法は大きく分けて 2 つあります。ひとつは <audio> タグを JavaScript から...
JavaScript JavaScript | Web API：グラフィック・メディア － 動画制御
「動画制御」は“ブラウザにあるビデオプレイヤーのリモコンを自分で作る”ことHTML の <video> タグは、それだけで再生ボタンやシークバーを持っています。でも JavaScript から操作する...
JavaScript JavaScript | Web API：グラフィック・メディア － 画像読み込み
「画像読み込み」は“ファイルをブラウザに連れてきて、キャンバスに貼る”ことCanvas で画像を扱うときに必ず通るのが「画像読み込み」です。ざっくり言うと、画像ファイルをブラウザに読み込む読み込みが終...
JavaScript JavaScript | Web API：グラフィック・メディア － 描画処理
「描画処理」は“毎回、画面をどうやって作るか”を決めることCanvas API の世界でいう「描画処理」は、ざっくり言うと「キャンバスという白い紙に、どの順番で、何を、どこに、どういう見た目で描くか」...
JavaScript JavaScript | Web API：グラフィック・メディア － 2D コンテキスト
「2D コンテキスト」は“キャンバスに絵を描くためのペン箱”Canvas API を使うとき、必ず最初にやるのがこれです。const canvas = document.querySelector("...
JavaScript JavaScript | Web API：グラフィック・メディア － Canvas API
Canvas API は「ブラウザの中にあるお絵かき用の白い紙」Canvas API は、HTML の <canvas> 要素と JavaScript を使って図形・文字・画像・アニメーションなどを「...
JavaScript JavaScript | 1 日 30 分 × 7 日アプリ学習超初級編：文字を表示するアプリ
1日目のゴール1日目のテーマは「JavaScript で“画面の文字を書き換える”感覚をつかむこと」 です。・ボタンを押したら文字が変わる・入力した文字を画面に出すたったこれだけでも、「ただの HTM...
C# バイブコーディングとセキュリティーについて
バイブコーディングの本質と現代開発における位置づけバイブコーディングとは、仕様や設計書に厳密に従うのではなく、直感や流れ、試行錯誤を重視してコードを書く開発スタイルである。とくにAIによるコード生成や...
JavaScript JavaScript | 1 日 30 分 × 7 日アプリ学習超初級編：ボタンを押すアプリ
1日目のゴール1日目のテーマは「ボタンを押した“きっかけ”で JavaScript が動くんだ、という感覚をつかむこと」 です。やることはシンプルです。ボタンを押す→ JavaScript が動く→ ...
JavaScript JavaScript Tips | 配列ユーティリティ：配列シャッフル
何をしたいユーティリティか：「配列シャッフル」ここでの「配列シャッフル」は、配列の要素の順番をランダムに並べ替える処理です。例えばこうです。[1, 2, 3, 4, 5]// ↓ シャッフル[3, 1...
JavaScript JavaScript Tips | 配列ユーティリティ：共通要素抽出
何をしたいユーティリティか：「共通要素抽出」ここでの「共通要素抽出」は、複数の配列を比べて「両方（または全部）に含まれている要素だけ」を取り出す処理です。イメージとしては「集合の積（intersect...
JavaScript JavaScript Tips | 配列ユーティリティ：差分抽出
何をしたいユーティリティか：「配列の差分抽出」ここでの「差分抽出」は、「ある配列 A と配列 B を比べて、“どこが違うのか”を取り出す処理」です。業務だと、例えばこんな場面で使います。画面で「変更前...
JavaScript JavaScript Tips | 配列ユーティリティ：重複抽出
何をしたいユーティリティか：「配列の重複抽出」ここでの「重複抽出」は、配列の中で「1 回しか出てこないもの」ではなく、「2 回以上出てくるもの」を取り出す処理です。重複削除（ユニーク化）は「かぶりを消...
JavaScript JavaScript Tips | 配列ユーティリティ：重複削除
何をしたいユーティリティか：「配列の重複削除」ここでの「重複削除」は、同じ値が何度も入っている配列から、重複を取り除いて「一意な要素だけの配列」を作る処理です。業務だと、こんな場面でよく出てきます。ユ...
JavaScript JavaScript Tips | 文字列ユーティリティ：業務用 － 文字コード判定
何をしたいユーティリティか：「文字コード判定」ここでの「文字コード判定」は、外部から受け取った「バイト列」が、UTF-8 なのか Shift_JIS なのか EUC-JP なのか、といった「エンコーデ...
JavaScript JavaScript Tips | 文字列ユーティリティ：業務用 － BOM 除去
何をしたいユーティリティか：「BOM 除去」ここでの「BOM 除去」は、テキストの先頭にこっそり付いている「BOM（Byte Order Mark）」という特殊な目に見えない文字を取り除く処理です。C...
JavaScript JavaScript Tips | 文字列ユーティリティ：業務用 － 改行コード統一
何をしたいユーティリティか：「改行コード統一」ここでの「改行コード統一」は、バラバラな改行コード（\n, \r\n, \r）が混ざったテキストを、指定した形式にそろえる処理です。Windows 由来の...
JavaScript JavaScript Tips | 文字列ユーティリティ：業務用 － パス正規化
何をしたいユーティリティか：「パス正規化」ここでの「パス正規化」は、"//api//v1/../v2//users/./123/" のような「ぐちゃっとしたパス文字列」を、"/api/v2/users...
JavaScript JavaScript Tips | 文字列ユーティリティ：業務用 － パンくず生成
何をしたいユーティリティか：「パンくず生成」ここでの「パンくず生成」は、「今いるページまでの階層（ホーム > マスタ > ユーザー一覧 > ユーザー詳細）」を、決まったルールで文字列や配列として作る」...
JavaScript JavaScript | Web API：クリップボード・共有 － UX 改善パターン
クリップボード・共有の UX は「技術」より「気づかい」で差がつくコピー・ペースト・共有って、コード的にはどれも数行で書けます。でも、「使っていて気持ちいいかどうか」 はその数行の周りにある“気づかい...
JavaScript JavaScript | Web API：クリップボード・共有 － URL 共有
「URL 共有」は“このページを誰かに渡す”ための一番シンプルな機能URL 共有は、ざっくり言うと「今見ているページのリンクを、他の人や自分の別の端末に渡す」ための仕組みです。JavaScript で...
JavaScript JavaScript | Web API：クリップボード・共有 － ネイティブ共有
「ネイティブ共有」は“ブラウザの外の世界”に渡すための出口Web アプリの中だけなら、URL をコピーしたり、画面に何か表示したりすれば完結します。でも実際のユーザーは、このページを LINE で送り...
JavaScript JavaScript | Web API：クリップボード・共有 － Share API
Share API は「このページいい感じだから誰かに送ろう」をボタン一発にする仕組みスマホでブラウザを見ていると、「共有」ボタンからLINE やメール、Twitter などに URL を送れますよね...
JavaScript JavaScript | Web API：クリップボード・共有 － セキュリティ制限
クリップボードのセキュリティ制限は「ユーザーを守るための強いガード」クリップボードには、ユーザーがコピーしたあらゆる情報が入ります。パスワード、クレカ番号、住所、仕事の文章、社外秘のコード——全部です...
JavaScript JavaScript | Web API：クリップボード・共有 － 読み取り権限
クリップボードの「読み取り権限」は“ユーザーのプライバシーを守るための最重要ポイント”クリップボードには、ユーザーがコピーした パスワード・住所・クレカ番号・仕事の文章 など、とてもセンシティブな情報...
JavaScript JavaScript | Web API：クリップボード・共有 － 書き込み権限
「書き込み権限」は“クリップボードを勝手にいじらないためのブレーキ”Clipboard API の「書き込み権限」は、ざっくり言うと 「このサイトに、クリップボードへ書き込ませていいか？」 をブラウザ...
JavaScript JavaScript | Web API：クリップボード・共有 － ペースト処理
「ペースト処理」は“ユーザーのクリップボードの中身を、アプリに連れてくる”ことコピー処理が「アプリ → クリップボード」だとしたら、ペースト処理はその逆、「クリップボード → アプリ」 です。ユーザー...
JavaScript JavaScript | Web API：クリップボード・共有 － コピー処理
「コピー処理」は“ユーザーの手を 1 回減らす”ための仕組みコピー処理は、ユーザーが本来やるはずだったテキストをドラッグで選択Ctrl+C / 右クリック → コピーという手順を、ボタン 1 回で代わ...
JavaScript JavaScript | Web API：クリップボード・共有 － Clipboard API
Clipboard API は「コピー／ペーストをコードから扱うための正式な入口」普段、コピーやペースストはキーボードの Ctrl+C / Ctrl+V や右クリックメニューでやりますよね。Clipb...
JavaScript JavaScript | Web API：ファイル・データ操作 － 大容量ファイルの扱い
「大容量ファイルの扱い」は“全部一気にやらない”が合言葉まず前提からいきます。数 KB〜数 MB 程度のファイルなら、FileReader.readAsText や readAsArrayBuffer...
JavaScript JavaScript | Web API：ファイル・データ操作 － CSV / JSON ファイル処理
CSV / JSON ファイル処理は「テキストとして読み、オブジェクトとして扱い、またテキストに戻す」流れCSV も JSON も、本質はただのテキストファイルです。JavaScript から扱うとき...
JavaScript JavaScript | Web API：ファイル・データ操作 － バイナリデータ処理
「バイナリデータ処理」は“0と1の生データ”を意識して触ることふだん JavaScript で扱っているのは、文字列・数値・オブジェクトなど「人間に優しい形」のデータです。でも、画像・音声・PDF・Z...
JavaScript JavaScript | Web API：ファイル・データ操作 － input type=”file”
input type="file" は「ユーザーにファイルを選んでもらうための唯一の正規ルート」まず大前提として、ブラウザの JavaScript は、勝手にユーザーのパソコンの中を覗けません。「この...
JavaScript JavaScript | Web API：ファイル・データ操作 － ドラッグ＆ドロップ
ドラッグ＆ドロップは「マウスでつかんで、そのままブラウザに渡す入力方法」ドラッグ＆ドロップ（D&D）は、「ユーザーがファイルや要素をマウスでつかんで、別の場所に“落とす”操作をイベントとして扱う仕組み...
JavaScript JavaScript | Web API：ファイル・データ操作 － ダウンロード処理
「ダウンロード処理」は“ブラウザの中のデータ”を“ユーザーのファイル”に変えることJavaScript でいう「ダウンロード処理」は、ブラウザの中にあるデータ（文字列・JSON・画像・Blob など）...
JavaScript JavaScript | Web API：ファイル・データ操作 － URL.createObjectURL
URL.createObjectURL は「Blob や File に一時的な URL を貼る魔法」URL.createObjectURL は、Blob や File に「一時的にアクセスできる UR...
JavaScript JavaScript | Web API：ファイル・データ操作 － Blob
Blob は「生データ（バイナリやテキスト）をまとめて持つ“データのかたまり”」Blob は、「ファイルっぽい“データのかたまり”をメモリ上に表現するためのオブジェクト」 です。画像・テキスト・JSO...
JavaScript JavaScript | Web API：ファイル・データ操作 － FileReader
FileReader は「ファイルの中身を“いろんな形”で読み出すための専用リーダー」前回の File API で出てきた File は、「ユーザーが選んだファイルへのハンドル（取っ手）」でした。でも...
JavaScript JavaScript | Web API：ファイル・データ操作 － File API
File API は「ユーザーが選んだファイルをブラウザから触るための窓口」まず一番大事なことから。JavaScript は、勝手にユーザーのパソコンの中を覗いたり、好きなファイルを読みまくったりはで...
JavaScript JavaScript | Web API：DOM 拡張 API － shadow DOM の概要
shadow DOM は「外側から見えない、部品専用のプライベート DOM」まず一言でいうと、shadow DOM は「コンポーネントの中だけで完結する、外側から直接いじれない専用 DOM」 です。普...
JavaScript JavaScript | Web API：DOM 拡張 API － documentFragment
documentFragment は「画面にまだ挿していない一時作業用のミニ DOM」DocumentFragment（document.createDocumentFragment() で作るやつ）...
JavaScript JavaScript | Web API：DOM 拡張 API － NodeList 操作
NodeList は「querySelectorAll が返してくる“要素の集まり”」まず前提からいきます。document.querySelectorAll() を使うと、複数の要素が一度に取れます...
JavaScript JavaScript | Web API：DOM 拡張 API － dataset API
dataset は「HTML に自由にメモを書いておけるポケット」dataset は、HTML 要素に “自分で決めたデータ” を安全に持たせておくための仕組み です。HTML の data-◯◯ 属...
JavaScript JavaScript | Web API：DOM 拡張 API － classList API
classList は「要素に付いているクラス名を出し入れするための専用リモコン」HTML 要素には class 属性がありますよね。<div class="box active"></div>この ...
JavaScript JavaScript | Web API：DOM 拡張 API － Event コンストラクタ
Event コンストラクタは「既存イベントを自分の手で発火させるための素のイベント」Event コンストラクタは、「クリックや変更など、既に名前が決まっているイベントを、自分の手で“発生させたことにす...
JavaScript JavaScript | Web API：DOM 拡張 API － CustomEvent
CustomEvent は「自分で名前を付けられるオリジナルイベント」CustomEvent は、「クリックやスクロールみたいな“既存のイベント”ではなく、自分で名前を付けたイベントを作って、発火でき...
JavaScript JavaScript | Web API：DOM 拡張 API － ResizeObserver
ResizeObserver は「要素の大きさが変わった瞬間を教えてくれるセンサー」ResizeObserver は、「特定の要素の幅や高さが変わったときに、それを教えてくれる仕組み」 です。ウィンド...
JavaScript JavaScript | Web API：DOM 拡張 API － MutationObserver
MutationObserver は「DOM の変化を見張る監視カメラ」MutationObserver は、「DOM（要素の追加・削除・属性変更・テキスト変更など）が変わった瞬間を教えてくれる監視カ...
JavaScript JavaScript | Web API：DOM 拡張 API － IntersectionObserver
IntersectionObserver は「要素が画面に入ったかどうかを見張る番人」IntersectionObserver は、「ある要素が、画面（または指定した枠）の中に入ったか・出たか」を自動...
JavaScript JavaScript | 1 日 120 分 × 7 日アプリ学習：ミニ業務アプリ（総合）
1日目のゴールと作るアプリのイメージこの7日間は、「ちょっと業務っぽいミニアプリ」を題材にして、設計力・保守性・実務思考を鍛えていきます。1日目のテーマは、「いきなりコードを書かず、“設計の目”でアプ...
JavaScript JavaScript | Web API：ウィンドウ・ブラウザ制御 － ページリロード
「ページリロード」は「このURLをもう一度最初から開き直すこと」まずイメージからいきます。ブラウザの「再読み込みボタン」や F5 を押すと、今表示している URL にもう一度アクセスするHTML・CS...
JavaScript JavaScript | Web API：ウィンドウ・ブラウザ制御 － アラート（alert / confirm / prompt）
アラートは「ブラウザが出してくれる超シンプルなダイアログ」alert / confirm / prompt は、ブラウザが標準で用意してくれているダイアログ表示の仕組み です。画面の真ん中に、ブラウザ...
JavaScript JavaScript | Web API：ウィンドウ・ブラウザ制御 － タブ操作（open / close）
「タブ操作」は「新しい窓を開く権利」と「閉じていい範囲」を理解するところからJavaScript でのタブ操作は、window.open() と window.close() が中心です。ただし、ここ...
JavaScript JavaScript | Web API：ウィンドウ・ブラウザ制御 － リダイレクト
「リダイレクト」は「ユーザーを別のURLに連れて行くこと」まず言葉の整理からいきます。リダイレクト（redirect） は、ざっくり言うと「今このページを見ているユーザーを、別の URL に自動的に移...
JavaScript JavaScript | Web API：ウィンドウ・ブラウザ制御 － 画面サイズ取得
「画面サイズ取得」は「どの“枠”のサイズが欲しいか」を決めるところから始まるまず一番大事なことから。「画面サイズ」と一口に言っても、実は何種類かあります。ブラウザのウィンドウ全体のサイズウィンドウの中...
JavaScript JavaScript | Web API：ウィンドウ・ブラウザ制御 － userAgent
userAgent は「ブラウザが名乗る自己紹介テキスト」navigator.userAgent（ふつうは userAgent と呼ぶ）は、「このブラウザはこういう環境ですよ」とサーバーなどに伝えるた...
JavaScript JavaScript | Web API：ウィンドウ・ブラウザ制御 － navigator
navigator は「今使っているブラウザと環境のプロフィールカード」navigator は、「このページを開いているブラウザや環境の情報」をまとめたオブジェクト です。どんなブラウザか（Chrom...
JavaScript JavaScript | Web API：ウィンドウ・ブラウザ制御 － history API
history API は「ブラウザの戻る・進むをコードから操る仕組み」history は window.history のことで、ブラウザの「戻る」「進む」ボタンと同じようなことを、JavaScri...
JavaScript JavaScript | Web API：ウィンドウ・ブラウザ制御 － location
location は「今開いているページの住所カード」location は、「このタブで今開いているページの URL 情報をまとめたオブジェクト」 です。「今どの URL を見ているか知りたい」「別の...
JavaScript JavaScript | Web API：ウィンドウ・ブラウザ制御 － window オブジェクト
window オブジェクトは「ブラウザタブそのもの」を表す巨大な入り口JavaScript でいう window は、「今あなたが見ているブラウザのタブ（ウィンドウ）そのものを表すオブジェクト」 です...
JavaScript JavaScript | Web API：タイマー・スケジューリング － スケジューリング設計
「スケジューリング設計」は「いつ・どのくらい・どう止めるか」を決めることタイマーは「ちょっと遅らせて実行する便利関数」ではなく、「処理のタイミングを設計するための道具」 です。いつ実行するかどのくらい...
JavaScript JavaScript | Web API：タイマー・スケジューリング － UI 更新との関係
UI 更新とタイマーの関係は「JavaScript とブラウザの役割分担」を理解すると一気に分かりやすくなるタイマー（setTimeout / setInterval / requestAnimati...
JavaScript JavaScript | Web API：タイマー・スケジューリング － 無限ループ防止
「無限ループ防止」は「止まる出口を必ず用意する」という発想タイマーやループを書いているときに一番やっちゃいけないのが、「永遠に終わらない処理」＝無限ループ です。ブラウザが固まるCPU が 100% ...
JavaScript JavaScript | Web API：タイマー・スケジューリング － タイマー精度の問題
「タイマー精度の問題」は「指定した時間どおりには動かないことがある」という話まず一番大事なことを先に言います。setTimeout(…, 1000) と書いても、きっちり 1000ms 後に実行される...
JavaScript JavaScript | Web API：タイマー・スケジューリング － requestIdleCallback
requestIdleCallback は「ブラウザがヒマなときにやってもらう雑用係」requestIdleCallback は、「今すぐじゃなくて、ブラウザがヒマになったタイミングでやってほしい処理...
JavaScript JavaScript | Web API：タイマー・スケジューリング － requestAnimationFrame
requestAnimationFrame は「ブラウザに最適なタイミングでアニメを進めてもらう仕組み」requestAnimationFrame（略して rAF）は、「アニメーションを滑らかに動かす...
JavaScript JavaScript | Web API：タイマー・スケジューリング － clearInterval
clearInterval は「繰り返し処理を止めるためのスイッチ」clearInterval は、setInterval で始めた“繰り返し処理”を止めるための関数 です。setInterval は...
JavaScript JavaScript | Web API：タイマー・スケジューリング － clearTimeout
clearTimeout は「さっき予約した“◯秒後”をなかったことにする」関数clearTimeout は、setTimeout で予約した「あとで実行する処理」をキャンセルするための関数 です。「...
JavaScript JavaScript | Web API：タイマー・スケジューリング － setInterval
setInterval は「◯秒ごとにこれを繰り返して」と予約する関数setTimeout が「一回だけあとで実行」だとしたら、setInterval は 「一定間隔で同じ処理を何度も繰り返す」 ため...
JavaScript JavaScript | Web API：タイマー・スケジューリング － setTimeout
setTimeout は「◯秒後にこれやって」を予約する関数setTimeout は、「今すぐじゃなくて、少し時間が経ってから処理を実行したいとき」に使うタイマー関数 です。「3 秒後にメッセージを出...
JavaScript JavaScript | Web API：通信・ネットワーク系 － WebSocket の概要
WebSocket は「つなぎっぱなしでしゃべり続けられる通信」まずイメージからいきます。ふつうの HTTP（fetch など）は「用があるときだけノックして、用が済んだらすぐ帰る」通信です。リクエス...
JavaScript JavaScript | Web API：通信・ネットワーク系 － オフライン対応の基本
まず「オフライン対応って何を指しているのか」をはっきりさせるオフライン対応と聞くと、「ネットが切れても全部普通に動く魔法」みたいに思いがちですが、現実はもう少し地に足がついた話です。本質は、「ネットワ...
JavaScript JavaScript | Web API：通信・ネットワーク系 － Service Worker の概要
Service Worker は「ブラウザの中に住む、裏方の小さなサーバー」まずイメージからいきます。Service Worker は、「ブラウザの中で動く、あなたのサイト専用の“裏方サーバー”」 で...
JavaScript JavaScript | Web API：通信・ネットワーク系 － キャッシュ制御
「キャッシュ制御」は“いつまで古いデータを使っていいか”を決めるルールまずざっくりイメージからいきます。キャッシュは、「一度取ってきたデータを、次回以降は早く返すために手元に置いておく仕組み」 です。...
JavaScript JavaScript | Web API：通信・ネットワーク系 － 認証ヘッダ
認証ヘッダは「あなたが誰なのか」をサーバーに伝えるための“身分証”まずイメージからいきます。認証ヘッダ（Authentication Header）は、「このリクエストは誰として送っているのか」 をサ...
JavaScript JavaScript | Web API：通信・ネットワーク系 － Cookie の扱い
Cookie は「ブラウザが自動で持ち運んでくれる小さなメモ」まずイメージからいきます。Cookie は、「ブラウザがサーバーとの間で自動的に持ち運んでくれる小さなメモ」 です。サーバーが「このユーザ...
JavaScript JavaScript | Web API：通信・ネットワーク系 － CORS の基本
まず「なぜ CORS なんてものがあるのか」からCORS を理解する一番の近道は、「ブラウザは、もともと“よそのサイトに勝手にリクエストさせない”ように作られている」という前提をちゃんと掴むことです。...
JavaScript JavaScript | Web API：通信・ネットワーク系 － Headers
ヘッダーは「一緒にくっついて飛んでいくメモ書き」まずイメージからいきます。HTTP の世界では、リクエストやレスポンスは「封筒付きの手紙」みたいなものです。本文（ボディ）実際の中身。JSON や HT...
JavaScript JavaScript | Web API：通信・ネットワーク系 － Request / Response オブジェクト
「Request / Response」は fetch がやり取りする“手紙の入れ物”まず大きなイメージからいきます。fetch は「サーバーと会話する窓口」でしたよね。その会話の中で実際に行き来して...
JavaScript JavaScript | Web API：通信・ネットワーク系 － fetch API
fetch は「ブラウザからサーバーにお願いしに行く関数」まずイメージからいきます。fetch は、「ブラウザからサーバーに“ちょっとデータください”とか“これ送ります”とお願いしに行くための関数」 ...
JavaScript JavaScript | Web API：ストレージ系 API － IndexedDB の概要
IndexedDB は「ブラウザ内のちゃんとしたデータベース」localStorage / sessionStorage は「小さなメモ帳」でした。IndexedDB は一段レベルが違います。イメージ...
JavaScript JavaScript | Web API：ストレージ系 API － セキュリティの注意点
「ストレージは安全な金庫」ではない、という前提から始めようlocalStorage / sessionStorage は便利ですが、「ここに入れておけば安全」な場所ではありません。ブラウザの中にあると...
JavaScript JavaScript | Web API：ストレージ系 API － ストレージイベント
ストレージイベントは「別タブでの変更を教えてくれる仕組み」まず一言でいうと、ストレージイベント（storage イベント）は「他のタブで localStorage が書き換えられたことを教えてくれる通...
JavaScript JavaScript | Web API：ストレージ系 API － 同期 API の特性
「同期 API」ってそもそも何者かまず言葉の整理からいきます。同期 API（synchronous API）というのは、呼び出した瞬間に処理が終わるまで、そのスレッドを止めてしまうタイプの API の...
JavaScript JavaScript | Web API：ストレージ系 API － 容量制限
ストレージの「容量制限」をちゃんと意識すると設計が変わるlocalStorage / sessionStorage は便利ですが、「無限に保存できる魔法の箱」ではありません。どちらもブラウザごとに 容...
JavaScript JavaScript | Web API：ストレージ系 API － JSON との組み合わせ
なぜ「ストレージ × JSON」がほぼセットなのかlocalStorage / sessionStorage は、とてもシンプルなストレージです。でも制約が一つあります——「保存できるのは文字列だけ」...
JavaScript JavaScript | Web API：ストレージ系 API － removeItem / clear
removeItem / clear は「部分的に消す」と「全部消す」の違いストレージ系 API（localStorage / sessionStorage）には、データを「書く」「読む」だけでなく、...
JavaScript JavaScript | Web API：ストレージ系 API － setItem / getItem
setItem / getItem は「ブラウザのメモ帳に書く・読む」操作まずざっくりイメージからいきます。setItem と getItem は、ブラウザの中にある小さなメモ帳に「書く」「読む」ため...
JavaScript JavaScript | Web API：ストレージ系 API － SessionStorage の基本
SessionStorage は「タブごとの一時メモ帳」まずイメージからいきます。SessionStorage は 「ブラウザのタブごとに用意される、一時的なメモ帳」 です。LocalStorage ...
JavaScript JavaScript | Web API：ストレージ系 API － LocalStorage の基本
LocalStorage は「ブラウザにメモ帳を置く」イメージまずざっくりイメージから。LocalStorage は、「ブラウザの中にある、キーと値を保存できる小さなメモ帳」 です。ページを閉じても、...
JavaScript JavaScript | 非同期処理：設計・理解の深化 － プロとしての非同期設計
「プロとしての非同期設計」って何が違うのか非同期処理を「書ける」ようになるのは、正直そんなに難しくありません。async/await を覚えて、fetch を呼んで、try/catch を付ければ、と...
JavaScript JavaScript | 非同期処理：設計・理解の深化 － 非同期バグの再現
なぜ「非同期バグの再現」がこんなに難しいのか非同期バグって、ほんとイヤらしいですよね。さっきまで出ていたのに、もう一回やると出ない。本番では起きるのに、ローカルでは起きない。理由はシンプルで、非同期バ...
JavaScript JavaScript | 非同期処理：設計・理解の深化 － 例外仕様の文書化
なぜ「例外仕様の文書化」がそんなに大事なのか非同期処理は「うまくいくとき」だけ見ていると、わりと簡単そうに見えます。await fetch(...) して、res.json() して、画面に出す——こ...
JavaScript JavaScript | 非同期処理：設計・理解の深化 － モック化戦略
「モック化戦略」ってそもそも何の話？非同期処理をテストしようとすると、必ずぶつかる壁があります。それが「外部とのやり取り」です。サーバーへのリクエストデータベースタイマー（setTimeout）ブラウ...
JavaScript JavaScript | 非同期処理：設計・理解の深化 － テストしやすい非同期
なぜ「テストしやすい非同期」が大事なのか非同期処理って、バグが出ても再現しづらいし、「たまたま動いた」状態になりがちです。だからこそ、「テストしやすい形で非同期コードを書く」という発想がめちゃくちゃ重...
JavaScript JavaScript | 非同期処理：設計・理解の深化 － 同期 API との境界
なぜ「同期 API との境界」を意識しないといけないのか非同期処理を学び始めると、「どこまでを同期で書いて、どこからを非同期にするのか」がだんだん分からなくなってきます。全部 async にしてしまう...
JavaScript JavaScript | 非同期処理：設計・理解の深化 － 非同期 API 設計
「非同期 API 設計」って何を考えること？まず前提から整理します。ここでいう「非同期 API」は、サーバーの REST API というより、「あなたが JavaScript で提供する非同期関数の“...
JavaScript JavaScript | 非同期処理：設計・理解の深化 － 非同期関数の命名
なぜ「非同期関数の命名」がそんなに大事なのか非同期処理って、それだけで頭を使います。そこに「名前がふわっとしている関数」が混ざると、一気に読めなくなります。doSomething(), handle(...
JavaScript JavaScript | 非同期処理：設計・理解の深化 － 責務分離
「責務分離」を非同期コードで考える意味非同期処理って、それだけで頭を使いますよね。そこに「UI」「エラー処理」「キャッシュ」「ローディング表示」などを全部一緒に書き始めると、一瞬でカオスになります。だ...
JavaScript JavaScript | 非同期処理：パフォーマンス最適化 － 非同期設計レビュー
「非同期設計レビュー」って何をする時間か非同期処理のコードは、とりあえず動かすだけなら意外と簡単です。async/await を付けて、fetch を呼んで、console.log して終わり。でも「...
JavaScript JavaScript | 非同期処理：パフォーマンス最適化 － UI ブロック回避
なぜ「UI ブロック回避」がそんなに大事なのかJavaScript は基本「1本のメインスレッド」で動いています。この1本の線の上で、描画・クリック処理・スクロール・あなたの書いた処理が、全部順番待ち...
JavaScript JavaScript | 非同期処理：パフォーマンス最適化 － 長時間処理の分割
なぜ「長時間処理の分割」が必要になるのかJavaScript は基本的に「シングルスレッド」で動きます。つまり、1本の道に、処理が一列に並んで流れているイメージです。その道の上で、重い処理（ループ・計...
JavaScript JavaScript | 非同期処理：パフォーマンス最適化 － 非同期処理の計測
なぜ「非同期処理の計測」が大事なのかパフォーマンス最適化って、つい「こうした方が速そう」と感覚でやりがちです。でも、本当にやるべきことはシンプルで、たった一つです。「遅いところをちゃんと測って、事実ベ...
JavaScript JavaScript | 非同期処理：パフォーマンス最適化 － レイテンシ考慮
レイテンシってそもそも何？まず言葉からいきます。レイテンシ（latency）は「お願いしてから、最初の反応が返ってくるまでの時間」 です。ユーザーから見ると、ボタンを押してから画面が変わるまで検索ワー...
JavaScript JavaScript | 非同期処理：パフォーマンス最適化 － ネットワーク最適化
ネットワーク最適化って何をすること？非同期処理のパフォーマンス最適化の中で、ネットワーク最適化は「サーバーとの通信をできるだけ速く・少なく・無駄なくする」ことです。JavaScript の世界だと、だ...
JavaScript JavaScript | 非同期処理：パフォーマンス最適化 － バッチ処理
「バッチ処理」は“まとめてやるから速くて優しい”という発想バッチ処理は、「細かい処理を1個ずつやるのではなく、ある程度まとめて一気に処理する」という考え方です。非同期処理のパフォーマンス最適化では、・...
JavaScript JavaScript | 非同期処理：パフォーマンス最適化 － Promise キャッシュ
Promise キャッシュって何者？Promise キャッシュは、「同じ非同期処理を何度も実行せず、“進行中 or 結果”を使い回すテクニック」 です。特に、「同じ API を短時間に何回も叩いてしま...
JavaScript JavaScript | 非同期処理：パフォーマンス最適化 － 不要 await の削除
「不要な await」を消すと何が嬉しいのかawait は便利ですが、「なくてもいい場所に書いてしまうと、わざわざ処理を遅くしている」ことがあります。パフォーマンス最適化でよく効くのが、この「不要な ...
JavaScript JavaScript | 非同期処理：パフォーマンス最適化 － 並列化の判断
「並列化の判断」は“どこを同時に走らせていいか”を見極めること非同期処理のパフォーマンス最適化で一番効くのが、「待ち時間の長い処理を、できるだけ同時に走らせる」ことです。でも、何でもかんでも並列にすれ...
JavaScript JavaScript | 1 日 120 分 × 7 日アプリ学習：クラス設計アプリ（オブジェクト指向）
1日目のゴールと作るもののイメージ1日目のテーマは「class を使って、“それっぽいオブジェクト”を自分で設計できるようになること」です。キーワードはこの3つです。classカプセル化（中身を隠す・...
JavaScript JavaScript | 2週間で身につく、アプリを作りながら学ぶJavaScriptの基本 － 14日目
14日目のゴールとテーマ14日目のテーマは「この2週間で身につけた“武器”を言語化して、自分のものにする」です。今日は新しい大きなアプリは作りません。代わりに、自分がもうできるようになっていることを整...
JavaScript JavaScript | 2週間で身につく、アプリを作りながら学ぶJavaScriptの基本 － 13日目
13日目のゴールとテーマ13日目のテーマは「自分で“ゼロから”ミニアプリを設計して作る」です。ここまで、名簿アプリ・タスクアプリ・名言アプリと、僕が用意した“お題”に沿って作ってきました。今日は一歩進...
JavaScript JavaScript | 2週間で身につく、アプリを作りながら学ぶJavaScriptの基本 － 12日目
12日目のゴールとテーマ12日目のテーマは「外部データを“取ってきて使う”体験をする」です。ここまでで、ブラウザの中だけで完結するアプリ（名簿・タスク）を作ってきました。今日は一歩外に出て、外部サービ...
JavaScript JavaScript | 2週間で身につく、アプリを作りながら学ぶJavaScriptの基本 － 11日目
11日目のゴールとテーマ11日目のテーマは「コードを“人が読める文章”にする」です。ここまでで、あなたはもう「動くアプリ」を作れるようになっています。今日からは一歩進んで、コードをファイルごとに分ける...
JavaScript JavaScript | 2週間で身につく、アプリを作りながら学ぶJavaScriptの基本 － 10日目
10日目のゴールとテーマ10日目のテーマは「同じことを何度も書かないための“関数化”と、コードの整理（リファクタリング）」です。ここまでで、名簿アプリ・タスクアプリを通して、かなり“動くコード”を書い...
JavaScript JavaScript | 2週間で身につく、アプリを作りながら学ぶJavaScriptの基本 － 9日目
9日目のゴールとテーマ9日目のテーマは「タスク管理アプリを“実用レベル”に近づける」です。8日目で「追加・完了切替・削除」ができる ToDo アプリができました。今日はそこに、未完了だけ表示する完了タ...
JavaScript JavaScript | 2週間で身につく、アプリを作りながら学ぶJavaScriptの基本 － 8日目
8日目のゴールとテーマ8日目のテーマは「タスク管理アプリ（ToDoリスト）の“ちゃんと動く形”を作る」です。これまでの名簿アプリで学んだことを、別テーマのアプリに“移植”していきます。タスクを追加する...
JavaScript JavaScript Tips | 文字列ユーティリティ：業務用 － HTML タイトル生成
何をしたいユーティリティか：「HTML タイトル生成」ここでの「HTML タイトル生成」は、<title>〜</title> に入れる文字列を、毎回バラバラに組み立てるのではなく、共通ルールで生成する...
JavaScript JavaScript Tips | 文字列ユーティリティ：業務用 － スラッグ生成
何をしたいユーティリティか：「スラッグ生成」ここでの「スラッグ生成」は、人間が読めて、URL や識別子としても扱いやすい「きれいな文字列」を作ることです。ブログ記事の URL、商品ページのパス、カテゴ...
JavaScript JavaScript Tips | 文字列ユーティリティ：業務用 － 識別子生成
何をしたいユーティリティか：「識別子生成」ここでの「識別子生成」は、「一意な ID（識別子）を文字列として作る」処理を、毎回バラバラに書かず、共通ユーティリティにまとめることです。注文番号、セッション...
JavaScript JavaScript Tips | 文字列ユーティリティ：業務用 － 日付文字列生成
何をしたいユーティリティか：「日付文字列生成」ここで目指すのは、「Date を、業務でよく使うフォーマットの文字列に変換する処理」を関数にまとめることです。画面表示、CSV 出力、ログ、固定長ファイル...
JavaScript JavaScript Tips | 文字列ユーティリティ：業務用 － ログ用文字列生成
何をしたいユーティリティか：「ログ用文字列生成」ここで作りたいのは、「人間が読んで状況をすぐ理解できるログ文字列」を、毎回バラバラに書かず、共通のフォーマットで生成するユーティリティです。業務システム...
JavaScript JavaScript Tips | 文字列ユーティリティ：業務用 － SQL エスケープ
何をしたいユーティリティか：「SQL エスケープ」ここでの「SQL エスケープ」は、文字列を SQL の文字列リテラルとして安全な形に整える処理です。ただし、最初にめちゃくちゃ大事なことを言います。本...
JavaScript JavaScript Tips | 文字列ユーティリティ：業務用 － TSV 生成
何をしたいユーティリティか：「TSV 生成」ここで目指すのは、業務データ（配列や配列の配列）から「TSV 文字列」を安全に生成するユーティリティです。TSV（Tab Separated Values）...
JavaScript JavaScript Tips | 文字列ユーティリティ：業務用 － CSV エスケープ
何をしたいユーティリティか：「CSV エスケープ」ここで作りたいのは、「任意の値を“CSV の 1 セルとして安全な文字列”に変換する関数」です。CSV はただのカンマ区切りではなく、「カンマ」「改行...
JavaScript JavaScript Tips | 文字列ユーティリティ：業務用 － 固定長整形
何をしたいユーティリティか：「固定長整形」ここでの「固定長整形」は、文字列を「ちょうど N 文字」にそろえる」ユーティリティです。足りなければ埋める、長ければ切る——これを毎回バラバラに書くのではなく...
JavaScript JavaScript Tips | 文字列ユーティリティ：業務用 － 数値ゼロ埋め
何をしたいユーティリティか：「数値ゼロ埋め」ここでの「数値ゼロ埋め」は、「桁数をそろえるために、足りない分を左側に 0 を付ける」ユーティリティです。1 → "01"（2 桁）12 → "012"（3...
JavaScript JavaScript | 2週間で身につく、アプリを作りながら学ぶJavaScriptの基本 － 7日目
7日目のゴールとテーマ7日目のテーマは「名簿アプリに“検索・絞り込み・並び替え”を足して、便利アプリに育てる」です。6日目で「登録して一覧表示する」まではできました。今日はそこに、名前で検索する年齢で...
JavaScript JavaScript | 2週間で身につく、アプリを作りながら学ぶJavaScriptの基本 － 6日目
6日目のゴールとテーマ6日目のテーマは「ブラウザ上で動く“名簿アプリ”の最初の形を作る」です。4日目で学んだ「オブジェクト＋配列」、5日目で学んだ「HTMLとJavaScriptの連携」を組み合わせて...
JavaScript JavaScript | 2週間で身につく、アプリを作りながら学ぶJavaScriptの基本 － 5日目
5日目のゴールとテーマ5日目のテーマは「ブラウザの画面（HTML）とJavaScriptをつなげる」です。昨日まではコンソールの中だけで完結していましたが、今日はついに「画面に出す」側に踏み込みます。...
JavaScript JavaScript | 2週間で身につく、アプリを作りながら学ぶJavaScriptの基本 － 4日目
4日目のゴールとテーマ4日目のテーマは「オブジェクトで“1人分の情報”をまとめる」です。昨日までで、配列とループを使って「複数の数字」を扱えるようになりました。今日はそこから一歩進めて、1人分（1件分...
JavaScript JavaScript | 2週間で身につく、アプリを作りながら学ぶJavaScriptの基本 － 3日目
2日目のゴールとテーマ2日目のテーマは「条件分岐で“判断できるコード”にする」です。今日は、コンピュータに「状況を見て、自分で選ばせる」感覚を身につけます。もし〜なら、こうするそうでなければ、別のこと...
JavaScript JavaScript | 2週間で身につく、アプリを作りながら学ぶJavaScriptの基本 － 2日目
2日目のゴールとテーマ2日目のテーマは「条件分岐で“状況に応じて動きを変える”」です。昨日は「入力して、計算して、表示する」まで行きましたが、今日はそこに「もし〜なら、こうする」という“分かれ道”を加...
JavaScript JavaScript | 2週間で身につく、アプリを作りながら学ぶJavaScriptの基本 － 1日目
1日目のゴールとテーマ1日目のテーマは「JavaScriptで“コンピュータに命令する”感覚をつかむ」です。いきなり難しいことはやりません。今日は、JavaScriptってそもそも何者なのか最小限の環...
JavaScript JavaScript | 1 日 120 分 × 7 日アプリ学習：SPA風タブ切り替えアプリ
1日目のゴールと今日やること1日目のテーマは「URL のハッシュ（#）を使って、SPA っぽいタブ切り替えを実現する」ことです。“SPA 風”というのは、ページ全体をリロードせずに、タブを切り替えるだ...
JavaScript JavaScript Tips | 文字列ユーティリティ：業務用 － 桁数制限
何をしたいユーティリティか：「桁数制限」ここでの「桁数制限」は、数値や数値文字列の「桁数」をルール通りに制限するユーティリティです。例えば、こんな要件がよくあります。金額は「整数 9 桁まで、小数 2...
JavaScript JavaScript Tips | 文字列ユーティリティ：業務用 － 小数丸め
何を作るのか：「小数丸め」ユーティリティここで作りたいのは、「小数点以下を指定桁数で丸める」処理を、毎回バラバラに書かず、分かりやすい関数にまとめたものです。「四捨五入」「切り上げ」「切り捨て」を、業...
JavaScript JavaScript Tips | 文字列ユーティリティ：業務用 － 通貨変換表示
何をしたいユーティリティか：「通貨変換表示」ここで目指すのは、単に「金額にカンマを付ける」だけではなく、「通貨単位や通貨コードを付けて、人間が見て意味が分かる形で表示する」ユーティリティです。たとえば...
JavaScript JavaScript Tips | 文字列ユーティリティ：業務用 － カンマ付与
何をしたいユーティリティか：「カンマ付与」ここで作りたいのは、数値や数値っぽい文字列に「3 桁ごとのカンマ」を付けるユーティリティです。1000 → 1,0001234567 → 1,234,567-...
JavaScript JavaScript Tips | 文字列ユーティリティ：業務用 － 金額フォーマット
何を作るのか：「業務で使える金額フォーマット」ここで目指すのは、「数値を“人間が業務で読みやすい金額表示”に変換するユーティリティ」です。例えば、こんな変換を安定して行いたいイメージです。format...
JavaScript JavaScript Tips | 文字列ユーティリティ：URL 系 － ファイル名取得
何をしたいユーティリティか：「ファイル名取得」ここで作りたいのは、URL やパス文字列から「ファイル名だけ」を取り出す小さな関数です。例えば、こういうイメージです。 → "logo.png"/down...
JavaScript JavaScript Tips | 文字列ユーティリティ：URL 系 － 拡張子取得
何をしたいユーティリティか：「拡張子取得」ここで作りたいのは、URL やパス文字列から「拡張子（.png や .js など）」だけを取り出す小さな関数です。 → "png"/scripts/app.m...
JavaScript JavaScript Tips | 文字列ユーティリティ：URL 系 － パス結合
「パス結合」で何を楽にしたいのか「パス結合」は、URL のパスを安全にくっつけるユーティリティです。"/api" と "users" を結合して "/api/users" にしたい"/api/" と ...
JavaScript JavaScript Tips | 文字列ユーティリティ：URL 系 － ハッシュ削除
「ハッシュ削除」で本当にやりたいことここでの「ハッシュ削除」は、URL の # 以降（フラグメント）をきれいに取り除いた新しい URL を作るユーティリティのことです。例えば、こんなことをしたい場面が...
JavaScript JavaScript Tips | 文字列ユーティリティ：URL 系 － ハッシュ取得
「ハッシュ取得」で何を取りたいのかここでの「ハッシュ取得」は、URL の # 以降の部分（フラグメント）を、きれいに取り出して使いやすくするユーティリティのことです。例えば、こんな URL を考えます...
C# 日本の企業・官公庁が公開している無料API
日本では政府・自治体・企業が公開している無料APIが多数あります。実務や個人開発でよく使われるものを、カテゴリ別に整理して紹介します。官公庁・政府系API統計・経済データ1. 総務省統計局 – e-S...
JavaScript JavaScript Tips | 文字列ユーティリティ：URL 系 － クエリ削除
「クエリ削除」で本当にやりたいこと「クエリ削除」は、URL の ? 以降に付いているパラメータのうち、いらないものだけを取り除いて、新しい URL を作り直す処理です。例えば、こんなことをやりたい場面...
JavaScript JavaScript Tips | 文字列ユーティリティ：URL 系 － クエリ取得
「クエリ取得」で何をしたいのかをはっきりさせるここでの「クエリ取得」は、URL の ? 以降（クエリ文字列）から、パラメータを取り出して使いやすい形にすることです。/search?q=JavaScri...
JavaScript JavaScript Tips | 文字列ユーティリティ：URL 系 － クエリ生成
まず「クエリ生成」で何を自動化したいのかここで言う「クエリ生成」は、オブジェクト（連想配列）から ?key=value&key2=value2 みたいなクエリ文字列を、安全に・楽に作るユーティリティの...
JavaScript JavaScript Tips | 文字列ユーティリティ：URL 系 － URL エンコード
まず「URL エンコード」で何を守りたいのかURL エンコードは、「URL の中に入れてはいけない（入れると誤解される）文字を、安全な形に変換すること」です。日本語やスペース、? や & などの記号を...
JavaScript JavaScript | 非同期処理：実務での非同期制御 － 排他制御の考え方
排他制御を一言でいうと排他制御（はいたせいぎょ）は、「同時に走ると困る処理を、“必ず1つずつしか動かさないようにする考え方” です。非同期処理が増えてくると、「同じデータを同時に書き換える」「同じ処理...
JavaScript JavaScript | 非同期処理：実務での非同期制御 － 競合状態（Race Condition）
競合状態（Race Condition）を一言でいうと競合状態（Race Condition）は、「どっちの非同期処理が先に終わるかによって、結果が変わってしまう危険な状態」 です。コード上は「こう動...
JavaScript JavaScript | 非同期処理：実務での非同期制御 － 非同期状態管理
「非同期状態管理」を一言でいうと非同期状態管理は、「今この非同期処理が、どの状態にいるのかをコードと UI で一貫して扱うこと」 です。例えば、API 呼び出しひとつ取っても、状態はざっくりこう変わり...
JavaScript JavaScript | 非同期処理：実務での非同期制御 － WebSocket との比較
WebSocket とポーリングの違いを一言でまとめるとポーリングは 「クライアントが定期的にサーバーへ様子を見に行く」 方式。WebSocket は 「サーバーとクライアントが常時つながり、サーバー...
JavaScript JavaScript | 非同期処理：実務での非同期制御 － ポーリング
ポーリングを一言でいうとポーリング（polling）は、「サーバー側の状態が変わったかどうかを、クライアント側から定期的に“様子見”しに行く仕組み」です。サーバーから「変わったよ！」と通知してくれるの...
JavaScript JavaScript | 非同期処理：実務での非同期制御 － スロットリング
スロットリングを一言でいうとスロットリング（throttle）は、「どれだけ連続でイベントが発生しても、“一定間隔ごとにしか処理を実行させない”テクニック です。スクロール、マウス移動、リサイズなどは...
JavaScript JavaScript | 非同期処理：実務での非同期制御 － デバウンス
デバウンスを一言でいうとデバウンスは、「連続して何度も呼ばれる処理を、“最後の1回だけ”にまとめるテクニック」 です。ユーザーがキーボードを連打したり、入力ボックスに高速で文字を打ち込んだりすると、イ...
JavaScript JavaScript | 非同期処理：実務での非同期制御 － キャンセル処理（AbortController）
キャンセル処理（AbortController）を一言でいうとAbortController は、「一度投げた非同期処理（特に fetch）を、あとから“やっぱりやめる”と止めるための仕組み」 です。...
JavaScript JavaScript | 非同期処理：実務での非同期制御 － 多重送信防止
多重送信防止を一言でいうと多重送信防止は、「ユーザーが同じ操作を連打しても、サーバーには“1 回分だけ”しか飛ばさないようにする仕組み」 です。非同期処理（特にフォーム送信やボタン押下）では、ユーザー...
JavaScript JavaScript | 非同期処理：実務での非同期制御 － ローディング表示
ローディング表示を一言でいうとローディング表示は、「今、アプリはちゃんと動いているよ。止まっているんじゃなくて“待っているだけ”だよ」とユーザーに伝えるためのサインです。非同期処理（fetch / A...
JavaScript JavaScript | 1 日 120 分 × 7 日アプリ学習：モーダルウィンドウ管理
1日目のゴールと今日やること1日目のテーマは「モーダルウィンドウを“クラス”として設計し、きれいに開閉を制御できるようになる」ことです。今日のゴールは、ざっくり言うとこの3つです。モーダルを「1つのク...
JavaScript JavaScript Tips | 文字列ユーティリティ：生成 － CSV 行生成
「CSV 行生成」でやりたいことをはっきりさせるここでのゴールは、「配列やオブジェクトの値から、正しい形式の1行分の CSV 文字列を生成するユーティリティ」を作ることです。見た目はただのカンマ区切り...
JavaScript JavaScript Tips | 文字列ユーティリティ：生成 － 単語数カウント
「単語数カウント」で何を数えたいのかを決めるまず、ここをはっきりさせたいです。「単語数を数える」と言っても、言語や用途で意味が変わります。英語の文章なら、スペースで区切られた「単語」を数えたい。日本語...
JavaScript JavaScript Tips | 文字列ユーティリティ：生成 － 文字数カウント
「文字数カウント」で本当に数えたいものは何かまず、ここをはっきりさせたいです。「文字数を数える」と言っても、実は意味が分かれます。画面上で「何文字入力されたか」を知りたい。DBのカラム制限（バイト数）...
JavaScript JavaScript Tips | 文字列ユーティリティ：生成 － 行数カウント
「行数カウント」で何をしたいのかをはっきりさせるここでの「行数カウント」は、文字列の中に「何行分のテキストがあるか」を数えるユーティリティのことです。テキストエリアに何行入力されているか知りたい。ログ...
JavaScript JavaScript Tips | 文字列ユーティリティ：生成 － 省略文字列
「省略文字列」で何をしたいのかをはっきりさせるここでの「省略文字列」は、長すぎる文字列を「…」などで途中カットして、画面に収まる形にするユーティリティのことです。テーブルのカラム幅に収まらないタイトル...
JavaScript JavaScript Tips | 文字列ユーティリティ：生成 － 伏字変換
「伏字変換」でやりたいことを言葉にしてみるここでの「伏字変換」は、特定の単語やNGワードを、画面に出すときだけ隠す（置き換える）処理のことです。ログにはそのまま残したいけど、ユーザーには見せたくない。...
JavaScript JavaScript Tips | 文字列ユーティリティ：生成 － マスク文字列
「マスク文字列」で何をしたいのかをはっきりさせるまず、「マスク文字列」でやりたいことを言葉にしてみます。画面に本物の値は出したくないけれど、「それっぽく」見せたい。例：******** や ****-...
JavaScript JavaScript Tips | 文字列ユーティリティ：生成 － トークン生成
まず「トークン生成」で何を作りたいのかを決めるトークンと言っても、用途はいろいろあります。API トークンパスワードリセット用の一時 URL トークンメール認証用のワンタイムトークンCSRF トークン...
JavaScript JavaScript Tips | 文字列ユーティリティ：生成 － パスワード生成
まず「パスワード生成」で絶対に外せない前提ランダム文字列と違って、パスワード生成は最初から「セキュリティ前提」で考える必要があります。ここを曖昧にすると、一見それっぽく動くけど「簡単に総当たりされるパ...
JavaScript JavaScript Tips | 文字列ユーティリティ：生成 － ランダム文字列
ランダム文字列ユーティリティで何をしたいか決める「ランダム文字列」と一口に言っても、目的で“正解の実装”が変わります。短い一時トークン（画面遷移の一時キー）テストデータ用の適当なIDユーザーに見せる仮...
JavaScript JavaScript Tips | 文字列ユーティリティ：検証 － 絵文字検出
絵文字検出で「何をしたいか」を先に決めるまずゴールをはっきりさせましょう。ここでやりたいのは、文字列の中に「絵文字が含まれているかどうか」を判定するユーティリティを作ることです。業務だと、例えばこうい...
JavaScript JavaScript Tips | 文字列ユーティリティ：検証 － カタカナ判定
「カタカナ判定」で何をチェックしたいのかまずゴールをはっきりさせます。カタカナ判定には、大きく二つのニーズがあります。「この文字列は“全部カタカナだけ”かを判定したい」「この文字列に“カタカナが1文字...
JavaScript JavaScript Tips | 文字列ユーティリティ：検証 － ひらがな判定
「ひらがな判定」で何をチェックしたいのかまずゴールをはっきりさせます。ひらがな判定には、大きく二つのニーズがあります。「この文字列は“全部ひらがなだけ”かを判定したい」「この文字列に“ひらがなが1文字...
JavaScript JavaScript Tips | 文字列ユーティリティ：検証 － 日本語判定
「日本語判定」で本当に知りたいことは何かまずゴールをはっきりさせましょう。ここでやりたいのは、「この文字列は“日本語を含んでいるか？”を判定するユーティリティを作ること」です。もう少し分解すると、よく...
JavaScript JavaScript Tips | 文字列ユーティリティ：検証 － 数字のみ判定
「数字のみ判定」で本当に知りたいことは何かまずゴールをはっきりさせます。ここでやりたいのは、「この文字列は“数字だけ”でできているか？」を判定するユーティリティを作ることです。例えば、こんな要件が典型...
JavaScript JavaScript Tips | 文字列ユーティリティ：検証 － 英数字判定
「英数字判定」で何をチェックしたいのかをはっきりさせるまず最初に決めておきたいのは、あなたがやりたいのは次のどちらかです。「文字列が“全部”英数字だけかどうかを判定したい」「文字列の中に“英数字が含ま...
JavaScript JavaScript Tips | 文字列ユーティリティ：検証 － URL 判定
「URL 判定」で本当にやりたいことは何かまず、「URL 判定」と聞くと、「正規表現で http から始まるかどうかをチェックする」みたいなイメージを持ちがちですが、それだとだいたい痛い目を見ます。業...
JavaScript JavaScript Tips | 文字列ユーティリティ：検証 － 郵便番号判定
郵便番号判定で「何をしたいか」を先に決めるまずゴールをはっきりさせましょう。ここでやりたいのは、「日本の郵便番号として“それっぽいか”を判定するユーティリティを作ること」です。日本の郵便番号は、基本的...
JavaScript JavaScript Tips | 文字列ユーティリティ：検証 － 電話番号判定
まず「電話番号判定」でやりたいことをはっきりさせる最初に決めておきたいのは、「どこまで厳しく判定するか」です。電話番号って、現実にはいろんな形で入力されます。03-1234-5678090-1234-...
JavaScript JavaScript Tips | 文字列ユーティリティ：検証 － メールアドレス判定
「メールアドレス判定」はどこまでやるべきか最初に一番大事なことを言います。メールアドレス判定は「完璧」を目指さないほうがいいです。RFC に完全準拠しようとすると、正規表現が怪物みたいになりますし、現...
JavaScript JavaScript | 非同期処理：エラー処理・例外設計 － 障害時の復旧設計
「障害時の復旧設計」を一言でいうと障害時の復旧設計は、「エラーが起きた“あと”に、アプリをどう立て直すかをあらかじめ決めておくこと」 です。エラー処理というと、つい「catch してログ出して終わり」...
JavaScript JavaScript | 非同期処理：エラー処理・例外設計 – エラー再送出
「エラー再送出」を一言でいうとエラー再送出（rethrow）は、「一度 catch で受け取ったエラーを、“ここでは処理しきらないから、上のレイヤーにもう一回投げ直す” 行為 です。非同期処理では特に...
JavaScript JavaScript | 非同期処理：エラー処理・例外設計 – ログ出力設計
ログ出力設計を一言でいうとログ出力設計は、「エラーや重要な出来事を、あとから“意味を持って”追いかけられるように記録する設計」 のことです。ただ console.log(err) を散らばせるのではな...
JavaScript JavaScript | 非同期処理：エラー処理・例外設計 – ユーザー向けエラー表示
ユーザー向けエラー表示を一言でいうとユーザー向けエラー表示は、「技術的に何が壊れたか」ではなく、「ユーザーが次にどうすればいいか」を伝えるためのメッセージ です。非同期処理（fetch / API 通...
JavaScript JavaScript | 非同期処理：エラー処理・例外設計 – エラー情報の整形
「エラー情報の整形」を一言でいうと「エラー情報の整形」は、「バラバラで生々しいエラー情報を、“人間やアプリが扱いやすい形” に整理し直すこと」 です。生のエラーは、たいていこうです。・メッセージが英語...
JavaScript JavaScript | 非同期処理：エラー処理・例外設計 – カスタムエラー
カスタムエラーを一言でいうとカスタムエラーは、「自分のアプリ専用の“名前付きエラー型”を作って、エラーの意味をはっきりさせる仕組み」 です。ただの Error だけだと、「何が原因で」「どのレイヤーで...
JavaScript JavaScript | 非同期処理：エラー処理・例外設計 – catch の共通化
「catch の共通化」を一言でいうと「catch の共通化」は、「あちこちにバラバラに書いているエラー処理を、意味のある“ひとつの場所”にまとめること」 です。同じような catch (err) {...
JavaScript JavaScript | 非同期処理：エラー処理・例外設計 – Promise 内 throw
「Promise 内 throw」を一言でいうとPromise の中で throw する、というのは「その Promise を reject（失敗状態）にするための、ちょっと短い書き方」 です。new...
JavaScript JavaScript | 非同期処理：エラー処理・例外設計 – try / catch の範囲
「try / catch の範囲」を一言でいうとtry / catch の「範囲」は、「どこで起きたエラーまで、この try / catch で捕まえられるのか」 という話です。ここを勘違いすると、「...
JavaScript JavaScript | 非同期処理：エラー処理・例外設計 – 同期例外と非同期例外
同期例外と非同期例外を一言でいうと同期例外と非同期例外の違いは、「エラーが いつ 投げられて、どこで 捕まえられるか」の違いです。同期例外は、「その関数を呼んだ“その瞬間”に起きるエラー」。非同期例外...
JavaScript JavaScript Tips | 文字列ユーティリティ：検索・置換 － 連続空白圧縮
「連続空白圧縮」とは何をするユーティリティかまずイメージからいきましょう。ユーザー入力や外部データには、よくこんな文字列が紛れ込みます。"山田 太郎"" 東京都 中央区 ""a b c"人間からすると...
JavaScript JavaScript Tips | 文字列ユーティリティ：検索・置換 － 改行除去
なぜ「改行除去」ユーティリティが必要になるのか業務システムでユーザー入力を扱っていると、テキストエリアからの入力や、外部システムからのデータに「改行」が普通に混ざります。見た目としては問題なくても、次...
JavaScript JavaScript Tips | 文字列ユーティリティ：検索・置換 － HTML アンエスケープ
「HTML アンエスケープ」とは何をするものか前回の「HTML エスケープ」は、< や & などを「タグとして解釈されないように」安全な文字列に変える処理でした。"<b>太字</b>" → "<...
JavaScript JavaScript Tips | 文字列ユーティリティ：検索・置換 － HTML エスケープ
なぜ「HTML エスケープ」が必要なのかまず、これだけははっきりさせておきたいです。HTML エスケープは「見た目を整えるテクニック」ではなく、「セキュリティのための必須処理」です。ユーザー入力をその...
JavaScript JavaScript Tips | 文字列ユーティリティ：検索・置換 － 正規表現置換
「正規表現置換」ができると何が嬉しいのかまずイメージからいきます。普通の置換は「この文字列を、この文字列に変える」だけです。"2026/02/19" の "/" を "-" に変える"foo foo ...
JavaScript JavaScript Tips | 文字列ユーティリティ：検索・置換 － 全置換
「全置換」って何をするユーティリティ？まずイメージからいきましょう。「この文字列の中にある foo を、全部 bar に変えたい」という場面、よくありますよね。"foo foo foo" → "bar...
JavaScript JavaScript Tips | 文字列ユーティリティ：検索・置換 － 大文字小文字無視検索
「大文字小文字無視検索」とは何をしてくれるのかまずゴールのイメージからいきます。次の3つの文字列を見てください。"Apple""apple""APPLE"人間からすると「全部 Apple でしょ」です...
JavaScript JavaScript Tips | 文字列ユーティリティ：検索・置換 － 後方一致
「後方一致」とは何をしているのか前回の「前方一致」は“先頭が合っているか”を見るものでした。「後方一致」はその逆で、文字列の“末尾”が、指定した文字列と一致しているかどうかを調べます。「report....
JavaScript JavaScript Tips | 文字列ユーティリティ：検索・置換 － 前方一致
「前方一致」とは何をしているのかまず言葉の整理からいきます。「前方一致」は、文字列の“先頭”が、指定した文字列と一致しているかどうかを調べることです。「山田太郎」が「山田」で始まっているか？「」が「h...
JavaScript JavaScript Tips | 文字列ユーティリティ：検索・置換 － 部分一致検索
「部分一致検索」ユーティリティは何をしてくれるのか業務システムで文字列を扱うとき、「完全一致」だけで足りることはあまりありません。ユーザー一覧から「山」で始まる人を探したい、商品名に「USB」が含まれ...
JavaScript JavaScript Tips | 文字列ユーティリティ：整形 － 単語分割
なぜ「単語分割」ユーティリティが必要になるのかキャメルケース化・スネークケース化・ケバブケース化・パスカルケース化。ここまでいろいろやってきましたが、実は全部の“土台”にあるのが 「単語分割」 です。...
JavaScript JavaScript Tips | 文字列ユーティリティ：整形 － パスカルケース化
パスカルケースってそもそも何かまず言葉の整理からいきます。「パスカルケース（PascalCase）」は、単語の先頭をすべて大文字にして、間をつめてつなげる書き方です。"user name" → "Us...
JavaScript JavaScript Tips | 文字列ユーティリティ：整形 － ケバブケース化
ケバブケースってそもそも何かまず言葉の整理からいきましょう。「ケバブケース（kebab-case）」は、単語をハイフン - でつなぎ、全部小文字で書くスタイルです。"userName" → "user...
JavaScript JavaScript Tips | 文字列ユーティリティ：整形 － スネークケース化
スネークケースってそもそも何かまず言葉の整理からいきます。「スネークケース（snake_case）」は、単語をアンダースコア _ でつなぎ、全部小文字で書くスタイルです。"userName" → "u...
JavaScript JavaScript Tips | 文字列ユーティリティ：整形 － キャメルケース化
キャメルケースってそもそも何かまず言葉の整理からいきます。「キャメルケース（camelCase）」は、プログラミングでよく使う“名前の付け方”のルールの一つです。先頭は小文字。単語の区切りごとに、次の...
JavaScript JavaScript | 非同期処理：fetch / API 通信 – API 設計との関係
API 設計と fetch の関係の全体像fetch 自体は「URL に HTTP リクエストを送って、レスポンスを受け取るだけ」の素朴な道具です。でも、実際のコードの書きやすさ・分かりやすさは、AP...
JavaScript JavaScript | 非同期処理：fetch / API 通信 – 再試行処理
「再試行処理」を一言でいうとfetch の「再試行処理」は、「1 回の通信が失敗したときに、すぐ諦めずにもう何回かやり直す仕組み」 のことです。ネットワークの世界では、「たまたま一瞬だけ回線が不安定だ...
JavaScript JavaScript | 非同期処理：fetch / API 通信 – タイムアウト対策
fetch の「タイムアウト対策」を一言でいうとfetch のタイムアウト対策は、「一定時間待ってもサーバーから返事がこなかったら、自分から通信を打ち切る仕組みを入れること」 です。そのままの fet...
JavaScript JavaScript | 非同期処理：fetch / API 通信 – エラーレスポンス処理
「エラーレスポンス処理」を一言でいうとfetch / API 通信における「エラーレスポンス処理」は、「サーバーから“うまくいかなかった”という返事が返ってきたときに、何をどうするか決めておくこと」 ...
JavaScript JavaScript | 非同期処理：fetch / API 通信 – ステータスコード確認
ステータスコード確認を一言でいうとfetch で API を叩くときの「ステータスコード確認」は、「サーバーが今どんな気持ちで返事してきているか」をちゃんと見ること です。200「OK、うまくいったよ...
JavaScript JavaScript | 非同期処理：fetch / API 通信 – JSON 送受信
JSON と fetch の関係を一言でいうとJSON と fetch の関係は、「JavaScript とサーバーが会話するときの“共通言語（JSON）”を、fetch という電話で送受信する」 と...
JavaScript JavaScript | 非同期処理：fetch / API 通信 – headers の設定
headers ってそもそも何？なぜ設定が必要なのかfetch の headers は、「このリクエストに関する“メタ情報”（追加情報）をサーバーに伝えるためのラベル集」 です。サーバーは、ただ UR...
JavaScript JavaScript | 非同期処理：fetch / API 通信 － POST リクエスト
POST リクエストを一言でいうとfetch の POST リクエストは、「ブラウザからサーバーに“データを送る”ための HTTP 通信」 です。GET が「取りに行く」だとしたら、POST は「渡し...
JavaScript JavaScript | 非同期処理：fetch / API 通信 – GET リクエスト
GET リクエストって何をしているのかまず「GET リクエスト」とは、“サーバーにデータをください、とお願いするためのリクエスト” です。今日の天気を教えてユーザー一覧をちょうだい記事の詳細を見せてみ...
JavaScript JavaScript | 非同期処理：fetch / API 通信 – fetch の基本
fetch ってそもそも何者かfetch は、JavaScript から「ネット越しにデータを取りに行く（サーバーと通信する）」ための関数 です。天気 API から今日の天気をもらう自分のサーバーにフ...
JavaScript JavaScript Tips | 文字列ユーティリティ：整形 － 小文字変換
「小文字変換」ユーティリティは何のために使うのか大文字変換と対になるのが「小文字変換」です。次のような値を考えてみてください。"ABC""Abc""abc"人間からすると「同じ abc」ですが、コンピ...
JavaScript JavaScript Tips | 文字列ユーティリティ：整形 － 大文字変換
「大文字変換」ユーティリティは何のために使うのかまずイメージからいきます。次のような値があるとします。"abc""Abc""ABC"人間から見ると「だいたい同じ」ですが、コンピュータ的には全部別物です...
JavaScript JavaScript Tips | 文字列ユーティリティ：整形 － 半角→全角
「半角→全角」ユーティリティは何のために使うのかさっきの「全角→半角」と逆方向の話です。業務システムでは、こんな要望がよく出ます。帳票や PDF で、桁をきれいに揃えたいから全角で出したい。画面上の見...
JavaScript JavaScript Tips | 文字列ユーティリティ：整形 － 全角→半角
「全角→半角」ユーティリティは何を解決してくれるのかまず、よくある業務の“あるある”からいきます。ユーザーが「１２３４」と全角数字で入力してくる。「＠」や「－」が全角のせいでメールアドレス判定に落ちる...
JavaScript JavaScript Tips | 文字列ユーティリティ：整形 － trim
trim は「余計な空白をきれいに落とす」道具まずイメージからいきましょう。ユーザーがフォームにこう入力したとします。" 山田太郎 "（前後にスペース付き）見た目は同じ「山田太郎」でも、実際の文字列と...
JavaScript JavaScript | 1 日 120 分 × 7 日アプリ学習：検索 & ソート機能付き一覧
1日目のゴールと今日やること1 日目のテーマは「検索・ソート機能付きの一覧アプリを作りながら、高階関数（map / filter / sort）の本質を理解する」ことです。今日の学習ポイントは次の 3...
JavaScript JavaScript Tips | 基本・共通ユーティリティ：環境 － オンライン状態判定
なぜ「オンライン状態判定」ユーティリティが業務で重要なのか業務システムでも、ユーザーは常に安定したネットワーク環境にいるとは限りません。社内 Wi-Fi が不安定、移動中のモバイル回線、一瞬だけオフラ...
JavaScript JavaScript Tips | 基本・共通ユーティリティ：環境 － タイムゾーン取得
なぜ「タイムゾーン取得」ユーティリティが業務で重要なのか業務システムで日付や時刻を扱うとき、必ず出てくるのが「タイムゾーン」の問題です。日本のユーザーと海外のユーザーが混在していたり、サーバーは UT...
JavaScript JavaScript Tips | 基本・共通ユーティリティ：環境 ‐ 言語設定取得
なぜ「言語設定取得」ユーティリティが必要になるのか業務システムを作っていると、「日本語ユーザーには日本語で」「英語ユーザーには英語で」といった多言語対応の話がほぼ確実に出てきます。ここで大事なのは、「...