CodeMirror - Webコードエディタの老舗が進化した話

はじめに

Webアプリでコード入力欄が必要になったとき、どうしていますか？

普通のテキストエリアだとシンタックスハイライトもないし、補完も効かない。かといってVS Codeを埋め込むのは大げさすぎる。そんなときに選択肢に上がるのがCodeMirrorなんですよね。

個人的には、Webベースのコードエディタといえば真っ先にCodeMirrorが浮かびます。GitHubで7,500スター以上、使用プロジェクト377件以上という実績があって、信頼性は抜群です。

CodeMirrorとは

CodeMirrorは、Webページに埋め込めるコード編集コンポーネントです。MITライセンスのオープンソースで、2007年から開発が続いている老舗中の老舗。

現在のバージョン6は2020年に発表された完全リニューアル版で、モダンなアーキテクチャで書き直されています。

公式サイト: https://codemirror.net GitHub: https://github.com/codemirror/dev

特徴・メリット

1. 20以上の機能が最初から使える

これ、意外とすごいことなんですよ。

CodeMirrorには以下のような機能が標準で搭載されています：

シンタックスハイライト - 言語ごとに色分け
コード補完 - 言語固有の入力候補を表示
コード折りたたみ - 関数やブロックを畳める
検索・置換 - 正規表現対応
複数選択 - 複数箇所を同時編集
協調編集 - 複数ユーザーで同時編集可能
括弧のマッチング - 対応する括弧をハイライト

正直なところ、これだけあれば大抵のユースケースはカバーできます。

2. 20言語以上のサポート

Python、JavaScript、TypeScript、HTML、CSS、Java、Rust、Go、PHP、Markdown、YAML...と、メジャーな言語はほぼ網羅しています。

言語パッケージは個別にインストールする形式なので、必要な言語だけ入れればバンドルサイズも抑えられます。コスパ的にありがたい設計ですね。

3. アクセシビリティ対応

スクリーンリーダーやキーボード操作にきちんと対応しています。30代になって思うのは、こういう地味だけど重要なところがしっかりしているライブラリは信頼できるということ。

4. 大規模ドキュメント対応

ドキュメントが大きくなっても快適に動作します。内部的に効率的なデータ構造を使っているので、数万行のファイルを開いても問題なし。

5. IE11以降対応

ポリフィルを適用すればIE11でも動きます。まあ、2026年の今となってはIE対応が必要なケースは減りましたが、レガシー環境をサポートする必要がある場合は助かりますね。

インストール方法

CodeMirror 6はモジュラー構成になっていて、必要なパッケージを個別にインストールします。

基本パッケージ

npm install codemirror

言語パッケージ（例：JavaScript）

npm install @codemirror/lang-javascript

よく使う言語パッケージ

# Python
npm install @codemirror/lang-python

# HTML
npm install @codemirror/lang-html

# CSS
npm install @codemirror/lang-css

# Markdown
npm install @codemirror/lang-markdown

# JSON
npm install @codemirror/lang-json

基本的な使い方

シンプルなエディタの作成

import { EditorView, basicSetup } from "codemirror";
import { javascript } from "@codemirror/lang-javascript";

const editor = new EditorView({
  doc: "console.log('Hello, CodeMirror!');",
  extensions: [basicSetup, javascript()],
  parent: document.getElementById("editor")!,
});

basicSetupを使うと、行番号、シンタックスハイライト、括弧マッチングなど、基本的な機能がまとめて有効になります。時短になりますね。

値の取得と設定

// 現在の値を取得
const content = editor.state.doc.toString();

// 値を設定（全置換）
editor.dispatch({
  changes: {
    from: 0,
    to: editor.state.doc.length,
    insert: "// 新しいコード",
  },
});

テーマの適用

import { EditorView } from "codemirror";
import { oneDark } from "@codemirror/theme-one-dark";

const editor = new EditorView({
  extensions: [basicSetup, oneDark, javascript()],
  parent: document.getElementById("editor")!,
});

ダークテーマが好みなら@codemirror/theme-one-darkパッケージを入れるだけ。

読み取り専用モード

import { EditorState } from "@codemirror/state";

const editor = new EditorView({
  extensions: [
    basicSetup,
    javascript(),
    EditorState.readOnly.of(true), // 読み取り専用
  ],
  parent: document.getElementById("editor")!,
});

コードの表示だけしたい場合に便利です。

実践的なユースケース

1. コードスニペット共有サービス

import { EditorView, basicSetup } from "codemirror";
import { javascript } from "@codemirror/lang-javascript";
import { python } from "@codemirror/lang-python";

// 言語切り替え対応エディタ
function createEditor(language: string, parent: HTMLElement) {
  const langExtension = language === "python" ? python() : javascript();

  return new EditorView({
    extensions: [basicSetup, langExtension],
    parent,
  });
}

言語選択ドロップダウンと組み合わせれば、Gistみたいなサービスが作れます。

2. オンラインIDEのコアエディタ

import { EditorView, basicSetup } from "codemirror";
import { javascript } from "@codemirror/lang-javascript";
import { linter, lintGutter } from "@codemirror/lint";

// ESLintと連携する例
const eslintLinter = linter((view) => {
  // ESLintの診断結果を返す
  return []; // 実際はESLintの結果をマッピング
});

const editor = new EditorView({
  extensions: [basicSetup, javascript(), lintGutter(), eslintLinter],
  parent: document.getElementById("editor")!,
});

リンター連携を入れれば、本格的なIDEに近づきます。

3. Markdownエディタ

import { EditorView, basicSetup } from "codemirror";
import { markdown } from "@codemirror/lang-markdown";
import { languages } from "@codemirror/language-data";

const editor = new EditorView({
  extensions: [
    basicSetup,
    markdown({ codeLanguages: languages }), // コードブロックの言語ハイライト
  ],
  parent: document.getElementById("editor")!,
});

Markdownエディタを作るなら、コードブロック内の言語ハイライトも対応しておくとQOL上がります。

4. 設定ファイルエディタ

import { EditorView, basicSetup } from "codemirror";
import { json } from "@codemirror/lang-json";
import { linter } from "@codemirror/lint";

// JSON構文エラーをチェック
const jsonLinter = linter((view) => {
  const diagnostics = [];
  try {
    JSON.parse(view.state.doc.toString());
  } catch (e: any) {
    diagnostics.push({
      from: 0,
      to: view.state.doc.length,
      severity: "error",
      message: e.message,
    });
  }
  return diagnostics;
});

const editor = new EditorView({
  extensions: [basicSetup, json(), jsonLinter],
  parent: document.getElementById("editor")!,
});

管理画面で設定JSONを編集させるときに便利です。

Monaco Editorとの比較

よく比較されるのがVS Codeのエディタ部分であるMonaco Editor。個人的な使い分けはこんな感じです：

観点	CodeMirror	Monaco Editor
バンドルサイズ	軽量	重め
カスタマイズ性	高い	中程度
学習コスト	低め	高め
機能の充実度	必要十分	VS Code並み
モバイル対応	良好	やや難あり