Ace - CDN一行でブラウザに本格コードエディタを埋め込む

はじめに

管理画面にちょっとしたJSON編集欄がほしい。設定ファイルをブラウザ上で書き換えられるようにしたい。そんなとき、<textarea>だけで済ませると、シンタックスハイライトもインデント補助も何もない不便な入力欄になってしまいます。

かといってMonaco Editorのようなフル機能のエディタを入れるのは、バンドルサイズ的にもセットアップの手間的にもやや大げさに感じることがあります。そこで候補に挙がるのが、Ace（Ace Editor）です。

Aceは、Cloud9 IDE（現AWS Cloud9）のエディタ部分として開発された、軽量かつ高機能なブラウザ用コードエディタライブラリです。スクリプトタグ1行とわずかなJavaScriptだけで、シンタックスハイライト・行番号・インデント・検索置換を備えたエディタをページに埋め込めます。

とはいえ、文章で特徴を説明するより、実際にAceが動いているところを見た方が早いと思います。ace.edit()で生成した本物のエディタをその場で操作できるサンプルを用意したので、先に触ってみたい方はこちらからどうぞ。

＞＞＞まずはサンプルを確認＜＜＜

Aceとは

Ace（Ajax.org Cloud9 Editor）は、Ajax.orgが開発し現在はコミュニティによってメンテナンスされている、JavaScript製の組み込み型コードエディタです。もともとCloud9 IDEのために作られたエディタで、Cloud9がAWSに買収された後もオープンソースプロジェクトとして独立して開発が続いています。GitHub CopilotやAtomエディタが登場する以前から使われている、ブラウザ用コードエディタの老舗的な存在です。

主な特徴

軽量 - Monaco Editorと比べてファイルサイズが小さく、読み込みが速い
豊富な言語モード - JavaScript、Python、HTML、CSS、Markdownなど100以上の言語のシンタックスハイライトに対応
テーマの豊富さ - Monokai、GitHub、Twilight、Chromeなど20種類以上の組み込みテーマ
スクリプトタグだけで動く - ビルドツールを介さず、CDNのスクリプトタグとわずかなコードだけで動作する

インストール

npm経由でインストールする場合はace-buildsパッケージを使います。

npm install ace-builds

CDN経由で使う場合はビルド済みファイルを直接読み込むだけで済みます。

<script src="https://cdn.jsdelivr.net/npm/ace-builds@1.44.0/src-min-noconflict/ace.js"></script>

Aceのサンプルを動かす

以下は、ace.edit()でDOM要素をエディタ化し、setTheme()でテーマ、session.setMode()で言語モードを指定する最小構成です。テキストエリアではなく、実際にAceのエディタコンポーネントが動いています。

// 要点: div要素をace.edit()に渡すだけでエディタ化される
const editor = ace.edit('editor')
editor.setTheme('ace/theme/monokai')
editor.session.setMode('ace/mode/javascript')
editor.setValue('function add(a, b) {\n  return a + b;\n}')

// basePathを設定するとテーマ・モード・workerを動的読み込みできる
ace.config.set('basePath', 'https://cdn.jsdelivr.net/.../src-min-noconflict/')

実際に動かせるものが下です。エディタ内のコードを書き換えると、その場でシンタックスハイライトが反映されます。editor.getValue()で現在の文字数と行数も取得しています。

editor.setTheme('ace/theme/monokai')のmonokai部分をgithubやtwilightに変えるだけで見た目が変わります。session.setModeをace/mode/pythonにすればPythonのハイライトに切り替わることも、次のサンプルで確認できます。

基本的な使い方

Aceの最小実装は、対象のDOM要素をace.edit()に渡すだけです。

const script = document.createElement('script')
script.src = 'https://cdn.jsdelivr.net/npm/ace-builds@1.44.0/src-min-noconflict/ace.js'
script.onload = () => {
  ace.config.set('basePath', 'https://cdn.jsdelivr.net/npm/ace-builds@1.44.0/src-min-noconflict/')

  const editor = ace.edit('editor')
  editor.setTheme('ace/theme/github')
  editor.session.setMode('ace/mode/javascript')
}
document.head.appendChild(script)

ace.edit('editor')は、指定したid（またはDOM要素）の中身をエディタに置き換えます。setTheme()でカラーテーマ、session.setMode()で言語モードを指定すれば、その言語に応じたシンタックスハイライトとインデントルールが即座に適用されます。

npm経由でバンドラーを使う場合は、次のようにインポートします。

import ace from 'ace-builds/src-noconflict/ace'
import 'ace-builds/src-noconflict/mode-javascript'
import 'ace-builds/src-noconflict/theme-monokai'

const editor = ace.edit('editor')
editor.setTheme('ace/theme/monokai')
editor.session.setMode('ace/mode/javascript')

実践的なユースケース

言語モードを切り替える

Aceは1つのエディタインスタンスのまま、言語モードだけを差し替えられます。エディタの中身に応じてハイライトを切り替えたいコードスニペット共有サービスや、複数言語のサンプルを1つのビューアで見せたい技術ドキュメントで役立つパターンです。

// 要点: session.setMode()を呼ぶだけで言語ハイライトが即座に切り替わる
editor.session.setMode('ace/mode/python')
editor.session.setValue(pythonCode)

editor.session.setMode('ace/mode/html')
editor.session.setValue(htmlCode)

ボタンを押すと、JavaScript・Python・HTMLの3言語間でコードとハイライトが切り替わります。ace/mode/pythonのように、モード名を差し替えるだけで対応言語が変わる点に注目してください。

テーマを切り替える

エディタの見た目をユーザー設定で選ばせたい場合、setTheme()を呼び直すだけでライブラリ側のCSS読み込みまで面倒を見てくれます。ダークモード対応のアプリでエディタ部分だけ浮いて見える、といった問題を避けられます。

// 要点: setTheme()に渡す文字列を変えるだけでテーマが切り替わる
editor.setTheme('ace/theme/monokai') // ダーク系
editor.setTheme('ace/theme/github')  // ライト系

セレクトボックスでテーマを選ぶと、同じエディタ内容のまま配色だけが切り替わります。ace/theme/xxxのxxx部分がテーマ名で、Aceには20種類以上のテーマが同梱されています。

読み取り専用にする

コードの解説記事やレビュー画面のように、シンタックスハイライトは欲しいが編集はさせたくない場面もあります。setReadOnly(true)を渡すだけで、カーソル移動やコピーはできるが編集はできない状態になります。

// 要点: setReadOnly()の真偽値で編集可否を切り替えられる
editor.setReadOnly(true)
editor.renderer.setShowGutter(true) // 行番号は表示したまま

チェックボックスでON/OFFを切り替えると、同じエディタが即座に編集可能・読み取り専用の間を行き来します。入力しようとしても文字が反映されないことを確認してみてください。

まとめ

Aceは、CDNのスクリプトタグ1本と数行のJavaScriptだけで、シンタックスハイライト付きの本格的なコードエディタをページに埋め込めるライブラリです。ace.edit()でDOM要素をエディタ化し、setTheme()とsession.setMode()でテーマと言語を指定する、というシンプルなAPIの組み合わせだけで、言語切り替え・テーマ切り替え・読み取り専用化といった実用的な機能を実装できます。

Monaco Editorほどの重厚な機能は不要だけれど、<textarea>では物足りない。そんな「ちょうどいい」ポジションを埋めてくれるのがAceです。管理画面の設定エディタやコードスニペット表示など、軽量なコード入力欄が必要になったら、まずAceを検討してみてください。