はじめに React #1 Advent Calendar 2017の11日目です。 Reduxのミドルウェア「Redux-saga」で「やや複雑なリアルタイムゲーム」としてテトリス風のゲームの基本部分を開発し、それを通じて学んだこと・感じたことを紹介します。 画面例 まずは実装したテトリス風ゲームの画面例。矢印キーの左右下でピースを動かし、z,xで回転です。 実際にこちらから遊べます。ソースコードはこちらから。 テトリス風ゲーム実装を通じて学んだこと Redux-Sagaの効用として良く言われるのは、「作用を分離する」とか「テストを簡単にする」ということです。それ以外に、今回、ゲームの実装を通じて思ったこと、思いついたことをつらつらと書いていきたいと思います。 利点1. ビューからビジネスロジックを分離する 利点2. ロジックとロジックの間を疎結合にする 利点3. ロジックフローの明確化
![Redux-Sagaでテトリス風ゲームを実装して学んだこと - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/0028992599bb44b41cb4f2d0b9238443637c1d6d/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Fadvent-calendar-ogp-background-f625e957b80c4bd8dd47b724be996090.jpg%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9UmVkdXgtU2FnYSVFMyU4MSVBNyVFMyU4MyU4NiVFMyU4MyU4OCVFMyU4MyVBQSVFMyU4MiVCOSVFOSVBMiVBOCVFMyU4MiVCMiVFMyU4MyVCQyVFMyU4MyVBMCVFMyU4MiU5MiVFNSVBRSU5RiVFOCVBMyU4NSVFMyU4MSU5NyVFMyU4MSVBNiVFNSVBRCVBNiVFMyU4MiU5MyVFMyU4MSVBMCVFMyU4MSU5MyVFMyU4MSVBOCZ0eHQtY29sb3I9JTIzM0EzQzNDJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1jbGlwPWVsbGlwc2lzJnR4dC1hbGlnbj1sZWZ0JTJDbWlkZGxlJnM9MWNlYWM1ZWY3OWQwYmM1YjY5MjY3MWE1Y2YzNWZjMDQ%26mark-x%3D142%26mark-y%3D151%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwdWVoYWomdHh0LWNvbG9yPSUyMzNBM0MzQyZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTJmNTRkZGQwMGM1ODQyZmI2MzdmNzlkNGFlZWRmMWQ0%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3Da11eb34f4441e5038d0b53389610992a)