シンタックスハイライト付きエディタ

1. アプリ概要

Python・HTMLなど複数言語のシンタックスハイライトを実装したテキストエディタ。正規表現によるトークン解析を学びます。

このアプリは中級カテゴリに分類される実践的なGUIアプリです。使用ライブラリは tkinter（標準ライブラリ） で、難易度は ★★★ です。

このアプリは「ファイル操作」カテゴリです。ファイル操作は業務スクリプトの心臓部で、I/O のパターンは他のあらゆる Python プログラムで再利用できます。tkinter（標準ライブラリ） を活かして実装するこの構造は、他のアプリにも応用が効きます。

完成形を見てから細部の解説に進む流れが効果的です。実行→気になる箇所を解説で確認→自分の手で改造、というサイクルで定着が早まります。

カスタマイズ章では具体的な拡張アイデアを示しています。一つ実装するごとに動作確認することで、変更が予期せぬ副作用を起こさないかも体感できます。

2. 機能一覧

• ループで生成するボタン群（それぞれ _open_file()・_save_file()・_save_as() を実行）
• イベント <<ComboboxSelected>> から _highlight() を実行
• キー <KeyRelease> から _on_key() を実行
• filedialog.askopenfilename() によるファイル選択ダイアログ
• filedialog.asksaveasfilename() によるファイル選択ダイアログ
• messagebox.showerror() によるダイアログ通知
• ウィンドウはタイトル「シンタックスハイライト付きエディタ」・サイズ 893x580 で起動

3. 事前準備・環境

Windows 11（実機）で起動と基本操作を確認しています（全機能の網羅テストではありません）。Linux Mint 22.3（仮想マシン）では起動と画面表示を確認しました。macOS は標準ライブラリの範囲で動作する想定ですが、未検証です。

• Python 3.10 以上
• OS: Windows 11（実機で起動・基本操作を確認）・Linux Mint 22.3（仮想マシンで起動・画面表示を確認）

4. 完全なソースコード

import tkinter as tk
from tkinter import ttk, messagebox, filedialog
import re


