メンタルモデルから紐解く オブジェクト指向的コンポーネント設計 / Mental-Model Component Design

コンポーネント指向の設計にメンタルモデルやドメインモデルのような概念を加える事で、コンポーネントに意味を持たせ、設計や評価を行いやすくする方法をまとめました。

*OOUX / Atomic Design / Domain-Driven Design（ドメイン駆動設計） などから得た知見を集約しています。

さらに詳しい内容はこちらの記事にもまとめています。
UIの設計・評価は、Atomic DesignやOOUXのようなコンポーネント指向で
https://medium.com/@tyshgc/ui-component-evaluate-and-design-143917c777bd

Transcript

1. MentalModel Component Design ϝϯλϧϞσϧ͔Βඥղ͘
   ΦϒδΣΫτࢦ޲తίϯϙʔωϯτઃܭ
   TSUYOSHI HIGUCHI 2016.09.07
2. P R O F I L E 樋 口 剛 T S U Y O S H I H I G U C H I Service Designer & UI Developer ϑϦʔϥϯεͰελʔτΞοϓ΍৽͍͠ϓϩμΫτͷ
   αʔϏεσβΠϯͱ։ൃɾ࣮૷·Ͱߦ͍ͬͯ·͢ɻ @tyshgc
3. A G E N D A メンタルモデルとコンポーネント 関心ごと、責務の分離 モデリングフロー 1 2 3
4. メンタルモデルとコンポーネント 1
5. ίϯϙʔωϯτͱ͸Կʁ
6. ίϯϙʔωϯτ ελΠϧΨΠυ
   6*ύʔπ
7. コンポーネント w ଐੑͳͲͷ৘ใ
   w ΠϯλϥΫγϣϯ
   w ࢹ֮৘ใ ୯Ұతͳػೳ Λ͍࣋ͬͯΔ
8. OFF ON εΠον
9. OFF ON εΠον // @flow type Props = { flagment: ?boolean }; class Switch extend Component { static defaultProps = { flagment: true }; constructor(props: Props, context: any) { super(props, context); } onSwitchToggle() { //... } render() { //... } }
10. OFF ON ΍ΔؾεΠον 쎛쎢ؾ
11. OFF ON ΍ΔؾεΠον 쎛쎢ؾ // @flow type Props = { Motivation: ?boolean }; class MotivationSwitch extend Component { static defaultProps = { Motivation: true }; constructor(props: Props, context: any) { super(props, context); } onMotivationToggle() { //... } render() { //... } }
12. ػೳͷ֓೦͕มΘΔ ίϯϙʔωϯτͷҙຯ͕มΘΔ ࣋ͭ΂͖৘ใ΍ৼΔ෣͍΋ҧ͏
13. ֓೦Λந৅తʹදݱͨ͠΋ͷ ϝϯλϧϞσϧ
14. ར༻ऀ ։ൃऀ Ϊ Ỿ ỽ ϓ Λ ຒ Ί Δ αʔϏεΛͭ͘Δ ΍ΔؾΛ
    Φϯ͠Α͏ εΠον
    Φϯͯ͠
    ΋Β͓͏
15. αʔϏε಺ʹ͋ΔϝϯλϧϞσϧΛ੔ཧ͢Δ υϝΠϯϞσϧΛநग़͢Δ αʔϏεʹ܎Δਓશ͕ͯڞ௨ͯ࣋ͭ֓͠೦Ϟσϧ
16. ਤॻؗαʔϏεͷυϝΠϯϞσϧ ିग़ ར༻ཤྺ ฦ٫ ར༻ऀ ਤॻͷିग़ͨ͠৘ใ ฦ٫Λड෇ͨ৘ใ ିग़ɾฦ٫ͷཤྺ ਤॻؗͷར༻ऀ αʔϏεʹରͯ͠
    ๊͘ϝϯλϧϞσϧ
17. ΦϒδΣΫτࢦ޲ϓϩάϥϛϯά υϝΠϯϞσϧΛநग़͢Δ ϞσϧΛΦϒδΣΫτʹ͢Δ
18. υϝΠϯϞσϧͷ֓೦͕มΘΔ ΦϒδΣΫτΛݟ௚͢ ֓೦͕ؒҧ͍ͬͯͳ͍͔
    ϦϑΝΫλϦϯάΛ܁Γฦ͠
    ݟ௚͠ଓ͚Δ
19. ίϯϙʔωϯτ΋֓೦ʹԊΘͤΔ
20. ΦϒδΣΫτࢦ޲ίϯϙʔωϯτઃܭ υϝΠϯϞσϧΛநग़͢Δ ϞσϧΛίϯϙʔωϯτʹ͢Δ
21. υϝΠϯϞσϧͷ֓೦͕มΘΔ ίϯϙʔωϯτΛݟ௚͢ ֓೦͕ؒҧ͍ͬͯΕ͹ɺ࣋ͭ΂͖৘ใ΍ৼΔ෣͍ ͋Δ΂͖ࢹ֮৘ใ΋ݟ௚͢ඞཁ͕͋Δ
22. 関心ごと、責務の分離 2
23. ϝϯλϧ
    Ϟσϧ ίϯςΫετͰมΘΔ ؔ৺͝ͱ͸Ͳ͜ʁ
