『React Explained』の感想 – React初学者にお薦めのチュートリアル本 –
『React Explained: Your Step-by-Step Guide to React』を読了した。 Manningから今秋出版予定の『React… 続きを読む »『React Explained』の感想 – React初学者にお薦めのチュートリアル本 –
Reactサンプルアプリ開発 プラニングポーカー (16) react-i18nextによる多言語対応
今回は、react-i18nextというライブラリを使ってプラニングポーカーアプリを多言語化してみる。こちらのブログを参考にさせて頂いた。 まずはパッケージのイ… 続きを読む »Reactサンプルアプリ開発 プラニングポーカー (16) react-i18nextによる多言語対応
Reactサンプルアプリ開発 プラニングポーカー まとめ
いったんサンプルアプリとしての機能は完成したので、まとめ。 React Hooksの勉強のため、プラニングポーカーを題材にしたサンプルアプリを開発した。ソースコ… 続きを読む »Reactサンプルアプリ開発 プラニングポーカー まとめ
Reactサンプルアプリ開発 プラニングポーカー (15) デッキのタイプを変更 – Contextの利用
引き続きプラニングポーカーのサンプルアプリの開発。見積りに使用するデッキはフィボナッチ数で固定であったが、最初に選べるようにしたい。 トップ画面で選択したデッキ… 続きを読む »Reactサンプルアプリ開発 プラニングポーカー (15) デッキのタイプを変更 – Contextの利用
Reactサンプルアプリ開発 プラニングポーカー (14) カスタムフックを使った処理の再利用
今回は、プレイヤーの参加や新しいゲーム開始などのゲーム状況の更新を画面上に表示するようにする。（下図、プレイヤーの下に表示されているテキスト） Commenta… 続きを読む »Reactサンプルアプリ開発 プラニングポーカー (14) カスタムフックを使った処理の再利用
Reactサンプルアプリ開発 プラニングポーカー (13) Flask-SocketIOでWebSocket通信のグルーピングを行う
プラニングポーカーアプリでは、プレイヤーの参加、入札、オープンといった各種イベントをWebSocketによる双方向通信で行い、リアルタイム性を実現している。ライ… 続きを読む »Reactサンプルアプリ開発 プラニングポーカー (13) Flask-SocketIOでWebSocket通信のグルーピングを行う
Reactサンプルアプリ開発 プラニングポーカー (12) React Transition Groupによるアニメーション
今回は、場のカードをオープンしたときにCSSによるちょっとしたアニメーションを付ける。具体的には以下のように、透明度とフォントサイズを徐々に変更して動きを付けて… 続きを読む »Reactサンプルアプリ開発 プラニングポーカー (12) React Transition Groupによるアニメーション
Reactサンプルアプリ開発 プラニングポーカー (11) カードのオープン、次のゲーム
今回はこれまで覚えたことの復習をしつつ、未実装の機能を実装していく。 親プレイヤーが「オープン」をクリックすると、全プレイヤーの札が開かれ、ポイント数の平均値と… 続きを読む »Reactサンプルアプリ開発 プラニングポーカー (11) カードのオープン、次のゲーム
Reactサンプルアプリ開発 プラニングポーカー (10) Bidの通知
まず初めに前回の投稿で書いた以下の設定はNGだったので修正する。具体的には、WebSocket通信が一定数で404 Bad requestになってしまう現象が起… 続きを読む »Reactサンプルアプリ開発 プラニングポーカー (10) Bidの通知
Reactサンプルアプリ開発 プラニングポーカー (9) Redisを使う
プラニングポーカーの場の情報（場名や参加プレイヤー名）をFlaskアプリケーションのトップレベルの変数に格納していたが、これだとHerokuにデプロイしたときに… 続きを読む »Reactサンプルアプリ開発 プラニングポーカー (9) Redisを使う