Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
React-Redux-Redux-Saga-Workshop04
Search
tashxii
August 13, 2019
Programming
0
47
React-Redux-Redux-Saga-Workshop04
From TIS internal workshop at 2019/8/13
tashxii
August 13, 2019
Tweet
Share
More Decks by tashxii
See All by tashxii
React-Redux-Redux-Saga-Workshop03
tashxii
0
170
React-Redux-Redux-Saga-Workshop02
tashxii
0
120
React-Redux-Redux-Saga-Workshop01
tashxii
0
100
Other Decks in Programming
See All in Programming
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
260
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
120
Hypervel - A Coroutine Framework for Laravel Artisans
albertcht
1
130
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
260
Team operations that are not burdened by SRE
kazatohiei
1
310
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
2
820
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
270
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
1
5.8k
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
130
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
200
Porting a visionOS App to Android XR
akkeylab
0
460
10 Costly Database Performance Mistakes (And How To Fix Them)
andyatkinson
0
340
Featured
See All Featured
Navigating Team Friction
lara
187
15k
Why Our Code Smells
bkeepers
PRO
336
57k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
Writing Fast Ruby
sferik
628
62k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
740
The Pragmatic Product Professional
lauravandoore
35
6.7k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
For a Future-Friendly Web
brad_frost
179
9.8k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Balancing Empowerment & Direction
lara
1
430
Transcript
React + Redux + Redux-Saga 勉強会 ④ UI/UX編 2019/8/13 tashxii@tis
https://fintan.jp/
React / Redux / Redux-Saga • React … UIライブラリ •
Redux … React の状態管理ライブラリ • Redux-Saga … 非同期処理を扱うReduxのミドルウェア 2 https://ja.reactjs.org/ https://Redux-Saga.js.org/ https://redux.js.org/ Skip可:前回と同じスライド
題材に使うアプリケーション • タスク管理アプリ • イメージ(gif) • 機能 • サインアップ •
ログイン • ボード管理 • ユーザー管理 • タスク管理 • ドラッグ&ドロップ • Push通知 3 Skip可:前回と同じスライド
題材に使うアプリケーション • Websocketを使ったPush通知 • イメージ(gif) • 他のクライアントの 操作をサーバー 経由で伝達 4
Skip可:前回と同じスライド
題材のアプリで使用しているライブラリ • Redux 状態管理ライブラリ • Redux-Saga 非同期処理用ライブラリ • styled-component コンポーネントのスタイル管理
• Ant design コンポーネントライブラリ • react-beautiful-dnd ドラッグ&ドロップコンポーネント • react-router-dom URL遷移 • Font awesome アイコンライブラリ 5 Skip可:前回と同じスライド
ソースコード • Front-end (React) https://github.com/tashxii/taskboard-react • Back-end (Go) https://github.com/tashxii/taskboard-api-go git
clone https://github.com/tashxii/taskboard-react.git cd taskboard-react yarn install git clone https://github.com/tashxii/taskboard-api-go.git cd taskboard-api-go dep ensure go build 6 Skip可:前回と同じスライド
ユーザビリティ 7
ユーザビリティとは? • 一言でいうと「使いやすさ」 • 「ユーザビリティエンジニアリング原論」(Usability Engineering (Interactive Technologies) では Jakob
Nielsen によって以下の5原則 が定義されている 1. 学習しやすさ (Learnability) 2. 効率性 (Efficiency) 3. 記憶しやすさ (Memorability) 4. 間違えにくさ (Errors) 5. 主観的満足度 (Satisfaction) 8 学習しやすさ: システムは、ユーザがそれを使ってすぐ作業を始められるよう、簡単に学習でき るようにしなければならない。 効率性: システムは、一度ユーザがそれについて学習すれば、後は高い生産性を上げら れるよう、効率的な使用を可能にすべきである。 記憶しやすさ: システムは、不定期利用のユーザがしばらく使わなくても、再び使うときに覚え直 さないで使えるよう、覚えやすくしなければならない。 エラー: システムはエラー発生率を低くし、ユーザがシステム使用中にエラーを起こしにく く、もしエラーが発生しても簡単に回復できるようにしなければならない。また、致 命的なエラーが起こってはいけない。 主観的満足度: システムは、ユーザが個人的に満足できるよう、また好きになるよう楽しく利用で きるようにしなければならない。
デザインの原則のまとめ 9 https://uxxinspiration.com/2014/ 02/design-principles/
たとえば、「視線、手の動き」の分析 • グーテンベルグ・ ダイアグラム (伝統的な分類法) • Zパターン (紙媒体、モバイルなど) • Fパターン
(ブラウザなど) 10 https://www.domore.co.jp/mobilelab/design/visual_-guidance
F-パターン(Webコンテンツの視線分析) • Webコンテンツでは、縦の長さが不定となり、Fパターンの適用が多くなる 研究結果が出ている。 • 細部まで見てもらえないことを前提とすること 11 https://www.nngroup.com/articles/ f-shaped-pattern-reading-web-content/ https://www.genius-web.co.jp/
blog/cat-104/design_04.html
ベストプラクティス 12
ボタンやラベルの配置のプラクティス • ボタンのラベルや配置順序のベストプラクティスとは(日本語訳) • https://uxmilk.jp/56527 • Primary & Secondary Action
Buttons(英語の原文) • http://babich.biz/primary-secondary-action-buttons/ 13 NG 色を 変える ラベルを 動詞にする 操作できないとき は無効にする Cancelでは 何が起こるか 分からない ラベルを 動詞にする
その他のベストプラクティス • サイトやアプリのユーザビリティを向上させる35のポイント • https://baigie.me/sogitani/2014/04/usability/ • Boosting Your UX With
Usability Best Practices • https://uxtricks.design/blogs/ux-design/usability-tips/ • UIデザインにおけるナビゲーションのデザインパターンまとめ • https://baigie.me/sogitani/2014/08/navigation-design-type/ 14
サンプルでの取り組み 15
ボタン • 有効なボタンカラーの統一 • 無効な場合のグレーアウト • 実行中の際のハンドル 16 有効ボタンの 色の統一
実行中 操作有効 操作無効
ドラッグ&ドロップ • ドラッグする領域でのマウスカーソル • ドラッグ可能であることを示す • ドロップ可能領域でのカラーリング • ドロップ可能であることを示す •
ドロップ後の描画 • 半透明のカードを残す • スピナーを出す 17
フィードバック • ボタンのローディング • 描画領域のスピナー 18
ツールチップ・Popconfirm • 操作可能なアイコンのツールチップ表示 • 削除操作の確認 19
覚えていてほしいこと • ユーザビリティの5原則 1. 学習しやすさ (Learnability) 2. 効率性 (Efficiency) 3.
記憶しやすさ (Memorability) 4. 間違えにくさ (Errors) 5. 主観的満足度 (Satisfaction) • レイアウトの3パターン • グーテンベルクダイアグラム、Zパターン、Fパターン • 普遍性と個性のバランス • 他のアプリケーションとの差のない普遍性 • アプリケーション全体での統一性 • 視覚的フィードバック 20