フロントエンドはDDDの夢を見るか

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

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

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

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

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

͚ͨͯͭ

ࠓ೔͓࿩͢Δͱ͜Ζ

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

࠷ॳʹ࡞͍ͬͯͨը໘

͕͢͞ʹ͜Ε͸ͳ͍

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

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

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

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

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

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

൓লͨ͠ ؒҧͬͯ͸͍ͳ͍ %%%Ͱେ੾ͳͷ͸ υϝΠϯϞσϧͩ͠ͳʂ

େ͖ͳաͪͩͬͨ ͡Ό͋ϑϩϯτͷ͜ͱ ͸·ͬͨ͘ߟ͑ͳ͍Ͱ ͍͔ͬʂ

ϑϩϯτΤϯυʹ͸ ϑϩϯτΤϯυͷ υϝΠϯϞσϧ͕͋Δ

ͦΜͳ౰ͨΓલͷ͜ͱʹ Α͏΍͘ؾ͕͍ͭͨ

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

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

υϝΠϯϞσϧͱը໘

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

  ࢯ໊  <span th:text= “${member.resume.profile.personName .lastName.value}”></span>  <span th:text= “${member.resume.profile.personName .firstName.value}"></span>
ը໘ʢ)5.-ʣ

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

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

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

<head>  <title>ձһ৘ใ</title>  </head>  <body th:with="member = ${member}">  <section th:with="resume =
${member.resume}">  <h1>Ϩδϡϝ৘ใ</h1>  <section th:with="profile = ${resume.profile}">  <h2>ϓϩϑΟʔϧ</h2>  <section th:with="personName = ${profile. personName}">  <h3>ࢯ໊</h3>  <span th:text=“${personName.lastName.value}”> </span>  <span th:text=“${personName.firstName.value}”> </span>  </section>  </section>  </section>  </body> ը໘ʹެ։͞ΕΔߏ଄)5.-ͷΞ΢τϥΠϯߏ଄ ઌ΄ͲͷαϯϓϧίʔυΛ ۃ୺ʹॻ͖௚͢ͱ͜͏ͳΔ

)5.-ͷΞ΢τϥΠϯߏ଄ʹӨڹ͠ͳ͍෦෼͸Ӆṭ͢Δ <head>  <title>ձһ৘ใ</title>  </head>  <body th:with="member = ${member}">  <section th:with="resume
= ${member.resume}">  <h1>Ϩδϡϝ৘ใ</h1>  <section th:with="profile = ${resume.profile}">  <h2>ϓϩϑΟʔϧ</h2>  <section th:with="personName = ${profile. personName}">  <h3>ࢯ໊</h3>  <span th:text=“${personName.lastName.value}”> </span>  <span th:text=“${personName.firstName.value}”> </span>  </section>  </section>  </section>  </body>

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

͞Βʹ)5.-ͷΞ΢τϥΠϯߏ଄ʹӨڹ͠ͳ͍෦෼͸Ӆṭ͢Δ <head>  <title>ձһ৘ใ</title>  </head>  <body th:with="member = ${member}">  <section th:with="resume
= ${member.resume}">  <h1>Ϩδϡϝ৘ใ</h1>  <section th:with="profile = ${resume.profile}">  <h2>ϓϩϑΟʔϧ</h2>  <section th:with="personName = ${profile. personName}">  <h3>ࢯ໊</h3>  <span th:text=“${personName.lastName.value}”> </span>  <span th:text=“${personName.firstName.value}”> </span> <span th:text=“${personName.fullName}”> </span>  </section>  </section>  </section>  </body>

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

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

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

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

ϓϩϑΟʔϧը໘ͳͷʹʁ ҧ࿨ײ

υϝΠϯϞσϧ΋·ͬͨ͘෼͚͍ͯͨ

΋͏Ұ౓Α͘ߟ͑ͯΈΔ

͜ͷը໘ͬͯͳΜͳΜͩΖ͏ʁ

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

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

υϝΠϯϞσϧͷ௥Ճ

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

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

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

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

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

ٻਓҰཡυϝΠϯϞσϧ public class Offers {  List<Offer> values = new ArrayList<>(); 
  public boolean isEmpty() {  return values.isEmpty();  }  } <div th:if=“${offers.empty}">  <div class="empty-message"> ࢦఆ͞Εͨ৚݅ʹ֘౰͢Δٻਓ৘ใ͸͋Γ·ͤΜɻ </div> </div> ٻਓҰཡը໘

ٻਓυϝΠϯϞσϧ public class Offer {  LocalDate createDate;    public boolean
isNewArrival() {  return createDate.until(LocalDate.now(), ChronoUnit.DAYS) <= 7;  }  } <span th:if="${offer.newArrival}" class=“new- offer-label“>৽ண!</span> ٻਓը໘

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

͜Μͳ͔Μ͡ͰίϝϯτΛ࢒ͯ͘͠ΕΔͷͰ͘͢͝ॿ͔ͬͨ   <a class="link-offer-more">  ͜ͷ৚݅ʹϚον͢ΔٻਓΛ΋ͬͱݟΔ  </a>

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

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

͍͍Ͷʂ

υϝΠϯϞσϧͱ$44

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

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

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

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

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

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

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

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

.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

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

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

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

.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;  }

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

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

)5.- <div th:classappend="${offers.visibleAsStyleClass}">  // ུ  </div> .hide {  display: none; 
} $44

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

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

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

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

͓·͚ தԝدͤΊͬͪΌ͠ΜͲ͍ʂʂʂ 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

+BWB4DSJQU

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

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

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

ྫر๬৬छબ୒

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

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

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

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

৬छબ୒ϏϡʔϞσϧʢ+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) {  // ΧςΰϦʔ഑Լ͕͢΂ͯνΣοΫ͞Ε͍ͯΔ͔൑ఆ͢Δ  };  }; コンストラクタで受け取ったドメインモデルを元に職種モデルを⽣成する

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

νΣοΫϘοΫεͱͷόΠϯυ <input type="checkbox" ɹdata-bind="checked: isAllCheckedInCategory(1), click:checkInCategory.bind($data,1)"> اըɾࣄ຿  <ul>  <li> ɹɹɹɹ<input
type="checkbox" ɹɹɹɹɹɹɹɹdata-bind="value:selectedJobTitleCodes"> ɹɹɹɹҰൠࣄ຿ ɹɹ</li>  <li> ɹɹɹɹ<input type="checkbox" ɹɹɹɹɹɹɹɹdata-bind="value:selectedJobTitleCodes"> ૯຿ </li>  </ul>

৬छυϝΠϯϞσϧʢαʔόʔαΠυʣ 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;  }  }

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

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

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

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

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

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

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

,OPDLPVUKTΠΠͶʂ

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

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

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

フロントエンドはDDDの夢を見るか

フロントエンドはDDDの夢を見るか

Other Decks in Technology

Featured

Transcript