LoginSignup
1
1

More than 1 year has passed since last update.

AtCoderをjavascriptで解くとき、vscodeとquokka.jsを活用する。

Last updated at Posted at 2022-10-25

vscode でAtCoderの解答を作成して→プラウザに張り付けてコードテスト→以下正解するまで繰り返し
の作業を少し改善できた話です。
類似の方法や、そもそもnodeを入れればいいのかもしれません。

注意事項(2022/10/28追記)

改行コードがwindowsの場合、\r\n linuxでは\nのため、
\nでsplitすると、windows側では\rが残ってしまう。

/\r\n|\n|\r/

でsplitするとよい。

環境

できること

  • コードテストのように、標準入力を与えて、出力を確認できる。
  • コードを修正すると、即時に結果が確認できる。
  • コードの修正なしに提出できる。

フォルダー構成など

quokka.jsをvscodeにインストールした状態で、以下のようなファイル構造にしたとします。

atcoder
├── A.js
├── dev
│   └── stdin

vscodeでは、atcoderフォルダーを開いた状態にします。
stdin に標準入力を記載します。
A.jsには、提出するスクリプトを記載します。

私は、いつもこちらの記事の方法で標準入力の値を取得しています。
(毎回助かっており大変感謝しています)

こちらのやり方を一部修正します。
具体的には、readFileSyncへ与えるpathをatcoderで提出する際と、ローカル環境で切り替える必要があります。

let path = require("fs").existsSync("/dev/stdin") ? "/dev/stdin" : "./dev/stdin";
main(require("fs").readFileSync(path, "utf8"));

こうすると、atcoder環境とローカル環境で切り替えることができます。
(ローカル環境を優先で三項演算子を記載すると、かなり遅くなるので注意が必要です。)
"./dev/stdin"は固定ではないので、実際はフォルダー構成も自由です。

実行方法

quokka.jsのショートカットキー
Ctrl + k + q
もしくは、表示→コマンドパレット→quokka.js:start on current file
で実行できます。

スクリーンショット 2022-10-25 224100.png

実行すると、ターミナルの位置の出力と、console.logの行(9行目)に結果が表示されます。

スクリプトの修正を検知して、自動的に再実行されるので便利です。

注意点

  • stdin 側のテキストを変更して保存しても、結果に反映されない(js側のファイルを変更する必要がある?)

まとめ

  • vscodeとquokka.jsを使うと、nodeのインストールなしに、実行結果確認できます。
  • いちいちコードテストに提出して確認する手間が省けます。
  • 標準入力を変更しても結果に反映されないので注意が必要です。

参考になれば。

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1