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

by Tsuyoshi Higuchi

Slide 1

Slide 1 text

MentalModel Component Design ϝϯλϧϞσϧ͔Βඥղ͘ ΦϒδΣΫτࢦ޲తίϯϙʔωϯτઃܭ TSUYOSHI HIGUCHI 2016.09.07

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

A G E N D A メンタルモデルとコンポーネント関心ごと、責務の分離モデリングフロー 1 2 3

Slide 4

Slide 4 text

メンタルモデルとコンポーネント 1

Slide 5

Slide 5 text

ίϯϙʔωϯτͱ͸Կʁ

Slide 6

Slide 6 text

ίϯϙʔωϯτ ελΠϧΨΠυ 6*ύʔπ

Slide 7

Slide 7 text

コンポーネント w ଐੑͳͲͷ৘ใ w ΠϯλϥΫγϣϯ w ࢹ֮৘ใ ୯Ұతͳػೳ Λ͍࣋ͬͯΔ

Slide 8

Slide 8 text

OFF ON εΠον

Slide 9

Slide 9 text

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() { //... } }

Slide 10

Slide 10 text

OFF ON ΍ΔؾεΠον 쎛쎢ؾ

Slide 11

Slide 11 text

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() { //... } }

Slide 12

Slide 12 text

ػೳͷ֓೦͕มΘΔ ίϯϙʔωϯτͷҙຯ͕มΘΔ ࣋ͭ΂͖৘ใ΍ৼΔ෣͍΋ҧ͏

Slide 13

Slide 13 text

֓೦Λந৅తʹදݱͨ͠΋ͷ ϝϯλϧϞσϧ

Slide 14

Slide 14 text

ར༻ऀ ։ൃऀ Ϊ Ỿ ỽ ϓ Λ ຒ Ί Δ αʔϏεΛͭ͘Δ ΍ΔؾΛ Φϯ͠Α͏ εΠον Φϯͯ͠ ΋Β͓͏

Slide 15

Slide 15 text

αʔϏε಺ʹ͋ΔϝϯλϧϞσϧΛ੔ཧ͢Δ υϝΠϯϞσϧΛநग़͢Δ αʔϏεʹ܎Δਓશ͕ͯڞ௨ͯ࣋ͭ֓͠೦Ϟσϧ

Slide 16

Slide 16 text

ਤॻؗαʔϏεͷυϝΠϯϞσϧ ିग़ ར༻ཤྺ ฦ٫ ར༻ऀ ਤॻͷିग़ͨ͠৘ใ ฦ٫Λड෇ͨ৘ใ ିग़ɾฦ٫ͷཤྺ ਤॻؗͷར༻ऀ αʔϏεʹରͯ͠ ๊͘ϝϯλϧϞσϧ

Slide 17

Slide 17 text

ΦϒδΣΫτࢦ޲ϓϩάϥϛϯά υϝΠϯϞσϧΛநग़͢Δ ϞσϧΛΦϒδΣΫτʹ͢Δ

Slide 18

Slide 18 text

υϝΠϯϞσϧͷ֓೦͕มΘΔ ΦϒδΣΫτΛݟ௚͢ ֓೦͕ؒҧ͍ͬͯͳ͍͔ ϦϑΝΫλϦϯάΛ܁Γฦ͠ ݟ௚͠ଓ͚Δ

Slide 19

Slide 19 text

ίϯϙʔωϯτ΋֓೦ʹԊΘͤΔ

Slide 20

Slide 20 text

ΦϒδΣΫτࢦ޲ίϯϙʔωϯτઃܭ υϝΠϯϞσϧΛநग़͢Δ ϞσϧΛίϯϙʔωϯτʹ͢Δ

Slide 21

Slide 21 text

υϝΠϯϞσϧͷ֓೦͕มΘΔ ίϯϙʔωϯτΛݟ௚͢ ֓೦͕ؒҧ͍ͬͯΕ͹ɺ࣋ͭ΂͖৘ใ΍ৼΔ෣͍ ͋Δ΂͖ࢹ֮৘ใ΋ݟ௚͢ඞཁ͕͋Δ

Slide 22

Slide 22 text

関心ごと、責務の分離 2

Slide 23

Slide 23 text

ϝϯλϧ Ϟσϧ ίϯςΫετͰมΘΔ ؔ৺͝ͱ͸Ͳ͜ʁ

Slide 24

Slide 24 text

5P%PϦετίϯϙʔωϯτ ૟আ͢Δ - 14:00 ങ͍෺ - 16:00 ͝൧࡞Δ - 18:00 ब৸ - 23:00

Slide 25

Slide 25 text

૟আ͢Δ - 14:00 ങ͍෺ - 16:00 ͝൧࡞Δ - 18:00 ब৸ - 23:00 ૟আ͢Δ - 14:00 ങ͍෺ - 16:00 5P%PϦετ 5P%P ෦඼ ૟আ͢Δ - 14:00

Slide 26

Slide 26 text

૟আ͢Δ - 14:00 ങ͍෺ - 16:00 ͝൧࡞Δ - 18:00 ब৸ - 23:00 ૟আ͢Δ - 14:00 ങ͍෺ - 16:00 5P%PϦετ 5P%P ෦඼ ૟আ͢Δ - 14:00 ίϨΫγϣϯ ΤϯςΟςΟ 6*ύʔπ 5P%PϦετͷߏ଄͸ ஌Βͳͯ͘ྑ͍ 5P%Pͷߏ଄͸ ஌Βͳͯ͘ྑ͍

Slide 27

Slide 27 text

ίϯϙʔωϯτ͸ ૄ ݁ ߹ جຊతʹͶ

Slide 28

Slide 28 text

૟আ͢Δ - 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

Slide 29

Slide 29 text

5P%P ૟আ͢Δ - 14:00 ༧ఆ໊ ظ೔ ׬ྃ ͔ͨ͠ʁ νΣοΫͨ͠Β ׬ྃ͢Δ ৼΔ෣͍΋౉͢

Slide 30

Slide 30 text

νΣοΫϘοΫε ৼΔ෣͍ νΣοΫ ͔ͨ͠ʁ

Slide 31

Slide 31 text

੹຿΍ίϯςΫετͰཻ౓Λม͑Δ ίϯϙʔωϯτͷ ධՁج४͕ݟ͑Δ ίϯϙʔωϯτΛ෦඼ͱͯ͠ѻ͏͚ͩͰ͸ͳ͘ɺ ධՁͷ୯Ґͱͯ͠ѻ͏

Slide 32

Slide 32 text

モデリングフロー 3

Slide 33

Slide 33 text

Ϟσϧ͸Ͳ͏΍ͬͯݟ͚ͭΔͷ͔ʁ

Slide 34

Slide 34 text

ΞΫλʔͱϢʔεέʔεΛ୳Δ 5P%PΛ؅ཧ͢Δ 5P%PΛऴ͑Δ 5P%PΛ࡞Δ ར༻ऀ

Slide 35

Slide 35 text

ڞ௨ݴޠʢϝϯλϧϞσϧʣΛநग़͢Δ 5P%PΛ؅ཧ͢Δ 5P%PΛऴ͑Δ 5P%PΛ࡞Δ ར༻ऀ

Slide 36

Slide 36 text

ଐੑ΍ৼΔ෣͍Λ୳Δ w ༧ఆ໊ w ظ೔ w ׬͔ྃͨ͠Ͳ͏͔ 5P%P ׬ྃͨ͠ΒνΣοΫ͢Δ

Slide 37

Slide 37 text

ϞσϦϯάͷϙΠϯτ

Slide 38

Slide 38 text

۩ମతͳࣄ৅ ந৅Խ͞Εͨࣄ৅ ۩ମͱந৅ͷԟ෮

Slide 39

Slide 39 text

۩ମΛ΋ͱʹຊ࣭Λݟ͚ͭΔ ຊ࣭͕ݟ͑Δͱ ΑΓ۩ମతͳࣄ͕ݟ͑Δ

Slide 40

Slide 40 text

֓೦Λந৅Խͨ͠ίϯϙʔωϯτ ίϯϙʔωϯτΛߏ଄తʹѻ͏ ઃܭͱ͍͏ڞ௨ݴޠͰ։ൃ͍ͯ͘͠ ϙΠϯτ

Slide 41

Slide 41 text

参考いろいろ

Slide 42

Slide 42 text

参考 OOUX オブジェクト指向UX http://postd.cc/object-oriented-ux/ http://alistapart.com/article/object-oriented-ux ӳޠهࣄʢຊՈʣ ೔ຊޠهࣄ

Slide 43

Slide 43 text

参考ドメイン駆動開発 Domain Driven Design 実践ドメイン駆動設計エリック・エヴァンスのドメイン駆動設計

Slide 44

Slide 44 text

参考ユースケース駆動 Use-Case Driven Design ユースケース駆動開発実践ガイド

Slide 45

Slide 45 text

͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ 5IBOLT T S U Y O S H I H I G U C H I @tyshgc