No Install CMS戦略 〜 5年先を見据えたフロントエンド開発を考える / no_install_cms

https://techramenconf.net/ 登壇資料です

Transcript

1. /P
   *OTUBMM
   $.4ઓུ
   ʙ
   ೥ઌΛݟਾ͑ͨϑϩϯτΤϯυ։ൃΛߟ͑Δ
2. ࣗݾ঺հ ࡗݪণ඙ Ұൠࣾஂ๏ਓϦϨʔγϣϯσβΠϯ
   ݚڀॴ
   ୅දཧࣄ *POJD
   %FWFMPQFS
   &YQFSU 4USJQF
   $PNNVOJUZ
   &YQFSU
3. 
   UJQTZT
4. ৯඼දࣔҹ࡮ εϚϗͱϓϦϯλ͚ͩͰ৯඼දࣔϥ ϕϧΛͭ͘ΕΔ೔ຊॳͷઐ༻ΞϓϦ
5. XJOFDPEF ଟछྨଟ਺ྔͷϫΠϯΛෳ਺ڌ఺Ͱ؅ཧͰ ͖Δ೔ຊ།ҰͷΞϓϦɻ
6. Ͳ͏ҧ͍·͔͢ʁ ϒϥ΢β 18" J04ΞϓϦ
7. 8FCඪ४Λϕʔεʹͨ͠ϚϧνϓϥοτϑΥʔϜల։ 888
8. ຊ୊ͱҧ͏͚Ͳɺ࣋ͪؼͬͯ΄͍͜͠ͱ ϞόΠϧ6*Λ࠶ݱ͢ΔͨΊͷ6*ϑϨʔϜϫʔΫ 8FCΞηοτΛϞόΠϧΞϓϦʹ͢ΔϥΠϒϥϦ *POJD
   'SBNFXPSL $BQBDJUPS
9. 5IF
   BOTXFS
   JO
   B
   OVUTIFMM
   JT
   CFDBVTF UIBU`T
   XIFSF
   UIF
   T
   BSF 5IF
   BOTXFS
   JO
   B
   OVUTIFMM
   JT
   CFDBVTF UIBU`T
   XIFSF
   UIF
   T
   BSF ౴͑͸؆୯ɻͦ͜ʹϢʔβ͕͍Δ͔ΒͰ͢ɻ IUUQTNFEJVNDPNGSFFDPEFDBNQJCVJMUBQXBBOEQVCMJTIFEJU JOBQQTUPSFTIFSFTXIBUJMFBSOFEDCGEBGC
10. $.4ߏங͸᠘͕͍ͬͺ͍
11. ιϑτ΢ΣΞͷϝϯςφϯε IUUQTFOEP fl JGFEBUF
12. ϓϥάΠϯͷ࠾༻੹೚
13. όοΫΞοϓͷϝϯςφϯε %#ਧ͖ඈͼ·ͨ͠ɻ
    ࠷ऴόοΫΞοϓͬͯࡢ೔Ͱ͢ΑͶʁʂ ઌ݄͔ΒόοΫΞοϓͱΕͯ·ͤΜͰͨ͠ɻ
    σΟεΫ༰ྔ͕͍ͬͺ͍ͩͬͨΑ͏Ͱ͢ɻ Ͳ͏ͨ͠Β͍͍ΜͰ͔͢ʁʂʁʂ Ͳ͏ʹ΋ͳΓ·ͤΜɾɾɾɻ
14. ΞΫηεूதͨ࣌͠ͷରԠ 8FCαΠτ͕ݟΕͳ͍Μ͚ͩͲͲ͏ͯ͠ʁ
    ͔ͤͬ͘ςϨϏʹऔΓ্͛ΒΕͨͷʹɻ ΞΫηε͕ूதͯ͠αʔό͕མ͔ͪͨΒͰ͢Ͷɻ
    མͪண͘·Ͱ଴͔ͭ͠Ͱ͖ͳ͍Ͱ͢ɻ Ͳ͏ͨ͠Β͍͍ΜͰ͔͢ʁʂʁʂ ͕ͬͭΓαʔόʹ͓͍ۚΕͯ࠶ൃ๷ࢭΛʂ
15. Ϣʔβ͕ϨΠΞ΢τΛյ͢ Ͳ͜Λߋ৽ͨ͠Β͍͍ʁ "ͱ#ͷϑΟʔϧυΛߋ৽͍ͯͩ͘͠͞ɻ $ͷϑΟʔϧυΛߋ৽ͨ͠Β͜ΘΕͨʂ $ͷϑΟʔϧυΛߋ৽͔ͨ͠ΒͰ͢ɻ
16. ύεϫʔυ؅ཧͬͯͪΌΜͱ͞ΕͯΔʁ ύεϫʔυΈΜͳͰಉ͡Ͱ͍͍Ͱ͔͢ʁ ୀ৬౳͋Δͱࢥ͏ͷͰɺݸਓ୯ҐͰ͓ئ͍͠·͢ ๨Εͯ͠·͏͔΋ɻ෇ᝦʹॻ͍ͯɺ1$ʹ
    షΓ෇͚͓ͯ͜͏ 🙈
    🙉
    🙊
