JavaScript
JavaScript | 1 日 90 分 × 7 日アプリ学習：ランダム表示アプリ（初級編）
2026-01
TypeScript TypeScript | 基礎文法：配列・タプル – タプルの要素アクセス
タプルの要素アクセスは「位置ごとに型が決まっている」のがキモタプルは、「何番目に何の型が入るか」まで型で決まっている配列でした。だからこそ、要素にアクセスしたときも「どの位置を取るか」で型が変わります...
TypeScript TypeScript | 基礎文法：配列・タプル – タプルと配列の違い
まずざっくりしたイメージの違い同じ「[]」を使うのでややこしいんですが、役割はけっこう違います。配列：「同じ型の値が、いくつ並ぶか分からない入れ物」タプル：「要素の数・順番・型が決まっている、小さな“...
TypeScript TypeScript | 基礎文法：配列・タプル – タプルの型固定
「タプルの型固定」とは何かタプルの一番大きな特徴は、「要素の数・順番・型がすべて固定される」ことです。普通の配列は「number が何個でも」「string が何個でも」という“長さフリー”な構造です...
TypeScript TypeScript | 基礎文法：配列・タプル – タプルの基本構文
タプルの基本構文の全体像タプルは、「要素の数・順番・型が決まっている配列」を表すための構文です。基本形はとてもシンプルで、「配列リテラルの [] の中に、位置ごとの型をカンマ区切りで並べる」だけです。...
TypeScript TypeScript | 基礎文法：配列・タプル – タプルとは何か
タプルとは何か（「位置に意味がある配列」）タプルは、ざっくり言うと「要素の数と順番と型が決まっている配列」です。普通の配列は「同じ型の値がズラッと並ぶもの」ですが、タプルは「1番目はこれ、2番目はこれ...
TypeScript TypeScript | 基礎文法：配列・タプル – readonly配列
readonly配列とは何か（「中身を書き換えられない配列」）readonly配列は、一言でいうと「中身を変更できない配列」です。「参照はするけど、追加・削除・書き換えはさせたくない」というときに使い...
TypeScript TypeScript | 基礎文法：配列・タプル – union型配列
union型配列とは何か（まずイメージから）union型配列は、「この配列には“いくつかの型のどれか”が入る」ということを型で表現したものです。たとえば「number か string のどちらかが入...
TypeScript TypeScript | 基礎文法：配列・タプル – 配列に異なる型を入れた場合
「配列に異なる型を入れる」と TypeScript はどう解釈するかまず前提として、TypeScript は「配列の中身（要素）を見て、その配列の型を決める」言語です。なので、配列に異なる型を混ぜると...
TypeScript TypeScript | 基礎文法：配列・タプル – 配列の型推論
配列の型推論とは何かTypeScriptは、わざわざ「: string[]」のように型を書かなくても、初期値から配列の型を自動で推論してくれます。つまり、次のように書いた瞬間に、コンパイラは「これは ...
TypeScript TypeScript | 基礎文法：配列・タプル – string[] と Array<string>
string[] と Array<string> は「意味は同じ」最初に結論から言うと、string[] と Array<string> は意味はまったく同じです。どちらも「string 型の要素だけ...
TypeScript TypeScript | 基礎文法：配列・タプル – 配列型の書き方
配列型とは何かをまずイメージする配列は「同じ種類の値を、順番付きで並べたもの」です。TypeScriptでは、「この配列には何の型の要素が入るのか」を型として表現できます。const numbers ...
TypeScript TypeScript | 基礎文法：変数・基本型 – unknown型との違い
any型とunknown型は「似て非なるもの」どちらも「どんな値でも代入できる型」ですが、性格は真逆です。ざっくり言うと、any型：型チェックをほぼ無効化する「なんでもアリモード」unknown型：何...
TypeScript TypeScript | 基礎文法：変数・基本型 – any型の危険性
any型が「一番危険な型」と言われる理由any 型は、「何でも入るし、どこにでも代入できる」特別扱いの型です。一見すると「エラーが消えて便利」に見えますが、その代わりにTypeScriptの一番大事な...
TypeScript TypeScript | 基礎文法：変数・基本型 – any型とは何か
any型とは何か（TypeScriptの「なんでもアリ」モード）any 型は、一言でいうと「TypeScriptの型チェックをほぼ無効化するための型」です。number や string のように「こ...
TypeScript TypeScript | 基礎文法：変数・基本型 – 型エラーの典型パターン
型エラーの「典型パターン」を知っておく意味型エラーは無限にあるように見えて、実はよく出るパターンはかなり限られています。この「典型パターン」を押さえておくと、エラーを見た瞬間に「ああ、これはあのパター...
TypeScript TypeScript | 基礎文法：変数・基本型 – 型エラーの読み方
型エラーは「TypeScriptからの手紙」だと思って読むまず前提として、型エラーは「お前のコードがダメ」と責めてくるものじゃなくて、「ここがこうズレてるよ」と教えてくれるかなり親切な手紙です。だから...
TypeScript TypeScript | 基礎文法：変数・基本型 – as const の意味
as const は「この値をそのままの形で固定して」と伝えるスイッチas const は、TypeScript に対してこう宣言するためのものです。「この値は“変わらない前提”だから、できるだけその...
TypeScript TypeScript | 基礎文法：変数・基本型 – booleanリテラル型
booleanリテラル型とは何かbooleanリテラル型は、「true だけ」「false だけ」といった、特定の真偽値だけを許可する型です。普通の boolean 型は「true か false の...
TypeScript TypeScript | 基礎文法：変数・基本型 – 数値リテラル型
数値リテラル型とは何か数値リテラル型は、「特定の数値だけを許可する型」です。普通の number 型は「どんな数値でもOK」ですが、数値リテラル型は「この変数には 1 しか入れてはいけない」「0 か ...
TypeScript TypeScript | 基礎文法：変数・基本型 – 文字列リテラル型
文字列リテラル型とは何か文字列リテラル型は、「特定の文字列だけを許可する型」です。普通の string 型は「どんな文字列でもOK」ですが、文字列リテラル型は「この文字列“だけ”OK」という、もっと狭...
TypeScript TypeScript | 基礎文法：変数・基本型 – リテラル型とは
リテラル型とは何か（ざっくりイメージ）リテラル型は、「特定の値そのものを型として扱う」ための仕組みです。普通の string 型は「どんな文字列でもOK」、number 型は「どんな数値でもOK」です...
TypeScript TypeScript | 基礎文法：変数・基本型 – const時の型の固定
const は「値」と「型」をその場で固定する宣言const は「再代入できない変数」を宣言するキーワードですが、TypeScriptでは型の固定のされ方にも特徴があります。const で宣言した瞬間...
TypeScript TypeScript | 基礎文法：変数・基本型 – 再代入時の型チェック
「再代入時の型チェック」とは何をしているのかTypeScriptは「一度決めた型に対して、その後もずっと一貫しているか」をコンパイル時にチェックします。変数に最初に値を入れた瞬間、あるいは型注釈を書い...
TypeScript TypeScript | 基礎文法：変数・基本型 – 明示型と推論型の使い分け
「明示型」と「推論型」とは何かTypeScriptには、型を扱う2つのスタイルがあります。ひとつは「明示型」——自分で : string や : number のように型を書いて宣言するやり方。もうひ...
TypeScript TypeScript | 基礎文法：変数・基本型 – 型推論の仕組み
型推論とは何か型推論（type inference）は、「あなたが書いたコードから、TypeScriptが自動的に型を推測してくれる仕組み」です。毎回すべての変数や関数に型注釈を書かなくても、初期値や...
TypeScript TypeScript | 基礎文法：変数・基本型 – 型注釈の書き方
型注釈とは何か型注釈（type annotation）は、「この変数・この引数・この戻り値には、こういう型の値しか入れません」とコードの中で宣言するための書き方です。TypeScriptでは、変数名や...
TypeScript TypeScript | 基礎文法：変数・基本型 – null / undefined
null / undefined は「値がない」を表す特別な2人まず大枠からいきます。null と undefined は、どちらも「値がない状態」を表すための特別な値です。ただし、まったく同じ意味で...
TypeScript TypeScript | 基礎文法：変数・基本型 – boolean型
boolean型とは何かboolean型は、「真か偽か」を表すための型です。取れる値はたった2つ、true（真）か false（偽）だけ。「ログインしているか？」「在庫はあるか？」「エラーが起きたか？...
TypeScript TypeScript | 基礎文法：変数・基本型 – number型
number型とは何かTypeScriptのnumber型は、「数値」を表すための基本型です。整数も小数も、正の数も負の数も、すべてまとめてnumberとして扱います。JavaScript／TypeS...
TypeScript TypeScript | 基礎文法：変数・基本型 – string型
string型とは何かTypeScriptのstring型は、「文字列」を表すための基本型です。人の名前、メッセージ、住所、IDなど、「文字の並び」で表現されるものはすべてstringで扱います。Ty...
TypeScript TypeScript | 基礎文法：変数・基本型 – let / const の違い
let と const は「変えられるかどうか」を表すスイッチまず大事な前提として、TypeScript（というかモダンなJavaScript）では、変数宣言に var ではなく let と cons...
TypeScript TypeScript | 基礎文法：環境・前提理解 – VSCodeでのTypeScript補完確認
VSCodeはTypeScriptと相性がいい「賢いノート」VSCodeは、TypeScriptを使うときにほぼ標準と言っていいエディタです。理由はシンプルで、「TypeScriptの型情報を理解して...
TypeScript TypeScript | 基礎文法：環境・前提理解 – コンパイルの流れ（ts → js）
TypeScriptコードはそのままでは動かないまず大前提として、ブラウザも Node.js も TypeScript を「そのまま」実行することはできません。理解できるのはあくまで JavaScri...
TypeScript TypeScript | 基礎文法：環境・前提理解 – strict モードの意味
strict モードとは何かTypeScript の strict モードは、一言でいうと「型チェックを最大限きびしくするスイッチ」です。tsconfig.json の compilerOptions...
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+ ...