monaco-editorでコードエディター実装

はじめに

以前、react-aceをつかってコードエディターを作りました。

ぶべさんと相談した結果、monaco-editorをつかって実装することに決定いたしました。

なんでもいいって言われると思ったんですけど、さすがにJSの学習サイトでエディターの使い勝手というのは重要ですもんね。

確かに考えたらわかることでしたが、打ち合わせ前のフライング実装なので大丈夫です。

とはいえ頑張って作ったので却下されるのは・・・痒いです。

痛くも痒くもないよとは言えません、痒いです。

でも、monaco-editor/reactで実装して使ってみるとVScodeに操作性似てていいなって思いました。

Microsoft製です。私、Microsoftの株持ってるんでした。応援しなきゃ！！！

ということで紹介します。

インストール

npm install @monaco-editor/react

コード

"use client";
import { Editor } from "@monaco-editor/react";
type Language = "javascript" | "typescript" | "html" | "css";

interface Props {
  value: string;
  onChange: (value: string) => void;
  language: Language;
}

export const CodeEditor: React.FC<Props> = ({ value, onChange, language }) => {
  return (
    <Editor
      height="50vh"
      defaultLanguage={language}
      value={value}
      onChange={value => value && onChange(value)}
      theme="vs-dark"
      options={{
        fontSize: 20,
        tabSize: 2,
      }}
    />
  );
};

これはホントに内緒の話なんですけど、ぶべさんがほとんど書きました。

試した時に書いたコード送ってくれました。

エディターの実装は結果めちゃ楽したんですけど、一応見てみながら私がチェックしたポイントを記事に落としていきます。

onChange

癖があるのかなと思ったのはonChangeのイベントオブジェクトがundefinedもあり得るところでしょうか。

空の文字列じゃないんですね。

単純にstring型のステートにはセットできないということがわかりました。

ステートの型はstringです。

onChange={value => value && onChange(value)}

defaultLanguage

defaultLanguageはstring型で、サポートされている言語の一覧は下記にありました。

aceよりわかりやすいです。

theme

themeは二択しかないみたいです。vs-darkかlightっぽいです。

options

オプションで文字のサイズやタブのサイズの指定ができるんですね。

一覧みつけました。(埋め込めず)

https://microsoft.github.io/monaco-editor/typedoc/interfaces/editor.IDiffEditorConstructionOptions.html

出来た画面

(実行ボタンは別です)

普通に補完まであって凄いです・・！

TypeScriptの公式サイトで使われてるエディターもmonaco-editorらしいです。

おわりに

monaco-editorの勝ちです。

私がaceを使ってみたのは、メンテナンスされているかnpmで確認して、aceがa month agoだったのに対してmonacoはa year agoだったことや、aceは名前にreactとあり、reactで使いやすいように設計されているはずだと考えたためです。

でも、実際に書いて使ってみるっていうのも大切だなと感じました。

2つもコードエディターを実装できて良い学びになりました！