概要
Ruby on Railsをベースとしたアプリ制作時に、Codemirror6の導入で苦戦したため、導入方法をまとめました。
Codemirror6は公式マニュアルにGetting Startedのセクションが無く、どこを見たらいいのか分からないので、初心者にはかなりとっつきにくい文献という印象でした。
結論として、以下のBundling Exampleのセクションを見ながら進める事でEditor構築することが出来たので、こちらの流れに沿って説明します。
また、今回の説明ではRuby on Railsを使用していますが、Codemirrorの実装は基本Javascriptしか触ってないので、本記事を読むために必要知識はJavascript（+ Node.js）となります。
エディターの導入
1. CodeMirror＆HTMLパッケージのインストール
公式文書ではJavascript用エディターを導入していますが、今回私はHTML用エディターを実装したいので、HTMLのパッケージをインストールします。
※任意の言語をサポートする場合は、@codemirror/lang-xxx（xxx:言語名）のパッケージを指定してください。
まずは以下のコマンドで、CodeMirror6のコアパッケージをインストールします。
npm i codemirror @codemirror/lang-html
codemirror
CodeMirror6のコアパッケージ
@codemirror/lang-html
このコマンドは、エディターにHTMLのシンタックスハイライトや補完機能を追加するパッケージを導入します。CodeMirrorの設計は、コアエディタを拡張モジュールを追加する方針であるため、HTMLに特化した機能を使うためにこのモジュールを導入しています。
2. Rollupの導入
まずは以下のコマンドでこのコマンドは、Rollupをプロジェクトにインストールします。
npm i rollup @rollup/plugin-node-resolve
rollup
Rollupは、モジュールバンドラと呼ばれるツールで、JavaScriptモジュールを1つのファイルにまとめる役割を果たします。
codemirror6のコード量は莫大なため、必要な機能のみを選択してファイルボリュームを減らすための施策としてRollupの使用が推奨されています。
@rollup/plugin-node-resolve
このプラグインは、RollupがNode.jsのモジュール解決アルゴリズムを使って、node_modulesディレクトリ内のパッケージを見つけられるようにするためのものです。
rollupの導入が終わったら、次はコードを実際に記載する作業場を用意するため、editor.mjsを作成します。
作製場所は任意のjavascriptファイル保管場所で良いのですが、今回はルートディレクトリに保管した場合で説明します。
editor.mjsを作ったら、以下のコードを実行しましょう。
node_modules/.bin/rollup editor.mjs -f iife -o editor.bundle.js -p @rollup/plugin-node-resolve
この時はまだeditor.mjsに何も記入していないので、同じルートディレクトリに空っぽのeditor.bundle.jsが作られます。
ここまで出来れば、rollupの動作確認は完了です。
HTMLファイルでjavascriptを呼び出す際はeditor.bundle.jsを読み込むようにしておきましょう。
例：<script src="editor.bundle.js"></script>
3. エディターの構築
いよいよエディターの構築に入ります。
editor.mjsに以下のコードを書きます。
import { EditorView, basicSetup } from "codemirror";
import { html } from "@codemirror/lang-html";
let editor = new EditorView({
extensions: [basicSetup, html()], // HTML用の言語モードを追加
parent: document.body, // HTMLのbodyタグを認識してエディター追加する
});
あとはコード実行すれば、bodyタグの後にエディターが構築されるはずです。
editor.mjsを更新しているので、rollupの実行も忘れずに行いましょう。
node_modules/.bin/rollup editor.mjs -f iife -o editor.bundle.js -p @rollup/plugin-node-resolve
ここから以下ページなどを参考にしつつ、スタイルを設定する事で、よりエディターらしい形になっていきます。
今回の記事は基本のエディター構築までを取り扱いましたが、特にCodemirror6はチュートリアルが無いので、基本的にはExampleを読み進めて必要な機能を実装していく事で学びが深まると思います。