第5章：テキストエディタの仕組み

第5章 · テキストエディタの仕組み

📝 エディタの中身は何でできている？

VS Code や Vim でコードを書くとき、エディタの中では何が起きているの？文字を挿入・削除するだけでも実は巧妙なデータ構造が使われている。Undoの秘密も解き明かそう！🔍

👇 書いてみよう（この後、仕組みを解説！）

def hello():
print("Hello! 🎉")

第5章 · Step 1/4

💾 Step 1：単純配列 vs Gap Buffer

文字を単純な配列で持つと、文章の途中に挿入するとき後ろの文字を全部ずらす必要がある。Gap Bufferは「カーソル位置に空白（ギャップ）を作る」ことで解決する！

😰 単純配列の問題（「X」を先頭に挿入）

移動コスト:

O(n) 遅い！

✅ Gap Bufferの解決策！

挿入コスト:

O(1) 速い！

💡 Emacs発祥のGap Bufferは現在も多くのエディタで使われている。
VS CodeはPiece Treeというさらに高度な構造を採用！

第5章 · Step 2/4

↩️ Step 2：「元に戻す」はスタックで実装

編集操作はスタック（積み上げ式のデータ構造）に積まれる。Undoは「最後の操作を取り出して逆にする」だけ！シンプルで確実。

✏️ エディタ

📚 Undoスタック（↑が最新）

スタックが空 = これ以上戻れない

💡 Redoは「戻した操作を再スタック」するだけ。
VSCodeは木構造で複数の分岐を保持する！

第5章 · Step 3/4

🎨 Step 3：コードが色分けされる仕組み

コードに色がつくのは字句解析（トークン化）という処理のおかげ。コードを左から読んで「これはキーワード」「これは文字列」と分類し、色を付ける！

ソースコード（解析前）

def hello(name):
    print("Hello, " + name)

トークン列

ハイライト後

第5章 · Step 4/4

🎯 Step 4：カーソルはどこにあるかをどう管理する？

カーソルは「何行目の何文字目」という行・列の座標で管理される。クリックや矢印キーで移動するたびに座標が更新される！

👇 クリックまたは入力してカーソル情報を確認！

Hello, World! これはサンプルテキストです。エディタの仕組みを学ぼう！

カーソル位置

        行:—列:—

絶対オフセット
—

選択文字数
—

💡 多くのエディタは「オフセット（先頭から何文字目）」で内部管理し、表示時に行・列に変換する。
日本語・絵文字は複数バイトなので扱いが複雑！🈳

第5章 · クイズ

📝 理解度チェック！

Q1. Gap Bufferがテキストの中間挿入を速くする秘訣は？ 🤔

文字を圧縮して保存する

カーソル位置に「空き領域」を作っておく

SSDに直接書き込む

並列処理で挿入する

🎉

第5章クリア！

テキストエディタの内部を支える
巧妙なデータ構造を学んだ！