Slide 1

Slide 1 text

ϑϩϯτΤϯυはDDDの夢をݟΔか ೥݄̑೔ ؔ੢%%%KBWB !ZVLJFFO

Slide 2

Slide 2 text

ࣗݾ঺հ ˏZVLJFFOΏ͖ʔΜ 4*FSग़ࣗͳϑϦʔϥϯεͷϓϩάϥϚʔ ಘҙ෼໺͸+BWB8FC ཁ݅ఆٛʙӡ༻อक·Ͱ։ൃͷ͜ͱ͸Ұ௨Γ ؔ੢%%%KBWB%%%ΞϥΠΞϯεؔ੢+BWBΤϯδ χΞͷձIPHFۦಈ

Slide 3

Slide 3 text

ϑϩϯτΤϯυΤϯδχΞʁ ҧ͍·͢͝ΊΜͳ͍͞ )5.-΋$44΋+4΋ʮ͜͏͍͏ݟͨ໨Ͱ͜͏ಈ ͘΋ͷ࡞ͬͯʂʯ͸࣮૷Ͱ͖·͢ɻ ͕ $PPPPPMͳઃܭ͕ग़དྷΔ͔ͱ͍͏ͱ·ͩ· ͩɻ

Slide 4

Slide 4 text

͸͡Ίʹ w ͜ͷൃද͸ࢲ͕%%%ʢ%PNBJO%SJWFO%FTJHOʣͰ։ൃͨ͠ αʔϏεͷɺ͓΋ʹϑϩϯτΤϯυ෦෼ʹ͍ͭͯឯ༨ۂંɾ ࣣసീ౗ɾதഁਐܸͳܦݧΛ෺ޠΔ΋ͷͰ͢ɻ w 6*69ઃܭʹ͍ͭͯ͸ग़͖ͯ·ͤΜɻ w ͢΂ͯݸਓͷݟղͰ͋Γɺॴଐ͢Δ૊৫ɺ͓Αͼొ৔͢Δαʔ ϏεͷӡӦձࣾͱͷؔ࿈͸͋Γ·ͤΜɻ

Slide 5

Slide 5 text

എܠ w ίϯγϡʔϚ޲͚స৬ࢧԉαʔϏε w ࣄۀձࣾ͞Μ͔Βͷडୗ։ൃ

Slide 6

Slide 6 text

͚ͨͯͭ

Slide 7

Slide 7 text

ࠓ೔͓࿩͢Δͱ͜Ζ

Slide 8

Slide 8 text

։ൃମ੍ ϑϩϯτ͸ ͪ͜ΒͰ΍Γ·͢Α ͡Ό͋ϑϩϯτͷ͜ͱ͸·ͬͨ͘ ߟ͑ͳ͍Ͱ͍͔ͬʂ %%%Ͱେ੾ͳͷ͸υϝΠϯϞσ ϧͩ͠ͳʂ ؾʹͳΔͷ͸ ը໘ભҠ͘Β͍

Slide 9

Slide 9 text

࠷ॳʹ࡞͍ͬͯͨը໘

Slide 10

Slide 10 text

͕͢͞ʹ͜Ε͸ͳ͍

Slide 11

Slide 11 text

w ը໘͸ʮؔ৺ʯ͕ڧ͘ݱΕΔ෦෼ w ։ൃऀʢࢲʣ͕ԿΛॏཁͩͱߟ͑ͯ ͍͑ͯΔͷ͔Λ࢝Ί͔Βදݱ͢Ε͹ Α͔ͬͨ w ͦ͏͢Ε͹ૣ͍ஈ֊ͰϑΟʔυόο ΫΛ΋ΒͬͯυϝΠϯ΁ͷཧղΛਂ ΊΔ͜ͱ͕ग़དྷͨ

Slide 12

Slide 12 text

ͤΊͯ͜Ε͘Β͍͸࢝Ί͔Βදݱ͓͚ͯ͠͹Α͔ͬͨ

