概要

2022年の6月に新しく登場した「codemirror6」。以前は古いバージョンをVueで使っていましたが、今回初めてReactで使用してみました。
一部、ドキュメントの通りにやってもうまく動かなかったので、備忘録として書いておきたいと思います。

注意点

今回は、C言語のエディタを作ることを想定していますが、他の言語や、Markdownのエディタも作れるようです。機会があれば記事にしたいと思います。

全体の流れ

Reactのプロジェクト作成（今回はViteを使います）
ライブラリのインストール
コンポーネントの読み込み・配置
動作確認
機能追加

詳細手順

1. Reactのプロジェクト作成

適当な作業フォルダを作って、VSCodeなどのエディタで開きます。
開いたら、そのディレクトリをカレントディレクトリとして、ターミナルで以下のコマンドを実行します。

npm create vite@latest

表示される質問に答えてプロジェクトを作成します。

作成できたら以下のようにreactに必要なコンポーネントをインストールします。

cd codemirror-sample
npm i

インストールが終わると、ディレクトリ構成が以下のようになっていると思います。

サンプルを作るには余計なファイルが多すぎるので、
以下の作業を行って、シンプルなApp.tsxだけにします。

＜作業＞

App.cssとindex.cssの削除
main.tsxから、import './index.css'の記述を削除
App.tsxから、import './App.css'の記述を削除

加えて、App.tsxは以下の通りにします。

App.tsx

function App() {
  return (
    <>
      <h1>Codemirror 6 サンプル</h1>
    </>
  );
}

export default App;

3. ライブラリのインストール

以下のコマンドをターミナルで実行して、React用のCodemirror（react-codemirror
）のライブラリをインストールします。

npm install @uiw/react-codemirror --save

4. コンポーネントの読み込み・配置

App.tsxを以下のように変更し、Codemirrorのコンポーネントを配置します。

+ import ReactCodeMirror from "@uiw/react-codemirror";
+ import { SetStateAction, useCallback, useState } from "react";

function App() {
+ const [value, setValue] = useState<string>("");

+ //コードが変更された時に呼ばれる更新関数（メモ化済み）
+ const onChange = useCallback((val: SetStateAction<string>) => {
+   setValue(val);
+ }, []);
  return (
    <>
      <h1>Codemirror 6 サンプル</h1>
+     <ReactCodeMirror value={value} onChange={onChange} />
    </>
  );
}

export default App;

5. 動作確認

以下のコマンドをターミナルで実行して、開発サーバを立ち上げます。

npm run dev

ブラウザで、localhost:5173にアクセスすると、以下のようなエディタが現れます。文字を入力してみましょう。

これで導入ができました🎉

6. 機能追加

シンプルなエディタであればこれでもいいのですが、プログラミングのエディタのような使い方にするには、追加のライブラリをインストールする必要があります。

プログラミング言語への対応

今回は、C言語（C++言語）のエディタを作ることを想定して、機能追加をしてみましょう。
他の言語や、Markdownのエディタも作れますので、ライブラリの一覧などはドキュメント（ https://github.com/uiwjs/react-codemirror?tab=readme-ov-file ）を参照してください。

それでは、C言語（C++言語）のエディタに必要なライブラリをインストールします。
以下のコマンドをターミナルで実行してください。

npm i @codemirror/lang-cpp

次に、App.tsxに、機能追加のための記述をしていきます。
具体的には、<ReactCodeMirror>の属性に、extensionsを追加します。

+ import { cppLanguage } from "@codemirror/lang-cpp";
import ReactCodeMirror from "@uiw/react-codemirror";
import { SetStateAction, useCallback, useState } from "react";

function App() {
  const [value, setValue] = useState<string>("");

  //コードが変更された時に呼ばれる更新関数（メモ化済み）
  const onChange = useCallback((val: SetStateAction<string>) => {
    setValue(val);
  }, []);
  return (
    <>
      <h1>Codemirror 6 サンプル</h1>
      <ReactCodeMirror
        value={value}
        onChange={onChange}
+       extensions={[cppLanguage]}
      />
    </>
  );
}

export default App;

再度、開発サーバを起動して、動作確認してみましょう。

lang-cppというライブラリを追加したことで、コードのハイライトや、自動インデントに対応しました！

このようにCodemirrorでは、extensionsに追加することで、機能を高めていくことができます。

デザイン変更

さらに、エディタのデザイン（Theme）を変更することもできます！
ドキュメントによれば、以下のようにたくさん種類があるようです。

試しに、@uiw/codemirror-theme-xcodeというThemeをインストールしてみましょう。

npm i @uiw/codemirror-theme-xcode

以下のように、App.tsxを変更します。

import { cppLanguage } from "@codemirror/lang-cpp";
+ import { xcodeDark } from "@uiw/codemirror-theme-xcode";
import ReactCodeMirror from "@uiw/react-codemirror";
import { SetStateAction, useCallback, useState } from "react";

function App() {
  const [value, setValue] = useState<string>("");

  //コードが変更された時に呼ばれる更新関数（メモ化済み）
  const onChange = useCallback((val: SetStateAction<string>) => {
    setValue(val);
  }, []);
  return (
    <>
      <h1>Codemirror 6 サンプル</h1>
      <ReactCodeMirror
        value={value}
        onChange={onChange}
+       theme={xcodeDark}
        extensions={[cppLanguage]}
      />
    </>
  );
}

export default App;

動作確認してみましょう。

デザインが変わりました🎉
個人的には、XcodeのThemeが好きです😊

おわりに

以上、
ReactでCodemirror6を使う方法をご紹介しました！
途中紹介したように、Markdownのエディタとしても作ることができるようなので、時間が取れたらこれについてもやってみて、記事にしようかと思います！

参考文献