動くコード図鑑技術記事現場の渡り方キャリア論すべての記事 About

動くコード図鑑

$ ls -1 /library | wc -l → 619

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

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

この図鑑の使い方

言語で絞る

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

▶ で実行

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

記事と接続

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

絞り込み

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

snippet 一覧

619 件

import {combineReducers,createStore,Action} from 'redux'

import CounterReducer, {IState} from "../Reducers/CounterReducer";

import {ActionType} from "../Actions/CounterAction";



const rootReducer = combineReducers(

Store

Typescript×Reduxでカウンタアプリ作ってみる！未収録#c018959893e8

import {ReduxAction, ReduxState} from "../Store/store";

import {DecrementAmount, IncrementAmount} from "../Actions/CounterAction";

import {connect} from "react-redux";

import {Dispatch} from "react";

import Counter from "./Counter";

Container

Typescript×Reduxでカウンタアプリ作ってみる！未収録#22309cd4a543

import React from "react";

import {IState} from "../Reducers/CounterReducer";

import {ActionDispather} from "./Container";



interface Props {

Component

Typescript×Reduxでカウンタアプリ作ってみる！未収録#038f1a12561a

import React from 'react';

import ReactDOM from 'react-dom';

import * as serviceWorker from './serviceWorker';

import {Provider} from "react-redux";

import store from "./Store/store";

Index.tsx

Typescript×Reduxでカウンタアプリ作ってみる！未収録#e82df7884099

import {Action} from 'redux'

export enum	ActionNames{
	Increment = 'inc',
	Decrement = 'dec'

Action

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

import {ActionNames, ActionType} from "../Actions/CounterAction";


export interface IState {
	num : number

Reducer

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

import {combineReducers,createStore,Action} from 'redux'
import CounterReducer, {IState} from "../Reducers/CounterReducer";
import {ActionType} from "../Actions/CounterAction";

const rootReducer = combineReducers(

Store

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

import {ReduxAction, ReduxState} from "../Store/store";
import {DecrementAmount, IncrementAmount} from "../Actions/CounterAction";
import {connect} from "react-redux";
import {Dispatch} from "react";
import Counter from "./Counter";

Container

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

import React from "react";
import {IState} from "../Reducers/CounterReducer";
import {ActionDispather} from "./Container";

interface Props {

Component

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

import React from 'react';
import ReactDOM from 'react-dom';
import * as serviceWorker from './serviceWorker';
import {Provider} from "react-redux";
import store from "./Store/store";

Index

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

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

Reduxでstateが undefinedに？どんな現象？

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

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

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

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

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

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

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

export type ReduxState = {
	Counter : IState
};

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

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

export type ReduxState = {
	CounterReducer : IState
};

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

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

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

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

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

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

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

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

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

var names = products
    .Where(p => p.Price >= 1000)
    .Select(p => p.Name)
    .ToList();

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

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

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: 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: 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: 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

// C#
bool hasExpensive = products.Any(p => p.Price >= 10000);
bool allInStock = products.All(p => p.Stock > 0);

対応 7: Any / All ↔ some / every

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

// 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

// C# 側 (3 行で済む)
var counts = products
    .Where(p => p.Price >= 1000)
    .GroupBy(p => p.Category)
    .ToDictionary(g => g.Key, g => g.Count());

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

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

// 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

    Sub Main()

        Dim places As String() = {"東京", "大阪", "名古屋"}
        Dim combineStr = Strings.Join(places)
        Console.WriteLine(combineStr)

Strings.Joinで文字配列を１つの文字列にする

VB.netで右からの文字列を取得する方法未収録#395c86600ba8

// NGパターン：直訳
string r = s.Substring(s.Length - 3);                // "cde" だが s が短いと例外
string r2 = "ab".Substring("ab".Length - 5);         // ArgumentOutOfRangeException
string r3 = ((string)null).Substring(((string)null).Length - 3); // NRE

Rightの仕様差

VB.net の Right / Mid / Left を C# に翻訳する完全早見表未収録#3b80a0da3253

public static class StringCompat
{
    /// <summary>VB.net の Right 相当。null・長さオーバーフロー・負値を吸収。</summary>
    public static string Right(string s, int length)
    {

ヘルパ1: RightのC#実装

VB.net の Right / Mid / Left を C# に翻訳する完全早見表未収録#d3eb9db0ae6a