動くコード図鑑技術記事現場の渡り方キャリア論すべての記事 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 一覧

24 件

    let target = document.getElementById('main');
    target.addEventListener('click',function () {
        target.textContent = 'HelloWorld'
    })

JavaScriptファイルの作成

CSSやJavaScriptの外部ファイル作成方法とその読み込み方法！未収録#af8886c50aa7

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

JavaScript ファイルを読み込む

CSSやJavaScriptの外部ファイル作成方法とその読み込み方法！未収録#6ba3928fce7b

var hoge = [1,2,3,4,5,6,7,8,9,10];
var result = hoge.map((item) => {
var square = item * item;
return square;
})

JavaScriptならこんな書き方ができる

Flutter(Dart)のラムダ式(無名関数)の書き方でハマった話。未収録#1afb5743db70

class View1 extends StatelessWidget {
  const View1({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {

戻るボタンが表示されなかったコードは下記

Flutterでページ遷移をしたのに戻るボタンが表示されない場合のチェック項目！未収録#3998d78aefb5

class View1 extends StatelessWidget {
  const View1({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {

原因：MaterialAppはルートに一つだけしか存在してはいけないというルールがあった

Flutterでページ遷移をしたのに戻るボタンが表示されない場合のチェック項目！未収録#9d46e68f422a

class human {
    constructor(コンストラクタでの引数){
        コンストラクタ内での処理
    }
    インスタンスメソッド(){

JavaScriptでのクラス定義方法

JavaScriptでのクラス定義方法とコンストラクタ定義まで！ミニマム実践してみる！未収録#6dffc51c6042

class human {
    constructor(){
        console.log('Hello World')
    }
}

コンストラクタとは？

JavaScriptでのクラス定義方法とコンストラクタ定義まで！ミニマム実践してみる！#92eab64d49da

class human {
    constructor(name,height,weight){
        this.name = name;
        this.height = height;
        this.weight = weight;

ミニマム実践！HumanクラスをつくってBMIを計算してみる

JavaScriptでのクラス定義方法とコンストラクタ定義まで！ミニマム実践してみる！未収録#c1325fffc440

class human {
    constructor(name,height,weight){
        this.name = name;
        this.height = height;
        this.weight = weight;

ミニマム実践！HumanクラスをつくってBMIを計算してみる

JavaScriptでのクラス定義方法とコンストラクタ定義まで！ミニマム実践してみる！#f37a77a8c6bb

class human {
    constructor(name,height,weight){
        this.name = name;
        this.height = height;
        this.weight = weight;

ミニマム実践！HumanクラスをつくってBMIを計算してみる

JavaScriptでのクラス定義方法とコンストラクタ定義まで！ミニマム実践してみる！#6268bb7340a3

'use struct';
class A君{
    constructor(魔力){
        this.魔力 = 魔力
    }

プログラミングの継承はパワーアップ

JavaScriptのクラスの継承を超絶ミニマムで解説してみる！未収録#407922890891

class A君{
    constructor(魔力){
        this.魔力 = 魔力
    }
}

ベースクラスの定義

JavaScriptのクラスの継承を超絶ミニマムで解説してみる！未収録#49dc6fb48bdf

class A君{
    constructor(魔力){
        this.魔力 = 魔力
    }

ベースクラスの定義

JavaScriptのクラスの継承を超絶ミニマムで解説してみる！#f41e7e63f710

class B君 extends A君{

}

継承先クラスの定義

JavaScriptのクラスの継承を超絶ミニマムで解説してみる！未収録#4d9777c156e9

class B君 extends A君{
    constructor(魔力,回復力){
        super(魔力)
        this.回復力 = 回復力
    }

継承先クラスの定義

JavaScriptのクラスの継承を超絶ミニマムで解説してみる！未収録#367c0a0b1be4

class B君 extends A君{
    constructor(魔力,回復力){
        super(魔力)
        this.回復力 = 回復力
    }

継承先クラスの定義

JavaScriptのクラスの継承を超絶ミニマムで解説してみる！#06cb023a4b31

let A君 = new A(50);
let B君 = new B(100,150);

A君.Ionazun();

継承先クラスの定義

JavaScriptのクラスの継承を超絶ミニマムで解説してみる！#eb36af52e8bb

const num = 3;
console.log(num);

num = 4;
console.log(num);

Constは定数

JavaScriptでConstとletとvarの違いをミニマムで説明してみる#88dfd898a79f

const num;
num = 4;
console.log(num);

Constは定数

JavaScriptでConstとletとvarの違いをミニマムで説明してみる#0857c5ddd8e8

const num = 4;
console.log(num);

num = 5;
console.log(num);

letは再宣言不可能な変数

JavaScriptでConstとletとvarの違いをミニマムで説明してみる#83f22948715a

let num = 4;
console.log(num);

num = 5;
console.log(num);

letは再宣言不可能な変数

JavaScriptでConstとletとvarの違いをミニマムで説明してみる#816127acd7c9

let num = 4;
console.log(num);

let num = 5;
console.log(num);

letは再宣言不可能な変数

JavaScriptでConstとletとvarの違いをミニマムで説明してみる#18d699cdb144

var num = 4;
console.log(num);

var num = 5;
console.log(num);

varは再宣言可能な変数

JavaScriptでConstとletとvarの違いをミニマムで説明してみる#26703e102675

// JS で完結させる場合: data-id を読んで fetch で送る
document.querySelectorAll(".row-btn").forEach(btn => {
  btn.addEventListener("click", async () => {
    const id = btn.dataset.id;            // e.RowIndex の代わりに data-id
    await fetch(`/api/select/${id}`, { method: "POST" });

構造差3: e.RowIndex に相当するものをどう受け取るか

WinForms の DataGridView CellClick に慣れた業務SEが ASP.NET Razor の onclick で戸惑う3つの構造差未収録#e7d4f10828bf