Scratch3.0を使ってAtCoderで競技プログラミングを楽しむ


![スクリーンショット 2019-01-14 15.27.26.png](https://qiita-image-store.s3.amazonaws.com/0/2382/5ca0707e-6736-3d61-cba6-7ddb62812dfb.png)

小中学生がビジュアルプログラミング言語として習うことが多いScratch(スクラッチ) を使って、AtCoderを使った競技プログラミングができるChrome拡張 [Scratcher's AtCoder](https://chrome.google.com/webstore/detail/scratchers-atcoder/hackndbjgkehhjinjjoldifbhnfddklh) がScratch3.0に対応したので、早速使い方を解説してみたいと思います。

競技プログラミングとは、プログラミングを使ったパズルを解くスポーツです。Scratchを使ってチャレンジできるのでこれで多くの人が競技プログラミングにチャレンジできるようになるのではないかと思います。

[AtCoder](https://atcoder.jp/) (アットコーダー) は競技プログラミングが楽しめる日本のWebサービスです。なお[chokudai](https://twitter.com/chokudai)さんという有名なプログラマがAtCoderの社長さんです。ほとんどの問題が日本語で用意されているので、とても日本人には親しみやすいです。また、毎週のようにコンテストが行われている他、過去のコンテストの問題を解いて楽しむこともできます。

今まで競技プログラミングをするためには、C++などのコーディングを覚えなくてはいけませんでしたが、多くの小中学生が使えるScratchを使ってビジュアルプログラミングでも学ぶことができるのは素晴らしいことです。

競技プログラミングはこんな人に向いているかなと思います。

- とりあえず今プログラミングで作りたいものはない
- パズルゲームや謎解きが好き

そんな方にピッタリの知的スポーツです。

# 準備

用意するものは簡単

- [Google Chrome ブラウザ](https://www.google.co.jp/chrome/)が動くパソコン
- [Google Chrome ブラウザ](https://www.google.co.jp/chrome/)

のみです。

Chromeブラウザで、[Scratcher's AtCoder](https://chrome.google.com/webstore/detail/scratchers-atcoder/hackndbjgkehhjinjjoldifbhnfddklh) にアクセスしたあと、Chromeに追加ボタンを押してこれで完了です。

![スクリーンショット 2019-01-14 15.29.16.png](https://qiita-image-store.s3.amazonaws.com/0/2382/b6cd54c3-6411-aa3b-1f96-bc5d5bf010ce.png)

あとは、 [AtCoder](https://atcoder.jp) にアクセスし、[新規会員登録](https://atcoder.jp/register) から新規登録をしてログインしておきましょう。

![スクリーンショット 2019-01-14 16.00.42.png](https://qiita-image-store.s3.amazonaws.com/0/2382/8e8d727a-d9e8-725c-bfc4-5adab13acaf1.png)


# コンテストを解いてみる

まずは、初心者向けの問題集 [AtCoder Beginners Selection](https://atcoder.jp/contests/abs) の

- [PracticeA - はじめてのあっとこーだー（Welcome to AtCoder）](https://atcoder.jp/contests/abs/tasks/practice_1)

を解いてみましょう。

問題は、整数値$a$, $b$, $c$と文字列$s$を受け取り、$a+b+c$ $s$ を出力せよというものです。


|![スクリーンショット 2019-01-14 16.25.18.png](https://qiita-image-store.s3.amazonaws.com/0/2382/ee226f59-4b80-b89d-4358-65c202fb30a7.png)|
| --- |
| PracticeA - はじめてのあっとこーだー（Welcome to AtCoder） |


一番下の提出フォームまでスクロールすると、このように「Scratch 3.0 オンラインエディタ」ボタンと「Scratch 3.0 プロジェクトロード」ボタンが現れますので、まずは、「Scratch 3.0 オンラインエディタ」ボタンを押して実装をはじめましょう。

![スクリーンショット 2019-01-14 15.36.18.png](https://qiita-image-store.s3.amazonaws.com/0/2382/c55afaee-346e-3b66-246a-affe68b85b47.png)

ボタンをクリックすると、Scratch3.0のエディタが立ち上がります。

![スクリーンショット 2019-01-14 15.39.50.png](https://qiita-image-store.s3.amazonaws.com/0/2382/44d7705f-06be-3558-87f5-2071748421fa.png)


# Scratch で問題を解く時のルール

1. コードは、スクラッチキャットのスプライトの中に書く
2. まずはイベントの「"緑色の旗"がクリックされたとき」からスタート
3. 入力は調べるの「a と聞いて待つ」のように使う (改行とスペースで分けて読まれる)
4. その「答え」を用意した変数にする (必ず「すべてのスプライト用」の変数)
5. 変数に入った値を利用して計算をする
6. 出力は、見た目の「a と言う」を使う

以上のルールを守って解いていきます。この問題では、このように実装できました。

![スクリーンショット 2019-01-14 15.56.35.png](https://qiita-image-store.s3.amazonaws.com/0/2382/d23066a2-4aa3-2f64-8d15-edc30626e18f.png)


なお自分で動かしてみる時は、緑の旗アイコンをクリックして実際に動かしてみて、正しい値が出るかどうかを確認しましょう。AtCoderのサイトの入力例の通りに答えがでればOKです。

# プロジェクトファイルをダウンロードする

実装ができたら、メニューの「ファイル」から「コンピューターに保存する」を選択して、デスクトップなどにそのまま保存してしまいます。

![スクリーンショット 2019-01-14 15.57.05.png](https://qiita-image-store.s3.amazonaws.com/0/2382/23373640-f227-1146-e81b-77a72f6212c8.png)

ここでは「Untitled-6.sb3」を保存しました。ファイル名は自由につけてもらってかまいません。


# AtCoderに読み込む

次は、AtCoder の先程の提出ボタンの横に現れた「Scratch 3.0 プロジェクトロード」をクリックして、先程ダウンロードしておいたファイルを読み込むと、フォームにC++のコードに変換されたものが入力されます。言語が「C++14 (GCC 5.4.1)」かそれ以上になっていることを確認しましょう。

![スクリーンショット 2019-01-14 15.54.36.png](https://qiita-image-store.s3.amazonaws.com/0/2382/1dae817d-0b37-d7a0-b36b-7a6d9f3cf42f.png)

ロードがされコードがフォームに表示されたら「提出」ボタンを押して、無事結果に AC が表示されれば Scratch を使って AtCoder の競技プログラミングの問題が解けたということになります。判定には時間がかかりますので、ちょっと待ってみましょう。

![スクリーンショット 2019-01-14 15.56.19.png](https://qiita-image-store.s3.amazonaws.com/0/2382/9723003a-bc9b-d9f9-5136-5f00c6f57a3e.png)

このように正解すると結果に AC と表示されます。間違った答えが出ている時にはWA が、タイムオーバーの時にはTLEが結果に表示されます。

# おわりに

ちなみにどのように解いて良いかわからない場合には、[回答例となるプロジェクト](https://scratch.mit.edu/studios/5346476/)を参考にすると良いでしょう。開発者の[yos1up](https://twitter.com/yos1up)さんがいくつか例を用意してくださっています。

また不具合等を見つけた際には、[GitHubのプロジェクト](https://github.com/yos1up/scratch2cpp)もありますのでIssueをあげるとよいでしょう。

では皆さん、Scratchで競技プログラミングを楽しんでみてください。

# 追伸

なお[生成されるコード](https://gist.github.com/sifue/19a5f1cf080c1ab9a01856ccae0fba3c)は思ったよりエグい感じですw 

型変換周りが意外と大変そうなのと整数値がintしか使えないので、intを超えるものは特別な実装が必要になるのではないかと思います。ただし、ほとんどのAtCoderのA問題とB問題であれば十分に楽しむことができるのではないかと思います。本当に素晴らしいChrome拡張だと思いました。ありがとうございます。