17. ϗεςΟϯάྉۚ ֹ݄ Φʔτεέʔϧ 1)1.Z42- /FUMJGZ 0ԁʙ ͋Γ ෆՄ 'JSFCBTF
    )PTUJOH 0ԁʙ ͋Γ ෆՄ 4ࣾ 425ԁʙ ͳ͠ Մ "ࣾ 20999.70ԁʙ ͳ͠ Մ
18. Ϣʔβ͕ߋ৽͢ΔࣗࣾαΠτͰ͸ɺ$.4ߏஙɻ ͦΕɺඞཁͰ͔͢ʁ
19. ੔ཧͯ͠ߟ͑Α͏ ͳͥ$.4ߏங͕ඞཁʁ
    ̍ɽ)5.-Λॻ͚ͳ͍Ϣʔβ͕ߋ৽Ͱ͖ΔΑ͏ʹ͢ΔͨΊ
    ̎ɽಉҰςϯϓϨʔτͰྔ࢈ͨ͠هࣄΛ؅ཧ͢ΔͨΊ
    ɹɹʢྫɿχϡʔεαΠτʣ
    ̏ɽ&$αΠτߏஙͳͲෳࡶͳखॱ͕ඞཁͳ΋ͷΛखܰʹߏங͢ΔͨΊ
20. ͜Ε(JU)VCͰղܾͰ͖Δʂ
21. Ϩετϥϯ
    ϧ
    ϕφτϯ IUUQTHJUIVCDPNMFCFOBUPOCFOBUPOOFU
22. ίϯηϯτϚʔέοτ IUUQTHJUIVCDPNDPODFOUNBSLFUDPNXFCTJUF
23. ౎ࢢܦӦϓϩϑΣογϣφϧεΫʔϧ
24. ̍ɽ)5.-Λॻ͚ͳ͍Ϣʔβ͕ߋ৽Ͱ͖ΔΑ͏ʹ͢ΔͨΊ ؆୯ͳϖϥΠνͩͬͨΒɺ͜ͷϨϕϧͰ͍͚Δɻ ఆٳ೔৘ใ͚ͩ$.4Ͱهࣄ࡞ͬͯΔҙٛͱ͸ɾɾɾɻ
25. ϑϨϯνͷΦʔφʔγΣϑ ʮ͜ΕݟͨΒߋ৽Ͱ͖ͨΑʯ
26. ·ͪͮ͘Γձࣾͷελοϑ ʮΩʔࣗମΛؒҧͬͯ࡟আͨ͠Βɺࣦഊͨͬͯ͠ϝʔϧ͖ͨʯ
27. ·ͪͮ͘Γձࣾͷελοϑ ॻ͖׵͙͑Β͍Ͱ͖ΔΑɻ
28. ࣮૷ྫ̍ɿࣗ࡞ςϯϓϨʔτ <ul class="list-news"></ul> export interface IItem { selector: string; template: string; data: Array<{ title?: string; ja?: string; price?: string; body?: string; image?: string }>; } export const news: IItem = { selector: '<ul class="list-news"></ul>', template: '<li><label class="form-label">{{ title }}</label><p>{{ body }}</ p></li>', data: [ { title: 'ίϩφײછ঱༧๷ରࡦ', body: 'ίϩφײછ঱༧๷ରࡦͱͯ͠ɺۭؾͷೖΕସ͑ɺִؒʹ༨༟ͷ͋Δ੮΁ͷ͝Ҋ಺ɺΞΫϦ ϧ൘౳ɺ઀٬ελοϑͷϚεΫண༻ͳͲͷରԠΛ͓ͯ͠٬༷Λ͓ܴ͍͑ͨ͠·͢ɻ<br>౰ళ͸ɺ৽ܕίϩ φ΢ΠϧεରࡦೝূళͰ͢ɻ<br>2࣌ؒఔ౓Ͱͷ͓৯ࣄΛ͓ئ͍͍ͨ͠·͢ɻ', }, ], }; )5.- 5ZQF4DSJQU
29. ࣮૷ྫ̍ɿ͜Μͳ/PEFΛ࣮ߦͯ͠#VJME const targets = ['index.html']; const items: IItem[] = [news, redWine, whiteWine, champagneWine, announcement]; const build = () => { execSync(`rm -r -f ${process.cwd() + '/www'}`); mkdirSync(process.cwd() + '/www'); execSync(`cp -r ${process.cwd() + '/src/template'}/* ${process.cwd() + '/www'}`); for (const templateFile of targets) { let template = readFileSync(process.cwd() + '/www/' + templateFile).toString('utf-8'); for (const item of items) { const insertData: string[] = []; for (const line of item.data) { let template = item.template; for (const [key, value] of Object.entries(line)) { const re_url = /((ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?)/ gi; const replaceText = (value as string).replace(re_url, '<a href="$1" target="_blank" rel="noreferrer">$1</a>'); template = template.replace(new RegExp(`{{ ${key} }}`, 'g'), replaceText as string); } insertData.push(template); } const changeSelector = item.selector.replace(/></g, `>${insertData.join('')}<`); template = template.replace(item.selector, changeSelector); } writeFileSync(process.cwd() + '/www/' + templateFile, template); } }; build(); createWineSearchIndex(); apiBuild(); 5ZQF4DSJQU
30. ࣮૷ྫ̎ɿ+BWB4DSJQUϑϨʔϜϫʔΫ <h4> <img src="assets/svg/list.svg" class="svg" decoding="async" /> ͓஌Βͤ </h4> <ul class="list-news"> {news.map(d => <li><label class="form-label" innerHTML={d.title}></label><p innerHTML={d.body}></p> </li>)} </ul> +49 ͜Ε͚ͩͰॻ͚ͪΌ͏ɻ؆୯ʂ
31. 
    ಉҰςϯϓϨʔτͰྔ࢈ͨ͠هࣄΛ؅ཧ͢ΔͨΊ ϔουϨε$.4Λ࢖ͬͯಈతʹσʔλऔಘ͠Α͏ 8PSE1SFTTDPN NJDSP$.4 LJOUPOF
