codetaizen.com

プログラミング大全

読むだけじゃない。動かして、比べて、理解する。

公式の仕様を一次情報にして組み直した解説と、ブラウザの中だけで完結する実行環境と、実行の過程が見える図解を、ひとつのページにまとめます。

  • 掲載コードは実行して検証
  • 一次情報は公式仕様
  • サーバーで実行しない
playground.js
出力書き換えて実行できます
Ctrl+Enter でも実行JS · UTF-8
[ 2, 4, 6 ] [ 1, 2, 3 ]

このコードは書き換えて実行できますサーバーには送られません。

01ほかの解説サイトと何が違うのか

01検証

載っているコードは、実際に動かして確かめてある

掲載しているコード例と、その出力を、公開前に読み手が押したときに動くのと同じもので実行して突き合わせます。1文字でも違えば公開されません。「たぶんこう動く」載せません

02実行

その場で動かせる。しかも安全に

書いたコードはサーバーへ送らずブラウザの中の隔離された領域だけで動きます。サイトのログイン情報にも、あなたの環境にも触れません

03可視化

実行の過程が見える

1行ずつ進めながら、変数参照・呼び出しスタック・出力の変化を追えます。ブラウザで動かせない言語は、本物の処理系で記録した実行過程を再生します。

04横断

同じ処理を、言語をまたいで比べられる

「文字列を数値に変換する」を8言語で並べ、失敗したときの挙動の違いまで比較します。表で終わらせません

02あなたのコードは、どこで動くのか

「安全です」と書くだけにしません。何がどう遮られているのかを示します。

メインページorigin: codetaizen.comセッション学習の記録はここにある
sandbox iframeorigin: nullsandbox="allow-scripts"
allow-same-origin は付けない
Workerここで、あなたのコードが動く無限ループterminate()確実に止められる
利用者のコードは、二重に隔離された内側でだけ実行されます。メインページの情報には、ブラウザの仕組みとして到達できません。

2026-09-06 本番で実測

隔離された実行環境から何ができるかの実測結果
試したこと結果
window.origin "null"
document.cookie SecurityError
localStorage SecurityError
fetch('/ja/') TypeError
Worker の生成 動く(止められる)

実行時間は3秒で打ち切り、出力は上限を超えたところで止めます。「リセット」を押すと実行環境ごと作り直します

03対応する言語・技術

全部を同時に薄く作りません1言語ずつ、作り切ってから次へ進みます。

  • JavaScript読む →
  • SQLWave 2
  • TypeScriptWave 2
  • HTMLWave 3
  • CSSWave 3
  • PythonWave 3
  • PHPWave 3
  • JavaWave 4
  • C#Wave 4
  • GoWave 4
  • RubyWave 4
  • jQueryWave 4
このあと、フレームワーク編(React / Next.js / Laravel / Spring Boot など)へ広げます。第二弾でも品質の基準は変えません。