こちらの教材では、懐かしのアーケードゲーム「スネークゲーム」を現在のモダンな Web フロントエンド開発で不可欠な React.js を使って実装していきます。

特に、React の v16.8 から登場した Hooks API という新世代の状態管理 API(メソッド群)を使って実装を行なっていきます。

実際に作成するアプリケーションのイメージ

完成物はこちら：https://version-1.github.io/hooks-snake-game/

学習内容 / 本教材を終えたらどのような状態になっているか

• React.js での簡単なアプリケーションが作れるようになる
• 関数コンポーネントでの実装ができるようになる
• React Hooks API を使った実装ができるようになる
• 各種 Hooks API(useState, useEffect, useCallback, useMemo)が使えるようになる
• React での状態と再レンダリングの仕組みがわかるようになる
• カスタムフックを使ったロジックの共通化

本教材の対象者

• Progate などで HTML/CSS, JavaScript の基礎を学び終えた方
• React を触ってみたことがあるが、イマイチどのようなアプリを作ることができるか分からない方
• ゲームを作りながら楽しく React を学びたい方
• React v16.8 から登場した Hooks API の使い方を学びたい方

受講における必要条件

• HTML/CSS の基礎知識
• JavaScript の基礎知識

これらをまだ書いたことがない、動かしてみたことのない方は一度 Progate や関連書籍、公式ドキュメント等に目を通してから学習を始めることをおすすめします。

学ばないこと

• HTML/CSS の基礎的な内容
• CSS の再利用性を念頭においた CSS 設計
• JavaScript の基礎的な文法
• StyledComponent など CSS in JS
• Redux などの状態管理ライブラリの使い方

本教材では、React 及び Hooks API での使い方を学ぶことを目的としており、HTML/CSS についての詳細についてはあまり詳しく踏み込みません。また、Redux などモダンな開発で使われる状態管理ライブラリも使用しません。

本教材のバージョン

• React 16.8 以上
• Node.js 10.x 以上

本教材で質問対応可能なOSや環境

• Mac OS

本教材の構成について

0 章 はじめに

本教材を進める上での環境を整えたり、設計を解説していきます。

1 章 新規 React アプリの作成

create-react-app コマンドを利用して新規の React アプリを作成します。

2 章 フィールドの作成

スネークゲームに必要なゲームのフィールドを作成していきます。フィールドを作る際には関数コンポーネントとクラスコンポーネントの違いについて学んでいきます。

3 章 スネークを動かす

フィールドが作成できたら早速スネークをフィールド内で動かしていきます。 スネークを動かす時にレンダリングの仕組みを理解する必要があるため、こちらで React の useState を使った状態管理とレンダリングについて学びます。

4 章 エサを食べる

スネークを動かすことが出来るようになったら、次はスネークがエサを食べるアクションを追加していきます。

5 章 操作するためのボタン作成

スネークが動く方向の操作やゲームの一時停止、速度の変更などゲームを操作するためのボタンを実装していきます。

6 章 完成、GitHub Pages で公開

実装が完了したら Web ホスティングサービスである GitHub Pages にアプリを公開します。

7 章 リファクタリング

メンテナンス性の観点からここまで実装したコードをリファクタリングしてより良いコードに変更していきます。

8 章 まとめ

ゲーム作成を通じて学んだことを確認します。