💻 TAG
エンジニア。
ネットワーク・基数変換・タイムスタンプ・LLM・SES など、エンジニアの日常ツール。
サーバーログのタイムスタンプ、CIDR表記、2進⇔16進、LLMのコンテキスト窓・トークン数、SES契約の精算──エンジニアが毎日ググる「永遠の友」を1ヶ所に集約。
ネットワークアドレスを整える
IPv4 + CIDR表記からネットワーク・マスク・ホスト数・プライベート判定を一発計算するエンジニア向けツール。
開くサブネット設計を整える
CIDRとマスク・ワイルドカード・ホスト数の早見表に加え、1ブロックを必要ホスト数のリストからVLSMで自動分割し各サブネットの範囲まで表示。全てブラウザ内計算。
開くIPアドレスを整える
IPv4を2進・16進・32bit整数に相互変換し、プライベート/ループバック/CGNAT/マルチキャスト/グローバル等の種別をブラウザ内で判定する送信ゼロのツール。
開くping・tracerouteを整える
架空の経路(自宅→プロバイダ→他社接続点→データセンター→サーバー)で traceroute を走らせるアニメ。TTL を 1 から増やし、TTL が 0 になったルーターが ICMP Time Exceeded(Type 11)を返すしくみと、宛先での Echo Reply(Type 0)・Port Unreachable(Type 3)の違い(Windows tracert は ICMP、Linux は UDP)を見られる。* * * や途中のホップだけ遅い出力は問題とは限らず、最後まで遅いのが問題という読み方をクイズで練習できる。ping の TTL から初期値(64・128・255)と通ったルーター数、損失率を見積もる計算と、ICMP の主な Type の表つき。
開くIPv6を整える
IPv6アドレスを完全展開⇔短縮表記(RFC5952)で相互変換し、ネットワーク部/インターフェースIDの色分けと種別判定を行う送信ゼロのツール。
開くMACアドレスを整える
MACアドレスを4表記(コロン/ハイフン/Cisco/区切りなし)・大小に相互変換し、I/G・U/Lビットで種別判定、OUIと固有部を色分け。送信ゼロ。
開く通信の階層を整える
OSI参照モデルの7層(物理〜アプリ)とTCP/IPモデルの4層を図解。カプセル化のしくみ、各層の役割・代表プロトコル・PDU名、両モデルの対応関係を初心者向けに解説。
開くネットワークの全体図を整える
ネットワーク関連ツールが全体のどこを扱うかを示す全体図。端末・LAN・出入口のルーター・インターネット・サーバー・データセンター・運用監視の7つの場所に分け、図の部品を押すと担当ツールと OSI の層が出る。ブラウザで URL を打ってからページが出るまでを11段で再生する「通信の旅」、初心者向けの学ぶ順番つき。各ネットワークツールのページにも「全体図のここ」が自動で出る。送信ゼロ。
開くネットワークの略語を整える
ネットワークの略語225語を、正式名(頭文字を太字)・読み方・日本語のひとこと・ネットワーク全体図での場所・OSI の層・CCNA の範囲・確かめるツールへのリンクつきで引ける略語集。略語・読み・日本語で検索でき、場所・CCNA・種類で絞り込める。同じ略語で意味が違う語と、似ていて混ざる語は台帳から比べる箱を自動生成。各ネットワークツールのページにも、そのページに出てくる略語が出る。送信ゼロ。
開くTCP/UDPを整える
TCPの3ウェイハンドシェイク(SYN→SYN/ACK→ACK)と、TCP(確実・順序・再送/Web・メール)とUDP(速い・取りこぼし許容/通話・ゲーム・DNS)の違いを図解。送信ゼロ。
開くパケットキャプチャを整える
Wireshark 風の画面(パケット一覧・層ごとの詳細ツリー・16進ダンプ)をブラウザ内で再現するツール。Web ページを開く(ARP→DNS→TCP 3ウェイハンドシェイク→TLS→FIN)、ping と TTL、DHCP、NAT の書き換え(LAN 側と WAN 側)、パケットロスと再送・重複ACK、暗号化なし HTTP の丸見えを、実際のバイト列とチェックサムで組み立てて再生し、各パケットに素人向けの説明を付ける。.pcap への保存も可能。自分の .pcap / .pcapng(最大50MB・先頭5,000パケット)を読み込んで Ethernet・VLAN・ARP・IPv4/IPv6・ICMP・TCP・UDP・DNS・DHCP・HTTP・TLS(SNI) を解析し、Wireshark 風の表示フィルタで絞り込める。ファイルは送信しない。
開くHTTPSのしくみを整える
HTTPSの鍵マークの正体=TLSハンドシェイクを図解。ブラウザとサーバが証明書をやり取り・認証局で検証し共通鍵で暗号化通信を始める流れ、httpとの違いを初心者向けに解説。
開くNATを整える
家のルーターのNAT(NAPT)を図解。プライベートIPとグローバルIPの変換、ポート番号で複数端末を1つのIPに同居させる仕組み、IPv4枯渇・ポート開放・二重NATを解説。
開くIPsec VPNを整える
インターネット越しに安全な専用トンネルを作る IPsec VPN を、手を動かして理解するツール。拠点間(サイト間)VPN とリモートアクセス VPN の図を切り替え、トンネルモード/トランスポートモードと ESP/AH の組み合わせを選ぶと、元のパケットのどの部分が見えるか・暗号化されるかを色つきの積み木で表示し、足されるバイト数の目安と NAT との相性(AH は NAT をまたげず、ESP は NAT-T を使う)も示す。IKE のフェーズ1・2(IKEv1 の 6+3 通、IKEv2 の 4 通)をステップ再生で追える。IPsec と SSL/TLS VPN の比較、CCNA 200-301 v1.1 の範囲の要点つき。すべてブラウザ内で動き送信ゼロ。
開くHTTPメソッド・ヘッダーを整える
HTTPメソッド7種の意味・冪等性・安全性・ボディ有無を表で、主要ヘッダー24個(Host・Authorization・Set-Cookie・Cache-Control・CSP等)を検索で引ける早見。送信ゼロ。
開くSDN・ネットワーク自動化を整える
CCNA 200-301 v1.1 の第6分野(自動化とプログラマビリティ)を手を動かして学ぶツール。従来の機器ごとの設定とコントローラ型 SDN の違いを図で切り替え、コントロールプレーンとデータプレーン、ノースバウンド/サウスバウンド API、アンダーレイ・オーバーレイ・ファブリックを整理する。10台に同じ VLAN を足す作業を手作業(打ち間違い・保存忘れが起きる)と台本の自動実行(冪等)で比べるアニメ、架空コントローラの機器一覧を GET/POST/PUT/PATCH/DELETE で操作する疑似 REST API、架空機器の JSON 応答を読むクイズ、Ansible と Terraform の比較、生成 AI と予測 AI の仕分けを備える。すべてブラウザ内で動き送信ゼロ。
開くHTTPステータスコードを整える
主要なHTTPステータスコードを番号や語で検索できる早見表。1xx〜5xxをクラス別に色分けし、各コードの意味とよくある原因・対処を日本語で示す。送信ゼロ。
開くポート番号を整える
よく使う TCP/UDP ポート番号を番号・サービス名・キーワードで即時検索できる早見表。22 SSH/80 HTTP/443 HTTPS など実務頻出を収録し、番号区分も解説。送信ゼロ。
開くDNSレコードの種類を整える
DNS主要レコード(A/AAAA/CNAME/MX/TXT/NS/SOA/PTR/SRV/CAA)の意味・値の例・ハマりどころの早見表。名前解決の流れも図解。実問い合わせはせず読み方に徹する送信ゼロ。
開くブラウザを整える
主要ブラウザ7種の開発元・レンダリングエンジン・JSエンジンの早見表と、見た目は7種類でも中身はBlink/WebKit/Geckoの3系統という図解、URL入力からページが映るまでの流れの解説。送信ゼロ。
開く基数変換を整える
2/8/10/16進の相互変換、ビット演算、2の補数(8/16/32/64bit)に対応した基数変換ツール。
開くGPIO を整える
Raspberry Pi 40ピンGPIOのピン配列を電源・GND・I2C・SPI・UARTで色分け表示し、各ピンの役割・BCM番号・3.3V注意点を解説する学習用ツール。
開くハッシュを整える
テキストやファイルの SHA-256/SHA-1/SHA-384/SHA-512/MD5 をブラウザ内で計算する送信ゼロのツール。ファイルの SHA-256 照合で改ざん検知もできる。
開く2段階認証(TOTP)を整える
2段階認証の方式(SMS/認証アプリTOTP/パスキー)を比較し、Base32秘密鍵から30秒ごとの6桁TOTPをブラウザ内で生成。秘密鍵はサーバに送らずWeb Cryptoで計算。RFC6238準拠。
開くパスキーの仕組みを整える
パスキー(WebAuthn)の仕組みを図解し、生体認証で実際にパスキーを作成・ログイン体験できるツール。秘密鍵が端末から出ない・フィッシングに強い理由を、自分の操作で確認できる。送信ゼロ・登録不要。
開くタイムスタンプを整える
Unix epoch(秒/ms/μs/ns 自動判定)⇔ISO8601⇔JST/UTC を同時表示。サーバーログ・API・SQL確認用。
開く時差を整える
東京を基準に世界20都市の現在時刻をリアルタイム表示するワールドクロック。サマータイム自動対応、会議プランナー付き。
開くSES精算を整える
SES契約の月額×稼働時間×精算方式(中割り/上下割/上割/下割)で当月精算額を即計算するエンジニア契約ツール。
開くSQL を整える(Playground)
ブラウザ内 SQLite で CRUD(SELECT/INSERT/UPDATE/DELETE)と JOIN を体験できる SQL 練習用 Playground。サンプル DB 付き、データ送信なし。
開くPostgreSQL を整える(解説・練習場)
PostgreSQL の解説ページ。概要(1986年の POSTGRES から・PostgreSQL License)、日本での使われ方、Amazon RDS・Aurora・Cloud SQL・Supabase などのクラウドサービス、OSS-DB 技術者認定。6つのお題(表を作ってデータを入れる・条件で絞り込む・グループごとに集計・2つの表を結びつける・2ページ目を取る・あれば更新/無ければ追加)・出力当てクイズ4問(7 / 2 が 3・NULL の扱いなど)・よくあるエラー4件。結果とエラーのメッセージは PGlite 0.5.11(PostgreSQL 18.6)で照合。練習場は同じ PGlite を Web Worker で動かし、5秒で打ち切り。処理系はサイト内から配信(約16MB)・外部通信なし。送信ゼロ。
開くMySQL を整える(解説)
MySQL の解説ページ。概要(1995年・MySQL AB・GPL と商用のデュアルライセンス)、日本での使われ方(LAMP・WordPress など)、Amazon RDS・Aurora・Cloud SQL などのクラウドサービス、Oracle の MySQL 8.0 資格。6つのお題(表を作ってデータを入れる・条件で絞り込む・グループごとに集計・2つの表を結びつける・2ページ目を取る・あれば更新/無ければ追加)・出力当てクイズ4問(7 / 2 が 3.5000・大文字と小文字を同じとみなす比較・|| が OR になるなど)・よくあるエラー4件(1064・1146・1062・1055)。結果とメッセージは MySQL 8.0.46 で照合。ブラウザでの実行はなし(解説のみ)。送信ゼロ。
開くDuckDB を整える(解説・練習場)
DuckDB の解説ページ。概要(2019年・CWI・MIT ライセンス・組み込み型の分析用データベース)、日本での使われ方(Python や R でのデータ分析・CSV や Parquet の集計)、MotherDuck。6つのお題(表を作ってデータを入れる・条件で絞り込む・グループごとに集計・2つの表を結びつける・2ページ目を取る・あれば更新/無ければ追加)・出力当てクイズ4問(7 / 2 が 3.5・// が整数の割り算・リストが1始まりなど)・よくあるエラー4件。結果とメッセージは DuckDB-WASM 1.32.0(DuckDB v1.4.3)で照合。練習場は同じ DuckDB-WASM を Worker で動かし、手元の CSV を registerFileText で渡して read_csv で読める。処理系はサイト内から配信・外部通信なし。送信ゼロ。
開くMongoDB を整える(解説・練習場)
MongoDB の解説ページ。概要(2009年・10gen/MongoDB Inc.・SSPL・ドキュメント指向)、日本での使われ方、MongoDB Atlas と互換サービス(Amazon DocumentDB・Azure Cosmos DB for MongoDB)、MongoDB の認定資格。6つのお題(表を作ってデータを入れる・条件で絞り込む・グループごとに集計・2つの表を結びつける・2ページ目を取る・あれば更新/無ければ追加)を find・$group・$lookup・upsert で。出力当てクイズ4問・よくあるエラー4件(E11000 など)。練習場は mingo 7.2.5 による再現で、MongoDB 本体では照合していない(表示は mongosh に寄せた形)。送信ゼロ。
開くRedis を整える(解説・練習場)
Redis の解説ページ。概要(2009年・サルヴァトーレ・サンフィリッポ・インメモリのキーバリューストア・BSD から RSALv2/SSPL、Redis 8 で AGPLv3 も)、Valkey、日本での使われ方(キャッシュ・セッション・ランキング・回数制限)、ElastiCache・Memorystore などのクラウドサービス。6つのお題(表を作ってデータを入れる・条件で絞り込む・グループごとに集計・2つの表を結びつける・2ページ目を取る・あれば更新/無ければ追加)を ZRANGEBYSCORE・HINCRBY・HSET などで。出力当てクイズ4問・よくあるエラー4件(WRONGTYPE など)。練習場は自前の再現(文字列・リスト・ハッシュ・集合・ソート済み集合・有効期限)で、表示は Redis 7.0.15 の redis-cli と照合。送信ゼロ。
開くデータベースを整える(比較)
データベース5つ(PostgreSQL・MySQL・DuckDB・MongoDB・Redis)と SQLite を、種類・誕生・ライセンス・練習場(本物/再現/なし)で比べる表と、同じお題(ページ送り・upsert・集計)のコードの並べ書き。各解説ページと /sql-playground/・/sqlalchemy/・/sqli-demo/ への入口。静的ページ・送信ゼロ。
開くPython を整える(Playground)
ブラウザ内 Python (Pyodide WASM) で変数・データ型・関数・クラス・継承を体験できる Python 練習用 Playground。実行後の変数一覧と参照共有を可視化、データ送信なし。
開くトークン数を整える
GPT-4o・Claude・Gemini等7モデルでの推定トークン数を一括表示。コンテキスト制限とAPI料金見積もりの前提値に。
開くプロンプトの書き方を整える
生成AIへの指示文を貼ると、目的・役割・前提・入力・制約・出力の形・例の7つの要素が書かれているかを、手がかりの語で確かめる無料ツール。「なるべく」「いい感じに」など数や例で言い換えられる言葉の位置、文字数と推定トークン数も表示します。枠に書き込んで1本の指示文に組み立てる機能、10の仕事の場面の書き換え例、10問の演習、従来の不可視文字・空白の掃除もあります。指示文の良し悪しやAIの答えの良し悪しは判定せず、入力は端末内だけで処理します。
開くローカルLLMを整える
自分のMac/PCでLlama・Qwen・Gemma等が動くかを判定。量子化・コンテキスト長を切替えてメモリ要件を算出。
開く埋め込みサイズを整える
文章をAI用の数字(ベクトル)に変える「埋め込み」の容量とコストを、OpenAI・Cohere・Voyage・BGEなどモデル別に比較。AIに社内文書を検索させる仕組み(RAG)の設計に。
開くコンテキスト窓を整える
Claude 5世代 1M・GPT-6 Astra・GPT-5.6系 1.05M・Gemini 3系 1M・Llama 4 Scout 10M。主要 LLM 25モデルのコンテキスト窓を比較。
開く不可視文字を取り除く
ゼロ幅スペース・BOM・NBSPなど目に見えない文字を検出し、Excel/SQLでの不一致原因を取り除く。
開く色コードを整える
色コードをHEX・RGB・HSLで相互変換し、文字色と背景色のコントラスト比をWCAG基準(AA/AAA)で判定。透明度・3桁HEX対応、明度や補色も表示。すべてブラウザ内で完結。
開くQRコードを整える
テキストやURL、Wi-Fi情報などからQRコードを生成。誤り訂正・サイズ・余白を調整しPNG/SVGで保存。生成は自前実装で端末内完結、送信ゼロ。
開くYouTubeリンクを整える
YouTube URLから標準/短縮/タイムスタンプ付きURL・埋め込みiframeコード・サムネイルURL4種を一括生成する変換機能と、概要欄チャプター行の公式表示ルール(0:00始まり・3個以上・昇順・各10秒以上)を機械検証する機能を持つツール。埋め込みはyoutube-nocookie.com既定。送信ゼロ(YouTubeへの通信なし)。
開くダミーテキストを整える
レイアウト確認用のダミー文を生成。Lorem ipsum・和文・カタカナの3種、段落/文/文字数で量指定、pタグ囲み・箇条書き対応。すべてブラウザ内・送信ゼロ。
開くJSONを整える
JSONの整形・圧縮・構文チェック・修復を行うブラウザ内ツール。エラー位置と原因を日本語で表示し、スマート引用符・全角スペース・末尾カンマ・コメント・シングルクォートなどコピペ起因の破損をワンクリックで修復。数値は生文字列のまま保持し15桁超のIDも丸めない。送信ゼロ。
開くテキスト比較を整える
2つのテキストの差分を行単位+文字単位で色分け表示するブラウザ内ツール。空白・大文字小文字・全角半角を無視するオプション付き。日本語向けに単語分割ではなく文字単位の差分を採用。入力はサーバーへ送信しない(送信ゼロ)。
開くBDDを整える
Given/When/ThenをGherkin書式(英語/日本語キーワード切替)に整形し、1シナリオ1振る舞いか・結果は検証可能か・実装語混入がないかを機械的にチェックするBDD学習ツール。提唱者Dan Northの一般的な要約とTDDとの関係(通説)を解説。送信ゼロ。
開くDDDを整える
DDD(ドメイン駆動設計)の境界づけられたコンテキストとユビキタス言語を、通販の注文/在庫/配送/請求という自作例で図解し、用語・意味・コンテキスト・NGな言い換えをMarkdown表にまとめる用語表メーカーを備えたツール。戦略的設計と戦術的設計の2階層も整理。送信ゼロ。
開くMSAを整える
機能チップをモノリス1箱⇔最大6サービスに振り分ける分割シミュレーター。サービス数・通信線・独立デプロイ単位・障害の影響範囲を決定論で算出しSVG図で可視化。「この箱が落ちたら?」の障害シミュレーションつき。モノリス/モジュラーモノリス/マイクロサービスの向き不向きを一般的傾向として整理。送信ゼロ。
開くTDDを整える
TDD(テスト駆動開発)のRed→Green→Refactorサイクルを円環図解と「次へ」ボタンの1周体験で学べるツール。テストファースト手順チェッカーは、チェックした順番から順序違反を検出する決定論ロジックを搭載。提唱者Kent Beckの一般的な要約、BDDとの関係(通説)を解説。送信ゼロ。
開く開発プロセスを整える
ウォーターフォールとアジャイル(スクラム)の違い、V字モデルの設計⇔テスト対応、スクラムの1サイクルと役割、主要用語をブラウザ内で整理する学習ツール。ITパスポート・基本情報技術者試験対応。
開く開発工程を整える
要件定義・基本設計・詳細設計・製造・単体テスト・結合テスト・総合テスト・受入テストの8工程をV字モデルで図解し、開始工程・終了工程を選ぶと範囲の上流/中流/下流と対応するテスト工程を機械的に説明するツール。工程略語(RD/BD/DD/PG/UT/IT/ST/UAT)と役割略語(PM/PL/SE/PG/PMO/BP)のミニ辞典、「IT」の二重の意味への注意コラムを含む。ウォーターフォール前提と明記しアジャイルとの違いも注記。送信ゼロ。
開く正規表現テスターを整える
正規表現をブラウザ内で即テスト。マッチをハイライトし、キャプチャグループ・マッチ数・置換プレビューを表示。よく使うパターン集つき。ECMAScript準拠・送信ゼロ。
開くケース変換(命名)を整える
識別子の命名規則をまとめて相互変換するツール。語やフレーズ、既存のcamel/snakeを賢く分割し、camelCase・snake_case・kebab-case・PascalCase・定数など9形式へ即変換。送信ゼロ。
開くMarkdownを整える
Markdownをブラウザ内でライブプレビューし安全なHTMLを出力。目次生成・文字数カウント付き。生HTML/scriptを通さずXSSを防ぐ自前パーサ。送信ゼロ。
開くBase64・URLエンコードを整える
文字列のBase64・Base64URL・URLエンコード/デコードをブラウザ内で双方向変換。日本語・絵文字もUTF-8で文字化けせず、バイト数表示と不正入力のエラー検出つき。暗号化ではなく可逆エンコード。送信ゼロ。
開くJWTをデコードを整える
JWTを貼るとheader/payloadを整形JSONで表示し、iat/exp/nbfを日本時間に変換・期限切れ判定。署名は検証せず、トークンは送信ゼロでブラウザ内のみ処理。
開くUUID・ULIDを整える
UUID v4・ULID をブラウザ内で生成(1〜100個)・整形・検証するツール。UUIDはバージョン/バリアント判定、ULIDは埋め込み時刻を復元。乱数は暗号乱数、送信ゼロ。
開くcron式を整える
cron式(crontab)を日本語に翻訳し次回実行時刻を端末時計基準で一覧表示。*,-/ステップ・曜日0-7・JAN/MON対応、日と曜の両方指定はOR。送信ゼロ。
開くGitコマンドを整える
Gitコマンドが作業ツリー・ステージ・ローカルリポジトリ・リモートリポジトリの4箇所のどこからどこへデータを動かすかをアニメ図解し、fetch/pullの違いやreset/revert/checkoutの正確な違いを解説する学習ツール。20コマンドの一覧表とコピー可能な使用例つき。送信ゼロ。
開くgrep・正規表現を整える
grepをオプション無しでしか使えない人向けの練習場。サンプルテキスト3種にパターンを打つとマッチが即時ハイライトされ、-i/-v/-n/-w/-c/-Eのトグルで結果とコマンド表示が連動。正規表現チートシートとBRE/EREのエスケープ差の対比、5問のミニ演習も収録。LPIC/LinuC対応。送信ゼロ。
開くパーミッション(chmod)を整える
chmodのrwxチェックボックス・8進数・記号表記を3方向相互変換し、ls -l読み解き・umask計算・setuid/setgid/sticky解説まで行うLinux権限学習ツール。送信ゼロ。
開くtar・圧縮解凍コマンドを整える
「やりたいこと」を選ぶとtar/gunzip/zipの解凍・圧縮コマンドを逆引き生成し、各フラグの意味をホバーで表示するLPIC/LinuC向け体験ツール。zip対応表と覚え方語呂つき。送信ゼロ。
開くパイプとリダイレクトを整える
パイプ(|)とリダイレクト(>, >>, 2>, 2>&1, <)を体験するツール。4種のプリセットコマンド列(cat|grep|wc、ps aux|grep、sort|uniq -c|sort -rn|head、grep二重)をステップ再生し、各段の入出力行数と中身を可視化。リダイレクトは同じコマンドに>/>>/2>/2>&1/<を付け替えると、stdout(1)・stderr(2)・stdin(0)の行き先(画面/ファイル)が変わる図で確認でき、2>&1の順序の罠(> file 2>&1 と 2>&1 > file の違い)を明示。stdin/stdout/stderrの3本線図をFD番号つきで常設。LPIC/LinuC受験者・|や>を雰囲気で使っている人向け。すべてブラウザ内計算、送信ゼロ。
開くLinuxディレクトリ構成(FHS)を整える
Linuxファイルシステム階層標準(FHS)の主要ディレクトリをツリー表示し、クリックで役割・中身・覚え方・受験メモを見られる学習ツール。逆引きクイック(設定ファイル/ログ/一時ファイル/ユーザーの家/自分で入れたソフトはどこか)とディレクトリ比較(bin/sbin、usr/usr-local、proc/sys、tmp/var-tmp)を搭載。すべてブラウザ内処理で送信ゼロ。
開くプロセスとシグナルを整える
プロセスにTERM/KILLシグナルを送り分けて挙動の違いを可視化し、ジョブ制御(fg/bg/Ctrl+Z)とシグナル早見表・PPID親子関係を学べるLPIC/LinuC向け体験ツール。送信ゼロ。
開くUS・JISキーボード配列を整える
JIS/US配列の物理キー位置ごとの出力対応表(Windows/Linux向けJIS 106/109・US ANSI 104が根拠)をもとに、打ちたい文字から押すべきキーを逆引きし、押したキーの結果も確認できるツール。配列図とsetxkbmap/localectl/loadkeysの直し方コマンドつき。Mac JISは対象外。送信ゼロ。
開くVLANを整える
スイッチのポートにVLANを割り当てて同一VLANのみ通信できることをクリック体験。トランクポートと802.1Qタグ、VLANを分ける理由とありがち失敗も解説。CCNA Network Access対応。送信ゼロ。
開くデータセンターのネットワーク(VXLAN・スパイン/リーフ)を整える
データセンターのネットワークを手を動かして学ぶツール。3層(コア・ディストリビューション・アクセス)、2層(コラプストコア)、スパイン/リーフの図を切り替え、2台のサーバーを選ぶと経路が光り、通るスイッチの数を表示する(スパイン/リーフは別リーフ間が必ず3台)。VLAN の上限 4,094 と VXLAN の VNI(24ビット、16,777,216)の比較、VXLAN が元のフレームを UDP 4789 で包み 50 バイト増えること、アンダーレイの MTU の計算も扱う。CCNA の範囲はトポロジー名で、VXLAN は範囲外と明記。入力は端末内で処理し送信しない。
開くCDP・LLDPを整える
CDP(Cisco 独自)と LLDP(IEEE 802.1AB)で、ネットワーク機器が隣を見つけるしくみを確かめるツール。ルーター・スイッチ2台・IP電話・PC2台の小さな構成図で、打つ機器と show cdp neighbors / show lldp neighbors を切り替え、直接つながった隣だけが表に出て2つ先は見えないこと、PC など話さない機器は出ないこと、機器ごとにプロトコルを止めると表から消えることを確認できる。detail で IP アドレスや機種が筒抜けになる様子、CDP(60秒・保持180秒・既定有効)と LLDP(30秒・保持120秒・Cisco では既定無効が多い)の比較表、no cdp run・no cdp enable・lldp run などの設定、外向きのポートで止める理由、電話ポートの注意を載せる。
開くスパニングツリーを整える
スパニングツリー(STP)をブラウザで体験。ループの怖さ、最小BIDによるルートブリッジ選出、ブロックポートが決まる過程をプライオリティ変更で可視化。CCNAのNetwork Access範囲。送信ゼロ。
開くEtherChannelを整える
EtherChannel(リンクアグリゲーション)を手を動かして学ぶツール。両端の channel-group モード(LACP の active/passive、PAgP の desirable/auto、on)の組み合わせで束になるかを全組み合わせの表で判定し、送信元・宛先の MAC や IP からのハッシュで通信が何本目の線に乗るかを8つの通信で見せ、1つの通信は1本の速さを超えないことを示す。束ねるポートの速度・duplex・VLAN の不一致も指摘する。CCNA 200-301 の範囲。入力は端末内で処理し送信しない。
開くルーティングを整える
宛先IPからルーティングテーブルの最長一致を可視化し、AD値・スタティック/動的ルーティングの違いを解説するCCNA向け体験ツール。IP Connectivity(配点最大領域)の基礎。送信ゼロ。
開くCisco IOSコマンドを整える
Cisco IOS/IOS XE のコマンドを練習するツール。ユーザー EXEC(>)、特権 EXEC(#)、グローバル設定、インターフェース設定、VLAN 設定のモードの移り方を図で示し、プロンプトの形から今のモードを当てるクイズを備える。ブラウザ内の架空の L3 スイッチに enable・configure terminal・interface・ip address・no shutdown・show running-config・show ip interface brief・show vlan brief・show ip route・show mac address-table・copy running-config startup-config を打てて、打った設定が show に反映される。省略形と ? にも対応。running-config と startup-config の違い、reload で未保存の設定が消える様子、用途別の早見表を載せる。通信は一切しない。
開くOSPFを整える
OSPFv2(単一エリア)を手を動かして理解するツール。ルーターID(手動→ループバック最大IP→物理最大IP)の判定、DR/BDR選出(優先度→ルーターID、優先度0は対象外、後から来た強いルーターは入れ替わらない、DR停止でBDR昇格)、コスト=参照帯域÷帯域(既定100Mbps・切り捨て・最小1)と auto-cost reference-bandwidth、5台の網の最短経路と等コスト負荷分散、隣接になる条件(エリアID・Hello/Dead・サブネット・認証・MTU)とDown→Fullの状態遷移アニメ。すべてブラウザ内で計算し送信ゼロ。
開くBGPを整える
BGP(CCNA範囲外・CCNP範囲)の考え方を素人向けに体験するツール。5つのASの図で、出発ASから宛先への道がAS_PATHの短い方に決まること、リンクを切ると迂回すること、あるASが誤って宛先を広告すると(より細かいプレフィックスの場合は最長一致で)通信が誤った先へ流れる様子を確認できる。経路選択の順番(Weight・LOCAL_PREF・AS_PATH・Origin・MED…)の早見と2経路の比較、eBGPとiBGP、TCP 179番の解説つき。すべてブラウザ内で計算し送信ゼロ。
開くHSRP(予備のゲートウェイ)を整える
HSRP(Cisco独自のFHRP)を手を動かして理解するツール。最大3台のルーターの優先度(既定100)・実IP・プリエンプト(既定で無効)を変え、Active/Standbyが優先度→IPの大きい順で決まる様子、Activeを落としたときのStandbyの引き継ぎ(Hello 3秒・Hold 10秒)、復帰時にプリエンプトの有無で戻るかどうか、HSRPv1/v2の仮想MAC(0000.0c07.acXX/0000.0c9f.fXXX)を確認できる。HSRP・VRRP・GLBPの違いの早見表とCCNAの要点つき。すべてブラウザ内で計算し送信ゼロ。
開くDHCPを整える
DHCPのDORA(Discover/Offer/Request/Ack)をステップ再生で可視化。リース更新のタイミング計算、APIPA=取得失敗のサイン、配布される4点セットを解説。CCNAのIP Services範囲。送信ゼロ。
開くNTP・Syslog・SNMPを整える
機器運用の三点セットを学ぶツール。NTP は stratum の階層図と自分の stratum の計算、SW1 の時計がずれるとログの原因と結果の順番が逆に並ぶ様子をスライダーで確認できる。Syslog は重要度 0 emergencies から 7 debugging の8段階と覚え方、logging trap は設定値以下が送られる計算、Cisco のログ1行(%LINK-3-UPDOWN など)を facility・重要度・内容に分解する機能、時刻の頭の * や . の意味を扱う。SNMP はマネージャとエージェント、Get・Set・Trap の向きとポート(161・162)、v1・v2c・v3 の違いで認証と暗号化があるのは v3 だけであること、v3 の3段階を載せる。通信はしない。
開くL2セキュリティ(ポートセキュリティ・DAI)を整える
L2 セキュリティを手を動かして学ぶツール。ポートセキュリティでは最大 MAC 数(既定1)・sticky・違反時の動作(protect・restrict・shutdown。既定は shutdown で err-disabled)を選び、知らない PC をつないだときの転送・ログ・違反カウンタ・ポート停止の違いをボタンで確認し、復旧(shutdown→no shutdown)も試せる。DHCP スヌーピングは信頼/非信頼ポートと偽サーバーの OFFER を止める要点、DAI は ARP スプーフィングを束縛表と照らして捨てる流れを判定で示す。CCNA 200-301 の範囲。入力は端末内で処理し送信しない。
開くACLを整える
ACLの評価順(上から・最初の一致・暗黙のdeny)をテストパケットで可視化。順番の入れ替え体験、サブネットマスク⇄ワイルドカード変換、自分を締め出す事故等の失敗例つき。送信ゼロ。
開く帯域・転送時間を整える
データ量と回線速度から転送時間を計算し、必要な帯域・送れるデータ量も逆算。bit↔byteの8倍と効率70〜90%の実効値まで示す送信ゼロのツール。
開くQoSを整える
音声・ビデオ・ファイル転送が同じ回線に届く状況を、ふつうの順番待ち(FIFO)と優先キュー(LLQ)で並べてアニメ再生し、音声の平均・最大待ち時間と捨てられた数を比べる。契約速度を超えた分を捨てるポリシングと待たせるシェーピングを、バースト許容量のスライダーつきグラフで比較。DSCP(EF=46、AF11〜AF43 の10進値、CS0〜CS7)を数字や名前で入れると、2進数・ToS バイト・IP Precedence を出す。分類→マーキング→キューイング→WRED→ポリシング/シェーピングの流れと、IP 電話での信頼境界も解説。
開くMTU・MSSを整える
回線の MTU と、PPPoE(−8)・GRE(−24)・IPsec(目安 −60)・VXLAN(−50)の包み紙を選ぶと、使える MTU と IPv4/IPv6 の TCP MSS(1460・1440 など)を棒グラフで示す。IPv4 パケットの大きさと MTU から、フラグメントの個数・8 バイト単位のオフセット・MF ビットを表にする。DF ビット付き ping(Windows の ping -f -l、Linux の ping -M do -s)を使った経路 MTU の探し方と、ICMP が止められて PMTUD が働かず VPN で一部のサイトだけ開かない原因を再現できる。CCNA の範囲外寄りだが実務で頻出。
開くCDNを整える
CDN(Content Delivery Network)のしくみを体感する学習ツール。世界12都市から東京オリジン直行と最寄エッジ(東京・シンガポール・フランクフルト・ニューヨーク・サンパウロ)配信を比較し、大円距離×光ファイバー中の光速(約20万km/s×経路係数1.4)でRTTを概算。エッジキャッシュのHIT/MISS/TTLシミュレーター、ヒット率とオリジン負荷軽減の計算、CNAMEとGeoDNS/エニーキャストによる最寄誘導の解説つき。すべてブラウザ内計算で送信ゼロ。
開く無線LANを整える
2.4GHz帯チャンネルの重なりを図解し「1・6・11」の理由を体感。帯域の使い分け・WPA3までのセキュリティ進化・ありがち失敗を解説する送信ゼロのWi-Fi基礎ツール。
開くLANケーブル・光ファイバーを整える
距離(m)・必要な速度・電源(PoE)の有無を入れると、Cat5e〜Cat8 の銅線か、マルチモード・シングルモードの光ファイバーか、対応する規格(1000BASE-T・10GBASE-SR など)と最長距離を返す。PoE(802.3af/at/bt)の機器台数から必要な合計ワットを出し、スイッチの PoE 予算を超えるか判定する。UTP カテゴリ表、ストレートとクロス、Auto-MDIX、SFP、duplex・速度の不一致や CRC エラーの症状早見も載せる。CCNA の物理層の範囲に対応。
開くXSSのしくみを整える
XSS(クロスサイトスクリプティング)を安全に体感する防御教育ツール。入力をそのままHTMLに入れた場合とエスケープした場合を2パネルで対比。scriptはsandboxで無効化され実行されません。送信ゼロ。
開くSQLインジェクションのしくみを整える
SQLインジェクションのしくみを手元のsql.jsサンドボックスDBで安全に再現する防御教育ツール。文字列連結の脆弱な実装とプレースホルダの安全な実装を同じ入力で並べて比較。送信ゼロ・実在DB非接触。
開くプロンプトインジェクションのしくみを整える
プロンプトインジェクションを外部AIなしのローカル簡易模擬で安全に体感する防御教育ツール。指示とデータを区別しないと注入文に従う様子を再現し、防御ONで拒否に切替。送信ゼロ。
開くメール認証(SPF/DKIM/DMARC)を整える
メール認証3方式の教育シミュレーター。SPF(送信サーバーのIP許可)・DKIM(電子署名の検証)・DMARC(ヘッダFromとのアライメント照合+ポリシー適用)の判定を、正規メール・単純ななりすまし・攻撃者自身のSPF・DMARC未設定・転送の5シナリオで体験。SPFレコード(a/mx/include/~all)とDMARCレコード(p/rua/adkim/aspf/pct)の構文辞書、none→quarantine→rejectの段階導入も解説。すべてブラウザ内で完結し送信ゼロ。
開くデータ量を整える
1TB(SI)はOS上で約931GiB。KB/MB/GB/TB(1000)とKiB/MiB/GiB/TiB(1024)・bit/byte(8倍)を同時相互変換。ストレージの謎を図解で解消。送信ゼロ。
開くCSVの文字化けを整える
CSVの文字化けを直すブラウザ内ツール。文字コード(UTF-8/BOM付きUTF-8/Shift_JIS/UTF-16LE/BE)を自動判定して正しく表示し、Excelで開けるBOM付きUTF-8でダウンロードできる。CSV⇄TSV・Markdown表・JSON変換、区切り文字自動判定、RFC4180対応。ファイルはアップロードされない(送信ゼロ)。
開くチェックデジットを整える
クレジットカード番号(Luhn)・マイナンバー(総務省告示 mod 11)・法人番号(mod 9・先頭桁)・ISBN-10/13・JAN-13/8 の7方式のチェックデジットを、桁ごとの重み・積・折り返し・合計・余りの内訳表つきでブラウザ内で検証するツール。テスト用番号(実在の人・カード・法人と無関係な乱数)を生成でき、入力欄の直上に本物の番号を入力しない注意書きを固定表示。1桁の誤りを必ず検出できる理由と、Luhn で隣接する9と0の入れ替えを検出できない既知の例を解説。送信ゼロ。
開くBrainf*ckを整える
Brainf*ck(1993年・Urban Müller)をブラウザ内で実行・ステップ実行(テープ先頭30マスとポインタ位置・現在命令のハイライト・再生/一時停止/1歩/速度)・テキストからのコード自動生成(前の文字との差分方式・往復同一性をテストで確認)ができる遊び場。入力命令「,」は入力なし(0)として扱う。ステップ上限で必ず停止。8命令でチューリング完全になる仕組みの解説つき。送信ゼロ。
開くBefungeを整える
Befunge-93(1993年・Chris Pressey)をブラウザ内で実行し、80×25の盤面上のポインタ位置と向き・スタックの内容をステップ再生できる遊び場。矢印「> < ^ v」で向きが変わり盤面がそのまま実行経路になる仕組みを可視化。「?」はランダムに向きが変わる。入力命令「&」「~」は入力なし(0)。ステップ上限で必ず停止。送信ゼロ。
開くOok!を整える
Ook!(Brainf*ck の各命令を Ook. / Ook? / Ook! の2語1組に置換した言語)を Brainf*ck と双方向変換し、ブラウザ内で実行できるツール。語の誤り・語数の奇数・存在しない組み合わせは文字位置つきでエラー表示。入力命令は入力なし(0)。送信ゼロ。
開くDeadfishを整える
Deadfish(i/d/s/o の4命令。値が −1 または 256 になると直ちに 0 にリセットされる)をブラウザ内で実行し、1命令ごとの値の推移を可視化するツール。数値→最短命令列の自動生成(BFS)つき。256 は作れないため生成不可の理由を表示。送信ゼロ。
開くMalbolgeを整える
Malbolge(1998年・Ben Olmstead。位置依存の命令と自己書き換えで人間には書けないよう設計された言語)の実行専用インタプリタ。仕様(esolangs.org)どおりに crazy 演算・暗号化テーブル・3進レジスタを実装し、既知の Hello World 2種(世界初のビームサーチ発見版と短縮版)が正しく出力することをテストで確認。1ステップ実行でレジスタ a/c/d を表示。送信ゼロ。
開くエソラングを整える
難解プログラミング言語(エソラング)16種を紹介する図鑑。Brainf*ck・Whitespace・JSFuck・Lazy K・Piet・Befunge・Folders・Velato・Shakespeare・Chef・Malbolge・INTERCAL を、記号系/視覚・構造系/文学・世界観系の3分類で、誕生年・作者・国・仕組み・出典(esolangs.org)とともに解説。Brainf*ck と Befunge はページ内で実行できる。送信ゼロ。
開くプログラミング言語の比較を整える
C(1972年・Dennis Ritchie)・JavaScript(1995年・Brendan Eich)・Java(1995年・James Gosling)・Python(1991年・Guido van Rossum)の4言語を、エソラング図鑑と共通の「読みにくさ」「書きにくさ」5段階の尺度と Hello World のコード例で比較する1ページ。Python の実行は既存の /python-playground/ に委ねる。静的ページ・送信ゼロ。
開くプログラミング言語の歴史を整える
41言語(Fortran 1957年〜Swift 2014年・Dart 2011年)の影響関係84本を、横が年・縦が系統(命令型・オブジェクト指向・関数型・論理型・スクリプト)の系統図で示す1ページと、言語ごとの41ページ。線は作者・公式文書・論文が明言したものだけで、Wikipedia は使っていない。言語を押すと祖先と子孫の線だけを強調。思想のテーマ18件(構造化プログラミング・ガベージコレクション・オブジェクト指向の始まり・型推論・所有権ほか)を年順に並べ、年表は検索と並べ替えができる。年は初めて公開された年に統一。出典と短い引用つき。静的ページ・送信ゼロ。
開くC言語を整える(解説・練習場)
C言語の解説ページ。概要(1972年・デニス・リッチー・静的型付け・コンパイル言語)、日本での使われ方(組み込み・車載・IoT・OS)、新人研修、資格。5つのお題(Hello World・FizzBuzz・配列の合計と平均・ファイルの書き込みと読み込み・0で割るエラーの処理)・出力当てクイズ4問・よくあるエラー4件(gcc 13.3.0 で出力とメッセージを照合)。練習場は picoc-js 1.0.12(PicoC の WASM 版・MIT)をサイト内に置いた写しから Web Worker で実行(外部通信なし)。stdin 入力欄、3秒で自動停止、NULL 参照は行と桁で停止。送信ゼロ。
開くC++ を整える(解説)
C++ の解説ページ。概要(1983年・ビャーネ・ストロヴストルップ・静的型付け)、日本での使われ方(ゲームエンジン・組み込み・画像処理・デスクトップアプリ)、新人研修、資格。5つのお題(Hello World・FizzBuzz・配列の合計と平均・ファイルの書き込みと読み込み・0で割るエラーの処理)・出力当てクイズ4問・よくあるエラー4件。出力とメッセージは g++ 13.3.0 で照合。ブラウザでの実行はなし(解説のみ)。送信ゼロ。
開くJava を整える(解説)
Java の解説ページ。概要(1995年・Sun Microsystems・静的型付け・JVM)、日本での使われ方(SIer の業務システム・金融・官公庁・Spring・Android)、新人研修、Oracle 認定 Java 資格。5つのお題(Hello World・FizzBuzz・配列の合計と平均・ファイルの書き込みと読み込み・0で割るエラーの処理)・出力当てクイズ4問(== と equals など)・よくあるエラー4件(NullPointerException など)。出力とメッセージは OpenJDK 21.0.12.1 で照合。送信ゼロ。
開くアルゴリズムを整える
アルゴリズムとデータ構造の学習ツール。ソートはバブル・選択・挿入・クイック・マージの5種類を同じデータで棒グラフにして1手ずつ再生し、比較回数と交換回数を数え、計算量(O記法の最良・平均・最悪・安定性・追加メモリ)を表で比べる。探索は線形探索と二分探索を並べて比較回数を比べ、データ数ごとの最大回数(nとlog2 n)を示す。データ構造は配列・連結リスト・スタック(LIFO)・キュー(FIFO)・二分探索木(挿入・探索・前順/中順/後順の巡回)・ハッシュテーブル(チェイニングとオープンアドレスの衝突処理)を操作して図で確かめられる。基本情報技術者試験の科目B(擬似言語のトレース)対策や新人研修の演習向け。計算はブラウザ内だけで送信しない。
開くJava Bronze を整える(試験対策)
Java Bronze(Java SE Bronze・1Z0-818-JPN・選択問題・65分・60問・合格ライン60%)の試験対策ページ。試験範囲7章のマップ、章ごとの出力当て練習問題30問(OpenJDK 17.0.21 で全問照合)、よくある勘違い、受験予定日から受けられる試験の早見。Bronze は版に依存せず配信継続。送信ゼロ。
開くJava Silver を整える(試験対策)
Java Silver SE 17(Java SE 17 Programmer I・1Z0-825-JPN・選択問題・90分・60問・合格ライン65%・2027/2/28 配信終了)の試験対策ページ。試験範囲6章のマップ(var・テキストブロック・switch 式・instanceof パターン・レコード・シールに印)、章ごとの練習問題29問(OpenJDK 17.0.21 で全問照合)、よくある勘違い、受験日の早見。SE 25 対応は範囲の発表後に更新。送信ゼロ。
開くC# を整える(解説)
C# の解説ページ。概要(2000年発表・Microsoft・静的型付け・.NET)、日本での使われ方(Windows の業務アプリ・ASP.NET・Unity)、新人研修、資格。5つのお題(Hello World・FizzBuzz・配列の合計と平均・ファイルの書き込みと読み込み・0で割るエラーの処理)・出力当てクイズ4問(構造体のコピー・?? など)・よくあるエラー4件(CS1002・CS0103・NullReferenceException など)。出力とメッセージは .NET SDK 8.0.132 で照合。送信ゼロ。
開くCOBOL を整える(解説・桁位置・PIC 句)
COBOL の解説ページ。概要(1959年・CODASYL・事務処理用・10進数の計算)、日本での使われ方(金融・保険・行政の基幹システム)、研修、資格。5つのお題(Hello World・FizzBuzz・配列の合計と平均・ファイルの書き込みと読み込み・0で割るエラーの処理)・出力当てクイズ4問(PIC 9(3) の 007・桁あふれ・切り捨て・ROUNDED)・よくあるエラー4件。桁位置の定規(1〜6一連番号・7標識・8〜11 A領域・12〜72 B領域・73以降無視の点検)と PIC 句の道具(展開・種類・バイト数・MOVE の結果を GnuCOBOL 3.1.2 の DISPLAY と一致するよう実装)。送信ゼロ。
開くVBA を整える(解説)
VBA の解説ページ。概要(Excel 5.0 から・Microsoft・Office の中で動く)、日本での使われ方(Excel の集計・帳票・定型作業の自動化)、研修、VBAエキスパート。5つのお題(Hello World・FizzBuzz・配列の合計と平均・ファイルの書き込みと読み込み・0で割るエラーの処理)・出力当てクイズ4問(\ と / の割り算・& と + など)・よくあるエラー4件(実行時エラー 9・13・1004、変数が定義されていません)。出力は Excel で実行したものではなく手で追ったもの。送信ゼロ。
開くJSFuckを整える
文字列や JavaScript コードを [ ] ( ) ! + の6文字だけの JSFuck 式(2012年・Martin Kleppe)に変換するツール。「false」「true」「undefined」「NaN」 の文字列化から文字を取り出す direct 方式・数値式の digit 方式・Function 経由の escape 方式の内訳表と、元と変換後の文字数比較を表示。「実行可能な形にする」で実行用の式にも変換できるが、ページ上では eval を使わず一切実行しない(CSP に unsafe-eval なし)。送信ゼロ。
開くWhitespaceを整える
Whitespace(2003年・Edwin Brady と Chris Morris。スペース・タブ・改行の3文字だけの言語)のブラウザ内インタプリタ。実コード⇄S/T/L 表示の切替、スタック・算術・ヒープ・フロー制御・出力の実行、命令ごとの逆アセンブル表(色分け・日本語の意味)、テキストからのコード生成(push+outchar)に対応。入力命令(readchar/readnum)は入力なしでエラー停止。ステップ上限で必ず停止。送信ゼロ。
開くCOWを整える
COW(2003年・Sean Heber)の12命令(moo/mOo/moO/mOO/Moo/MOo/MoO/MOO/OOO/MMM/OOM/oom)をブラウザ内で実行し、メモリ・ポインタ・レジスタをステップ再生できるツール。Brainfuck との対応表と、Brainfuck→COW 変換(元と変換後の出力比較)つき。送信ゼロ。
開くHQ9+を整える
HQ9+(2001年・Cliff L. Biffle)の4命令(H/Q/9/+。H・Q は小文字も可)をブラウザ内で実行し、命令ごとの出力とアキュムレータの値を表にするツール。歌詞は esolangs.org の 99 bottles of beer の形。なぜ冗談の言語と呼ばれるかの解説つき。送信ゼロ。
開く><>(Fish)を整える
><>(Fish、2009年・Harpyon)の全命令(移動・鏡・算術・文字列モード・スタック操作・複数スタック [ ]・レジスタ・g/p・入出力)をブラウザ内で実行し、盤面のポインタ・向き・スタック・レジスタをステップ再生できるツール。標準入力と初期スタックの指定、命令数上限100万歩つき。送信ゼロ。
開くShakespeareを整える
Shakespeare Programming Language(SPL・2001年・Karl Hasselström と Jon Åslund)をブラウザ内で実行し、舞台にいる人物・各人物の値とスタック・直前の問いの答え・今の台詞の日本語での意味をステップ再生できる遊び場。名詞(1か-1)と形容詞(付くごとに2倍)で数を作り、the sum of などで組み合わせる。入力欄は Open your mind / Listen to your heart が読み、尽きると -1。語彙は仕様の代表的な語だけ。実行は100万文で必ず停止。送信ゼロ。
開くPietを整える
Piet(David Morgan-Mar, 2002)は、色の変化で命令が決まる画像型プログラミング言語。このツールは公式仕様どおり、20色・カラーブロック・DP/CC・17命令・白の通過・黒と端での向き変え(8回で停止)を実装したインタプリタ。マス目エディタ、ステップ実行、画像の読み込みとPNG保存を端末内で行う。
開くINTERCALを整える
INTERCAL(1972年、Don Woods と James M. Lyon)の基本部分集合を実行するページ。DO・PLEASE・NOT・ラベル・変数・mingle・select・単項演算・NEXT・RESUME・FORGET・COME FROM・READ OUT・WRITE IN・GIVE UP・ABSTAIN・STASH・IGNORE・1次元配列に対応し、C-INTERCAL に倣って PLEASE の割合が少なすぎる・多すぎるとエラーにする。多次元配列や拡張命令は未対応。
開くGrassを整える
Grass は w・W・v の3文字だけで書くラムダ計算ベースの難解言語で、UENO Katsuhiro氏が2006年に提案しました。このツールは作者の公式仕様に沿ったインタプリタで、Out・Succ・w・In と文字の比較(Church の真偽)に対応します。関数定義と適用の色分け、スタックの長さと中身、出力を確認でき、文字列から Grass を生成することもできます。入力はブラウザの外へ出ません。
開くJavaScript を整える(Playground)
ブラウザ内の QuickJS(WASM・cdn.jsdelivr.net から初回のみ約1MB)で JavaScript を実行する Playground。本番 CSP が eval を禁止しているため、ブラウザ本体ではなく独立した WASM エンジンで動かす。Hello World・型の暗黙変換("1"+1="11"、"1"-1=0)・存在しないプロパティ(TypeError)・引数不足(undefined 混入)・null の扱い(typeof null === "object")・配列 map/filter/reduce・クラスの7サンプル。「JS は実行するまで間違いが分からない」を4題材で示し、同じ題材の /typescript/ へ誘導。console 出力・最後の式の値・エラー・所要時間を表示。無限ループは期限割り込みで2秒で停止。CodeMirror 6。送信ゼロ。
開くTypeScript を整える(Playground)
ブラウザ内の typescript.js 5.9(cdn.jsdelivr.net から初回のみ約9MB+lib 約0.4MB)を自前の CompilerHost で動かして型検査し、transpileModule で ES2020 の JavaScript に変換、QuickJS(WASM)で実行する3段階を可視化する TypeScript Playground。型エラーがあっても変換と実行は必ず行い「実行を止める仕組みではなく実行前に指摘する仕組み」を体験させる。診断コード(2322/2345/2554/2339/2531/18048/7006/2304)に日本語の一言説明。/javascript/ と同じ4題材+TS 固有4題材(interface・ジェネリクス・ユニオン型・enum)。strict 切替。変換で消える部分を薄色表示。CodeMirror 6。送信ゼロ。
開くLua を整える(Playground)
ブラウザ内の Lua 5.4(wasmoon WASM・cdn.jsdelivr.net から初回のみ約0.3MB)で Lua を実行する Playground。Hello World・変数と型・テーブル・for/while・関数と可変引数・メタテーブル(__index)によるクラス風表現・1始まりの添字と多値返却の7サンプル。Web Worker で実行し、無限ループは3秒の時間超過で terminate して自動停止。print 出力と最後の return の戻り値を分けて表示。io/os は使わない。CodeMirror 6。送信ゼロ。
開くRuby を整える(Playground)
ブラウザ内の Ruby 3.4.1(ruby.wasm・cdn.jsdelivr.net から初回のみ約17MB)を Web Worker で実行する Playground。$stdout/$stderr を StringIO に差し替えて puts/print/p の出力を捕獲。Hello World・変数と文字列補間・配列と each/map・ハッシュ・メソッドとブロック・クラス・Ruby らしい書き方(5.times・Range・&:)の7サンプル。無限ループは5秒で Worker を terminate して停止し次回作り直す。同じ Worker の間は変数・クラス定義を持ち越し、リセットで初期化。CodeMirror 6。送信ゼロ。
開くフレームワークの選び方を整える
React・Vue・Svelte・jQuery・Alpine.js・Lit・Preact・Tailwind CSS・Bootstrap の9本を、誕生年・作者(Meta/Evan You/Rich Harris/John Resig/Caleb Porzio/Google/Jason Miller/Tailwind Labs/Twitter 発)・実装方式(仮想 DOM/コンパイラ/DOM ライブラリ/属性駆動/Web Components/CSS)・配布サイズ帯・学習コスト・エコシステム・求人情報・SSR(Next.js/Nuxt/SvelteKit)の有無で比較する早見表と、作るもの・チーム・既存技術・重視点・CSS の5問で上位候補を根拠つきで提案するツール。「こんな時はコレ」の定型カード12枚。学習コスト等の数値は当サイトの相対的な目安と明記。送信ゼロ。
開くHTML/CSS/JS を整える(Playground)
sandbox="allow-scripts" の srcdoc iframe に HTML・CSS・JavaScript をインライン script として書き込んで実行する Playground。本番 CSP は eval を禁止するがインライン script は許可しているため、この方式でブラウザ本体のエンジンを使う。console/エラーは postMessage で親に転送。Hello World・クリックカウンタ・配列からの DOM 再構築・CSS 変数テーマ切替の4サンプル。停止ボタンで iframe を作り直す。外部ライブラリなし。送信ゼロ。
開くReact を整える(Playground)
React 18.3.1(UMD・cdn.jsdelivr.net)をサンドボックス iframe で動かす Playground。JSX は typescript.js 5.9.3 の transpileModule(jsx: React)で React.createElement に変換してから注入。useState のカウンタ・props・一覧描画(map+key)・useEffect の実行順序の4サンプル。「Preact + htm」タブでは Preact 10.29.8+htm 3.1.1 を iframe 内 ESM import して JSX 変換なしの同等コードを試せる。console・エラー・停止ボタン。送信ゼロ。
開くVue を整える(Playground)
@vue/compiler-sfc 3.5.42(cdn.jsdelivr.net から動的 import)を親ページで動かし、<script setup>+<template> をコード文字列へ事前コンパイルしてから module script としてサンドボックス iframe に注入する Vue 3 Playground。本番 CSP が new Function を禁止するためランタイムのテンプレートコンパイルは使わない。ref・v-model と @click・v-for・computed の4サンプル。送信ゼロ。
開くSvelte を整える(Playground)
svelte 5.57.0 のコンパイラ(UMD・cdn.jsdelivr.net)を親ページで動かし、.svelte ソースを compile({generate:"client", css:"injected"}) でコード文字列へ変換してから module script としてサンドボックス iframe に注入する Playground。生成コードが要求する svelte/internal/client などのベア指定子は srcdoc の importmap で jsdelivr の実ファイルに解決。$state・イベント・{#each}・$derived の4サンプル。送信ゼロ。
開くjQuery を整える(Playground)
jQuery 4.0.0(cdn.jsdelivr.net)をサンドボックス iframe で実行する Playground。Hello World・状態とイベント(.on と $(this))・一覧描画(appendTo)・アコーディオン(slideToggle とイベント委任 $(document).on)の4サンプル。HTML/JS の2タブ。保守案件や管理画面で今も広く使われる jQuery の書き味を確かめる。送信ゼロ。
開くAlpine.js を整える(Playground)
Alpine.js 3.17.1 の CSP ビルド(@alpinejs/csp・eval や new Function を使わない版)をサンドボックス iframe で実行する Playground。標準ビルドの x-data="{...}" は本番 CSP で動かないため、alpine:init 内で Alpine.data() を登録し x-data="名前()" で参照する作法を4サンプル(Hello World・状態とイベント・x-for・検索フィルタ)で解説。送信ゼロ。
開くLit を整える(Playground)
Lit 3.3.3(ESM・iframe 内で cdn.jsdelivr.net から直接 import)を動かす Playground。LitElement 継承+customElements.define・static properties によるリアクティブな状態と render() の再実行・CustomEvent の dispatchEvent・配列を map して繰り返し描画の3サンプル。Web 標準の customElements の上に薄い層を重ねる設計を解説。送信ゼロ。
開くTailwind CSS を整える(Playground)
Tailwind CSS 4.3.3 のブラウザ用ビルド(class から実行時に CSS 生成)と Bootstrap 5.3.8(CSS は親で fetch して <style> に埋め込み・bundle JS を読み込み)をサンドボックス iframe で切り替えて試す Playground。ユーティリティファーストとコンポーネント指向の書き方の違いを、同じボタンの比較サンプルと各4本(ボタン・カード・グリッド・フォーム/モーダル)で確認。送信ゼロ。
開くp5.js を整える(Playground)
p5.js 2.3.2(cdn.jsdelivr.net)をサンドボックス iframe で実行する Playground。setup/draw のグローバルモードで、円・マウス追従(mouseX/mouseY)・アニメーション・ランダムウォークの4サンプル。console は postMessage で親に転送。停止ボタンで iframe を破棄して draw ループを止める。送信ゼロ。
開くPhaser を整える(Playground)
Phaser 4.2.1(cdn.jsdelivr.net)をサンドボックス iframe で実行する Playground。画像アセットを使わず矩形・円・テキストだけで、シーンと図形・矢印キーで動く四角(createCursorKeys)・当たり判定(Phaser.Geom.Intersects による簡易判定)・クリックで増えるスコアの4サンプル。停止ボタンで iframe を破棄。送信ゼロ。
開くThree.js を整える(Playground)
three 0.185.1(build/three.module.js を iframe 内で ESM import)で 3D を描く Playground。回る立方体・ライトと材質(MeshStandardMaterial)・複数オブジェクト(Group)・OrbitControls でドラッグ回転/ホイールズームの4サンプル。OrbitControls が要求するベア指定子 three は importmap で解決。停止ボタンで iframe を破棄。送信ゼロ。
開くFlask を整える(Playground)
Pyodide 上で Flask 3.1 を動かす Playground。Pyodide に同梱されない Flask 一式(blinker/click/itsdangerous/werkzeug/flask の純 Python wheel 5本・約0.5MB・BSD)は totonoe 自身の /wheels/ から micropip で読み込む。app.test_client() でメソッド・パス・ボディ・Content-Type を指定したリクエストを発行し、ステータス・ヘッダ・本文・print 出力を表示。サーバーは起動しない。送信ゼロ。
開くSails.js を整える(ルーティング練習場)
Sails v1 のルート照合を再現する練習場。Sails 本体(Node.js)は動かさず、config/routes.js のオブジェクトリテラルを eval せずに字句解析して、上から順の照合・:param/:param?/*・動詞なしルート・{ view } / { action } / { response }・REST ブループリントの影のルート(自分で書いたルートの後ろ)・req.allParams() の合成を再現する。メソッド違いは 405 ではなく 404。「メソッド パス」の一覧から routes.js と actions2 形式のアクション雛形を生成。外部読み込みなし・送信ゼロ。
開くActix Web を整える(ルーティング練習場)
Actix Web 4 のルート照合を再現する練習場。Rust はコンパイルも実行もせず、main.rs の App::new() のメソッドチェーンと #[get]/#[post]/#[route] マクロを字句解析する。登録順の照合、マクロの登録漏れの警告、マクロ・App::route はメソッド違いで次へ進み最後は 404、web::resource 内のメソッド違いは 405、scope は前方一致で入ったら外へ戻らない、{name}/{name:regex}/{tail}*、web::Path<u32> の型変換失敗は 404、web::Json は Content-Type と JSON の誤りで 400、を再現。「メソッド パス」の一覧から main.rs の雛形を生成。外部読み込みなし・送信ゼロ。
開くpytest を整える(Playground)
Pyodide 0.28 同梱の pytest 8 を動かす Playground。仮想 FS に calc.py と test_calc.py を書き、pytest.main(["-q","-p","no:cacheprovider"]) を実行して結果を表示。assert 失敗時の差分表示・@pytest.mark.parametrize・pytest.raises の4サンプル。送信ゼロ。
開くSQLAlchemy を整える(Playground)
Pyodide 0.28 同梱の SQLAlchemy 2.0 を sqlite:///:memory: で動かす Playground。declarative_base+Column+session.query の古典的スタイルで、モデル定義→作成→追加→問い合わせ→1対多リレーションを試し、echo=True の SQL ログを print と同じ時系列で表示。送信ゼロ。
開くPHP を整える(Playground)
PHP 8.4 を php-wasm(WebAssembly・cdn.jsdelivr.net から初回のみ約14MB)で blob Worker 内実行する練習場。<?php が無ければ補う。無限ループは6秒で強制終了。echo の出力は HTML として描画せずエスケープして表示。変数と文字列(echo・連結・補間)/配列と連想配列(foreach)/関数(型宣言・デフォルト引数)/クラス(継承)の4課題。送信ゼロ。
開くGraphQL を整える(Playground)
graphql-js 16.11 を cdn.jsdelivr.net から動的読み込みし、buildSchema と簡易 rootValue リゾルバでクエリを実行する練習場。SCHEMA(SDL)/DATA(JSON)/QUERY+VARIABLES の3欄。リゾルバ規約: フィールド名=データのキー、id 引数は1件検索、他の引数はプロパティ一致で絞り込み、addXxx ミューテーションは複数形の配列へ追加。4課題。送信ゼロ。
開くNumPy・pandas を整える(Playground)
Pyodide 0.28 に numpy・pandas を追加ロード(初回のみ約9MB)して動かす練習場。コードを ast で分割し、最後の文が式なら値を取得。DataFrame/Series は columns・index・values を文字列化して JS 側でエスケープして表を組む(to_html は使わない)。4課題: NumPy 配列/辞書から DataFrame・head・describe/boolean index と sort_values/groupby.agg と pivot_table。Excel との対応表つき。送信ゼロ。
開くunittest を整える(Playground)
Pyodide 0.28 同梱の標準ライブラリ unittest を動かす練習場(追加パッケージ不要)。仮想 FS に calc.py と test_calc.py を書き、TextTestRunner(verbosity=2) の出力をパーサでテストごとの合否・失敗の抜粋・合計に分解して表示。4課題: assertEqual/setUp/assertRaises/subTest と skip。unittest と pytest の違いを表で解説し /pytest/ と相互リンク。送信ゼロ。
開くChart.js を整える(Playground)
Chart.js 4.4.8 を sandbox iframe 内で実行するグラフ描画の練習場。CSV(1行目見出し・1列目ラベル)を親でパースし DATA として注入、JS 設定欄で new Chart(ctx, {type, data, options}) を書く。棒/折れ線/円・ドーナツ/複合(2軸)の4課題。Excel のグラフとの対応表つき。送信ゼロ。
開くWeb Components を整える(Playground)
ライブラリ非依存の Web Components(Custom Elements・Shadow DOM)の練習場。HTML(使う側)と JS(customElements.define)の2エディタ。定義と描画/属性(observedAttributes・attributeChangedCallback)/名前付き slot と ::slotted/イベント(CustomEvent・composed)の4課題。Lit との関係を解説し /lit/ と相互リンク。送信ゼロ。
開くhtmx を整える(Playground)
htmx.org 2.0.4(cdn.jsdelivr.net)を sandbox iframe で実行する練習場。サーバーが無いため、htmx を読み込む前に XMLHttpRequest をモックに差し替え、「サーバー応答」欄の JSON({"GET /path":"<p>…</p>"} 形式・メソッド無しは GET)を読んで150ms 後に応答する。POST の本文の各項目は、二重の波括弧で囲んだ項目名(name など)のプレースホルダで応答に差し込める。4課題(hx-get/hx-post とフォーム/hx-trigger/hx-target と hx-swap)。HTML・サーバー応答・CSS の3タブ。送信ゼロ。
開くPreact を整える(Playground)
htm 3.1.1 の standalone バインディング(Preact 本体を同梱し html・render・useState 等を1ファイルで export)だけを iframe 内で ESM import する練習場。JSX コンパイラは使わない。4課題(コンポーネントと props/useState/リストと key/useEffect のタイマーとクリーンアップ)。FrameworkFit で React との向き不向きを比較。送信ゼロ。
開くfind コマンドを整える
find のオプション(名前・種別・更新日時・サイズ・パーミッション・除外・アクション)を入力欄で組み立ててコマンドを生成し、各フラグの意味と -delete や -prune 併用の危険な組み合わせを警告する Linux 学習ツール。-mtime の符号の意味、{} \; と {} + の違い、BSD find と GNU find の違いを解説。10本のプリセット。送信ゼロ。
開くLinuxコマンドを整える
Linux の基本コマンド(pwd・ls・cd・mkdir・rmdir・touch・cp・mv・rm・cat・less・head・tail・echo・man・clear・history・wc・ln・du・df・which)を「やりたいこと」から引ける早見表と、架空のファイルシステム上で pwd/ls/cd/mkdir/rmdir/touch/cp/mv/rm/cat/echo(> >>)/clear/history を実行できる仮想ターミナル。実行のたびにフォルダの木が更新され、現在地と増減・移動を色と記号で示す。エラーメッセージは本物に近い英語+日本語の説明。rm -rf / など危険なコマンドは実行せず説明を出す。grep/find/chmod/tar/パイプ/プロセス/git は専用ページへ誘導。すべてブラウザ内で動作し、送信ゼロ。
開くOSのサポート期限を整える
パソコンやスマホの OS のサポート期限を、各社の公式資料(Microsoft Learn のライフサイクル、Apple のセキュリティリリース、Google の Pixel の更新、Canonical のリリースサイクル)にもとづいて一覧にするツール。Windows 10 22H2 と個人向け延長セキュリティ更新(ESU・2027年10月12日まで)、Windows 11 の各版、macOS・iOS・iPadOS(公式の終了日は公表されていない旨)、Android の版と Pixel の更新期間、Ubuntu LTS を載せ、今日からの残り日数を計算する。2026年11月5日時点のデータで、毎年見直す。
開くActive Directoryを整える
Active Directory(AD DS)の仕組みを、図を押す・部署の木を組み立てる・ログインをたどる、の3つで覚えるページです。ドメイン、ドメインコントローラー、OU、ユーザー、コンピューター、グループ、グループポリシーを会社にたとえて説明し、OU の追加や名前変更、GPO の結び付けをすると、ローカル、サイト、ドメイン、OU(親から子)の順に適用され後のものが優先される様子を、人とパソコンごとに一覧で示します。Kerberos では TGT とサービスチケットの受け渡しを6手で見られ、パスワードそのものは流れないことを確認できます。実物は動かさず、送信ゼロです。
開くKubernetesを整える
Kubernetes のクラスタ(コントロールプレーン、ワーカーノード3台、Pod、Deployment、ReplicaSet、Service)を押せる図で示し、レプリカの増減、ノード障害時の作り直し、ローリングアップデート、Service が準備のできた Pod にだけ届ける動きを1手ずつ再生します。ブラウザ内の疑似ターミナルで kubectl get・apply・scale・delete・describe・rollout status を試せ、結果が図に反映されます。実物のクラスタは動かさず、出力は kubernetes.io の例に寄せた簡略版です。入力は外部に送信されません。
開くDockerを整える
Dockerfile から docker build でイメージができ、docker run でコンテナになるまでを、層(レイヤー)の積み重なりとして図で1手ずつ追えるツールです。ブラウザの中の疑似ターミナルで docker pull・images・run -d -p・ps・stop・start・rm・rmi・logs・exec・build・volume ls を打つと、ホスト・コンテナ・ポートの矢印・ボリュームの図に結果が反映されます。docker compose で2つのコンテナとネットワークをまとめて動かす考え方も確認できます。実物の Docker は動かさず、入力は外部に送信されません。
開く仮想化を整える
実機(物理サーバー)、ハイパーバイザー型(タイプ1)とホスト型(タイプ2)の仮想マシン、コンテナの4方式を、ハードウェア・OS・ハイパーバイザー・ゲストOS・ライブラリ・アプリの層の積み木で見比べる学習ツール。層を押すと説明が出る。サーバーのメモリとCPU、VMとコンテナ1つの使用量を目安として入れると、VMとコンテナが何台ずつ載るかと残りを計算する。物理1台からVM3台、コンテナ3つへの1手ずつの再生、起動の速さ・隔離の強さ・持ち運びやすさの一般的な傾向の比較つき。実際の仮想化は動かさず、入力は端末内で処理される。
開くショートカットキーを整える
同じ操作のショートカットキーを Windows・Mac・Linux(GNOME の既定)で並べた対照表。文字の編集・ファイル・画面・ブラウザの4場面で32の操作を載せ、検索欄で操作名やキー(⌘Q・Ctrl+Shift+Esc など)から絞り込める。押したキーの組み合わせが各 OS で何にあたるかを逆引きする機能、Ctrl と ⌘・Alt と Option の対応の説明つき。公式資料(Microsoft・Apple・GNOME)で確かめたものだけを載せ、確かめられない欄は空欄と理由を表示。キー入力は送信しない。
開くファイルシステムを整える
FAT32・exFAT・NTFS・APFS・ext4 の上限と対応 OS を Microsoft Learn・Apple・kernel.org の資料で比較。ファイルの大きさを入れて「この形式に入るか」を判定し、クラスタの大きさから実際の使用容量も計算する。基本情報・IT パスポートの OS 分野にも。
開くファイルのパスと名前を整える
Windows と Mac/Linux のパスを相互に書き換え、相対パスをたどって行き先を確かめ、ファイル名が各 OS で使えるかを検査して直した案を出す。使えない文字・予約名・末尾の空白とピリオド・255 文字/255 バイト・MAX_PATH 260 文字に対応。
開くデッドロックを整える
デッドロックの仕組みと回避を試すツール。2つのプロセスが2つの資源を取る順番を選んで1手ずつ進めると、資源割付グラフ(丸がプロセス、四角が資源)で循環ができて止まる様子を示し、取る順をそろえると起きないことを比べられる。銀行家のアルゴリズムでは Allocation・Max・Available を表で入れ、Need を計算して、安全な順序が見つかるかを1手ずつ判定する。デッドロックの4条件(相互排除・保持と待ち・横取り不可・循環待ち)と崩し方の解説つき。入力はブラウザ内だけで処理する。
開く仮想記憶を整える
仮想記憶のアドレス変換を試すツール。ページサイズ(例 4KB)とページ表(ページ番号→ページフレーム番号・有効ビット)を入れると、論理アドレス(10進・16進)をページ番号とページ内の位置に分けてビットを色分けし、ページ表を引いて物理アドレスに変換する様子を図で示す。有効ビットが0ならページフォールトになることを表示。TLB のヒット率・TLB の時間・メモリの時間から実効アクセス時間を計算する。入力はブラウザ内だけで処理する。
開くページ置き換えを整える
仮想記憶でメモリが足りないとき、どのページを追い出すかを決めるページ置き換えアルゴリズムを試すツール。参照列とページ枠の数を入れると、FIFO・LRU・LFU・OPT(最適)の4方式で、各時点の枠の中身・ページフォールトの印と回数を表にして比べられる。枠を1〜7に変えたときのフォールト数の表、FIFO で枠を増やすとフォールトが増える Belady の異常の例、1手ずつの再生つき。入力はブラウザ内だけで処理する。
開くプロセスのスケジューリングを整える
OS がどのプロセスにCPUを渡すかを決めるスケジューリングを試すツール。プロセス(到着時刻・処理時間・優先度)を表で入れると、FCFS(到着順)・SJF(処理時間順)・SRT(残り時間順・横取りあり)・ラウンドロビン(タイムクォンタム指定)・優先度順の5方式で、ガントチャート・各プロセスの待ち時間とターンアラウンドタイム・平均を出し、方式どうしを表で比べられる。1単位時間ずつの再生つき。同時刻の扱いはページに明記。入力はブラウザ内だけで処理する。
開くpx・rem・em を整える
24px=1.5rem(基準16px)。px・rem・em・pt・% を相互変換し、流体タイポグラフィ用の CSS clamp() を最小/最大 px とビューポート幅から生成(傾きと切片を rem+vw で表示)。rem と em の違い、62.5% トリックの事実、Tailwind の対応表を解説。送信ゼロ。
開く.htaccess リダイレクトを整える
.htaccess の 301/302 リダイレクトを Redirect/RedirectMatch/RewriteRule の9パターンで生成し、生成結果をテスト URL に適用する簡易シミュレーション(限界を明記)と、既存の .htaccess の誤り検出(RewriteEngine On 漏れ・混在・L フラグ漏れ・未エスケープのドット・www と non-www のループ・302 の使用)を行う。AllowOverride・301 と 302 の違い・curl -I での確認方法を解説。送信ゼロ。
開く他のタグ