サンプル開発 Reactサンプルアプリ開発 プラニングポーカー (8) WebSocketで通知する
Flask-SocketIOとSocket.ioを利用したWebSocket双方向通信の実装。
サンプル開発
サンプル開発 
サンプル開発 Reactサンプルアプリ開発 プラニングポーカー (7) 他のプレイヤーが参加できるようにする
前回は、親が場を開くと場の画面へ遷移し、Ajaxで取得したプレイヤーリストを表示するところを実装した。
今回は、この場に対して他のプレイヤーが参加できるようにする。開いた場のURLは親が何らかの手段で伝達済みであるとし、その...
サンプル開発 Reactサンプルアプリ開発 プラニングポーカー (6) Ajaxでプレイヤーリストをフェッチ
関数コンポーネントからAjax処理を行ってデータをフェッチする。useEffectを用いるのがよさそう。
Flaskのエンドポイントにaxiosを使ってAjaxリクエストを投げデータを取得・更新する。
サンプル開発 Reactサンプルアプリ開発 プラニングポーカー (5) 画面遷移
今回は、トップ画面からポーカーを行う「場」の画面への遷移を実装する。トップ画面は以下。
トップ画面
場名とニックネームを入力し「場を開く」をクリックすると、以下の画面に遷移するようにしたい。
場の画面
Flaskど...
サンプル開発 Reactサンプルアプリ開発 プラニングポーカー (4) 他のコンポーネントとの相互作用
次に、ボタン押下時のアクションを実装する。Reactのコンポーネント構成は以下のようになっている。
コンポーネント構造
「オープン」押下時に、各プレイヤーの手札をオープンするようにする。（この操作はテーブルの親しかできない。本...
サンプル開発 Reactサンプルアプリ開発 プラニングポーカー (3) 親コンポーネントへ反映
ポップアップでモーダル表示したデッキで選択されたカードを親コンポーネントへ反映させる。
モーダルダイアログに包含されるDeckコンポーネントの<div>タグにonClick属性を指定する（9行目）。このとき、カードに書...
サンプル開発 Reactサンプルアプリ開発 プラニングポーカー (2) モーダルダイアログ
プレイヤーのカードをクリックするとモーダルダイアログでデッキを表示するようにする。
モーダルダイアログでデッキを表示
モーダルダイアログにはreact-modalを使う。
$yarn add react-modal
$y...
サンプル開発 Reactサンプルアプリ開発 プラニングポーカー (1)始める
React/TypeScriptでプラニングポーカーのサンプルアプリを開発していく記録・その(1)。まずは作るアプリケーションのイメージを固め、ハリボテのUIを作った。webpackの設定に関する技術メモなど。
サンプル開発 React練習 – 割り勘計算アプリ(5)
前回の投稿までで大部分の実装ができたので、残りは人数の増減アクションの追加。各明細の横に削除と追加のボタンを配置して、クリック時のイベントで処理を行う。
明細のJSXに、以下のようにボタンを配置してclickのイベントハンドラ呼び出...
サンプル開発 React練習 – 割り勘計算アプリ(3)
前回の投稿では、割り勘計算アプリをコンポーネント化し、HTMLがレンダリングされるところまで実装した。
BillSplitter …親コンポーネント。状態保持や計算処理を司るHeader …子コンポーネント。合計金額などの表示や入力...