C++
AtCoder
競技プログラミング
Scratch

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

スクリーンショット 2019-01-14 15.27.26.png

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

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

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

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

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


  • とりあえず今プログラミングで作りたいものはない

  • パズルゲームや謎解きが好き

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


準備

用意するものは簡単

のみです。

Chromeブラウザで、Scratcher's AtCoder にアクセスしたあと、Chromeに追加ボタンを押してこれで完了です。

スクリーンショット 2019-01-14 15.29.16.png

あとは、 AtCoder にアクセスし、新規会員登録 から新規登録をしてログインしておきましょう。

スクリーンショット 2019-01-14 16.00.42.png


コンテストを解いてみる

まずは、初心者向けの問題集 AtCoder Beginners Selection

を解いてみましょう。

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

スクリーンショット 2019-01-14 16.25.18.png

PracticeA - はじめてのあっとこーだー(Welcome to AtCoder)

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

スクリーンショット 2019-01-14 15.36.18.png

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

スクリーンショット 2019-01-14 15.39.50.png


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


  1. コードは、スクラッチキャットのスプライトの中に書く

  2. まずはイベントの「"緑色の旗"がクリックされたとき」からスタート

  3. 入力は調べるの「a と聞いて待つ」のように使う (改行とスペースで分けて読まれる)

  4. その「答え」を用意した変数にする (必ず「すべてのスプライト用」の変数)

  5. 変数に入った値を利用して計算をする

  6. 出力は、見た目の「a と言う」を使う

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

スクリーンショット 2019-01-14 15.56.35.png

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


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

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

スクリーンショット 2019-01-14 15.57.05.png

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


AtCoderに読み込む

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

スクリーンショット 2019-01-14 15.54.36.png

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

スクリーンショット 2019-01-14 15.56.19.png

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


おわりに

ちなみにどのように解いて良いかわからない場合には、回答例となるプロジェクトを参考にすると良いでしょう。開発者のyos1upさんがいくつか例を用意してくださっています。

また不具合等を見つけた際には、GitHubのプロジェクトもありますのでIssueをあげるとよいでしょう。

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


追伸

なお生成されるコードは思ったよりエグい感じですw

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