プログラミングで東京を救え！？ CSSやプログラミングコードを書いて遊べるpaizaのブラウザゲーム「異能な僕らと異常な世界」を初心者が試してみた

「近未来の東京で一部のエンジニアが『異能』の力で凶悪犯罪を起こしたことをきっかけにエンジニアが全員犯罪者に見なされてしまったという異常な世界で、プログラミング力を駆使して元の東京を取り戻す」という衝撃的な設定のゲーム「異能な僕らと異常な世界」が、エンジニア向け転職・就活・学習サービスのpaizaからリリースされました。ゲーム内で出題されるプログラミングの問題を解きながら近未来の東京を救うブラウザゲームで、PythonやJava、C言語など主要28言語でプレイできるほか、4択問題やHTML+CSSの問題も出題されるとのこと。プログラミング経験があれば頭の体操になりそうな問題が揃っており、paizaラーニングで学習しながら攻略を進めることも可能になっているとのこと。そこで、プログラミング初心者である編集部員が実際にプレイしながらプログラミングを勉強してみました。

異能な僕らと異常な世界
https://paiza.jp/entry/inou_g

異能な僕らと異常な世界　PV30秒版 - YouTube


ゲームトップはこんな感じ。「登録無料 GAME START」をクリック。

登録後のログインに成功すると、マイページが表示されました。中央に表示されているのが、自分のアバターです。さっそく問題を解いて世界を救うべく、「制圧」をクリック。

東京のマップが表示されました。問題を解きながら、各地域を解放していく流れとなっています。それぞれの街に設定された問題の難度はアルファベットで表示されています。最も難度が低いD設定で、四択問題となっているという「赤羽」の問題に挑戦してみました。

「制圧に向かう」をクリック。

すると、「暗号解読」としてPython 3の問題が表示されました。変数text1に「Paiza」という文字列が、変数text2に「Programming」という文字列が代入されており、この2つの変数の和をprint()で出力したらどうなるかという問題。これはシンプルに「PaizaProgramming」ということで、回答を選択して「回答する」をクリック。

すると「制圧成功」と表示され、問題をクリアしました。報酬として「笑顔」をもらったので、「すぐ着替える」をクリックします。

すると、アバターの着替え画面に移行しました。赤羽の制圧に成功した報酬としてもらった「笑顔」をクリック。

再度「笑顔」をクリックします。

すると、アバターの顔が笑顔に切り替わりました。街をどんどん制圧しながら、アバターを着せ替えるためのアイテムを手に入れていくというわけです。

今度は大塚の制圧に向かいました。「制圧に向かう」をクリック。

問題は、赤羽から新橋までのルートで最も短いものを選ぶというもの。図では赤羽－上野－新橋ルートが最も短そうに見えますが、それぞれの街の距離の数字をちゃんと合計してみると、赤羽－上野－秋葉原－新橋ルートが最も短いことが判明。そのため、4番の選択肢を選択して「回答する」をクリック。

結果は制圧成功で、問題に見事正解しました。

次は難度Dの御茶ノ水に挑戦してみます。御茶ノ水を制圧するためには、HTML＆CSSの問題を解かなければいけないとのこと。「制圧に向かう」をクリックして、問題にチャレンジ。

問題は、「期待する結果」にある画像と同じ表示がされるように、CSSのコードを編集しろというもの。

回答欄にはCSSのコードが書かれています。背景を追加するには、logo要素に「background-color: #4444444;」を追加記入すればいいのはわかりますが、肝心のアイコンの位置を3つ並んでいるフレームに合わせる方法がわかりません。ひとまず解答欄にわかる部分だけを記入すると、アイコンの背景が指定色に変化したので、「解答コードを提出する」をクリック。

アイコンの背景色は変化したものの、指定の位置に動かすことができなかったため、期待する結果を再現できていないということで不正解となり、制圧失敗。問題を解くのに必要な知識を持っていないことがわかったので、「paizaラーニングへ」をクリックします。

