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 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
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ͷϏϡʔϞσϧΛ͏ͱ
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