
Monaco Editorを使ってブラウザ上で動くAtCoder用のデバッグアプリを作る【JS】
2018-09-232 min read
目次
概要
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/#/参考
Recommends
ブラウザで動くAtCoder用のデバッガを作ってみた (JSのみ)
2019-05-02
Monaco Editorを使ってブラウザ上で動くAtCoder用のデバッグアプリを作る【...
2018-09-23
javascriptで累積和を解く
2022-02-27
JavaScriptの配列ショートハンド (AtCoder用)
2020-07-05
JavaScriptで幅優先探索 (bfs) を実装する
2020-01-13
MonacoEditor + Vue を使ってエディタを実装
2019-06-23
JavaScript で bit全探索
2019-06-10
深さ優先探索アルゴリズムを実装 部分和問題を解く
2018-12-25
素因数分解を行うプログラム サンプルコード JS/PHP
2018-12-24
【JavaScript】AtCoderとかでも利用したい、ブラウザで動くエディタ + デバ...
2018-08-29
初めて参加したAtCoderで惨敗した話
2018-07-23
[AmazonSES] node.js と ejs を利用してEメールを送信する
2022-04-09
GatsbyからNext.jsへのサイト移行
2022-04-04
NextJSでDevToysのようなものを作成した
2022-02-22
JSで動的計画法を利用して部分和問題を解く
2022-02-20
New Posts
[AWS CDK]ECS FargateでNestJSで作成したRESTfull APIデ...
2022-05-24
[AWS CDK]S3 CloudFront OAI Route53 構成 で NextJ...
2022-05-23
[CDK]SNS+SQS+DynamoDBでBounceとComplaint情報を収集する...
2022-04-11
[AmazonSES] node.js と ejs を利用してEメールを送信する
2022-04-09
GatsbyからNext.jsへのサイト移行
2022-04-04
[AWS CDK] Lambda で S3 オブジェクトを読み書きするStackの構築
2022-03-18
[AWS CDK] S3 + CloudFrontの構築とOriginAccessIden...
2022-03-09
[AWS CDK] Bastion(踏み台)構築。SSMとEC2InstanceConne...
2022-03-06
[AWS CDK] Cognito を構築
2022-03-04
AWS CDK v2 でVPC上にAPI Gateway + Lambda + RDS +...
2022-02-28
javascriptで累積和を解く
2022-02-27
AWS Amplify で monorepo を導入し 単一リポジトリで複数プロジェクトを...
2022-02-25
AWS CDK v2 で Lambda関数のデプロイ
2022-02-23
NextJSでDevToysのようなものを作成した
2022-02-22
JSで動的計画法を利用して部分和問題を解く
2022-02-20
Hot posts!
Proxy環境下でcurlを実行する
2019-12-07
OpenCVのMatのタイプ一覧表
2018-11-25
Macでも利用できるDBクライアント MySQL PostgreSQL Oracle など
2019-12-21
TablePlusを使ってみる。シンプルでモダンなSQLクライアントツール
2018-09-30
DBクライアントツールはDBeaverをおすすめしたい
2021-03-08
AWS S3のアクセスキーIDとシークレットアクセスキーの取得 作業用ユーザを作成
2019-06-12
AtCoderで初めて色がつくまでの話(茶色) レートが中々上がらなかった原因
2018-11-25
CentOS8でEPELとPowerToolsリポジトリの有効化
2020-11-30
Macでターミナルからポートスキャンを行う方法。
2018-12-09
Python + OpenCVのfillConvexPolyで複雑なポリゴンを描画する
2018-11-27
Date
▶︎
2022 年 (23)
▶︎
2021 年 (40)
▶︎
2020 年 (30)
▶︎
2019 年 (90)
▶︎
2018 年 (89)
▶︎
2017 年 (1)
Tags
Author