すると、paizaラーニングの「HTML/CSS入門編」が表示されました。このレッスンを一通り受講すれば、御茶ノ水の問題も解けるようになるはず。今回はレッスンの一番最初である「HTML/CSS入門編1：HTML/CSSを理解しよう」の「レッスンをはじめる」をクリックしました。

「HTML/CSS入門編1：HTML/CSSを理解しよう」は全部で4チャプターあります。今回は最初のチャプターである「Webページの仕組みを知ろう」から受講するため、「このチャプターを受講する」をクリック。

「Webページの仕組みを知ろう」では、これから受講する内容やHTMLの基本的な事項がムービーで解説されます。

2チャプター目の「Webページを作ってみよう」からは、画面左で再生される解説ムービーを見ながら、画面右にコードを打ち込んだり編集したりして、「コードを実行」ボタンを押して右下に出力結果が表示されるかどうかを確認します。ただムービーを見るだけではなく、自分の手を動かしながら確認できるので、自分がどこまで理解できているのかを把握しやすくなっています。

ムービーなので、わからなかった部分はすぐに巻き戻して確認することが可能。また、重要なポイントや参考サイトのリンクがムービーの下に表示されています。

そして、学んだことを確認するための演習課題も用意されています。解答を入力して、「採点する」をクリックします。

入力したコードがチェックされ、正解であれば「演習課題をクリア！」と表示されます。「次の演習課題へ」をクリックすると、次の演習問題に挑戦できます。

こんな感じで、演習課題をこなしながら受講を続けていくと、内容もどんどん難しくなっていきます。プログラミング未経験だと「なんとなくわかったつもりになってどんどん学習を進めてしまう」といったこともありますが、paizaラーニングではチャプターごとに演習課題が用意されているので、自分がどこを理解できていないのかを把握しながらしっかりと学習を進めることができます。

レッスンを終わらせると「認定証」がもらえます。本やウェブサイトを使っての独学だと、自分がどこまでできているのかがわからないことが多いので、こうした認定証によって学習の節目で自分の学習状況を把握できる上に、大きな達成感も得られます。

というわけでpaizaラーニングで一通り学習し、参考サイトにも目を通した上で、御茶ノ水を制圧するべく、問題に再度挑戦してみました。今回はcontainer要素で3種類のアイコンの配置や間隔を設定し、logo要素で#444444の背景色を設定しました。「あなたの現在の結果」が「期待する結果」と同じになっていることを確認し、「html/cssスキルチェック実行」をクリック。

見事正解し、御茶ノ水を制圧することに成功しました。報酬としてもらったのはチャイナドレスなので、さっそく着てみるため、「すぐ着替える」をクリック。

チャイナドレスに着替えるとこんな感じ。

東京を異能の力で制圧し、エリアを広げていくことで、プログラミングを学びながらアバターをどんどん豪華に着飾っていくというわけです。

「異能な僕らと異常な世界」はシンプルなブラウザゲームですが、プログラミングの問題を次々とこなしていくことで、スキルや知識を身に付けることができます。また、paizaが運営するプログラミング学習サービスのpaizaラーニングで学習しながら進めていけば、知識がまったくない初心者であってもクリア可能。paizaラーニングと組み合わせれば、自分の習得状況が可視化されるので、転職や就活にも応用できます。

初心者がプログラミングを学ぶ上で、「今習っていることは具体的にどういう状況で使えるのか」「このコマンドの働きはわかるけどどういう場面で使えるのか」がわからず、いまいちピンとこないままに学習を続けてしまうことがよくあります。「異能な僕らと異常な世界」では「出題される問題を解決する」という明確な目的が設定されているため、プログラミングを単なる知識として終わらせず、実際に課題を解決するための道具として使いながら学習できるのがポイント。そのため、まったくプログラミングを学習したことがない初心者にもおすすめできるゲームとなっていました。

異能な僕らと異常な世界
https://paiza.jp/entry/inou_g

異能な僕らと異常な世界　PV30秒版 - YouTube