Monaco Editorの基本的な使い方 #JavaScript

自身が作成したウェブサイト上に、ユーザーが自由に入力してコードの挙動を確かめることができるエディターを設置したい場合があるかと思います。その場合、最も基本的な方法は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使用に必要なファイルをダウンロードすることができます。

v0.33.0をダウンロードする場合のコマンド

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関係のファイルをどこにダウンロードしたのかに応じて適宜書き換えてください。

所定のコードを記述する

HTML上の記述.html

<!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のコードが変更されたイベントをリッスンする方法については別記事にまとめています。