読者です 読者をやめる 読者になる 読者になる

らっちゃいブログ

日々の学びと気づきを発信するブログ

MicrosoftからMonacoエディタがリリースされました!

速報

スポンサーリンク

VSCodeやTypeScript Playgroundで使われているエディタを部分的に切り出したものが、Monacoとしてリリースされました。

https://microsoft.github.io/monaco-editor/index.html

今回は npm module としての提供となっています。

なにがうれしいのか

百聞は一見に如かずです。こちらをご覧ください。

Monaco Editor Playground

これまではこういった開発ツールを作ったり、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 にアクセスすれば、このようにエディタが表示されるはずです。

f:id:racchai:20160621145656p:plain

まとめ

Atomが登場し、Eclipseクラウド上で動いたりと昨今のエディタは徐々にブラウザベースへ移行している印象ですが、いまいちデファクトとなるエディタが決まっていません。Monacoによって、このあたりに決着を付けるすばらしいエディタが開発されることを祈っています。