class App02:
    """シンタックスハイライト付きエディタ"""

    THEMES = {
        "Python": {
            "keyword":   (r"\b(False|None|True|and|as|assert|async|await|break|class|"
                          r"continue|def|del|elif|else|except|finally|for|from|global|"
                          r"if|import|in|is|lambda|nonlocal|not|or|pass|raise|return|"
                          r"try|while|with|yield)\b", "#cc7832"),
            "builtin":   (r"\b(print|len|range|int|float|str|list|dict|set|tuple|bool|"
                          r"type|input|open|enumerate|zip|map|filter|sorted|reversed|"
                          r"abs|max|min|sum|isinstance|hasattr|getattr|setattr)\b", "#8888cc"),
            "string":    (r'("(?:[^"\\]|\\.)*"|\'(?:[^\'\\]|\\.)*\')', "#6a8759"),
            "comment":   (r"(#[^\n]*)", "#808080"),
            "number":    (r"\b(\d+(?:\.\d+)?)\b", "#6897bb"),
            "decorator": (r"(@\w+)", "#bbb529"),
        },
        "HTML": {
            "tag":     (r"(</?[\w!][^>]*>)", "#e8bf6a"),
            "attr":    (r'(\s[\w-]+=)', "#9876aa"),
            "string":  (r'"[^"]*"', "#6a8759"),
            "comment": (r"(<!--.*?-->)", "#808080"),
        },
        "なし": {},
    }

    def __init__(self, root):
        self.root = root
        self.root.title("シンタックスハイライト付きエディタ")
        self.root.geometry("893x580")
        self.root.minsize(893, 580)
        self.root.configure(bg="#2b2b2b")
        self.current_file = None
        self.lang_var = tk.StringVar(value="Python")
        self._build_ui()
        self._insert_sample()

    def _build_ui(self):
        header = tk.Frame(self.root, bg="#3c3f41", pady=6)
        header.pack(fill=tk.X)
        tk.Label(header, text="✏️ シンタックスハイライト付きエディタ",
                 font=("Noto Sans JP", 14, "bold"),
                 bg="#3c3f41", fg="#a9b7c6").pack(side=tk.LEFT, padx=12)

        toolbar = tk.Frame(self.root, bg="#3c3f41", pady=3)
        toolbar.pack(fill=tk.X)
        for text, cmd in [("📂 開く", self._open_file),
                          ("💾 保存", self._save_file),
                          ("💾 名前を付けて保存", self._save_as)]:
            tk.Button(toolbar, text=text, bg="#4c5052", fg="#a9b7c6",
                      relief=tk.FLAT, font=("Arial", 9), padx=8,
                      activebackground="#555", activeforeground="white",
                      command=cmd).pack(side=tk.LEFT, padx=2)

        tk.Label(toolbar, text="  言語:", bg="#3c3f41",
                 fg="#a9b7c6", font=("Arial", 10)).pack(side=tk.LEFT, padx=(16, 4))
        lang_cb = ttk.Combobox(toolbar, textvariable=self.lang_var,
                               values=list(self.THEMES.keys()),
                               width=10, state="readonly")
        lang_cb.pack(side=tk.LEFT)
        lang_cb.bind("<<ComboboxSelected>>", lambda e: self._highlight())

        editor_frame = tk.Frame(self.root, bg="#2b2b2b")
        editor_frame.pack(fill=tk.BOTH, expand=True, padx=4, pady=4)

        self.line_nums = tk.Text(editor_frame, width=4, bg="#313335",
                                 fg="#606366", font=("Courier New", 12),
                                 state=tk.DISABLED, relief=tk.FLAT,
                                 padx=4, pady=4, takefocus=0)
        self.line_nums.pack(side=tk.LEFT, fill=tk.Y)

        self.text = tk.Text(editor_frame, bg="#2b2b2b", fg="#a9b7c6",
                            font=("Courier New", 12), insertbackground="white",
                            relief=tk.FLAT, undo=True, padx=8, pady=4,
                            selectbackground="#214283",
                            tabs="    ")
        self.text.pack(side=tk.LEFT, fill=tk.BOTH, expand=True)
        sb = ttk.Scrollbar(editor_frame, command=self.text.yview)
        sb.pack(side=tk.RIGHT, fill=tk.Y)
        self.text.configure(yscrollcommand=sb.set)
        self.text.bind("<KeyRelease>", self._on_key)

        self._setup_tags()

        self.status_var = tk.StringVar(value="行: 1  列: 1")
        tk.Label(self.root, textvariable=self.status_var,
                 bg="#3c3f41", fg="#888", font=("Arial", 9),
                 anchor="w", padx=8).pack(fill=tk.X, side=tk.BOTTOM)

    def _setup_tags(self):
        colors = {
            "keyword": "#cc7832", "builtin": "#8888cc",
            "string": "#6a8759", "comment": "#808080",
            "number": "#6897bb", "decorator": "#bbb529",
            "tag": "#e8bf6a", "attr": "#9876aa",
        }
        for name, color in colors.items():
            self.text.tag_configure(name, foreground=color)

    def _on_key(self, event=None):
        self._update_line_nums()
        self._highlight()
        pos = self.text.index(tk.INSERT)
        row, col = pos.split(".")
        self.status_var.set(f"行: {row}  列: {int(col)+1}")

    def _update_line_nums(self):
        content = self.text.get("1.0", tk.END)
        lines = content.count("\n")
        self.line_nums.config(state=tk.NORMAL)
        self.line_nums.delete("1.0", tk.END)
        self.line_nums.insert("1.0", "\n".join(str(i) for i in range(1, lines + 1)))
        self.line_nums.config(state=tk.DISABLED)

    def _highlight(self):
        lang = self.lang_var.get()
        rules = self.THEMES.get(lang, {})
        for tag in ["keyword", "builtin", "string", "comment",
                    "number", "decorator", "tag", "attr"]:
            self.text.tag_remove(tag, "1.0", tk.END)
        content = self.text.get("1.0", tk.END)
        for tag, (pattern, _) in rules.items():
            for m in re.finditer(pattern, content, re.DOTALL):
                start = f"1.0+{m.start()}c"
                end = f"1.0+{m.end()}c"
                self.text.tag_add(tag, start, end)

    def _open_file(self):
        path = filedialog.askopenfilename(
            filetypes=[("Pythonファイル", "*.py"), ("HTMLファイル", "*.html"),
                       ("テキストファイル", "*.txt"), ("すべて", "*.*")])
        if path:
            try:
                with open(path, encoding="utf-8", errors="replace") as f:
                    content = f.read()
                self.text.delete("1.0", tk.END)
                self.text.insert("1.0", content)
                self.current_file = path
                ext = path.rsplit(".", 1)[-1].lower()
                self.lang_var.set("Python" if ext == "py" else
                                  "HTML" if ext in ("html", "htm") else "なし")
                self._highlight()
                self._update_line_nums()
                self.root.title(f"エディタ — {path}")
            except Exception as e:
                messagebox.showerror("エラー", str(e))

    def _save_file(self):
        if self.current_file:
            self._write(self.current_file)
        else:
            self._save_as()

    def _save_as(self):
        path = filedialog.asksaveasfilename(
            defaultextension=".py",
            filetypes=[("Pythonファイル", "*.py"), ("テキストファイル", "*.txt"),
                       ("すべて", "*.*")])
        if path:
            self.current_file = path
            self._write(path)

    def _write(self, path):
        try:
            with open(path, "w", encoding="utf-8") as f:
                f.write(self.text.get("1.0", tk.END))
            self.root.title(f"エディタ — {path}")
        except Exception as e:
            messagebox.showerror("エラー", str(e))

    def _insert_sample(self):
        sample = '''# Pythonサンプルコード
def greet(name: str) -> str:
    """挨拶文を返す関数"""
    if not isinstance(name, str):
        raise TypeError("nameはstr型である必要があります")
    return f"Hello, {name}!"

class Counter:
    """カウンタークラス"""

    def __init__(self, start=0):
        self.count = start

    def increment(self):
        self.count += 1
        return self

    def reset(self):
        self.count = 0

# メイン処理
if __name__ == "__main__":
    counter = Counter(start=10)
    for i in range(5):
        counter.increment()
    print(f"カウント: {counter.count}")
    print(greet("Python"))
'''
        self.text.insert("1.0", sample)
        self._highlight()
        self._update_line_nums()


