サンプル開発

Reactサンプルアプリ開発 プラニングポーカー まとめ

React Hooksの勉強のため、プラニングポーカーを題材にしたサンプルアプリを開発した。ソースコードはGitHubにアップしてある。また、サンプルアプリはHerokuにデプロイしてある(無料枠だが)。
一歩上のJava

キーブレイク処理をジェネリクスで汎用化する

業務アプリケーションでよくあるキーブレク処理を、ジェネリクスを使って汎用化する手順を紹介する。
Books

『React Explained』の感想 – React初学者にお薦めのチュートリアル本 –

『React Exlpained』を読了したのでレビューをまとめた。チュートリアル形式の書籍で、React初学者の学習には非常に役立つ書籍と思う。 リファクタリングの章で一部期待通りに動作しないコードがあったが、全般的には誤植等も少なく、信頼できる本だと思った。
サンプル開発

Reactサンプルアプリ開発 プラニングポーカー (16) react-i18nextによる多言語対応

Reactアプリを多言語対応するためのライブラリはいくつかあるが、なかでもreact-i18nextは簡単に利用可能なライブラリだ。プラニングポーカーアプリに組み込んでみた。
サンプル開発

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に永続化することにする。 ローカル環境...
タイトルとURLをコピーしました