24. 5P%PϦετίϯϙʔωϯτ ૟আ͢Δ - 14:00 ങ͍෺ - 16:00 ͝൧࡞Δ - 18:00 ब৸ - 23:00
25. ૟আ͢Δ - 14:00 ങ͍෺ - 16:00 ͝൧࡞Δ - 18:00 ब৸ - 23:00 ૟আ͢Δ - 14:00 ങ͍෺ - 16:00 5P%PϦετ 5P%P ෦඼ ૟আ͢Δ - 14:00
26. ૟আ͢Δ - 14:00 ങ͍෺ - 16:00 ͝൧࡞Δ - 18:00 ब৸ - 23:00 ૟আ͢Δ - 14:00 ങ͍෺ - 16:00 5P%PϦετ 5P%P ෦඼ ૟আ͢Δ - 14:00 ίϨΫγϣϯ ΤϯςΟςΟ 6*ύʔπ 5P%PϦετͷߏ଄͸
    ஌Βͳͯ͘ྑ͍ 5P%Pͷߏ଄͸
    ஌Βͳͯ͘ྑ͍
27. ίϯϙʔωϯτ͸ ૄ ݁ ߹ جຊతʹͶ
28. ૟আ͢Δ - 14:00 ങ͍෺ - 16:00 ͝൧࡞Δ - 18:00 ब৸ - 23:00 5P%PϦετ { Todos:[ { title: "૟আ͢Δ", id: 1, limitDate: "2016-09-07 14:00", isComplete: true }, { title: "ങ͍෺", id: 2, limitDate: "2016-09-07 16:00", isComplete: false }, ... ] } 4UPSF
29. 5P%P ૟আ͢Δ - 14:00 ༧ఆ໊ ظ೔ ׬ྃ
    ͔ͨ͠ʁ νΣοΫͨ͠Β
    ׬ྃ͢Δ
    ৼΔ෣͍΋౉͢
30. νΣοΫϘοΫε ৼΔ෣͍ νΣοΫ
    ͔ͨ͠ʁ
31. ੹຿΍ίϯςΫετͰཻ౓Λม͑Δ ίϯϙʔωϯτͷ
    ධՁج४͕ݟ͑Δ ίϯϙʔωϯτΛ෦඼ͱͯ͠ѻ͏͚ͩͰ͸ͳ͘ɺ ධՁͷ୯Ґͱͯ͠ѻ͏
32. モデリングフロー 3
33. Ϟσϧ͸Ͳ͏΍ͬͯݟ͚ͭΔͷ͔ʁ
34. 
    ΞΫλʔͱϢʔεέʔεΛ୳Δ 5P%PΛ؅ཧ͢Δ 5P%PΛऴ͑Δ 5P%PΛ࡞Δ ར༻ऀ
35. 
    ڞ௨ݴޠʢϝϯλϧϞσϧʣΛநग़͢Δ 5P%PΛ؅ཧ͢Δ 5P%PΛऴ͑Δ 5P%PΛ࡞Δ ར༻ऀ
36. 
    ଐੑ΍ৼΔ෣͍Λ୳Δ w ༧ఆ໊
    w ظ೔
    w ׬͔ྃͨ͠Ͳ͏͔ 5P%P ׬ྃͨ͠ΒνΣοΫ͢Δ
37. ϞσϦϯάͷϙΠϯτ
38. ۩ମతͳࣄ৅ ந৅Խ͞Εͨࣄ৅ ۩ମͱந৅ͷԟ෮
39. ۩ମΛ΋ͱʹຊ࣭Λݟ͚ͭΔ ຊ࣭͕ݟ͑Δͱ
    ΑΓ۩ମతͳࣄ͕ݟ͑Δ
40. ֓೦Λந৅Խͨ͠ίϯϙʔωϯτ ίϯϙʔωϯτΛߏ଄తʹѻ͏ ઃܭͱ͍͏ڞ௨ݴޠͰ։ൃ͍ͯ͘͠ ϙΠϯτ
41. 参考 いろいろ
42. 参考 OOUX オブジェクト指向UX http://postd.cc/object-oriented-ux/ http://alistapart.com/article/object-oriented-ux ӳޠهࣄʢຊՈʣ ೔ຊޠهࣄ
43. 参考 ドメイン駆動開発 Domain Driven Design 実践ドメイン 駆動設計 エリック・エヴァンスの ドメイン駆動設計
44. 参考 ユースケース駆動 Use-Case Driven Design ユースケース駆動開発 実践ガイド
45. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ 5IBOLT T S U Y O S H I H I G U C H I @tyshgc