if __name__ == "__main__":
    root = tk.Tk()
    app = App02(root)
    root.mainloop()

5. コード解説

シンタックスハイライト付きエディタのコードを、実際に書かれている実装に沿って解説します。

6. ステップバイステップガイド

このアプリをゼロから自分で作る手順を解説します。コードをコピーするだけでなく、実際に手順を追って自分で書いてみましょう。

1. 1
   ファイルを作成する

   新しいファイルを作成して app02.py と保存します。使うのは re・tkinter だけなので、追加インストールは不要です。

2. 2
   クラスの骨格を作る

   App02 クラスを定義し、__init__ と、末尾の root = tk.Tk() ～ mainloop() の最小構成を書いて、まず空のウィンドウが出ることを確認します。

3. 3
   ウィンドウを設定する

   title("シンタックスハイライト付きエディタ")・geometry("893x580")・configure(bg="#2b2b2b")・minsize(893, 580) をコンストラクタで設定します。

4. 4
   画面部品を並べる

   _build_ui() の中で、tk.Frame×3・tk.Label×3・tk.Button（ループで生成）・ttk.Combobox・tk.Text×2・ttk.Scrollbar を作って配置します（掲載コードと同じ並び順で書くとレイアウトが一致します）。まず表示だけ確認しましょう。

5. 5
   イベントを接続する

   ループ生成のボタンは、ラベルと処理（_open_file()・_save_file()・_save_as()）をペアで並べたデータをループで回し、command= に渡して接続します。bind("<<ComboboxSelected>>", ...)・bind("<KeyRelease>", ...) の登録も忘れずに。