Slide 13

Slide 13 text

͜͜Ͱݴ͍͍ͨ͜ͱ͸ ʮը໘σβΠϯ͔Β࡞Ζ͏ʂʯ Ͱ͸ͳ͍ ΍ͬͺΓ͸͡Ί͸υϝΠϯϞσϧ͕ྑ͍ͱࢥ͏Αʂ DBVUJPO

Slide 14

Slide 14 text

ͰɺԿ͕ى͖͔ͨ ΍ͬͺΓϑϩϯτ΋ ͦͪΒʹ͓ئ͍͠·͢ɻ

Slide 15

Slide 15 text

ը໘Λ࡞ͬͯΈͯ ൑໌͢ΔυϝΠϯͷ ೝࣝζϨ +BWB͔Β཭ΕͨͱͨΜ ࣦΘΕΔܕͷԸܙ ϔϧϓʹདྷͯ͘Εͨਓ͸ ࢥ͍ࢥ͍ʹ ࣮૷͢Δ͔͠ͳ͍ ࡞͖ͬͯͨ υϝΠϯϞσϧͷ ໊લɾߏ଄͕ ͥΜͥΜ׆͔ͤͳ͍ υϝΠϯϞσϧͷมߋ΋ ൃੜ

Slide 16

Slide 16 text

݁Ռ w ࢧ཭໓྾ͳΞ΢τϥΠϯͷ)5.- w #&.ͬͯͳΜ͚ͩͬͨͬʁͱ͍͏ $44 w ॻ͍ͨਓҎ֎͸৮Δͷ͕ා͍ +BWB4DSJQU

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

։ൃମ੍ʙ࢓੾Γ௚͠ฤʙ σβΠϯͷओ୲౰ 8'ͷ࡞੒ ϕʔεɾϨΠΞ΢τ࣮૷ ෳࡶͳελΠϧͷ ϚʔΫΞοϓ +BWB4DSJQU $44ͷϚʔΫΞοϓ ͦͷଞ

Slide 23

Slide 23 text

ࠓ౓ͦ͜ ๑w Aŷw و✧͔ͬͯ Μ͡ͷϑϩϯτΤϯυʹ ͍ͨ͠

Slide 24

Slide 24 text

υϝΠϯϞσϧͱը໘

Slide 25

Slide 25 text

υϝΠϯϞσϧͷߏ଄Λͦͷ··ը໘ʹެ։ͨ͠

Slide 26

Slide 26 text

  ࢯ໊    ը໘ʢ)5.-ʣ

Slide 27

Slide 27 text

ࢯ໊υϝΠϯϞσϧ public class PersonName {  FirstName firstName = new FirstName();  LastName lastName = new LastName();    public FirstName getFirstName() {  return firstName;  }    public LastName getLastName() {  return lastName;  }  }

Slide 28

Slide 28 text

υϝΠϯϞσϧͷڧऑʢΫϥεߏ଄ʣΛը ໘ʹ൓ө͍ͤͨ͞ɻ ٯʹɺը໘্ͷڧऑʢΞ΢τϥΠϯߏ଄ʣ ΛυϝΠϯϞσϧʹ൓ө͍ͤͨ͞ɻ ཧ༝

Slide 29

Slide 29 text

໨ࢦ͢͸૬ޓʹϑΟʔυόοΫ͋͠͏ؔ܎

Slide 30

Slide 30 text

  ձһ৘ใ       

Ϩδϡϝ৘ใ

ϓϩϑΟʔϧ

ࢯ໊

            ը໘ʹެ։͞ΕΔߏ଄)5.-ͷΞ΢τϥΠϯߏ଄ ઌ΄ͲͷαϯϓϧίʔυΛ ۃ୺ʹॻ͖௚͢ͱ͜͏ͳΔ

Slide 31

