これから毎日AtCoderをJavaScriptで解かないといけなくなった人のための記事


アプレンティスでは "毎日1問以上AtCoderの問題を解く" というノルマがあり、
今後参加される方も同じ問題に直面すると思ったので記事にしました。

なぜJavaScriptかというと、
カリキュラムがフロント寄りで最も使用する頻度が高いと考えたからです。

この記事では、毎日AtCoderを解くうえで手間となる
ディレクトリの作成を簡略化するスクリプトと、使用例について紹介します。

https://apprentice.jp/lp

<h1>前提条件</h1>

・VSCodeで回答を作成したい
・JavaScriptで解きたい
・Node.jsインストール済み
・GitBashインストール済み
・Windows (Macでも動作するはずですが未テストです)
・AtCoderアカウント作成済み

<h1>どこに問題があるの？</h1>

↓AtCoderProblems

https://kenkoooo.com/atcoder/#/table/

![problems top.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3840466/3d2142ce-37ff-a6fb-4414-b458bfbce71c.png)
問題は公式でも良いですが、私はAtCoderProblemsを利用しています。
開催番号順になっていて見やすく、解いた問題をフィルタできるからです。

赤枠内の問題名をクリックすることで問題のページに飛ぶことができます。
AtCoderではAの方が易しくB,Cとアルファベット降順になるにつれ難易度が上がります。

<br>


![9a130b3a3c13d350e6dbe2dc6aa5588d.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3840466/a5806fb1-5e2f-e105-3875-4c12d7078b5e.png)
公式では参加したコンテストのデータしか残りませんが、
Problemsなら過去問に解答したデータも見ることができるためモチベ維持にも使えます。

続いて実際に問題を解くわけですが、
AtCoderの問題ページにある提出欄は使いにくいので、
VSCodeを使って問題を解いていく例について紹介します。

<h1>どうやって解くの？</h1>

![51d746608c71003ad68dd6cc5e693f73.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3840466/daeeb503-2680-dab3-390e-ff486bc9e1c4.png)

私は上記のようなディレクトリ構造で毎日解いた回答を保管しています。

以下のリポジトリからクローンを作成してテンプレートを使用可能です。

https://github.com/HakuryuSato/AtCoder-Daily-Template

JavaScript用に構築していますが、以下2点を変更すれば他言語でも流用は可能です。
・.vscode/launch.json
・template/code.js

まずはディレクトリ構造について解説します。

<h2>ディレクトリ構造</h2>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3840466/27cd3374-d664-06b6-2e73-f57c0edc6755.png)
[ルート直下]
350：templateからコピーされるファイル(AtCoderABCのコンテスト番号)
template：コピー元となるテンプレートの入ったフォルダ
copy_template.sh：フォルダ名(例:350)を入力するとtemplateをA~Eの下部フォルダにコピーするスクリプト

[template直下]
code.js：解答を記述するファイル
input1~3：例文を入力するファイル

<br>
次にスクリプトについて簡単に解説します。

<h2>スクリプト</h2>

```sh
# Main folder name input
read -p "Enter the main folder name: " mainfolder

# Create the main directory
mkdir -p "$mainfolder"

# Subdirectories to be created inside the main folder
directories=("A" "B" "C" "D" "E")

# Create each subdirectory inside the main folder and copy template contents
for dir in "${directories[@]}"; do
    mkdir -p "$mainfolder/$dir"
    cp -r ./template/* "$mainfolder/$dir/"
done
```
実行するとフォルダ名を聞いてくるので、フォルダ名(例:350)を入力すると
"同じディレクトリにあるtemplate直下のファイル" を
"フォルダ名のA~Eの下層フォルダ" に "コピーする" というシンプルなスクリプトです。

<br>

続いてcode.jsの構造について解説します。

<h2>code.jsの構造</h2>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3840466/43d2443e-a536-d759-ecda-49859cbd5f4d.png)

[重要な要素]
3行目 file_number ： input1~3のファイル番号です、ここで入力例を切り替えます。
5行目 Main関数：ここに処理を記述します。
16行目 ：このコードはinput1~3のファイルに記述した入力例を読み取るローカルテスト用です、提出前にコメントアウトします。
17行目 ：このコードは提出時用です。提出前コメントアウトを解除し、16行目をコメントアウトして提出します。

最後にこれらのライフサイクルについてまとめます。

<h1>ライフサイクル</h1>

大まかに以下の流れで使用することができます。

1.コンテスト番号のディレクトリをスクリプトで作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3840466/4f62c618-d525-5ab9-86da-c03c7807a5a2.png)

2.問題の難易度(A,B,C..)ごとに解答を記述

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3840466/b348383c-c65a-f7ec-6511-c517118e06d0.png)

3.解き終わったら自分のAtCoder用リポジトリに保存

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3840466/b8fef662-ae6a-7465-4b23-9fb196a7748a.png)


以上となります。

"AtCoder" を "毎日"
"JavaScriptで解かなければならない" という
ニッチな状況でお困りの方は参考にどうぞ。


<br>