Monaco Editorの基本的な使い方

自身が作成したウェブサイト上に、ユーザーが自由に入力してコードの挙動を確かめることができるエディターを設置したい場合があるかと思います。その場合、最も基本的な方法はcontenteditable属性を用いることかと思いますが、この方法で実装するのはめちゃくちゃ骨が折れます。。。

ウェブサイトに埋め込めるエディターであるAceエディターやMonaco Editorを用いると、かなり楽です。

今回はVS codeのソースをもとにウェブブラウザー上で動くよう作成されたMonaco Editorの基本的な使い方を説明します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/573922/4a3a1453-627f-5987-3e0c-694f02e050c2.png)
画像は[マイクロソフトの公式のMonaco Editorページ](https://microsoft.github.io/monaco-editor/playground.html)より

## 前提
chrome（バージョン: 101.0.4951.67）
Monaco Editor version 0.33.0.

## Monaco Editorとは？
### Microsoft社のオープンソース
Monaco Editorは、Microsoftがオープンソースとして開発しているコードエディターです([マイクロソフトの公式のMonaco Editorページ](https://microsoft.github.io/monaco-editor/index.html))。VS codeのソースをもとにウェブブラウザー上で動くよう作成されています。

MITライセンスで作成されており、EdgeやChrome、Firefox、Safari、Operaをサポートしています。ただし、モバイルブラウザーやモバイルのWebフレームワークはサポートされていないので注意が必要です。

### Monaco Editorの主な2つの機能
#### 機能1. 通常のEditor機能
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/573922/a9171ecb-b2cf-0fec-9972-92a8d2f52521.png)
画像. [マイクロソフトの公式のMonaco Editorページ](https://microsoft.github.io/monaco-editor/index.html)より

VS codeのように、ブラウザ上でコードエディターとして機能します。
#### 機能2. Diff Editor
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/573922/9d08e44f-f8ba-6b3e-b7c4-5d6df143ad85.png)
画像. [マイクロソフトの公式のMonaco Editorページ](https://microsoft.github.io/monaco-editor/index.html)より

コードにあった変更を表示することができる機能です。

その他詳細については、[GithubのMonaco Editor FAQページ](https://microsoft.github.io/monaco-editor/index.html)に詳しいです。

## Monaco Editorなどの埋め込みエディタを使用したい画面
埋め込みエディタの価値を感じるのは、例えば、[Bootstrap Editor](https://www.venezia-works.com/bst/index.html)という、Bootstrapのテンプレートを使って簡単に希望のデザインのサイトを作ることができるサービスを使用しているときでしょう。

Bootstrap Editorのように、コードを書き直したらHTMLの表示がどのように変わるのかをリアルタイムに確認できるようなサービスでは重宝します。Bootstrap Editorでは、Monaco Editorと似たような機能を持つAce Editorを使用しています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/573922/4c14abdc-7abf-e47e-a168-8e0b89718e00.png)
画像. [Bootstrap Editor](https://www.venezia-works.com/bs4/index.php)より

## 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: の値である配列に記載されたコードをテキストエディタとして表示することができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/573922/140c6635-7b13-8612-b4a5-371e7652e559.png)
画像. 上述のHTMLファイルをブラウザに表示した結果

## Monaco Editorを他の多様な使い方を学ぶには

Monaco Editorには、[Play Ground](https://microsoft.github.io/monaco-editor/playground.html)ページが備わっていて、例えば特定のkeyが押されたイベントをリッスンする方法などが書かれています。

[https://microsoft.github.io/monaco-editor/playground.html](https://microsoft.github.io/monaco-editor/playground.html)

また、ブラウザに埋め込まれたMonaco Editorのコードが変更されたイベントをリッスンする方法については別記事にまとめています。

https://qiita.com/kyok01_japan/items/fe68dba8d15399dd87c7