Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Nuxtを使った 複業メディアサイトのアーキテクチャ紹介

hikarut
September 28, 2019

Nuxtを使った 複業メディアサイトのアーキテクチャ紹介

hikarut

September 28, 2019
Tweet

More Decks by hikarut

Other Decks in Technology

Transcript

  1. /VYUΛ࢖ͬͨ
    ෳۀϝσΟΞαΠτͷΞʔΩςΫνϟ঺հ
    ߴڮɹޫ
    /VYU OFUMJGZ DPOUFOUGVM )FSPLV 1ZUIPO 'JSFCBTF %PDLFS

    View Slide

  2. ࠓ೔ͷ࿩ͷର৅ऀ
    ɾҎԼݴޠ΍αʔϏεʹڵຯ͕͋Δਓ
    ɾݸਓ։ൃ͍ͯ͠Δਓ͜Ε͔Β͍ͨ͠ਓ
    )FSPLV
    1ZUIPO 'JSFCBTF

    View Slide

  3. ΞδΣϯμ
    ɾࣗݾ঺հ
    ɾෳۀϝσΟΞαΠτͷαʔϏεઆ໌
    ɾෳۀϝσΟΞαΠτͷΞʔΩςΫνϟઆ໌

    View Slide

  4. ΞδΣϯμ
    ɾࣗݾ঺հ
    ɾෳۀϝσΟΞαΠτͷαʔϏεઆ໌
    ɾෳۀϝσΟΞαΠτͷΞʔΩςΫνϟઆ໌

    View Slide

  5. ࣗݾ঺հɹߴڮޫ
    ɾ8FCاۀࣾһΤϯδχΞϚωʔδϟʔ
    ɾ1)1 +BWB4DSJQU /PEFKT 7VFKT /VYUKT 1ZUIPO
    4XJGU 3FBDU/BUJWF

    ɾגࣜձࣾΤοάγεςϜ ෳۀࣾһ

    IUUQTRJJUBDPNIJLBSVU
    IUUQTHJUIVCDPNIJLBSVU
    IUUQTUXJUUFSDPNMJHIU

    View Slide

  6. ΞδΣϯμ
    ɾࣗݾ঺հ
    ɾෳۀϝσΟΞαΠτͷαʔϏεઆ໌
    ɾෳۀϝσΟΞαΠτͷΞʔΩςΫνϟઆ໌

    View Slide

  7. Fukugyou
    ΤϯδχΞͷͨΊͷෳۀϝσΟΞαΠτ

    View Slide

  8. ɾΤϯδχΞ޲͚ͷෳۀ ෭ۀ
    ϝσΟΞαΠτ
    ɾෳۀ ෭ۀ
    ʹؔ࿈͢ΔهࣄΛ·ͱΊ͍ͯΔ
    ɾຖ೔ࣗಈߋ৽
    ɾओͳػೳ͸هࣄͷࣗಈߋ৽ɺϒϩά౤ߘɺ
    ໰͍߹Θͤ
    IUUQTGVLVHZPVEFW
    Fukugyou
    'VLVHZPVͱ͸

    View Slide

  9. IUUQTGVLVHZPVEFW
    Fukugyou
    'VLVHZPVͱ͸
    ɾʮEFWʯυϝΠϯ͸೥݄೔͔Βར༻Մೳʹͳͬͨτο
    ϓϨϕϧυϝΠϯ
    ɾ։ൃऀ༻ ։ൃऀ޲͚αΠτ༻
    ͷυϝΠϯ
    ɾར༻Մೳʹͳͬͨͷ͕࠷ۙͳͷͰ޷͖ͳυϝΠϯΛૂ͑Δ͔΋ʁ
    ࢀߟɿ(PPHMF͕σϕϩούʔ޲͚υϝΠϯʮEFWʯͷઌऔΓϓϩάϥϜΛ։࢝ɻ༏ઌతʹυϝΠϯ໊Λ֬อՄೳʵ1VCMJDLFZ
    IUUQTXXXQVCMJDLFZKQCMPHHPPHMFEFWIUNM

    View Slide

  10. ΞδΣϯμ
    ɾࣗݾ঺հ
    ɾෳۀϝσΟΞαΠτͷαʔϏεઆ໌
    ɾෳۀϝσΟΞαΠτͷΞʔΩςΫνϟઆ໌

    View Slide

  11. 8FCIPPL
    CVJME

    "1*
    "1*
    )FSPLV
    1ZUIPO
    'JSF4UPSF
    8FCIPPL
    CVJME

    ΞʔΩςΫνϟɹ֓ཁ
    1ZUIPO
    όοΫΤϯυ։ൃ؀ڥ

    View Slide

  12. )FSPLV
    7VFUJGZ
    1ZUIPO
    'JSF4UPSF
    ΞʔΩςΫνϟɹ֓ཁ
    ϑϩϯτΤϯυ όοΫΤϯυ
    ੩తϑΝΠϧͷੜ੒
    ϖʔδ੍࡞ͷͨΊͷ
    6*ϑϨʔϜϫʔΫ
    ιʔείʔυ؅ཧͱ
    σϓϩΠࣗಈԽ
    ੩తϑΝΠϧͷ
    ϗεςΟϯά
    χϡʔεهࣄͷอଘ
    χϡʔεهࣄͷࣗಈߋ৽ॲཧ
    όονॲཧ

    όοΫΤϯυͷ࣮ߦݴޠ
    όοΫΤϯυͷ։ൃ؀ڥ
    هࣄͷ౤ߘऔಘͷ"1*

    View Slide

  13. ΞʔΩςΫνϟɹಛ௃
    ɾϑϩϯτΤϯυɺόοΫΤϯυɺશͯαʔόϨεߏ੒ʹͳ͍ͬͯΔ
    ɾϚΠΫϩαʔϏεʹ͍ۙઃܭʹͳ͍ͬͯΔͨΊ޷͖ͳݴޠͰҎલͤ
    ͣ։ൃͰ͖Δ
    ɾ΄΅શͯΛແྉͰӡ༻͍ͯ͠Δ υϝΠϯ୅ͷΈ༗ྉ

    View Slide

  14. /VYU
    /VYUͱ͸7VF
    ΞϓϦέʔγϣϯΛ࡞੒͢Δ
    ϑϨʔϜϫʔΫͰ͢
    7VFKT͸+BWB4DSJQUͷ
    ϑϨʔϜϫʔΫͰ͢

    View Slide

  15. ࠷ۙͷ+BWB4DSJQUͷϑϨʔϜϫʔΫ
    7VF 3FBDU "OHVMBS

    View Slide

  16. ࠷ۙͷ+BWB4DSJQUͷϑϨʔϜϫʔΫ
    ࢀߟɿ(PPHMFτϨϯυ
    ࠷ۙ͸
    7VFKT͕ਓؾ
    IUUQTTUBSIJTUPSZUUJPGBDFCPPLSFBDUBOHVMBSBOHVMBSWVFKTWVF

    View Slide

  17. /VYUΛ࢖͏ϝϦοτ
    ɾαʔόαΠυϨϯμϦϯάͰ͖Δ
    ɾ7VF3PVUFS 7VFYͳͲ͕࢖͍΍͍͢
    ɾܕ͕ܾ·͍ͬͯΔͨΊෳ਺ਓ։ൃʹ޲͍͍ͯΔ
    ݸਓ։ൃͰ΋ૣ͘։ൃͰ͖Δ

    ɾϗοτϦϩʔυͰ։ൃͰ͖Δ
    ɾ੩తϑΝΠϧͷੜ੒͕Մೳ
    /VYUΛબఆͨ͠
    େ͖ͳཁҼ
    ຊۀ΍ෳۀ ෭ۀ
    Ͱ/VYUΛ࢖͍͔ͬͯͨΒ

    View Slide

  18. 7VFUJGZ
    ɾVue.jsͰ࢖͑ΔϚςϦΞϧσβΠϯͷUIϑϨʔϜϫʔΫ
    ɾcssΛॻ͔ͣʹϨεϙϯγϒσβΠϯͳͲରԠ͍ͯ͠Δ
    ɾBulma,BootstrapͳͲͷcssϑϨʔϜϫʔΫɺUIϑϨʔϜϫʔΫ΋͋Δ
    7VFUJGZΛબఆ͠
    ͨେ͖ͳཁҼ
    7VF /VYU
    ͱ૬ੑ͕Αͦ͞͏͔ͩͬͨΒ

    View Slide

  19. OFUMJGZ
    ɾ੩తϑΝΠϧͷϗεςΟϯάαʔϏε
    ɾ/VYUͷެࣜυΩϡϝϯτͰ΋঺հ͞Ε͍ͯΔ
    /VYUͷެࣜυΩϡϝϯταΠτ͕OFUMJGZΛ࢖ͬͯϗεςΟϯά͍ͯ͠Δ

    ɾ(JU)VCͱ࿈ܞͯ͠σϓϩΠ͕؆୯
    ɾςετ؀ڥ΋༻ҙͰ͖Δ ϓϧϦΫ୯ҐͰςετ؀ڥ͕༻ҙͰ͖Δ

    ɾଞαʔϏεͱͷ࿈ܞ͕Մೳ XFCIPPL͕࢖͑Δ

    ɾҰఆͷϦΫΤετ·Ͱ͸ແྉͰ࢖͑Δ

    View Slide

  20. ੩తϑΝΠϧϗεςΟϯάαʔϏε
    ੩తϑΝΠϧͷੜ੒ɿIUUQTKBOVYUKTPSHHVJEF
    OFUMJGZ͸/VYUͷެࣜυΩϡϝϯτͰ΋঺հ͞Ε͍ͯΔͷͰ͓͢͢Ί

    View Slide

  21. DPOUFOUGVM
    ɾϔουϨε$.4 άϥϑΟΧϧͳ6*Λఏڙ͠ͳ͍$.4

    ɾ8PSE1SFTTͱ͸ҧ͍$POUFOUGVM͸ϑϩϯτ෦෼ Ϣʔβʔ
    ͕৮ΕΔը໘
    ͸Ұ੾ఏڙͳ͍
    ɾ8PSE1SFTTͷ؅ཧը໘͚ͩ͋ΔΠϝʔδ
    ɾσʔλ͸"1*ܦ༝Ͱऔಘ͢Δ
    ɾҰఆͷ༰ྔ·Ͱ͸ແྉͰ࢖͑Δ

    View Slide

  22. $.4ͷબఆ
    ɾαʔόϨεߏ੒ʹ͔ͨͬͨ͠
    ɾOFUMJGZ΍/VYUͱ΋૬ੑ͕ྑͦ͞͏
    ɾϔουϨε$.4ͷதͰ͸࣮੷΋͋Γͦ͏ υΩϡϝϯτ͕ἧͬ
    ͍ͯΔ

    View Slide

  23. ೔ຊ੡ϔουϨεCMS
    IUUQTNJDSPDNTJP
    ͪ͜Β΋ϔουϨε$.4ͱͯ͠͸ྑͦ͞͏ʂ
    ։ൃ࣌ʹ͜ΕΛ஌͍ͬͯͨΒͪ͜ΒΛ࠾༻͍͔ͯͨ͠΋͠Ε·ͤΜɻɻ

    View Slide

  24. 1ZUIPO
    ɾεΫϦϓτݴޠ
    ɾ୹͍ߏจͰ෼͔Γ΍͘͢ॻ͚Δͷ͕ಛ௃
    ɾ࠷ۙ͸ػցֶशɺ"*ྖҬͰਓؾͷݴޠ
    ɾ8FCΞϓϦέʔγϣϯͷϑϨʔϜϫʔΫ΋͋Γ෯޿͘࢖͑Δݴޠ
    1ZUIPOΛબఆ͠
    ͨେ͖ͳཁҼ
    ݸਓతʹ1ZUIPOΛॻ͖͔ͨͬͨʂ
    ϑϩϯτΤϯυʹ߹Θͤͯ/PEFKT࢖͏ͷ͕ϕλʔͳؾ͸͍ͯ͠·͢ɻɻ

    View Slide

  25. )FSPLV
    ɾ1BB4 1MBUGPSNBTB4FSWJDF
    ͱݺ͹ΕΔϓϥοτϗʔϜ
    ɾ8FCΞϓϦέʔγϣϯΛߏங͢Δ͏͑Ͱ༷ʑͳػೳΛఏڙ͠
    ͯ͘ΕΔαʔϏε
    ɾࠓճ࢖͍ͬͯΔͷ͸)FSPLV4DIFEVMFSͷΈ

    View Slide

  26. )FSPLV4DIFEVMFS
    ɾόονॲཧ DSPO
    Λͯ͘͠ΕΔ)FSPLVͷϓϥάΠϯ
    ɾ෯޿͍ݴޠʹରԠ͍ͯ͠Δ 1ZUIPOʹ΋ରԠ͍ͯ͠Δ

    ɾҰఆྔ·ͰແྉͰ࢖͑Δ
    ɾ%ZOP μΠϊ
    ͱ͍͏ίϯςφ͕ར༻Ͱ͖Δ
    ɾ EZOP݄·Ͱແྉˠ ݄࣌ؒ·Ͱແྉ
    ɾ೔਺ճͷόονॲཧ͙Β͍ͳΒ༨༟Ͱແྉͷൣғ಺

    View Slide

  27. )FSPLV4DIFEVMFSΛ࢖ͬͨྫ
    https://qiita.com/hikarut/items/6138e8e406da17f5b67c
    IUUQTRJJUBDPNIJLBSVUJUFNTFFEBGCD
    IUUQTRJJUBDPNIJLBSVUJUFNTGDBDCE

    View Slide

  28. )FSPLV4DIFEVMFSΛ࢖ͬͨྫ
    https://qiita.com/hikarut/items/6138e8e406da17f5b67c
    IUUQTRJJUBDPNIJLBSVUJUFNTFFEBGCD
    IUUQTRJJUBDPNIJLBSVUJUFNTGDBDCE
    ೔ճ)FSPLV4DIFEVMFS͔Β2JJUB"1*Λୟ
    ͍ͯهࣄΛࣗಈߋ৽͢Δ ೥Ҏ্ӡ༻த

    View Slide

  29. 'JSFCBTF
    ɾN#BB4 NPCJMFCBDLFOEBTB4FSWJDF
    ͱݴΘΕΔϞό
    ΠϧͷόοΫΤϯυߏஙΛαϙʔτ͢ΔϓϥοτϑΥʔϜ
    ɾϞόΠϧҎ֎ͷ8FCΞϓϦέʔγϣϯͰ΋࢖͑Δػೳ͕૿͑
    ͍ͯΔ

    View Slide

  30. 'JSFCBTF 'JSFTUPSF

    ɾ/P42-ͷσʔλϕʔε
    ɾ֊૚ܕσʔλߏ଄ʹରԠ͍ͯ͠Δ υΩϡϝϯτͱίϨΫγϣϯ

    ɾϦΞϧλΠϜੑʹڧ͍
    ɾಡΈऔΓ͸ SFREBZ·Ͱແྉ
    ɾॻ͖ࠐΈ͸ SFREBZ·Ͱແྉ
    ࡟আ΋ SFREBZ·Ͱແྉ

    View Slide

  31. 'JSFCBTF 'JSFTUPSF

    ɾ֊૚ܕσʔλߏ଄ʹରԠ͍ͯ͠Δ υΩϡϝϯτͱίϨΫγϣϯ

    View Slide

  32. 'JSFCBTF 'JSFTUPSF

    ɾಡΈऔΓ͸ SFREBZ·Ͱແྉ
    ˠճϦΫΤετ͢ΔͱίϨΫγϣϯʹඥ͍͍ͮͯΔυΩϡϝϯτ
    ͷ਺͚ͩϦΫΤετ਺͕Χ΢ϯτ͞ΕΔ
    ˠ8FCϖʔδΛදࣔ͢ΔͨͼʹσʔλΛऔΓʹߦ͘ͱɺ͋ͬͱ͍
    ͏ؒʹແྉ࿮Λ௒͑ͯ͠·͏ɻɻ
    ɾOFUMJGZͷϏϧυͷ࣌ʹ͋Β͔͡Ί'JSFTUPSF͔ΒσʔλΛશ݅
    औಘͯ͠KTPOϑΝΠϧͱͯ͠ग़ྗ
    ɾ੩తϑΝΠϧੜ੒࣌ʹKTPOϑΝΠϧΛಡΈࠐΉ͜ͱͰ
    'JSFTUPSF΁ͷϦΫΤετ͸Ϗϧυ͚࣌ͩʹ͢Δ
    ΫϥΠΞϯτ͔Β͸'JSFTUPSF͸ࢀর͠ͳ͍

    View Slide

  33. 8FCIPPL
    CVJME

    "1*
    "1*
    )FSPLV
    1ZUIPO
    'JSF4UPSF
    8FCIPPL
    CVJME

    ΞʔΩςΫνϟɹ֓ཁ
    º
    ̋
    ΫϥΠΞϯτ͔Β'JSFTUPSF
    ΁͸ϦΫΤετͤͣɺ
    OFUMJGZͷϏϧυ࣌ʹ౓ͩ
    ͚ϦΫΤετ͢Δ

    View Slide

  34. %PDLFS
    ɾίϯςφܕͷԾ૝؀ڥ
    ɾ1ZUIPOͷ࣮ߦ؀ڥͱͯ͠ར༻
    ɾຊ൪؀ڥͰ͸࢖Θͣɺ։ൃ؀ڥ͚ͩͰ࢖͍ͬͯΔ
    ˞ຊ൪؀ڥͷ)FSPLVΛ%PDLFSͰσϓϩΠ͢Δ͜ͱ΋Մೳ

    View Slide

  35. %PDLFSͷϝϦοτ
    ɾϩʔΧϧ؀ڥΛԚͣ͞։ൃ؀ڥ͕࡞ΕΔ
    ɾ࠶ݱ͕͠΍͍͢ͷͰଞͷਓɺଞͷ1$Ͱ΋͙͢ʹ։ൃ؀ڥͷߏ
    ங͕Ͱ͖Δ
    ɾຊ൪σϓϩΠ΋%PDLFSͰߦ͏͜ͱͰ։ൃ؀ڥͱຊ൪؀ڥͰ
    ͷࠩ෼Λແͤ͘Δ

    View Slide

  36. )FSPLV
    7VFUJGZ
    1ZUIPO
    'JSF4UPSF
    ΞʔΩςΫνϟɹ֓ཁɹ·ͱΊ
    ϑϩϯτΤϯυ όοΫΤϯυ
    ੩తϑΝΠϧͷੜ੒
    ϖʔδ੍࡞ͷͨΊͷ
    6*ϑϨʔϜϫʔΫ
    ιʔείʔυ؅ཧͱ
    σϓϩΠࣗಈԽ
    ੩తϑΝΠϧͷ
    ϗεςΟϯά
    χϡʔεهࣄͷอଘ
    χϡʔεهࣄͷࣗಈߋ৽ॲཧ
    όονॲཧ

    όοΫΤϯυͷ࣮ߦݴޠ
    όοΫΤϯυͷ։ൃ؀ڥ
    هࣄͷ౤ߘऔಘͷ"1*

    View Slide

  37. 8FCIPPL
    CVJME

    "1*
    "1*
    )FSPLV
    1ZUIPO
    'JSF4UPSF
    8FCIPPL
    CVJME

    ΞʔΩςΫνϟɹ֓ཁɹ·ͱΊ
    1ZUIPO
    όοΫΤϯυ։ൃ؀ڥ

    View Slide

  38. &/%

    View Slide

  39. "11&/%*9

    View Slide

  40. ࢀߟهࣄ
    ɾෳۀͰ8FCαΠτ੍࡞͢Δࡍͷ8PSE1SFTTͱ/VYUKTͷϝϦσϝൺֱ
    IUUQTGVLVHZPVEFWQPTUT
    ɾ/VYUKTͱ$POUFOUGVMͰϒϩά࡞ͬͯΈͨ
    IUUQTRJJUBDPNIJTBLPJUFNTCEGFGF
    ɾʲೖ໳ʳ/VYUKT$POUFOUGVM/FUMJGZͰ࢝ΊΔɺ+".TUBDLͳ$.4ߏங
    IUUQTRJJUBDPNJTJIJHBNF,PVEBJJUFNTFBEFDBDD
    ɾ/VYUKT$POUFOUGVM/FUMJGZͰϒϩάΛͭ͘Δ
    IUUQTRJJUBDPNDIJIBSVJTBLJJUFNTGDBDDDDC
    ɾ/VYU /FUMJGZ $POUFOUGVM 1ZUIPO 'JSFCBTF )FSPLVΛ࢖ͬͨແྉͰαʔόϨεͳෳۀϝσΟΞ
    αΠτΛ࡞ͬͨ࿩
    IUUQTRJJUBDPNIJLBSVUJUFNTCEE⒎EBG
    ɾ/VYUͰϏϧυ࣌ʹ"1*Λ੩తԽͯ͠ɺ׬શʹαʔόʔ΁ͷϦΫΤετΛͳ͘͢τ
    IUUQTRJJUBDPNTPJDIJSP@OJUUBJUFNTDBEFCBFE

    View Slide