React Hooks入門チュートリアル
Qiitaに投稿しました。以下はチュートリアルで作成するサンプルプリの動画です。…
サンプル開発
サンプルアプリケーションの開発記録
Reactサンプルアプリ開発 プラニングポーカー (16) react-i18nextによる多言語対応
今回は、react-i18nextというライブラリを使ってプラニングポーカーアプリを多言語化してみる。こちらのブログを参考にさせて頂いた。 まずはパッケージのインストール。 $ yarn add i18next react-i18next 言語選択用のコンポーネント。 import React, { FunctionComponent } from "react"; export type LanguageSelectorProps = { languages: { code: string, name: string }[], selectedLanguage: stri…
Reactサンプルアプリ開発 プラニングポーカー まとめ
いったんサンプルアプリとしての機能は完成したので、まとめ。 React Hooksの勉強のため、プラニングポーカーを題材にしたサンプルアプリを開発した。ソースコードはGitHubにアップしてある。また、サンプルアプリはHerokuにデプロイしてある（無料枠だが）https://pp-a-pp.herokuapp.com/ テクノロジースタックは以下。 フロントエンド言語TypeScriptツールBabelWebpackcreate-react-appUIライブラリReactReact HooksReact Transition Group (CSSトランジッション)react-i18next …
Reactサンプルアプリ開発 プラニングポーカー (15) デッキのタイプを変更 – Contextの利用
引き続きプラニングポーカーのサンプルアプリの開発。見積りに使用するデッキはフィボナッチ数で固定であったが、最初に選べるようにしたい。 デッキの選択 トップ画面で選択したデッキを引き渡して使うのだが、Deckコンポーネントは末端に存在するコンポーネントのため、トップレベルのコンポーネントからバケツリレーで渡すのは面倒くさい。 そこでContextを使った実装を試してみた。まずはコンテキストの定義と作成。 import React, { FunctionComponent } from "react"; interface IAppContext { deck: string[…
Reactサンプルアプリ開発 プラニングポーカー (14) カスタムフックを使った処理の再利用
今回は、プレイヤーの参加や新しいゲーム開始などのゲーム状況の更新を画面上に表示するようにする。（下図、プレイヤーの下に表示されているテキスト） Commentaryというコンポーネントを新たに作成してTablePageコンポーネント内に配置（14行目）。 return ( <> <header className="header"> <span className="table-name">{props.tableName}</span> </header> <main> {isPa…
Reactサンプルアプリ開発 プラニングポーカー (13) Flask-SocketIOでWebSocket通信のグルーピングを行う
プラニングポーカーアプリでは、プレイヤーの参加、入札、オープンといった各種イベントをWebSocketによる双方向通信で行い、リアルタイム性を実現している。ライブラリとしては、クライアント側(JavaScript)はsocket.io-clientを、サーバー(Flask-SocketIO)を利用している。 実はこれまでの実装には致命的な欠陥があった。1つの場を利用しているときはよいのだが、別のユーザーが別の場を開いた場合にそれぞれの場同士が干渉し合ってしまうのだ。これでは使いものにならない。 チャットアプリにおけるチャットルームのような、複数のクライアントのグルーピングを行って、WebSoc…
Reactサンプルアプリ開発 プラニングポーカー (12) React Transition Groupによるアニメーション
今回は、場のカードをオープンしたときにCSSによるちょっとしたアニメーションを付ける。具体的には以下のように、透明度とフォントサイズを徐々に変更して動きを付けてみる。 React Transition Groupというライブラリを利用するので、まずはインストール。 $ yarn add react-transition-group @types/react-transition-group コンポーネントの.tsxファイルでインポート。今回はCSSTransitionを使う。 import { CSSTransition } from 'react-transition-group&#…
Reactサンプルアプリ開発 プラニングポーカー (11) カードのオープン、次のゲーム
今回はこれまで覚えたことの復習をしつつ、未実装の機能を実装していく。 親プレイヤーが「オープン」をクリックすると、全プレイヤーの札が開かれ、ポイント数の平均値と中央値が算出される親プレイヤーが「次のゲーム」をクリックすると、カードの情報が初期値に戻り、新しいゲームが始まる。 まず「オープン」「次のゲーム」の操作ボタンはParentOperationsコンポーネントとして実装し、親プレイヤーだけに表示されるようにしている。 return ( <> <header className="header"> <span className="…
Reactサンプルアプリ開発 プラニングポーカー (10) Bidの通知
まず初めに前回の投稿で書いた以下の設定はNGだったので修正する。具体的には、WebSocket通信が一定数で404 Bad requestになってしまう現象が起こった。どうやらgunicornのロードバランシング機能がスティッキーセッションをサポートしていないのが原因らしい。 web: gunicorn app:app --workers 2 --thread 4 --log-file - 代わりにeventletやらをインストールして非同期モードで動作させればよいらしい。 (venv) $ pip install eventlet (venv) $ pip freeze > requi…
Reactサンプルアプリ開発 プラニングポーカー (9) Redisを使う
プラニングポーカーの場の情報（場名や参加プレイヤー名）をFlaskアプリケーションのトップレベルの変数に格納していたが、これだとHerokuにデプロイしたときにちゃんと動作しないので、Redisに永続化することにする。 ローカル環境ではDockerでRedisサーバを起動しよう。 version: '2' services: redis: image: redis:latest ports: - "6379:6379" command: redis-server --appendonly yes volumes: - ./data/redis:/data 上…