JavaScript
JavaScript | WeakMap / WeakSet の動作（GCで自動削除）を視覚化
@lifehacker
TypeScript TypeScript | 基礎文法：環境・前提理解 – tsconfig.json の役割
tsconfig.jsonとは何かtsconfig.json は、TypeScript プロジェクトの「設定ファイル」です。TypeScript コンパイラ（tsc）が「どのファイルを、どんなルールで...
TypeScript TypeScript | 基礎文法：環境・前提理解 – TypeScriptのインストール
TypeScriptをインストールする前に知っておく前提TypeScriptは単体で動くわけではなく、「Node.js」と「npm」が前提になります。npmはNode.jsに付属しているパッケージ管理...
TypeScript TypeScript | 基礎文法：環境・前提理解 – npm / npx の違い
npmとnpxは「似てるけど役割が違う道具」npmとnpxは、どちらもNode.jsをインストールすると一緒についてくるコマンドです。名前が似ているのでややこしいですが、役割はけっこう違います。ざっく...
TypeScript TypeScript | 基礎文法：環境・前提理解 – Node.jsの役割
Node.jsとは何かと、TypeScriptとの関係Node.jsは「ブラウザの外でJavaScriptを動かすための実行環境」です。中身では、もともとChromeなどのブラウザで使われている高速な...
TypeScript TypeScript | 基礎文法：環境・前提理解 – TypeScriptが解決する問題
TypeScriptが解決しようとしている世界の悩みTypeScriptは「かっこいい新しい言語を作りたかったから」生まれたわけではなく、「JavaScriptで本気の開発をするときに、みんながハマっ...
TypeScript TypeScript | 基礎文法：環境・前提理解 – JavaScriptとの違い
TypeScriptとJavaScriptの関係と前提理解TypeScriptは「JavaScriptを拡張した言語」で、よく「JavaScriptのスーパーセット」と呼ばれます。つまり、JavaSc...
TypeScript TypeScript | 基礎文法：環境・前提理解 – TypeScriptとは何か
TypeScriptとは何かTypeScriptは「JavaScriptをもっと書きやすく、安全にしたバージョン」と考えるとイメージしやすいです。技術的には「JavaScriptのスーパーセット（上位...
Python Python | Web フレームワーク：Django のモデル
概要（Django のモデル＝「DBテーブルを Python クラスとして扱う仕組み」）Django の「モデル」は一言でいうと、「データベースのテーブルを、Python のクラスとして表現したもの」...
Python Python | Web フレームワーク：テンプレート（Jinja2）
概要（テンプレート＝「HTML の型にデータを流し込む仕組み」）テンプレート（Jinja2）は一言でいうと、「HTML のひな型（型）をあらかじめ用意しておいて、Python のデータをそこに流し込ん...
Python Python | Web フレームワーク：ドキュメント UI
概要（ドキュメント UI＝「API 仕様書をブラウザで触れる画面」にしたもの）ドキュメント UI は、「API の仕様を、人間がブラウザ上で見たり、その場で試したりできる画面」のことです。FastAP...
Python Python | Web フレームワーク：OpenAPI
概要（OpenAPI＝「API の設計図を機械と人間で共有するためのフォーマット」）OpenAPI は、「この Web API は、どんな URL があって、どんな入力を受け取り、どんなレスポンスを返...
Python Python | Web フレームワーク：静的ファイル
概要（静的ファイル＝「ただ置いておくだけで中身が変わらないファイル」）静的ファイルは、「サーバー側で中身を計算したり書き換えたりせず、そのままブラウザに渡すだけのファイル」のことです。具体的には、よく...
JavaScript JavaScript | ES6+ 文法：テンプレート文字列 – 従来文字列との比較
何が違うのか（テンプレート文字列 vs 従来の文字列）テンプレート文字列はバッククォートで囲み、${...} に式をそのまま埋め込めて、複数行も“書いたとおり”に保持します。従来の文字列（' や "）...
JavaScript JavaScript | ES6+ 文法：テンプレート文字列 – 可読性向上パターン
可読性向上パターンの考え方テンプレート文字列は“見た目をコードにそのまま表せる”のが強みです。ここが重要です：見た目（レイアウト）とロジック（計算・整形）を分離し、式の埋め込みは短く保つことで、初心者...
JavaScript JavaScript | ES6+ 文法：テンプレート文字列 – XSS 対策の注意点
テンプレート文字列と XSS の基本認識テンプレート文字列はバッククォートで囲み、${...} に式を埋め込める便利な仕組みですが、ここが重要です：テンプレート文字列自体には自動エスケープ機能がありま...
JavaScript JavaScript | ES6+ 文法：テンプレート文字列 – タグ付きテンプレート
タグ付きテンプレートとは何かタグ付きテンプレートは、テンプレート文字列の先頭に“関数名”を置き、文字列と式の分解結果をその関数で“加工してから”最終文字列を得る仕組みです。ここが重要です：通常のテンプ...
JavaScript JavaScript | ES6+ 文法：テンプレート文字列 – HTML 生成用途
テンプレート文字列で HTML を作る意味テンプレート文字列はバッククォートで囲み、${...} に式を埋め込めるため、“見た目どおり”に HTML 断片を組み立てられます。ここが重要です：複数行とイ...
JavaScript JavaScript | ES6+ 文法：テンプレート文字列 – 関数呼び出し埋め込み
関数呼び出し埋め込みとは何かテンプレート文字列はバッククォートで囲み、${ ... } の中に“任意の式”を置けます。その式に関数呼び出しを書けば、戻り値が文字列の中にそのまま埋め込まれます。ここが重...
JavaScript JavaScript | ES6+ 文法：テンプレート文字列 – 条件式埋め込み
条件式埋め込みとは何かテンプレート文字列はバッククォートで囲み、${...}の中に“式”を書いて評価結果を挿入できます。ここが重要です：if/else をそのまま書くのではなく、三項演算子や論理演算子...
JavaScript JavaScript | ES6+ 文法：テンプレート文字列 – 改行保持
改行保持とは何かテンプレート文字列はバッククォートで囲むだけで、書いた改行や空白をそのまま保持します。ここが重要です：'\n' を手書きしなくても、テンプレート内の改行が実際の文字列に含まれるため、H...
JavaScript JavaScript | ES6+ 文法：テンプレート文字列 – 式の埋め込み
式の埋め込みとは何かテンプレート文字列はバッククォートで囲み、${ ... } に“式”を入れて、その評価結果を文字列内に埋め込めます。ここが重要です：式は変数だけでなく、計算、関数呼び出し、条件（三...
JavaScript JavaScript | ES6+ 文法：テンプレート文字列 – バッククォート
テンプレート文字列とは何かテンプレート文字列は、バッククォート（）で囲む新しい文字列リテラルです。ここが重要です：式の埋め込み（${...}）、複数行の文字列、可読性の高い整形が“素の文法”で書けます...
JavaScript JavaScript | 1 日 120 分 × 7 日アプリ学習：ローカル保存対応メモ帳
この7日間のゴールと全体像この 7 日間は「ローカル保存対応メモ帳」を題材に、ブラウザだけで完結する“ちゃんとした”アプリを作りながら、次の3つを体に入れることがゴールです。localStorage ...
Next.js Next.jsで学ぶReact講座（完全初心者向け・30日） | 第4章：実用的React – データ取得（fetch）
APIとは何か「データください」をお願いするための窓口React / Next.js で「データを画面に表示したい」とき、どこかからデータを「取ってくる」必要があります。そのときに話に出てくるのが A...
Next.js Next.jsで学ぶReact講座（完全初心者向け・30日） | 第4章：実用的React – useEffect入門
useEffectとは「画面の変化に合わせて“副作用”を実行する仕組み」ここまで扱ってきた useState は、「値（状態）を覚えておく仕組み」でした。useEffect は、それとは別の役割を持っ...
JavaScript JavaScript | ES6+ 文法：関数の進化 – 高階関数との相性
高階関数とは何か高階関数は「関数を“引数として受け取る”、または“関数を返す”関数」のことです。関数を値として扱えることで、ロジックの差し替え・再利用・合成が簡単になります。ここが重要です：ES6+ ...
JavaScript JavaScript | ES6+ 文法：関数の進化 – パラメータ分解
パラメータ分解（分割代入）とは何かパラメータ分解は、関数の引数に「オブジェクトや配列をその場で分解して、必要な部分だけ取り出す」ES6の構文です。ここが重要です：関数シグネチャ（引数の書き方）に“必要...
JavaScript JavaScript | ES6+ 文法：関数の進化 – 残余引数（…args）
残余引数（...args）とは何か残余引数（rest parameters）は、関数の仮引数に ...args のように書くと、渡された引数を“配列としてまとめて”受け取る仕組みです。ここが重要です：...
JavaScript JavaScript | ES6+ 文法：関数の進化 – デフォルト引数
デフォルト引数とは何かデフォルト引数は、関数のパラメータに「未指定（または undefined）のときに使われる初期値」を直接書ける仕組みです。ここが重要です：未指定・undefined のときだけ既...
JavaScript JavaScript | ES6+ 文法：関数の進化 – メソッド短縮記法
メソッド短縮記法とは何かメソッド短縮記法は、オブジェクトやクラスの「関数プロパティ」を function キーワードなしで、name() { ... } の形で簡潔に定義できる ES6 の構文です。こ...