Slide 31 text

)5.-ͷΞ΢τϥΠϯߏ଄ʹӨڹ͠ͳ͍෦෼͸Ӆṭ͢Δ   ձһ৘ใ       

Ϩδϡϝ৘ใ

ϓϩϑΟʔϧ

ࢯ໊

Slide 32

Slide 32 text

ࢯ໊υϝΠϯϞσϧͷมߋ public class PersonName {  FirstName firstName = new FirstName();  LastName lastName = new LastName();    public String getFirstName() {  return firstName.value;  }    public String getLastName() {  return lastName.value;  }  }

Slide 33

Slide 33 text

͞Βʹ)5.-ͷΞ΢τϥΠϯߏ଄ʹӨڹ͠ͳ͍෦෼͸Ӆṭ͢Δ   ձһ৘ใ       

Ϩδϡϝ৘ใ

ϓϩϑΟʔϧ

ࢯ໊

Slide 34

Slide 34 text

ࢯ໊υϝΠϯϞσϧͷมߋ public class PersonName {  FirstName firstName = new FirstName();  LastName lastName = new LastName();    public String getFullName() {  return String.format("%s %s", firstName.value, lastName.value);  }  }

Slide 35

Slide 35 text

͜Μͳ͔Μ͡Ͱը໘ͱυϝΠϯϞσϧΛ มߋ͠ଓ͚Δ

Slide 36

Slide 36 text

ߏ଄Ҏ֎ʹ΋ը໘ʹ͸υϝΠϯϞσϧมߋͷ ͖͔͚͕ͬͨ͘͞Μ͋Δ

Slide 37

Slide 37 text

ʮϓϩϑΟʔϧొ࿥ը໘ʹ50&*$50&'-Λೖྗ͍ͨ͠ʯ

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

͋ͬ

Slide 43

Slide 43 text

ೝࣝΛվΊΔ ʮձһ৘ใΛొ࿥͢Δը໘ʯ ʮਓࡐ঺հձ͔ࣾΒձһ΁ద੾ͳεΧ΢τ Λߦ͏ͨΊʹඞཁͳ৘ใΛొ࿥ͯ͠΋Β͏ ը໘ʯ

Slide 44

Slide 44 text

ʮద੾ͳεΧ΢τΛߦ͏ͨΊʹ ඞཁͳ৘ใʯ ͜ͷυϝΠϯϞσϧ͕ͳ͍

Slide 45

Slide 45 text

υϝΠϯϞσϧͷ௥Ճ

Slide 46

Slide 46 text

ਓࡐ঺հձ͔ࣾΒձһ΁ద੾ͳεΧ΢τΛߦ͏ͨΊʹඞཁ ͳ৘ใυϝΠϯϞσϧ public class ScoutMatchRequest {  Contact contact;  Education education;  LanguageSkill languageSkill; //ུ  }

Slide 47

Slide 47 text

͜Μͳ͔Μ͡Ͱը໘ͱυϝΠϯϞσϧΛ มߋ͠ଓ͚Δʢ̎ճ໨ʣ

Slide 48

Slide 48 text

υϝΠϯϞσϧͷߏ଄Λը໘΁ެ։͢Δ͜ͱͷσϝϦοτ 63-͕௕͘ͳΔ 4QSJOH.7$5IZNFMFBGͷσʔλόΠϯυͷ࢓ ༷ʹΑΓɺϦΫΤετύϥϝʔλ໊͕௕͘ͳͬͯ ͠·͏ɻ *ͱ&͕ͭ͘Ұ෦ͷϒϥ΢βͷ63-௕ͷݶքΛಥഁ ͦ͠͏ʹͳΔɻ

Slide 49

Slide 49 text

ϦωʔϜͮ͠Β͍   4QSJOH.7$5IZNFMFBGͰ)5.-΋ؚΊ߲ͯ໨ ໊ΛϦωʔϜ͢Δͷ͸Ϋη͕͋Δɻ ʢಉ໊ͷ.PEFM"UUSVCVUFͰએݴ͍ͯ͠ΔͱϦ ωʔϜର৅ʹͳΔʣ Ώ͑ʹɺެ։͍ͯ͠Δ߲໨ͷϦωʔϜΛ᪳᪯ͯ͠ ͠·͏ɻ υϝΠϯϞσϧͷߏ଄Λը໘΁ެ։͢Δ͜ͱͷσϝϦοτ

