自身が作成したウェブサイト上に、ユーザーが自由に入力してコードの挙動を確かめることができるエディターを設置したい場合があるかと思います。その場合、最も基本的な方法はcontenteditable属性を用いることかと思いますが、この方法で実装するのはめちゃくちゃ骨が折れます。。。
ウェブサイトに埋め込めるエディターであるAceエディターやMonaco Editorを用いると、かなり楽です。
今回はVS codeのソースをもとにウェブブラウザー上で動くよう作成されたMonaco Editorの基本的な使い方を説明します。
画像はマイクロソフトの公式のMonaco Editorページより
前提
chrome（バージョン: 101.0.4951.67）
Monaco Editor version 0.33.0.
Monaco Editorとは？
Microsoft社のオープンソース
Monaco Editorは、Microsoftがオープンソースとして開発しているコードエディターです(マイクロソフトの公式のMonaco Editorページ)。VS codeのソースをもとにウェブブラウザー上で動くよう作成されています。
MITライセンスで作成されており、EdgeやChrome、Firefox、Safari、Operaをサポートしています。ただし、モバイルブラウザーやモバイルのWebフレームワークはサポートされていないので注意が必要です。
Monaco Editorの主な2つの機能
機能1. 通常のEditor機能
画像. マイクロソフトの公式のMonaco Editorページより
VS codeのように、ブラウザ上でコードエディターとして機能します。
機能2. Diff Editor
画像. マイクロソフトの公式のMonaco Editorページより
コードにあった変更を表示することができる機能です。
その他詳細については、GithubのMonaco Editor FAQページに詳しいです。
Monaco Editorなどの埋め込みエディタを使用したい画面
埋め込みエディタの価値を感じるのは、例えば、Bootstrap Editorという、Bootstrapのテンプレートを使って簡単に希望のデザインのサイトを作ることができるサービスを使用しているときでしょう。
Bootstrap Editorのように、コードを書き直したらHTMLの表示がどのように変わるのかをリアルタイムに確認できるようなサービスでは重宝します。Bootstrap Editorでは、Monaco Editorと似たような機能を持つAce Editorを使用しています。
画像. Bootstrap Editorより
Monaco Editorの使い方
Monaco Editorは主に以下の手順で使用します。
- npmを使用してダウンロードする
- ダウンロードしたload.jsを読み込む
- 所定のコードを記述する
npmを使用してダウンロードする
ターミナルやコマンドプロンプトで、以下のようなコマンドをすることで実行したディレクトリ配下にMonaco Editor使用に必要なファイルをダウンロードすることができます。
npm install monaco-editor@0.33.0
npm install monaco-editor
ダウンロードしたload.jsを読み込む
どこのディレクトリにダウンロードしたかによるのですが、HTMLファイルにて以下のような記述をするとload.jsを読み込めます。
<script src="./node_modules/monaco-editor/min/vs/loader.js"></script>
パスは、Monaco Editor関係のファイルをどこにダウンロードしたのかに応じて適宜書き換えてください。
所定のコードを記述する
<!DOCTYPE html>
<html>
<head>
<title>browser-amd-editor</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
<h2>Monaco Editor Sample</h2>
<div
id="container"
style="width: 800px; height: 600px; border: 1px solid grey;"
></div>
<script src="./node_modules/monaco-editor/min/vs/loader.js"></script>
<script>
require.config({ paths: { vs: "./node_modules/monaco-editor/min/vs" } });
require(["vs/editor/editor.main"], function () {
var editor = monaco.editor.create(
document.getElementById("container"),
{
value: [
"function x() {",
'\tconsole.log("Hello world!");',
"}",
].join("\n"),
language: "javascript",
}
);
});
</script>
</body>
</html>
このようにすれば、value: の値である配列に記載されたコードをテキストエディタとして表示することができます。
画像. 上述のHTMLファイルをブラウザに表示した結果
Monaco Editorを他の多様な使い方を学ぶには
Monaco Editorには、Play Groundページが備わっていて、例えば特定のkeyが押されたイベントをリッスンする方法などが書かれています。
https://microsoft.github.io/monaco-editor/playground.html
また、ブラウザに埋め込まれたMonaco Editorのコードが変更されたイベントをリッスンする方法については別記事にまとめています。