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

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




概要

【AtCoder】自分用のブラウザで動くテストコード環境を作る【JavaScript】
【JavaScript】AtCoderとかでも利用したい、ブラウザで動くエディタ + デバッグ環境を作る
AtCoderとかで使いたいブラウザで動くJS用のエディタ + デバッグ環境を作りました。AceEditor とか使ってます。来週からこれ使って頑張ります。 pic.twitter.com/xPXAV38YKk— s-yoshik...

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

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

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

デモ

デモです。

Debugger for AtCoder using - JSFiddle

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


Ace Editor VS CodeMirror VS Monaco Editor

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

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

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

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

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

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

参考

【AtCoder】自分用のブラウザで動くテストコード環境を作る【JavaScript】
【JavaScript】AtCoderとかでも利用したい、ブラウザで動くエディタ + デバッグ環境を作る
AtCoderとかで使いたいブラウザで動くJS用のエディタ + デバッグ環境を作りました。AceEditor とか使ってます。来週からこれ使って頑張ります。 pic.twitter.com/xPXAV38YKk— s-yoshik...
Microsoft/monaco-editor
A browser based code editor. Contribute to Microsoft/monaco-editor development by creating an account on GitHub.