MicrosoftからMonacoエディタがリリースされました!
スポンサーリンク
VSCodeやTypeScript Playgroundで使われているエディタを部分的に切り出したものが、Monacoとしてリリースされました。
https://microsoft.github.io/monaco-editor/index.html
今回は npm module としての提供となっています。
なにがうれしいのか
百聞は一見に如かずです。こちらをご覧ください。
これまではこういった開発ツールを作ったり、Atomのような独自のエディタを作る際には一から自分で作る必要がありましたが、今後は Monaco をベースに開発することが可能となります。
あくまでプログラムやマークアップを記述するためのものだと思いますので、ブログ記事を書いたりするようなリッチテキストエディタには向かないかもしれません。
Monaco の機能
VSCodeのエディタそのままなので機能を挙げていけばキリがないのですが、このあたりの機能が普通に使えます。
- IntelliSense
- 言語毎のシンタックスチェックおよび色付け
- テーマ切り替え
- 差分(diff)表示
ただし、シンタックスチェックの方はTypeScript, JavaScript, CSS, LESSの対応のみとなっています。
試してみる
せっかくなので手元で簡単に動かしてみようと思います。
インストール
まずはインストールから。npm モジュールなので、コマンド一発で入ります。
$ npm install monaco-editor
HTML作成
公式サイトとほぼ同じですが、index.html として以下を作成します。公式のものと違うのは、script のパスをnpmでインストールした位置に変更しています。
<!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" > </head> <body> <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>
動作確認
Webサーバを設定するほどのものでもないので、python で簡易HTTPサーバを立ち上げて確認します。
$ python -m SimpleHTTPServer 8888
ブラウザで http://localhost:8888/index.html にアクセスすれば、このようにエディタが表示されるはずです。
まとめ
Atomが登場し、Eclipseがクラウド上で動いたりと昨今のエディタは徐々にブラウザベースへ移行している印象ですが、いまいちデファクトとなるエディタが決まっていません。Monacoによって、このあたりに決着を付けるすばらしいエディタが開発されることを祈っています。