触って動く、検証済みの正解集。

公開記事から抽出した全コードブロックを 1 つずつページ化。 ▶ ボタンで実行ログを再生し、さも今動いてるかのように出力を流す。

この図鑑の使い方

言語で絞る

C# / SQL / TypeScript / PowerShell / Bash でフィルタ。

▶ で実行

事前収録の出力を 1 行ずつ再生。ぱっと結果が見える。

記事と接続

各 snippet は出典記事へのリンク付き。文脈ごと読める。

絞り込み

すべて 619C# 473SQL 71 TypeScript 39 JavaScript 24 PowerShell 11 Bash 1 ▶ 実行可能のみ

snippet 一覧

39 件

TypeScript

export default connect(
	(state : ReduxState) => {
		console.log(state);
		return {value : state.CounterReducer}
},

▶ 実行可

ContainerのMapstateの部分でどのような値が来てるか見てみる。

Typescript×ReduxでStateがundefinedに？確認すること！#b91e6363a29b

TypeScript

	render() {
		return (
			<div>
				<p>CurrentCount:{this.props.value.num}</p>
				{console.log(this.props)}

▶ 実行可

ContainerのMapstateの部分でどのような値が来てるか見てみる。

Typescript×ReduxでStateがundefinedに？確認すること！#41a6cb2ed6b9

TypeScript

const CounterReducer = (state : IState = initialState , action : ActionType): IState => {
	switch (action.type) {
		case ActionNames.Increment:
			return {num : state.num + 1};
		case ActionNames.Decrement:

connectのタイミングでundefinedなら？

Typescript×ReduxでStateがundefinedに？確認すること！未収録#3c47d076fe68

TypeScript

const names = products
    .filter(p => p.price >= 1000)
    .map(p => p.name);

俺が TypeScript に出会った朝 — LINQ が見当たらない焦り

C# LINQ → TypeScript Array methods 翻訳早見表 — Where/Select/GroupBy が filter/map/reduce にどう写るか未収録#606a4b394059

TypeScript

// TypeScript: GroupBy 相当を reduce で自前実装
type Product = { category: string; name: string; price: number };
const grouped = products.reduce<Record<string, Product[]>>((acc, p) => {
    (acc[p.category] ??= []).push(p);
    return acc;

対応 4: GroupBy ↔ reduce or Object.groupBy (★最大の罠)

C# LINQ → TypeScript Array methods 翻訳早見表 — Where/Select/GroupBy が filter/map/reduce にどう写るか未収録#ec875f568913

TypeScript

// TypeScript: sort は破壊的・元の products も並び変わる
products.sort((a, b) => a.price - b.price);
// 元配列を変えたくない場合は spread で新配列を作る
const sorted = [...products].sort((a, b) => a.price - b.price);

対応 5: OrderBy ↔ sort (★破壊性の罠)

C# LINQ → TypeScript Array methods 翻訳早見表 — Where/Select/GroupBy が filter/map/reduce にどう写るか未収録#d08cd6f4bc39

TypeScript

// TypeScript: reduce は seed なしだと累積型推論で詰まる
const total = products.reduce((acc, p) => acc + p.price, 0);
// 累積が配列やオブジェクトの場合は明示型が必要
const grouped = products.reduce<Record<string, number>>((acc, p) => {
    acc[p.category] = (acc[p.category] ?? 0) + p.price;

対応 6: Aggregate ↔ reduce (型推論の罠)

C# LINQ → TypeScript Array methods 翻訳早見表 — Where/Select/GroupBy が filter/map/reduce にどう写るか未収録#33e1420c284a

TypeScript

// TypeScript
const hasExpensive = products.some(p => p.price >= 10000);
const allInStock = products.every(p => p.stock > 0);

対応 7: Any / All ↔ some / every

C# LINQ → TypeScript Array methods 翻訳早見表 — Where/Select/GroupBy が filter/map/reduce にどう写るか未収録#cd23c548df50

TypeScript

// TypeScript 側 (ES2024 / Object.groupBy 使用)
const filtered = products.filter(p => p.price >= 1000);
const grouped = Object.groupBy(filtered, p => p.category);
const counts = Object.fromEntries(
    Object.entries(grouped).map(([k, v]) => [k, v?.length ?? 0])

ミニマム検証のハンズオン

C# LINQ → TypeScript Array methods 翻訳早見表 — Where/Select/GroupBy が filter/map/reduce にどう写るか未収録#a5753476bd1d