何の話かと言うと 昔懐かしいパソコン風のテキストゲームを簡単に作れるゲームエンジンを React で作りました。こんな感じのブラウザ上で遊べるゲームが作成できます。（ここから遊べます。） 利用手順 まず、こちらの記事に従って、React の開発環境を準備…

何の話かと言うと enakai00.hatenablog.comこちらの続きです。今回は、プレイ中のスコアの情報を追加して、手番とスコアの情報を表示する Dashboard コンポーネントを追加します。これで、リバーシの実装は一旦完成です。ぱちぱちぱち。 スコア情報の追加 ま…

何の話かと言うと enakai00.hatenablog.com上記の記事の続きです。前回までに、盤面にコマを置けるようになったので、今回は「手番」の概念を導入して、交互に打ち合えるようにします。また、リバーシのルールに基づいて、コマをめくる機能も実装します。 「…

何の話かと言うと enakai00.hatenablog.comこちらの続きです。今回は、ブランクのセルにコマを置く機能と、盤面の状態をリセットする機能を実装します。 コマを置く処理の実装 前回の Board.js の内容を次のように拡張します。ここでは変更・追加した部分を…

何の話かと言うと enakai00.hatenablog.com上記の続きになります。次のステップとして、ボードの上にコマを置いて表示する機能を実装しますが、段階的に進めていきましょう。まずは、コマの情報を保存する状態変数を用意して、この内容に応じてコマを表示す…

何の話かと言うと enakai00.hatenablog.com上記の続きになります。今回からは、いよいよ Reversi の実装に入ります。まずは、画面の背景に Reversi のボードを表示することにしましょう。 アプリケーションのコードを用意 まずは、これまでと同様にアプリケ…

何の話かと言うと enakai00.hatenablog.com上記の続きになります。今回からは、新しいアプリケーションを作成していきますが、まずは、React のビルド処理とパッケージマネージャーについて簡単に説明しておきます。 React のビルド処理 React では、JSX と…

何の話かと言うと enakai00.hatenablog.com上記の続きになります。今回は、サンプルアプリケーションを GitHub Pages で公開する手順を説明します。今後作成するアプリケーションも同様の手順で公開することができます。 GitHub Pages の準備 まずは、公開用…

何の話かと言うと enakai00.hatenablog.com上記の記事を自分用のメモ程度の気分で公開したら、思いの外に多数のブックマークやコメントが付いて驚いた上に、「この内容では結局 React やっている人にしか理解できないのでは？」という趣旨のコメントを目にし…

何の話かと言うと 普段、UI に関わらないバックエンドのコンポーネントを作っているエンジニアがフロントエンドのコーディングを理解しようとすると、色々と異次元な世界で混乱する（というか何をやっているのかをすぐに忘れる）ので、バックエンドエンジニ…