Go to Qiita Advent Calendar 2024 Top
LoginSignup
14
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

@taizod1024(Taizo YAMAMOTO)

(2021年5月)Visual Studio CodeからPython/TypeScript/JavaScriptでAtCoder/Yukicoderに参加する

Last updated at Posted at 2021-05-20

はじめに

Visual Studio CodeからPython/TypeScript/JavaScriptでAtCoder/Yukicoderへ参加する拡張機能を作成しました。テストデータのダウンロードや解答の提出をVisual Studio Codeから行うことができます。

(2021/05/21) 開発したばかりの機能です。不具合、要望があればお知らせください。
(2021/05/22) オープンコンテストやAtCoder Beginners Selectionには未対応です。
(2021/09/23) テンプレートの例をv0.0.45に更新しました。
(2021/10/04) Pythonに対応しました。
(2021/10/14) Yukicoderに対応しました。
(2021/12/24) JavaScriptに対応しました。

AtCoder/Yukicoder Extension

Python/TypeScript/JavaScript でのAtCoder/Yukicoderへの参加をサポートする Visual Studio Code の拡張機能です。

機能

Python/TypeScript/JavaScript での Visual Studio Code から AtCoder/Yukicoder への参加をサポートします。

  • AtCoder/Yukicoder へのログイン
  • Python/TypeScript/JavaScript のソースコードの生成、テストデータのダウンロード
  • 解答のテスト実行、デバッグ実行
  • 解答の提出
  • ブラウザでの問題ページの表示

testtask

制限

マルチルートワークスペースには対応していません。

環境

  • Windows 10 (20H2 で動作確認)
  • Visual Studio Code (1.60.2 で動作確認)
  • Python (3.9.7 で動作確認)
  • TypeScript (Node.js 16.1 で動作確認)
  • JavaScript (Node.js 16.1 で動作確認)

準備

AtCoder および Yukicoder でユーザ登録します。Yukicoder の場合はプロフィール画面の API キーを確認しておいてください。

vscode

vscode の [拡張機能] から AtCoder/Yukicoder Extension を検索してインストールします。

Python

Python をインストールします。

TypeScript

Node.js をインストールしてから TypeScript の初期設定をします。

  1. vscode の [ファイル] > [フォルダを開く] からフォルダを選択します。
  2. [ターミナル] > [新しいターミナル] から以下のコマンドを実行します。入力を求められたらすべて Enter キーを押して進めてください。 
    npm init
npm install --save-dev typescript ts-node @types/node

npminit

JavaScript

Node.js をインストールしてから TypeScript の初期設定をします。

  1. vscode の [ファイル] > [フォルダを開く] からフォルダを選択します。
  2. [ターミナル] > [新しいターミナル] から以下のコマンドを実行します。入力を求められたらすべて Enter キーを押して進めてください。 
    npm init

使い方

vscode で F1 を押下（もしくは [表示] > [コマンド パレット] を選択、Ctrl+Shift+P を押下）して [コマンド パレット] から機能を選択します。

AtCoder/Yukicoder へログインする

はじめに AtCoder/Yukicoder Extension: Login Site でユーザ名とパスワードを入力して AtCoder にログインします。
Yukicoder の場合はプロフィール画面の API キーを入力します。

loginsite

問題をはじめる

まずはじめに AtCoder/Yukicoder Extension: Init Task で問題名を入力して提出用のソースコードの生成と問題用のテストデータのダウンロードをします。

  • サイトをatcoder,yukicoderから選択します。
  • コンテスト名は AtCoder の場合は abc190の形式、Yukicoder の場合は351の形式で入力します。いずれも URL から確認してください。
  • 問題名は AtCoder の場合は abc190_a の形式、Yukicoder の場合は1692の形式で入力します。いずれも URL から確認してください。
  • 解答する言語は.py,.ts, .js から選択します。
  • ソースコードは src/atcoder/abcXXX/abcXXX_X.py, abcXXX_X.ts, abcXXX_X.js に生成されます。
  • テストデータは src/atcoder/abcXXX/abcXXX_X.txt にダウンロードされます。
  • フォルダは自動的に作成されます。
  • 既にソースコードやテストデータがある場合はスキップされます。

