サンプルアプリケーションの開発記録
サンプル開発 Reactサンプルアプリ開発 プラニングポーカー まとめ
React Hooksの勉強のため、プラニングポーカーを題材にしたサンプルアプリを開発した。ソースコードはGitHubにアップしてある。また、サンプルアプリはHerokuにデプロイしてある（無料枠だが）。
サンプル開発 Reactサンプルアプリ開発 プラニングポーカー (15) デッキのタイプを変更 – Contextの利用
今回のサンプル開発では、createContextによるコンテキスト情報の作成やuseContextによる利用を試してみた。
サンプル開発 Reactサンプルアプリ開発 プラニングポーカー (14) カスタムフックを使った処理の再利用
React Hooksを使った関数コンポーネントにて、繰り返し使われる処理を再利用するにはカスタムフックという仕組みを利用することができる。
プラニングポーカーアプリで実際に試してみた。
サンプル開発 Reactサンプルアプリ開発 プラニングポーカー (13) Flask-SocketIOでWebSocket通信のグルーピングを行う
チャットアプリにおけるチャットルームのように、複数のクライアントをまとめたグループを作成してその中でWebSocket通信を行いたい。
Flask-SocketIOのルーム機能を用いて検証を行ってみた。
サンプル開発 Reactサンプルアプリ開発 プラニングポーカー (12) React Transition Groupによるアニメーション
Reactコンポーネントに対して、CSSトランジションによるアニメーション効果を付けるにはどうするか？ React Transition Groupライブラリを使った方法をサンプルアプリで検証してみた。
サンプル開発 Reactサンプルアプリ開発 プラニングポーカー (11) カードのオープン、次のゲーム
プラニングポーカーのサンプルWebアプリ開発を進めながら、これまで学んだReact Hooksによるコンポーネント開発やWebSocketによる双方向通信の実装などを復習する。
サンプル開発 Reactサンプルアプリ開発 プラニングポーカー (10) Bidの通知
WebSocketのイベント受信・画面更新処理はまさに副作用でありuseEffectを使って実装するが、注意すべき点がいくつかある。プラニングポーカーアプリの実装サンプルコードをもとに解説。
サンプル開発 Reactサンプルアプリ開発 プラニングポーカー (9) Redisを使う
プラニングポーカーの場の情報（場名や参加プレイヤー名）をFlaskアプリケーションのトップレベルの変数に格納していたが、これだとHerokuにデプロイしたときにちゃんと動作しないので、Redisに永続化することにする。
ローカル環境...
サンプル開発 Reactサンプルアプリ開発 プラニングポーカー (8) WebSocketで通知する
Flask-SocketIOとSocket.ioを利用したWebSocket双方向通信の実装。
サンプル開発 Reactサンプルアプリ開発 プラニングポーカー (7) 他のプレイヤーが参加できるようにする
前回は、親が場を開くと場の画面へ遷移し、Ajaxで取得したプレイヤーリストを表示するところを実装した。
今回は、この場に対して他のプレイヤーが参加できるようにする。開いた場のURLは親が何らかの手段で伝達済みであるとし、その...