Edited at

無駄に壮大なじゃんけんアプリをつくった


はじめに

初心者向けのプログラミングコースで、じゃんけんアプリを作る課題って良くありますよね。

ただし大抵クライアント側のみで実装してるので、結果を改ざんし放題です。

これを野放しにしておくわけにはいかん…!サーバーサイドでしっかり判定せなあかんやろ…!

というのは冗談で、最近Railsのようなバックエンドに全て任すような開発ばかりだったので、今回はAPIを用いたフロントエンドとバックエンドが分離されたアプリケーション開発の練習のため、作ってみました。


成果物

無駄に壮大なじゃんけんアプリ

スクリーンショット 2019-02-05 13.42.12.png


構成

フロントエンド:React

バックエンド:AWS API Gateway, AWS Lambda(Node.js)

janken.png

API Gatewayに対して、選んだ手をボディに含めたPOSTリクエストを送信して、そのままLambda functionに流れます。Lambda側では、出す手をランダムに選択した上で、受け取った手と比較して勝敗を判定し、レスポンスを返します。

Reactアプリケーションはnetlifyでホスティングしてます。

GitHubにpushするだけで勝手にやってくれるので、便利すぎますね。


ソースコード

https://github.com/Sinhalite/janken


課題

・Reactのコンポーネント分割


おわりに

「なんだこのしょうもないアプリ」と思ったそこのあなた…。

あなたがじゃんけんで出す手はすでにお見通しですよ…。

(ここで世にも奇妙な物語のBGMが流れる)