Monaco Editorを使ってブラウザ上で動くAtCoder用のデバッグアプリを作る【JS】

目次

1. 概要
2. デモ
3. 他のjavascript製エディタと比べて
4. 追記-20190504
5. 参考

概要

https://tech-blog.s-yoshiki.com/2018/08/435/

以前書いた「【JavaScript】AtCoderとかでも利用したい、ブラウザで動くエディタ + デバッグ環境を作る」を流用して、エディタ機能に「Monaco Editor」を利用した、AtCoder用のデバッグ環境を作りました。

Monaco Editor とはMicrosoft謹製のエディタ「VisualStudioCode」でも使われているエディタ機能のJavascriptライブラリです。

以前はAceEditorを利用して作成した機会があったので、それらを比較した感想も書きました。

デモ

デモです。

https://jsfiddle.net/s_yoshiki/4mkj6fav/show

他のJavaScript製エディタと比べて

Ace Editor VS CodeMirror VS Monaco Editor

軽く触れた感想ですが、Monaco EditorはAce Editorなどと比べて特に優れていると感じた点は、

• インテリセンス機能が強い
• 日本語入力が安定している

という点であると思います。

Visual Studio Codeを利用している人でればわかるかと思いますが、 インテリセンス機能が利用できます。

また、AceEditorなどは日本語を入力した際のチラツキがとても気になりますが、 Monaco Editorにはありませんでした。

APIについてもたくさんの機能があるため、 もう少し使用してみたら記事にしてみようと思います。

追記 2019/05/04

改良版をGitHubで公開しました。

https://s-yoshiki.github.io/AtCoder-JsDebugger/#/

参考

https://tech-blog.s-yoshiki.com/2018/08/435/

https://github.com/Microsoft/monaco-editor