Slide 50

Slide 50 text

ଞͷϝϦοτʙίϛϡχέʔγϣϯ ҙຯͷ͋Δ໊લ͕ը໘ʹ͋ΒΘΕ͍ͯΔͱɺσ βΠφʔ͞Μʹ఻ΘΓ΍͍͢ɻ P⒎FSOFX͔ͩΒɺ ৽ணٻਓͷελΠϧʹ ͢Ε͹͍͍Μͩͳ P⒎FSTFNQUZͬͯ͜ͱ͸ɺ ݕࡧ݁Ռ͕̌݅ͷ৔߹ʹ දࣔ͞ΕΔͷ͔ σβΠφʔ͞Μ

Slide 51

Slide 51 text

ٻਓҰཡυϝΠϯϞσϧ public class Offers {  List values = new ArrayList<>();    public boolean isEmpty() {  return values.isEmpty();  }  }

ࢦఆ͞Εͨ৚݅ʹ֘౰͢Δٻਓ৘ใ͸͋Γ·ͤΜɻ

ٻਓҰཡը໘

Slide 52

Slide 52 text

ٻਓυϝΠϯϞσϧ public class Offer {  LocalDate createDate;    public boolean isNewArrival() {  return createDate.until(LocalDate.now(), ChronoUnit.DAYS) <= 7;  }  } ৽ண! ٻਓը໘

Slide 53

Slide 53 text

ٯʹະ࣮૷෦෼΋఻ΘΓ΍͍͢ )5.-ʹ·ͩͦΕΒ͍͠ ৚݅͸ͳ͍ͳ͊ ʮݕࡧ݁Ռ͕݅Λ௒͑ͨ ৔߹ʹ΋ͬͱݟΔϦϯΫΛ දࣔ͢Δʯ͔ʜ σβΠφʔ͞Μ

Slide 54

Slide 54 text

͜Μͳ͔Μ͡ͰίϝϯτΛ࢒ͯ͘͠ΕΔͷͰ͘͢͝ॿ͔ͬͨ     ͜ͷ৚݅ʹϚον͢ΔٻਓΛ΋ͬͱݟΔ 

Slide 55

Slide 55 text

σβΠφʔ͞Μ͕ʮಈతʹ֬ೝͰ͖Δʯ ࢲʢϓϩάϥϚʔʣͰ͸ؾ͕͔ͭͳ͍఺ͩͬͨ ಈతʹ֬ೝͰ͖Δͷ͕ خ͔ͬͨ͠Ͱ͢

Slide 56

Slide 56 text

ߟ࡯ 4QSJOH#PPU5IZNFMFBG͕։ൃ؀ڥͱͯ͠ ڧྗͩͬͯ͜ͱ͕Ұ൪ͷཧ༝ͩͱࢥ͏ɻ ͦͷ্Ͱɺʮը໘ʹެ։͢Δߏ଄ͱ໊લʹͩ͜ Θͬͨʯ݁Ռɺʮಈతʹ֬ೝ͠΍͍͢ʯͱ͍͏ ޮՌ͕ಘΒΕͨɻ

Slide 57

Slide 57 text

͍͍Ͷʂ

Slide 58

Slide 58 text

υϝΠϯϞσϧͱ$44

Slide 59

Slide 59 text

