【JavaScript】AtCoderのローカルCLI環境構築メモ

女子て年齢ではないけれど、「競プロ女子部」というコミュニティに最近入会させてもらって、AtCoderに挑戦し始めました。
いろんな人に教わったJavaScriptでのローカルでの実行環境構築方法を備忘録としてメモします。

追記: JavaScript → TypeScript にしたので変更方法も追記しました

# 環境
M1 Mac
バージョン管理ツールは asdf を入れたばかりです。（asdfはまだあまりよく分かってません）
node v22.6.0
python v3.12.5
pip v24.2

# 手順
python環境とpip、nodejsは自分はあらかじめ入っているので省略します。

## フォルダの作成
適当なところにフォルダを作成し、移動します
```zsh
mkdir atcoder
cd atcoder
```

## atcoder-cliをインストールする
```zsh
npm install -g atcoder-cli

# 確認
acc -v
```

# online-judge-toolsをインストールする
```zsh
pip3 install online-judge-tools

# 確認
oj --version  　# zsh: command not found: oj が発生
```
https://github.com/online-judge-tools/oj/blob/master/docs/INSTALL.md

を見て
```zsh
find / -name oj 2> /dev/null
```
をするにも一向に終わらず。
とりあえず、適当に見ていくと `~/.asdf/installs/python/3.12.5/bin/` にojがあることがわかった。
上の公式手順書に書いてあるままに
```zsh
~/.asdf/installs/python/3.12.5/bin/oj --version 
```
をすると
```
Traceback (most recent call last):
  File "/Users/mae/.asdf/installs/python/3.12.5/bin/oj", line 5, in <module>
    from onlinejudge_command.main import main
  File "/Users/mae/.asdf/installs/python/3.12.5/lib/python3.12/site-packages/onlinejudge_command/main.py", line 19, in <module>
    import onlinejudge_command.update_checking as update_checking
  File "/Users/mae/.asdf/installs/python/3.12.5/lib/python3.12/site-packages/onlinejudge_command/update_checking.py", line 1, in <module>
    import distutils.version
ModuleNotFoundError: No module named 'distutils'
```
検索すると

https://qiita.com/pitao/items/1740a62ddee797aed807

の記事が出てきたので

```zsh
pip3 install setuptools  
```
して再度
```zsh
~/.asdf/installs/python/3.12.5/bin/oj --version 
```
でOKだった。

公式手順書に書いてあるように ~/.zshrcに
```
# atcoder oj
export PATH=$HOME/.asdf/installs/python/3.12.5/bin:$PATH
```
を追加して
```zsh
source ~/.zshrc

oj --version # コマンドが効くか確認
```
バージョンが出てきたらOK

## atcoder-cliの設定
```zsh
acc login  # atcoderにログイン

acc config
```
でconfig情報を見る

```zsh
acc config oj-path ~/.asdf/installs/python/3.12.5/bin/oj
acc config default-template js  
```
する
```zsh
 cd `acc config-dir`

 mkdir js
 cd js 

 touch main.js template.json   
```

```javascript:main.js
function main(input) {
  const args = input.split('\n');
  const nums = args[0].split(' ');


  console.log(b);
}

main(require('fs').readFileSync('/dev/stdin', 'utf8'));
```
とか適当に

```json:template.json
{
    "task": {
     "program": ["main.js"],
     "submit": "main.js"
    }
}
```
参考サイトに書いてあるのそのまま書いた

## online-judge-toolsの設定
```zsh
oj login https://atcoder.jp
```
でログインした。

## 動作確認
```zsh
acc new abc366

ls
```
ワークスペース内に `abc366` のディレクトリが作られたことを確認。

:::note info
`acc new abc366` とかで
```
(node:39740) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
```
とエラーが出るのはnodeのバージョンで今出るらしいので無視していいよう
:::



```zsh
cd abc366cd abc366cd abc366cd abc366
code .
```
でvscodeで開く

適当にコードを書いて

### テスト
```zsh
oj t -c "node ./a/main.js" -d ./a/tests/    
```
:::note info
```
[WARNING] GNU time is not available: gtime
[HINT] You can install GNU time with: $ brew install gnu-time
```
と出るので
```zsh
brew install gnu-time
```
もした
:::

### 提出
```zsh
acc submit ./a/main.js  -t abc366_a -- -l 5009   
```
確認の入力をする必要あり

---
# 追記: エイリアスの設定
```zsh: ~/.zshrc
# atcoder
acc_new(){
    acc new "$1"
    cd "$1"
}

acc_test(){
    oj t -c "node ./$1/main.js" -d ./$1/tests/   
}

acc_submit(){
    acc submit ./$1/main.js  -t "$(basename "$(pwd)")_$1" -- -l 5009  
}
```
と設定して
```zsh: zsh
source ~/.zshrc   
```

をする

## コンテストフォルダの作成と移動
```zsh: zsh
; atcoderのフォルダのところで
acc_new abc366
```
フォルダを作って、移動してくれる。

## テスト実行
```zsh: zsh
acc_test a
```
とか `b`問題なら `a`→`b` に変える

## 提出
```zsh: zsh
acc_submit a
```
とか `b`問題なら `a`→`b` に変える

---
# 追記: 言語をTypeScriptへ変える

```zsh
 cd `acc config-dir`

 mkdir ts
 cd ts 

 touch main.ts template.json   
```

```typescriptscript:main.ts
import { readFileSync } from "node:fs";

function main(input: string) {
  const args = input.split('\n');
  const nums = args[0].split(' ');



  console.log(b);
}

main(readFileSync('/dev/stdin', 'utf8').trimEnd());

```
とか適当に

```json:template.json
{
    "task": {
     "program": ["main.ts"],
     "submit": "main.ts"
    }
}
```


```zsh
acc config default-template ts  
```

atcoderのコンテストを解いてた親フォルダ(ex. atcoder)で
```zsh
npm init -y

npm install --save-dev @types/node

npm i -D tsx
```

```diff_json:package.json
{
+    "type": "module"
}
```
を追加

## エイリアスの変更
```diff: ~/.zshrc
# atcoder
acc_new(){
    acc new "$1"
    cd "$1"
}

acc_test(){
-    oj t -c "node ./$1/main.js" -d ./$1/tests/   
+    oj t -c "npx tsx ./$1/main.ts" -d ./$1/tests/
}

acc_submit(){
-    acc submit ./$1/main.js  -t "$(basename "$(pwd)")_$1" -- -l 5009
+    acc submit ./$1/main.ts  -t "$(basename "$(pwd)")_$1" -- -l 5058
}
```
と設定して
```zsh: zsh
source ~/.zshrc   
```

# 参考
https://zenn.dev/deen/articles/137bf151b139ef

https://qiita.com/NaokiOsako/items/dcbc0a91e1bbca8ee45d

https://d-burioden.hateblo.jp/entry/2022/11/22/002958

https://zenn.dev/polysan/articles/0dd6de3d18ff29

https://umamichang.dev/posts/2024-03-23/

https://qiita.com/shunii/items/1863bb65a463783b3213