inittask

問題に解答する

生成されたソースコードの main()を修正します。
ソースコードのひな型にカスタマイズしたい場合は、後述の設定を参照してください。

Python ひな型

# TODO edit the code

# param
n = int(input())

# solve
ans = n

# answer
print(ans)

TypeScript ひな型

import * as fs from "fs";

// util for input
const lineit = (function* () { for (const line of fs.readFileSync(process.stdin.fd, "utf8").split("\n")) yield line.trim(); })();
const wordit = (function* () { while (true) { let line = lineit.next(); if (line.done) break; for (const word of String(line.value).split(" ")) yield word; } })();
const charit = (function* () { while (true) { let word = wordit.next(); if (word.done) break; for (const char of String(word.value).split("")) yield char; } })();
const readline = () => String((lineit.next()).value);
const read = () => String((wordit.next()).value);
const readchar = () => String((charit.next()).value);

// main
const main = function () {

    // TODO edit the code

    // param
    let n: number;

    // init
    n = Number(read());

    // solve
    let ans;

    // answer
    console.log(ans);

    return;

};
main();

JavaScript ひな型

TypeScript と同様です。

問題の解答をテストする

問題の解答を作成したら、ソースコードを開いてから AtCoder/Yukicoder Extension: Test Task でテスト実行します。

  • 処理が 5 秒以上続くと自動的に中断します。
  • 誤差が許容される問題の多くは NG になります。目視で判断してください。
  • bigint での出力が必要な問題は文字列化して末尾の n を除去して出力してください。

testtask

テストデータの例です。テストデータを追加する場合は -------- で区切って入力値・出力値を追加します。

2 1 0
--------
Takahashi
--------
2 2 0
--------
Aoki
--------
2 2 1
--------
Takahashi
--------

問題の解答をデバッグする

問題の解答をデバッグするには、ソースコードを開いてから AtCoder/Yukicoder Extension: Debug Task でデバッグ実行します。

  • テストデータの個数だけデバッグ実行が繰り返されます。

debugtask

問題の解答を提出する

解答の作成が完了したら、ソースコードを開いてから AtCoder/Yukicoder Extension: Submit Task で解答を提出します。

  • 構文エラーがあっても提出されます。テスト実行が失敗していても提出されます。注意してください。

submittask

不要なソースコードとテストデータを削除する

AtCoder/Yukicoder Extension: Remove Task を実行すると、問題のソースコードとテストデータを対で削除します。

ブラウザで問題ページを開く

AtCoder/Yukicoder Extension: Browse Task を実行すると、ブラウザで問題ページを開きます。

設定

ソースコードのひな形

独自のソースコードをひな形に使用する場合はフォルダ配下の template/default.py, default.ts, default.js に格納してください。

Python 設定

特にありません。

TypeScript 設定

TypeScript のテスト実行には ts-node を使用しています。

  • 起動時間の短縮のためにトランスパイルのみしています(環境変数TS_NODE_TRANSPILE_ONLY=1)。そのため、ts-node 起動時の型チェックは行いません。
  • tsconfig.json があればそれに従います。

TypeScript のデバッグ実行には vscode のデバッグ機能から ts-node を呼び出しています。

  • tsconfig.json があればそれに従います。

JavaScript 設定

特にありません。

プロキシ設定

プロキシ環境では環境変数HTTP_PROXYおよびHTTPS_PROXYを設定します。

set HTTP_PROXY=http://proxy.server:8080
set HTTPS_PROXY=http://proxy.server:8080

認証プロキシ環境では以下の形式で設定します。

set HTTP_PROXY=http://username:password@proxy.server:8080
set HTTPS_PROXY=http://username:password@proxy.server:8080

おわりに

TypeScriptは全然競技プログラミング向けの言語ではありませんが、日頃使っている言語で競技プログラミングに参加できることが楽しいです。この拡張機能でTypeSciptでAtCoderに参加する人が増えればうれしいです。

14
5
7

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
Sign upLogin
14
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?