$44͸೉͍͠ ͳͥͳΒͦΕ͕ ʮΧεέʔσΟϯάɾελΠϧɾγʔτʯ ͔ͩΒ ܧঝϕʔε άϩʔόϧείʔϓ͔͠ͳ͍ ৄࡉ౓΍΍͍͜͠ʜ

Slide 60

Slide 60 text

υϝΠϯϞσϧ͸υϝΠϯ͝ͱʹߟ͑Δ

Slide 61

Slide 61 text

⼀覧表⽰のスタイル詳細表⽰のスタイル ελΠϧ͸υϝΠϯΛԣஅ͢Δ

Slide 62

Slide 62 text

ͳͥͳΒελΠϧʹ͸౷Ұײ͕ٻΊΒΕΔ͔Β ⼀覧表⽰のスタイル

Slide 63

Slide 63 text

͜ΕΛͲ͏ߟ͍͚͑ͯ͹Α͍͔ʁ

Slide 64

Slide 64 text

00$44ʢΦϒδΣΫτࢦ޲$44 w 4USVDUVSFͱ4LJOͷ෼཭ w $POUBJOFSͱ$POUFOUTͷ෼཭

Slide 65

Slide 65 text

جຊతͳϧʔϧͱػೳ ⼀覧表⽰のスタイル詳細表⽰のスタイル $44ʹ͓͚Δʮ4USVDUVSFʯ

Slide 66

Slide 66 text

υϝΠϯ͝ͱͷϧʔϧͱػೳ $44ʹ͓͚Δʮ4LJOʯ ⻩⾊いよ！⻘いよ！ピンクいよ！

Slide 67

Slide 67 text

.search-result_header {  display: block;  padding: 1.2rem 1.0rem;  border: 1px solid #c7c7c7;  font-size: 1.2rem;  }    .search-result_header--offer {  @extend .search-result_header;  background-color: #FFF4C3;  }    .search-result_header--agency {  @extend .search-result_header;  background-color: #D4E1F5;  }    .search-result_header--adviser {  @extend .search-result_header;  background-color: #FCDAE6;  } 検索結果ヘッダは基本的にこのルールセットを適⽤するよ = Structure ドメインごとにそれぞれのルールセットを適⽤するよ = Skin

Slide 68

Slide 68 text

No content

Slide 69

Slide 69 text

ൃ૝Λ੾Γସ͑Δ )5.-ͷઃܭͰ͸ ʮυϝΠϯϞσϧͷߏ଄Ξ΢τϥΠϯߏ଄ʯ ͕ͩͬͨɺ $44ͷઃܭͰ͸ ʮυϝΠϯϞσϧ͕දݱ͞ΕΔ෦෼$44ͷ ݟͨ໨ʢߏ଄ͱ෼཭͞ΕΔ΋ͷʣʯ ͱͳΔ

Slide 70

Slide 70 text

4."$44ͷΧςΰϥΠζ w #BTF w -BZPVU w .PEVMF w 4UBUF w 5IFNF

Slide 71

Slide 71 text

͜ΕΛ4USVDUVSFͱ4LJOʹ෼͚Δͱ w #BTF w -BZPVU w .PEVMF w 4UBUF w 5IFNF 4USVDUVSFجຊͱͳΔߏ଄΍ମࡋ 4LJOݟͨ໨ɻυϝΠϯΛදݱͰ͖Δ෦෼

Slide 72

Slide 72 text

