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
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
200
VS Code Update for GitHub Copilot
74th
2
650
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
170
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
5
7.4k
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
agatan
1
420
10 Costly Database Performance Mistakes (And How To Fix Them)
andyatkinson
0
340
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
790
すべてのコンテキストを、 ユーザー価値に変える
applism118
3
1.3k
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
120
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
290
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
12
4.5k
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
570
Featured
See All Featured
Producing Creativity
orderedlist
PRO
346
40k
Designing Experiences People Love
moore
142
24k
Fireside Chat
paigeccino
37
3.5k
Faster Mobile Websites
deanohume
307
31k
Raft: Consensus for Rubyists
vanstee
140
7k
A Modern Web Designer's Workflow
chriscoyier
695
190k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Making Projects Easy
brettharned
116
6.3k
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