作品名 Code Crush

内容

技育CAMPハッカソンで作成したプログラミングの基礎を学ぶためのWebアプリケーション。
プログラミングができると一言で言っても、その実はコードを読めたり、コードを書けたりする能力が合わさってやっとプログラミングができることになる。

今回の作品はプログラミングに必要な能力である理解力やコーディング力を養うことができるように作成した。
Code Crushは四つのフェーズに分かれており、まず問題として与えられたコードを読む、次にそのコードの一部分を消す、そして消されたコードを互いに交換し、消された箇所を直す、最後に問題として与えられたコードと自分で直したコードを比較し適切に直すことができたかを評価する。
この各フェーズには制限時間が設けられており、時間内に集中してプログラムに接することができる。

こだわり

マルチプレイ（1対1）で対戦型ゲームとすることで楽しくプログラミングについて学ぶことができるようになるという考えでソロプレイではなくマルチプレイが必須になるようにした。

個人的にプログラミングにはインプットとアウトプットが必要だと考えている。この作品は対戦相手と戦いながら楽しむと共にインプット、アウトプットをすることができると思っている。
コードを読むフェーズはインプットをする場所で、答え合わせをするフェーズはアウトプットをすることができる場所にした。答え合わせをするフェーズは対戦相手と会話をしながらなぜそこのコードを削除したかやなぜそこのコードを直すことができたかなどを話し合う場所にすることで思う存分アウトプットすることができる。

発表資料

担当技術

今回の作品は技育CAMPと技育博で作成し、フロントエンドを担当した。

技育CAMPではreact技育博ではNext.jsを使用した。

GitHubリポジトリとかデプロイ先とか

技育CAMP:https://github.com/SystemEngineeringTeam/CodeCrushFrontend
技育博:https://github.com/SystemEngineeringTeam/CodeCrushEXFrontend