.PEVMFυϝΠϯΛ.PEJpFSͰදݱ͢Δ .search-result_header {  display: block;  padding: 1.2rem 1.0rem;  border: 1px solid #c7c7c7;  font-size: 1.2rem;  }    .search-result_header--offer {  @extend .search-result_header;  background-color: #FFF4C3;  }    .search-result_header--agency {  @extend .search-result_header;  background-color: #D4E1F5;  }    .search-result_header--adviser {  @extend .search-result_header;  background-color: #FCDAE6;  }

Slide 73

Slide 73 text

ը໘্ͷঢ়ଶ͸υϝΠϯͷঢ়ଶͱϦϯΫ͢Δɻ ͳͷͰɺঢ়ଶ͸υϝΠϯϞσϧͰ੍ޚ͢Δͷ͕ ޷·͍͠ɻ 4UBUF

Slide 74

Slide 74 text

ྫʣදࣔʗඇදࣔΛυϝΠϯϞσϧͰ੍ޚ͢Δ public class Offers {  List values = new ArrayList<>();    public String getVisibleAsStyleClass() {  return values.isEmpty() ? "hide" : "";  }  }

Slide 75

Slide 75 text

)5.-

  // ུ 

.hide {  display: none;  } $44

Slide 76

Slide 76 text

͜ͷํ๏ͷσϝϦοτ w มߋ͍ͨ࣌͠ʹɺυϝΠϯϞσϧͱ$44྆ํʹ खΛೖΕͳ͚Ε͹ͳΒͳ͍ɻ w υϝΠϯϞσϧͱ$44͸୲౰ऀ͕ҧ͏͜ͱ΋ଟ ͍ʢίϛϡχέʔγϣϯίετ͕ߴ͘ͳΔʣ w ͋ΔελΠϧΫϥεͷ࢖༻ঢ়گΛௐ΂͍ͨͱ͖ ʹɺ)5.-΁ͷݕࡧ͚ͩͰ͸ݕ஌Ͱ͖ͳ͍ ʢ͏͔ͬΓ࡟আͦ͠͏ʹͳΔʣ

Slide 77

Slide 77 text

Ͱ΋ͳΜ͔Χοί͍͍ͷͰ αϯϓϧྫͷΑ͏ʹɺʮදࣔʗඇදࣔ͸υϝΠ ϯϞσϧͰ੍ޚ͢Δʯ౳খ͍͞ϧʔϧͰద༻͠ ͍͚ͯ͹ɺ࢖͍υίϩ͸͋Δɻ

Slide 78

Slide 78 text

ͱɺ͜͜·Ͱ͸ཧ૝͚ͩͲʜ w ·ͩ·࣮ͩફ͸଍Γͯͳ͍ɻ w ։ൃ౰ॳʹ͜͜·ͰઃܭͰ͖ͳ͔ͬͨɻ w ͦͯ͠$44͸͍ͬͨΜ૸Γͩ͢ͱɺେن໛Ϧ ϑΝΫλϦϯάͮ͠Β͍ɻ w ίετ͕͔͔ΔΘΓʹαʔϏεՁ஋ʹ൓ө͠ʹ ͍͘ɻ w ຊ৬ͷϑϩϯτΤϯδχΞ͞Μ͔Βͷҙݟ΋ฉ ͖͍ͨͰ͢ɻ w ਫ਼ਐ͋ΔͷΈʂ

Slide 79

Slide 79 text

΍ͬͺΓ$44͸೉͍͠ ͳͥͳΒͦΕ͕ ʮΧεέʔσΟϯάɾελΠϧɾγʔτʯ ͔ͩΒʂ

Slide 80

Slide 80 text

͓·͚ தԝدͤΊͬͪΌ͠ΜͲ͍ʂʂʂ text-align: center  overflow: hidden  display: -webkit-box  display: -moz-box  display: -ms-flexbox  display: -webkit-flex  display: flex  -webkit-box-pack: center  -moz-box-pack: center  -ms-flex-pack: center  -webkit-justify-content: center  justify-content: center  -webkit-box-align: center  -moz-box-align: center  -ms-flex-align: center  -webkit-align-items: center  align-items: center

Slide 81

Slide 81 text

+BWB4DSJQU

Slide 82

Slide 82 text

+BWB4DSJQUͬͯɺॻ͚͹ॻ͘΄Ͳ%%%͔Βԕ͟ ͔͍ͬͯ͘ͳʜ

Slide 83

Slide 83 text

