動くコード図鑑
$ ls -1 /library | wc -l → 619
触って動く、検証済みの正解集。
公開記事から抽出した全コードブロックを 1 つずつページ化。 ▶ ボタンで 実行ログを再生し、 さも今動いてるかのように出力を流す。

この図鑑の使い方
言語で絞る
C# / SQL / TypeScript / PowerShell / Bash でフィルタ。
▶ で実行
事前収録の出力を 1 行ずつ再生。 ぱっと結果が見える。
記事と接続
各 snippet は出典記事へのリンク付き。 文脈ごと読める。
絞り込み
snippet 一覧
619 件public class Todo { public int Id { get; set; } public string Sammary { get; set; } public string Detail { get; set; }
TodoMODELの構造
ASP.NETでCreate時にログイン中ユーザーのデータとして登録する方法未収録#38715cea3d9b
public class User { public int id { get; set; } public string UserName { get; set; } public string Password { get; set; }
UserModelの構造
ASP.NETでCreate時にログイン中ユーザーのデータとして登録する方法未収録#17084a70a2be
[HttpPost] [ValidateAntiForgeryToken] public ActionResult Create([Bind(Include = "Id,Sammary,Detail,Limit,Done")] Todo todo) { var loginUser = GetLoginUser();
TodoModelがUserを保持している点に注目
ASP.NETでCreate時にログイン中ユーザーのデータとして登録する方法未収録#0c46100ec080
private User GetLoginUser() { return db.Users.FirstOrDefault(u => u.UserName == User.Identity.Name); }
TodoModelがUserを保持している点に注目
ASP.NETでCreate時にログイン中ユーザーのデータとして登録する方法未収録#31edbf235b99
Import-Csv -Path 'users.csv' -Encoding UTF8 | ForEach-Object { $params = @{ Name = "$($_.GivenName)$($_.Surname)" GivenName = $_.GivenName Surname = $_.Surname
Step 2: Import-Csv + ForEach-Object + New-ADUser
業務SE が初めて触る AD バルクユーザー作成 — PowerShell で30人を5分で登録するスクリプト未収録#7de077b3c9bf
$csvText = @" GivenName,Surname,SamAccountName 太郎,山田,t.yamada 花子,鈴木,h.suzuki 次郎,佐藤,j.sato
▶ 実行可
Step 3: Docker containerで言語仕様部分を動作確認
業務SE が初めて触る AD バルクユーザー作成 — PowerShell で30人を5分で登録するスクリプト#25fed8d00294
$users = @" GivenName,Surname,SamAccountName,UPN 太郎,山田,t.yamada,t.yamada@example.local 花子,鈴木,h.suzuki,h.suzuki@example.local "@ | ConvertFrom-Csv
▶ 実行可
Step 3: Docker containerで言語仕様部分を動作確認
業務SE が初めて触る AD バルクユーザー作成 — PowerShell で30人を5分で登録するスクリプト#39d7ade57783
try { Get-ChildItem -Path '/notexist' Write-Host "ここが何故か実行される" } catch { Write-Host "なぜここに来ない?"
▶ 実行可
try {
PowerShell の ErrorAction で業務SE が踏む3パターンの落とし穴 — Continue/Stop/SilentlyContinue と try-catch#fa6b0e04aa57
Write-Host "=== Block 1: ErrorAction Continue (デフォルト) ===" Write-Host "[1] try ブロックの直前" try { Write-Error "ファイルが見つかりません: /notexist-12345"
▶ 実行可
ハンズオン#1 — Continue (デフォルト)でcatchされない
PowerShell の ErrorAction で業務SE が踏む3パターンの落とし穴 — Continue/Stop/SilentlyContinue と try-catch#07004474673a
Write-Host "=== Block 2: ErrorAction Stop ===" Write-Host "[1] try ブロックの直前" try { Write-Error "ファイルが見つかりません: /notexist-12345" -ErrorAction Stop
▶ 実行可
ハンズオン#2 — Stopを付けるとcatchが効く
PowerShell の ErrorAction で業務SE が踏む3パターンの落とし穴 — Continue/Stop/SilentlyContinue と try-catch#b12d8ed6f261
# ✗ 中身ゼロ } catch { Write-Host "エラーが発生しました" }
▶ 実行可
③ catch内で$_を見落とす
PowerShell の ErrorAction で業務SE が踏む3パターンの落とし穴 — Continue/Stop/SilentlyContinue と try-catch#a45e7d87bafa
import React, {FC} from 'react'; const Student : FC = () => { return ( <div>
生徒コンポーネント
【React×Typescript】typeのPropsをジェネリックで定義して共通化する未収録#729f1587a369
import React, {FC} from 'react'; const Teacher : FC = () => { return ( <div>
教師コンポーネント
【React×Typescript】typeのPropsをジェネリックで定義して共通化する未収録#1a5f1a093793
import React from 'react'; import logo from './logo.svg'; import './App.css'; import Student from "./Components/Student"; import Teacher from "./Components/Teacher";
実行結果
【React×Typescript】typeのPropsをジェネリックで定義して共通化する未収録#720620dbe2a8
type Props = { Name : string, Gakunen : number }
生徒コンポーネント
【React×Typescript】typeのPropsをジェネリックで定義して共通化する未収録#0c757106cf6f
type Props = { Name : string, Kyouka : string }
教師コンポーネント
【React×Typescript】typeのPropsをジェネリックで定義して共通化する未収録#3eab11d27cb9
import React, {FC} from 'react'; type Props = { Name : string, Gakunen : number
それぞれのコンポーネントで受け取れるようにする
【React×Typescript】typeのPropsをジェネリックで定義して共通化する未収録#2ef1d9381b68
<div className="App"> <Student Name={"鈴木"} Gakunen={3}/> <Teacher/>
それぞれのコンポーネントで受け取れるようにする
【React×Typescript】typeのPropsをジェネリックで定義して共通化する未収録#f8304cbaf936
const Teacher : FC<Props> = (props) => { return ( <div> <h2>先生コンポーネント</h2> <p>名前:{props.Name}</p>
それぞれのコンポーネントで受け取れるようにする
【React×Typescript】typeのPropsをジェネリックで定義して共通化する未収録#b2e78cd737b7
export type StudentType = { Name : string, Gakunen : number }
生徒と教師Propsを型付けする
【React×Typescript】typeのPropsをジェネリックで定義して共通化する未収録#7491e5b77046
type Props = { Data : TeacherType } const Teacher : FC<Props> = (props) => {
生徒と教師Propsを型付けする
【React×Typescript】typeのPropsをジェネリックで定義して共通化する未収録#42c142288729
type Props = { Data : StudentType } const Student : FC<Props> = (props) => {
生徒と教師Propsを型付けする
【React×Typescript】typeのPropsをジェネリックで定義して共通化する未収録#d78f4ec7e6cb
<div className="App"> <Student Data={{Name : "鈴木",Gakunen : 3}}/> <Teacher Data={{Name : "田中",Kyouka : "数学"}}/>
生徒と教師Propsを型付けする
【React×Typescript】typeのPropsをジェネリックで定義して共通化する未収録#37e3162bd3c1
export type CommonProps<T> = { Data : T }
型をジェネリックで定義する
【React×Typescript】typeのPropsをジェネリックで定義して共通化する未収録#fc13b3d84744
const IncrementAction = 'inc' as const; export const Increment = () => ({type : IncrementAction}); const DecrementAction = 'dec' as const; export const Decrement = () => ({type : DecrementAction});
counterReducerを作る
React×TypescriptでuseContext使ってReduxライクなState管理をしてみる未収録#95f4059e973a
import React,{createContext, FC, useReducer} from "react"; import {CounterActions, CounterInitialState, CounterReducer} from "./CounterReducer"; type CounterContextState = { count : number,
createContextでContextとProviderを作る
React×TypescriptでuseContext使ってReduxライクなState管理をしてみる未収録#299994aedd3b
type CounterContextState = { count : number, dispatch : React.Dispatch<CounterActions> }
createContextでContextとProviderを作る
React×TypescriptでuseContext使ってReduxライクなState管理をしてみる未収録#bcf866e4af9f
export const CounterContextProvider : FC = ({children}) => { const [state,dispatch] = useReducer<typeof CounterReducer>(CounterReducer,CounterInitialState); return( <CounterContext.Provider value={{ count : state.count,
createContextでContextとProviderを作る
React×TypescriptでuseContext使ってReduxライクなState管理をしてみる未収録#c5010fb65476
import React, {FC, useContext} from 'react'; import logo from './logo.svg'; import './App.css'; import {CounterContext, CounterContextProvider} from "./Contexts/CounterProvider"; import {Decrement, Increment, IncrementAction} from "./Reducers/CounterReducer";
実際useContextで上記で作ったものを使ってみる。
React×TypescriptでuseContext使ってReduxライクなState管理をしてみる未収録#eeb0f49121db
const HogeComponent = () => { const AComponents = useMemo((): React.ReactNode[] => { return ['a', 'b', 'c'].map(v => <p>{v}</p>); }, [])
const HogeComponent = () => {
Reactで違うコンポーネントをmapでレンダリングする方法未収録#0f591a276206