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

動くコード図鑑

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

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

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

この図鑑の使い方

言語で絞る

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

▶ で実行

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

記事と接続

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

絞り込み

snippet 一覧

619
C#
    public class Todo
    {
        public int Id { get; set; }
        public string Sammary { get; set; }
        public string Detail { get; set; }

TodoMODELの構造

ASP.NETでCreate時にログイン中ユーザーのデータとして登録する方法未収録#38715cea3d9b
C#
    public class User
    {
        public int id { get; set; }
        public string UserName { get; set; }
        public string Password { get; set; }

UserModelの構造

ASP.NETでCreate時にログイン中ユーザーのデータとして登録する方法未収録#17084a70a2be
C#
        [HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult Create([Bind(Include = "Id,Sammary,Detail,Limit,Done")] Todo todo)
        {
            var loginUser = GetLoginUser();

TodoModelがUserを保持している点に注目

ASP.NETでCreate時にログイン中ユーザーのデータとして登録する方法未収録#0c46100ec080
C#
        private User GetLoginUser()
        {
            return db.Users.FirstOrDefault(u => u.UserName == User.Identity.Name);
        }

TodoModelがUserを保持している点に注目

ASP.NETでCreate時にログイン中ユーザーのデータとして登録する方法未収録#31edbf235b99
PowerShell
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
PowerShell
$csvText = @"
GivenName,Surname,SamAccountName
太郎,山田,t.yamada
花子,鈴木,h.suzuki
次郎,佐藤,j.sato
▶ 実行可

Step 3: Docker containerで言語仕様部分を動作確認

業務SE が初めて触る AD バルクユーザー作成 — PowerShell で30人を5分で登録するスクリプト#25fed8d00294
PowerShell
$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
PowerShell
try {
    Get-ChildItem -Path '/notexist'
    Write-Host "ここが何故か実行される"
} catch {
    Write-Host "なぜここに来ない?"
▶ 実行可

try {

PowerShell の ErrorAction で業務SE が踏む3パターンの落とし穴 — Continue/Stop/SilentlyContinue と try-catch#fa6b0e04aa57
PowerShell
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
PowerShell
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
PowerShell
# ✗ 中身ゼロ
} catch {
    Write-Host "エラーが発生しました"
}

▶ 実行可

③ catch内で$_を見落とす

PowerShell の ErrorAction で業務SE が踏む3パターンの落とし穴 — Continue/Stop/SilentlyContinue と try-catch#a45e7d87bafa
TypeScript
import React, {FC} from 'react';

const Student : FC = () => {
    return (
        <div>

生徒コンポーネント

【React×Typescript】typeのPropsをジェネリックで定義して共通化する未収録#729f1587a369
TypeScript
import React, {FC} from 'react';

const Teacher : FC = () => {
    return (
        <div>

教師コンポーネント

【React×Typescript】typeのPropsをジェネリックで定義して共通化する未収録#1a5f1a093793
TypeScript
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
TypeScript
type Props = {
    Name : string,
    Gakunen : number
}

生徒コンポーネント

【React×Typescript】typeのPropsをジェネリックで定義して共通化する未収録#0c757106cf6f
TypeScript
type Props = {
    Name : string,
    Kyouka : string
}

教師コンポーネント

【React×Typescript】typeのPropsをジェネリックで定義して共通化する未収録#3eab11d27cb9
TypeScript
import React, {FC} from 'react';

type Props = {
    Name : string,
    Gakunen : number

それぞれのコンポーネントで受け取れるようにする

【React×Typescript】typeのPropsをジェネリックで定義して共通化する未収録#2ef1d9381b68
TypeScript
    <div className="App">
      <Student Name={"鈴木"} Gakunen={3}/>
      <Teacher/>

それぞれのコンポーネントで受け取れるようにする

【React×Typescript】typeのPropsをジェネリックで定義して共通化する未収録#f8304cbaf936
TypeScript
const Teacher : FC<Props> = (props) => {
    return (
        <div>
            <h2>先生コンポーネント</h2>
            <p>名前:{props.Name}</p>

それぞれのコンポーネントで受け取れるようにする

【React×Typescript】typeのPropsをジェネリックで定義して共通化する未収録#b2e78cd737b7
TypeScript
export type StudentType = {
    Name : string,
    Gakunen : number
}

生徒と教師Propsを型付けする

【React×Typescript】typeのPropsをジェネリックで定義して共通化する未収録#7491e5b77046
TypeScript
type Props = {
    Data : TeacherType
}

const Teacher : FC<Props> = (props) => {

生徒と教師Propsを型付けする

【React×Typescript】typeのPropsをジェネリックで定義して共通化する未収録#42c142288729
TypeScript
type Props = {
    Data : StudentType
}

const Student : FC<Props> = (props) => {

生徒と教師Propsを型付けする

【React×Typescript】typeのPropsをジェネリックで定義して共通化する未収録#d78f4ec7e6cb
TypeScript
    <div className="App">
      <Student Data={{Name : "鈴木",Gakunen : 3}}/>
      <Teacher Data={{Name : "田中",Kyouka : "数学"}}/>

生徒と教師Propsを型付けする

【React×Typescript】typeのPropsをジェネリックで定義して共通化する未収録#37e3162bd3c1
TypeScript
export type CommonProps<T> = {
    Data : T
}

型をジェネリックで定義する

【React×Typescript】typeのPropsをジェネリックで定義して共通化する未収録#fc13b3d84744
TypeScript
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
TypeScript
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
TypeScript
type CounterContextState = {
    count : number,
    dispatch : React.Dispatch<CounterActions>
}

createContextでContextとProviderを作る

React×TypescriptでuseContext使ってReduxライクなState管理をしてみる未収録#bcf866e4af9f
TypeScript
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
TypeScript
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
TypeScript
const HogeComponent = () => {
  const AComponents = useMemo((): React.ReactNode[] => {
    return ['a', 'b', 'c'].map(v => <p>{v}</p>);
  }, [])

const HogeComponent = () => {

Reactで違うコンポーネントをmapでレンダリングする方法未収録#0f591a276206