υϝΠϯϞσϧͱ+BWB4DSJQUͷؔ܎ +BWB4DSJQUͰԿΛ࣮ݱ͍͔ͨ͠ʹΑΔ

Slide 84

Slide 84 text

ྫ͑͹ ϑΣʔυΠϯʗΞ΢τͳͲͷہॴతͳ7JFXΛ ੍ޚ͢ΔεΫϦϓτ͸ɺαʔόαΠυͷυϝ ΠϯϞσϧͱ͸ؔ܎͠ͳ͍ "KBYͰදࣔσʔλΛऔಘ͢ΔͳͲɺ%0.ߏ ଄ࣗମΛ੍ޚ͢Δ৔߹͸ɺυϝΠϯϞσϧͷ ߏ଄Λͦͷ··औಘ͢Δ͜ͱʹͳΔ

Slide 85

Slide 85 text

ྫر๬৬छબ୒

Slide 86

Slide 86 text

͢Ͱʹొ࿥͞Ε͍ͯΔر๬৬छʹ߹Θͤͯɺը໘্ͷॳظ දࣔ΋มߋ͍ͨ͠

Slide 87

Slide 87 text

ʮ͢Ͱʹొ࿥͞Ε͍ͯΔر๬৬छʯ αʔόʔαΠυͷ ر๬৬छͷυϝΠϯϞσϧ

Slide 88

Slide 88 text

ͳͷͰɺҰͭͷΞϓϩʔνͱͯ͠ αʔόʔαΠυͷυϝΠϯϞσϧΛݩʹ͠ ͯɺΫϥΠΞϯτଆʹબ୒ର৅ͷ৬छϞσ ϧΛ࡞੒͢Δ

Slide 89

Slide 89 text

બ୒ର৅ͷ৬छϞσϧʢ+BWB4DSJQUʣ var JobTitle = function (code, name, categoryIndex) {  this.code = code;  this.name = name;  this.categoryIndex = categoryIndex;  }; 

Slide 90

Slide 90 text