32. 
    ಉҰςϯϓϨʔτͰྔ࢈ͨ͠هࣄΛ؅ཧ͢ΔͨΊ { path: ':id', component: ArticlePage, }, this.route.paramMap.subscribe(as ync (params: ParamMap) => { this.articleId = parseInt(params.get('id'), 10); const {article} = await this.articleService.getCategory( this.articleId ); this.article = article; }); <article> <h3 [innerHTML]="item.title"></ h3> <p class="attribute"> <ion-note>{{ item.date | date: "yyyy೥MM݄dd೔" }}</ion-note> <ion-note *ngIf="item.count"> / {{ item.count }}Point</ion-note> </p> <p class="excerpt" [innerHTML]="item.excerpt"></p> </article>
33. 
    44(443QSFSFOEFSJPΛ࢖ͬͯϨϯμϦϯά΋Ͱ͖Δ ಺༰ $43 Ϣʔβ؀ڥͰHTMLΛϨϯμϦϯά 44( αʔόϗεςΟϯάલʹHTMLΛϨϯμϦϯά 443 ϦΫΤετ࣌ʹHTMLΛϨϯμϦϯά QSFSFOEFSJP ಛఆIP͔ΒͷϦΫΤετ͚࣌ͩɺαʔό͕ϨϯμϦ ϯάࡁΈHTMLΛฦ٫
34. ߏ଄͕೉͍͠΋ͷ΋γϯϓϧʹͭ͘ΕΔ
35. $%/Λ࢖ͬͨ഑৴͕༰қʹͳΓߴ଎ʹ
36. ٕज़ͷ՝୊͸ٕज़Ͱղܾ͠Α͏ ಈతݴޠ͕૸Δαʔόͷ੹೚όοΫΞοϓ΍αʔόෛՙͷίϯτ ϩʔϧηΩϡϦςΟ͸Ϣʔβ͕յͨ͠ΒͲ͏͠Α͏FUD ϦεΫϚωʔδϝϯτ͠ͳ͕Β$.4ߏங΋͋Γ͚ͩͲɺ੩తαΠ τԽ͢Δ͜ͱͰ͜ΕΒͷ໰୊Λ৐Γӽ͑ΕΔՄೳੑ͕͋ΔͷͰҰ౓ ߟ͑ͯΈ·ͤΜ͔ɻ 8FCΞηοτΛ഑৴͢Δ͚ͩͷͨΊʹɺຊ౰ʹඞཁʁ
37. ઌͷ͜ͱΛߟ͑Α͏ ʢ8FCαΠτ͕΄͍͠Ͱ͢ɻ೥ޙ͸͓ళ͕
    ɹͲ͏ͳͬͯΔ͔Θ͔Βͳ͍ʣ ʢೲ඼ͨ͠ΒऴΘΓɻϝϯςܖ໿ͱΕΔͱخ͍͠ʣ ೥͓ؒئ͍͢Δ͜ͱͳ͔͔ͬͨΒ
    ϝϯςܖ໿ͷܧଓ͸΍Ί͓ͯ͜͏ ʢܖ໿ऴΘΓͳͷͰɺҰࣜ౉ͯ͠ऴΘΓ·͢Ͷʣ