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

87dc1eb31813df3712a262d41a62dd9f?s=47 yukieen
March 05, 2016

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

87dc1eb31813df3712a262d41a62dd9f?s=128

yukieen

March 05, 2016
Tweet

Transcript

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

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

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

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

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

  6. ͚ͨͯͭ

  7. ࠓ೔͓࿩͢Δͱ͜Ζ

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

  9. ࠷ॳʹ࡞͍ͬͯͨը໘

  10. ͕͢͞ʹ͜Ε͸ͳ͍

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

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

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

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

  15. ը໘Λ࡞ͬͯΈͯ ൑໌͢ΔυϝΠϯͷ ೝࣝζϨ +BWB͔Β཭ΕͨͱͨΜ ࣦΘΕΔܕͷԸܙ ϔϧϓʹདྷͯ͘Εͨਓ͸ ࢥ͍ࢥ͍ʹ ࣮૷͢Δ͔͠ͳ͍ ࡞͖ͬͯͨ υϝΠϯϞσϧͷ

    ໊લɾߏ଄͕ ͥΜͥΜ׆͔ͤͳ͍ υϝΠϯϞσϧͷมߋ΋ ൃੜ
  16. ݁Ռ w ࢧ཭໓྾ͳΞ΢τϥΠϯͷ)5.- w #&.ͬͯͳΜ͚ͩͬͨͬʁͱ͍͏ $44 w ॻ͍ͨਓҎ֎͸৮Δͷ͕ා͍ +BWB4DSJQU

  17. ܸ௜

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

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

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

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

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

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

  24. υϝΠϯϞσϧͱը໘

  25. υϝΠϯϞσϧͷߏ଄Λͦͷ··ը໘ʹެ։ͨ͠

  26. 
 ࢯ໊
 <span th:text= “${member.resume.profile.personName .lastName.value}”></span>
 <span th:text= “${member.resume.profile.personName .firstName.value}"></span>

    ը໘ʢ)5.-ʣ
  27. ࢯ໊υϝΠϯϞσϧ public class PersonName {
 FirstName firstName = new FirstName();


    LastName lastName = new LastName();
 
 public FirstName getFirstName() {
 return firstName;
 }
 
 public LastName getLastName() {
 return lastName;
 }
 }
  28. υϝΠϯϞσϧͷڧऑʢΫϥεߏ଄ʣΛը ໘ʹ൓ө͍ͤͨ͞ɻ ٯʹɺը໘্ͷڧऑʢΞ΢τϥΠϯߏ଄ʣ ΛυϝΠϯϞσϧʹ൓ө͍ͤͨ͞ɻ ཧ༝

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

  30. <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.-ͷΞ΢τϥΠϯߏ଄ ઌ΄ͲͷαϯϓϧίʔυΛ ۃ୺ʹॻ͖௚͢ͱ͜͏ͳΔ
  31. )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>
  32. ࢯ໊υϝΠϯϞσϧͷมߋ public class PersonName {
 FirstName firstName = new FirstName();


    LastName lastName = new LastName();
 
 public String getFirstName() {
 return firstName.value;
 }
 
 public String getLastName() {
 return lastName.value;
 }
 }
  33. ͞Βʹ)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>
  34. ࢯ໊υϝΠϯϞσϧͷมߋ public class PersonName {
 FirstName firstName = new FirstName();


    LastName lastName = new LastName();
 
 public String getFullName() {
 return String.format("%s %s", firstName.value, lastName.value);
 }
 }
  35. ͜Μͳ͔Μ͡Ͱը໘ͱυϝΠϯϞσϧΛ มߋ͠ଓ͚Δ

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

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

  38. ϓϩϑΟʔϧը໘ͳͷʹʁ ҧ࿨ײ

  39. υϝΠϯϞσϧ΋·ͬͨ͘෼͚͍ͯͨ

  40. ΋͏Ұ౓Α͘ߟ͑ͯΈΔ

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

  42. ͋ͬ

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

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

  45. υϝΠϯϞσϧͷ௥Ճ

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


    LanguageSkill languageSkill; //ུ
 }
  47. ͜Μͳ͔Μ͡Ͱը໘ͱυϝΠϯϞσϧΛ มߋ͠ଓ͚Δʢ̎ճ໨ʣ

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

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

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

  51. ٻਓҰཡυϝΠϯϞσϧ 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> ٻਓҰཡը໘
  52. ٻਓυϝΠϯϞσϧ 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> ٻਓը໘
  53. ٯʹະ࣮૷෦෼΋఻ΘΓ΍͍͢ )5.-ʹ·ͩͦΕΒ͍͠ ৚݅͸ͳ͍ͳ͊ ʮݕࡧ݁Ռ͕݅Λ௒͑ͨ ৔߹ʹ΋ͬͱݟΔϦϯΫΛ දࣔ͢Δʯ͔ʜ σβΠφʔ͞Μ

  54. ͜Μͳ͔Μ͡ͰίϝϯτΛ࢒ͯ͘͠ΕΔͷͰ͘͢͝ॿ͔ͬͨ <!-- FIXME: 10݅Λ௒͑ͨ৔߹ͷΈද͍ࣔͯͩ͘͠͞ -->
 <a class="link-offer-more">
 ͜ͷ৚݅ʹϚον͢ΔٻਓΛ΋ͬͱݟΔ
 </a>

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

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

  57. ͍͍Ͷʂ

  58. υϝΠϯϞσϧͱ$44

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

  60. υϝΠϯϞσϧ͸υϝΠϯ͝ͱʹߟ͑Δ

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

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

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

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

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

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

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

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

    5IFNF
  71. ͜ΕΛ4USVDUVSFͱ4LJOʹ෼͚Δͱ w #BTF w -BZPVU w .PEVMF w 4UBUF w

    5IFNF 4USVDUVSFجຊͱͳΔߏ଄΍ମࡋ 4LJOݟͨ໨ɻυϝΠϯΛදݱͰ͖Δ෦෼
  72. .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;
 }
  73. ը໘্ͷঢ়ଶ͸υϝΠϯͷঢ়ଶͱϦϯΫ͢Δɻ ͳͷͰɺঢ়ଶ͸υϝΠϯϞσϧͰ੍ޚ͢Δͷ͕ ޷·͍͠ɻ 4UBUF

  74. ྫʣදࣔʗඇදࣔΛυϝΠϯϞσϧͰ੍ޚ͢Δ public class Offers {
 List<Offer> values = new ArrayList<>();


    
 public String getVisibleAsStyleClass() {
 return values.isEmpty() ? "hide" : "";
 }
 }
  75. )5.- <div th:classappend="${offers.visibleAsStyleClass}">
 // ུ
 </div> .hide {
 display: none;


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

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

  78. ͱɺ͜͜·Ͱ͸ཧ૝͚ͩͲʜ w ·ͩ·࣮ͩફ͸଍Γͯͳ͍ɻ w ։ൃ౰ॳʹ͜͜·ͰઃܭͰ͖ͳ͔ͬͨɻ w ͦͯ͠$44͸͍ͬͨΜ૸Γͩ͢ͱɺେن໛Ϧ ϑΝΫλϦϯάͮ͠Β͍ɻ w ίετ͕͔͔ΔΘΓʹαʔϏεՁ஋ʹ൓ө͠ʹ

    ͍͘ɻ w ຊ৬ͷϑϩϯτΤϯδχΞ͞Μ͔Βͷҙݟ΋ฉ ͖͍ͨͰ͢ɻ w ਫ਼ਐ͋ΔͷΈʂ
  79. ΍ͬͺΓ$44͸೉͍͠ ͳͥͳΒͦΕ͕ ʮΧεέʔσΟϯάɾελΠϧɾγʔτʯ ͔ͩΒʂ

  80. ͓·͚ தԝدͤΊͬͪΌ͠ΜͲ͍ʂʂʂ 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
  81. +BWB4DSJQU

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

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

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

  85. ྫر๬৬छબ୒

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

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

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

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

    = code;
 this.name = name;
 this.categoryIndex = categoryIndex;
 };

  90. ৬छબ୒ϏϡʔϞσϧʢ+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) {
 // ΧςΰϦʔ഑Լ͕͢΂ͯνΣοΫ͞Ε͍ͯΔ͔൑ఆ͢Δ
 };
 }; コンストラクタで受け取った ドメインモデルを元に職種モ デルを⽣成する
  91. ৬छબ୒ϏϡʔϞσϧੜ੒࣌ʹυϝΠϯϞσϧΛ౉͢ 
 <script th:inline=“javascript"> // ུʢϏϡʔϞσϧͷఆٛʣ var initialJobTitles = /*[[${jobTitles}]]*/

    [];
 var viewModel = new JobTitleSelector(initialJobTitles);
 ko.applyBindings(viewModel); </script> Thymeleafのインライン機能を使う と、ドメインモデルがJSON形式で 出⼒される
  92. νΣοΫϘοΫεͱͷόΠϯυ <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>
  93. ৬छυϝΠϯϞσϧʢαʔόʔαΠυʣ 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;
 }
 }
  94. υϝΠϯϞσϧͷॳظঢ়ଶʹ߹Θͤͯɺ+BWB4DSJQUͰఆٛ ͨ͠৬छબ୒ϏϡʔϞσϧͷॳظঢ়ଶ͕มΘΔ ˞࣮ࡍͷ࣮૷Ͱ͸ɺνΣοΫϘοΫεͷॳظ஋ʹର͢ΔΧελϜ όΠϯσΟϯά͕ඞཁͳ৔߹͕͋Γ·͢

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

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

  97. 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.clearAll = function () {
 // ͢΂ͯͷબ୒ঢ়ଶΛΫϦΞ͢Δ
 };
 
 this.checkInCategory = function (categoryIndex) {
 // ΧςΰϦʔ഑ԼΛ͢΂ͯνΣοΫ͢Δ
 };
 
 this.isAllCheckedInCategory = function (categoryIndex) {
 // ΧςΰϦʔ഑Լ͕͢΂ͯνΣοΫ͞Ε͍ͯΔ͔൑ఆ͢Δ
 };
 }; 「職種を⼊⼒する」という関⼼事 はここに凝集できて嬉しい! Ͱ΋ɺ,OPDLPVUKTͷϏϡʔϞσϧΛ࢖͏ͱ
  98. αʔόʔαΠυͷυϝΠϯϞσϧઃܭͱ ಉ͡Α͏ͳߟ͑ํ͕Ͱ͖Δ ΋ͪΖΜɺ+BWB4DSJQUͷݴޠಛੑ͸ ແࢹͰ͖ͳ͍͚Ͳʜ

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

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

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

  102. ,OPDLPVUKTΠΠͶʂ

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

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

  105. ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ *NBHFIUUQXXXHSBQIJDQBOJDDPN