৬छબ୒ϏϡʔϞσϧʢ+BWB4DSJQUʣ var JobTitleSelector = function (initialJobTitles) {    this.selectedJobTitles = ko.observableArray(createJobTitles(initialJobTitles));    var createJobTitles = function (initialJobTitles) {  return _.map(initialJobTitles, function (jobTitle) {  return new JobTitle(  jobTitle.code,  jobTitle.name,  jobTitle.categoryIndex);  });  };    this.selectedJobTitleCodes = function () {  // selectedJobTitles͔ΒίʔυͷΈநग़͢Δ  };    this.checkInCategory = function (categoryIndex) {  // ΧςΰϦʔ഑ԼΛ͢΂ͯνΣοΫ͢Δ  };    this.isAllCheckedInCategory = function (categoryIndex) {  // ΧςΰϦʔ഑Լ͕͢΂ͯνΣοΫ͞Ε͍ͯΔ͔൑ఆ͢Δ  };  }; コンストラクタで受け取ったドメインモデルを元に職種モデルを⽣成する

Slide 91

Slide 91 text

৬छબ୒ϏϡʔϞσϧੜ੒࣌ʹυϝΠϯϞσϧΛ౉͢   // ུʢϏϡʔϞσϧͷఆٛʣ var initialJobTitles = /*[[${jobTitles}]]*/ [];  var viewModel = new JobTitleSelector(initialJobTitles);  ko.applyBindings(viewModel); Thymeleafのインライン機能を使うと、ドメインモデルがJSON形式で出⼒される

Slide 92

Slide 92 text

νΣοΫϘοΫεͱͷόΠϯυ اըɾࣄ຿ 

ɹɹɹɹ ɹɹɹɹҰൠࣄ຿ ɹɹ
ɹɹɹɹ ૯຿

Slide 93

Slide 93 text

৬छυϝΠϯϞσϧʢαʔόʔαΠυʣ public class JobTitle {  Code code = new Code();  Name name = new Name();  CategoryIndex categoryIndex = new CategoryIndex();    public String getCode() {  return code.value;  }    public String getName() {  return name.value;  }    public Integer getCategoryIndex() {  return categoryIndex.value;  }  }

Slide 94

Slide 94 text

υϝΠϯϞσϧͷॳظঢ়ଶʹ߹Θͤͯɺ+BWB4DSJQUͰఆٛ ͨ͠৬छબ୒ϏϡʔϞσϧͷॳظঢ়ଶ͕มΘΔ ˞࣮ࡍͷ࣮૷Ͱ͸ɺνΣοΫϘοΫεͷॳظ஋ʹର͢ΔΧελϜ όΠϯσΟϯά͕ඞཁͳ৔߹͕͋Γ·͢

Slide 95

Slide 95 text

ͪΐͬͱߟ͑ͨ͜ͱ αʔϏεશମͷυϝΠϯϞσϧͱ͸ผʹɺೖྗ ิॿʹ͸ೖྗิॿͷؔ৺ࣄ͕͋ΔͷͰ͸ʁ  ʢαϒυϝΠϯʣ

Slide 96

Slide 96 text

ࢥ͍ฦͤ͹ʜ +BWB4DSJQUͬͯɺॻ͚͹ॻ͘΄Ͳ%%%͔Βԕ͟ ͔͍ͬͯ͘ͳʜ サーバーサイドのようにドメインモデルに仕事をさせる設計がなかなか出来なかった

Slide 97

Slide 97 text

Slide 98

Slide 98 text

αʔόʔαΠυͷυϝΠϯϞσϧઃܭͱ ಉ͡Α͏ͳߟ͑ํ͕Ͱ͖Δ ΋ͪΖΜɺ+BWB4DSJQUͷݴޠಛੑ͸ ແࢹͰ͖ͳ͍͚Ͳʜ

Slide 99

Slide 99 text

+BWB4DSJQUͷυϝΠϯϞσϧ +BWB4DSJQUͰ࣮ݱ͍ͨ͜͠ͱΛαϒυϝΠϯͱ ݟͳͯ͠ɺΫϥΠΞϯταΠυʹαϒυϝΠϯ ͷϞσϧΛ࡞Δͷ΋ΞϦ͔΋

Slide 100

Slide 100 text

ͦ΋ͦ΋,OPDLPVUKTΛ࠾༻ͨ͠ཧ༝ w એݴతόΠϯσΟϯά w %0.Λҙࣝ͠ͳ͍Ͱ.PEFM͕࡞ΕΔ w 7JFXͱ7JFX.PEFM͕ࣗಈͰ૒ํ޲ߋ৽͞Ε Δ w ෦෼తʹಋೖ͠΍͔ͬͨ͢

Slide 101

Slide 101 text

σβΠφʔ͞Μͷײ૝ ΠϕϯτΛ௥Ճ͢Δ ͷָ͕ htmlͷΫϥε໊΍IDΛมߋ͢Δ৔߹΍ Πϕϯτͷ৔ॴͷҠಈ͕͠΍͍͢ͳͲ मਖ਼ʹڧ͍ͱ͍͏ҹ৅

Slide 102

Slide 102 text

,OPDLPVUKTΠΠͶʂ

Slide 103

Slide 103 text

ࠓ೔͓࿩Ͱ͖ͳ͔ͬͨ͜ͱ レスポンシブ・デザイン SEO対策ページネーション選択肢モデル URL設計

Slide 104

Slide 104 text

͜Ε͔Β΍ͬͯΈ͍ͨ͜ͱ SPA（シングルページアプリケーション） React 新しい技術を覚えれば、新しいドメインの表現があるはず！で、楽しい

Slide 105

Slide 105 text

͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ *NBHFIUUQXXXHSBQIJDQBOJDDPN