6. 6
   中心になるメソッドを実装する

   アプリの本体である _open_file()（19行）・_highlight()（12行）・_save_as()（8行）など を実装します。

7. 7
   動作確認する

   python app02.py で起動し、各ボタンが反応すること・キー操作（<KeyRelease>）が効くことを確認します。

7. カスタマイズアイデア

基本機能を習得したら、以下のカスタマイズに挑戦してみましょう。少しずつ機能を追加することで、Pythonのスキルが飛躍的に向上します。

8. よくある問題と解決法

9. 練習問題

アプリの理解を深めるための練習問題です。気になるものから挑戦してみてください（課題3は定型の発展課題です）。追加のライブラリは要りません。「💾 保存」は開いたファイルをそのまま上書きするため、試すときは練習用にコピーしたファイルを開いてください。

1. 課題1：文字列やコメントの中の数字に色を付けない

   色の優先順位は _setup_tags() がタグを作る順で決まります。あとから作ったタグが前面に出るため、number が string や comment より優先されます。文字列とコメントの色が最後まで残るようにしてください。

   期待結果：本文に # メモ 2026 と打つと、いまは 2026 だけ数字の青になるが、直すと行全体がコメントの灰色になる。

   合格条件

   • x = "2026年" と打つと、引用符の中の数字も文字列の緑のまま
   • @decorator の行はこれまでどおり色が付く
   • 言語を「なし」にすると、色がすべて消える

   ヒント①（どこを触るか）: 触るのは _setup_tags() の1か所です。for name, color in colors.items(): のループの後ろに、2行だけ足します。
   ヒント②（使うもの）: 使うのは self.text.tag_raise("string") と self.text.tag_raise("comment") です。tag_raise() は指定したタグを最前面へ移すため、あとから呼んだ comment がいちばん前になります。
   つまずきやすい点: 優先順位はタグを作った順で決まり、_highlight() の tag_remove() や tag_add() では変わりません。colors は keyword・builtin・string・comment・number の順に並ぶため、5番目の number が3番目の string より前面になっています。HTML を選んだときの tag・attr も同じ仕組みで並べ替えられます。

2. 課題2：行番号を本文と一緒にスクロールさせる

   左の行番号は self.line_nums という別の Text です。スクロールバーは本文だけにつながっているため、長いファイルを下げると番号が置き去りになります。2つが同じ位置で動くようにしてください。

   期待結果：200行ほどのファイルを開いて下までスクロールすると、左の番号も一緒に動き、行と番号が並んだままになる。

   合格条件

   • マウスホイールで動かしても番号がずれない
   • スクロールバーをドラッグすると、本文と番号が同時に動く
   • 「📂 開く」で別のファイルを読み込むと、先頭から番号が合う

   ヒント①（どこを触るか）: 触るのは _build_ui() の2か所です。sb = ttk.Scrollbar(editor_frame, command=self.text.yview) と self.text.configure(yscrollcommand=sb.set) の行を、2つの Text を動かす自作メソッドへ向けます。
   ヒント②（使うもの）: バーからの操作は self.text.yview(*args) と self.line_nums.yview(*args) を続けて呼びます。本文が動いたときは yscrollcommand が2つの値を渡してくるので、sb.set(*args) に渡しつつ self.line_nums.yview_moveto(args[0]) で番号を合わせます。
   つまずきやすい点: yscrollcommand の引数を *args で受けないと TypeError になります。self.line_nums は state=tk.DISABLED ですが、yview の操作は禁止されません（書き込みだけが禁止です）。行の高さがずれると番号も合わなくなるため、line_nums のフォント ("Courier New", 12) は本文と同じままにしてください。

3. 課題3：新しいボタンを追加する

   既存のボタンと同じ書き方で新しいボタンを1つ足し、押されたときに動くメソッドを自作してみましょう。ボタンの作成と command= の接続がセットで身に付きます。