2
3

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

Posted at

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

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

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

前提条件

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

どこに問題があるの?

↓AtCoderProblems

problems top.png
問題は公式でも良いですが、私はAtCoderProblemsを利用しています。
開催番号順になっていて見やすく、解いた問題をフィルタできるからです。

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


9a130b3a3c13d350e6dbe2dc6aa5588d.png
公式では参加したコンテストのデータしか残りませんが、
Problemsなら過去問に解答したデータも見ることができるためモチベ維持にも使えます。

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

どうやって解くの?

51d746608c71003ad68dd6cc5e693f73.png

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

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

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

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

ディレクトリ構造

image.png
[ルート直下]
350:templateからコピーされるファイル(AtCoderABCのコンテスト番号)
template:コピー元となるテンプレートの入ったフォルダ
copy_template.sh:フォルダ名(例:350)を入力するとtemplateをA~Eの下部フォルダにコピーするスクリプト

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


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

スクリプト

# 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の下層フォルダ" に "コピーする" というシンプルなスクリプトです。


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

code.jsの構造

image.png

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

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

ライフサイクル

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

1.コンテスト番号のディレクトリをスクリプトで作成
image.png

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

image.png

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

image.png

以上となります。

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


2
3
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
2
3