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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

ࣗݾ঺հɹߴڮޫ ɾ8FCاۀࣾһΤϯδχΞϚωʔδϟʔ ɾ1)1 +BWB4DSJQU /PEFKT 7VFKT /VYUKT 1ZUIPO 4XJGU 3FBDU/BUJWF ɾגࣜձࣾΤοάγεςϜ ෳۀࣾһ IUUQTRJJUBDPNIJLBSVU IUUQTHJUIVCDPNIJLBSVU IUUQTUXJUUFSDPNMJHIU

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

8FCIPPL CVJME "1* "1* )FSPLV 1ZUIPO 'JSF4UPSF 8FCIPPL CVJME ΞʔΩςΫνϟɹ֓ཁ 1ZUIPO όοΫΤϯυ։ൃ؀ڥ

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

/VYUΛ࢖͏ϝϦοτ ɾαʔόαΠυϨϯμϦϯάͰ͖Δ ɾ7VF3PVUFS 7VFYͳͲ͕࢖͍΍͍͢ ɾܕ͕ܾ·͍ͬͯΔͨΊෳ਺ਓ։ൃʹ޲͍͍ͯΔ ݸਓ։ൃͰ΋ૣ͘։ൃͰ͖Δ ɾϗοτϦϩʔυͰ։ൃͰ͖Δ ɾ੩తϑΝΠϧͷੜ੒͕Մೳ /VYUΛબఆͨ͠ େ͖ͳཁҼ ຊۀ΍ෳۀ ෭ۀ Ͱ/VYUΛ࢖͍͔ͬͯͨΒ

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

OFUMJGZ ɾ੩తϑΝΠϧͷϗεςΟϯάαʔϏε ɾ/VYUͷެࣜυΩϡϝϯτͰ΋঺հ͞Ε͍ͯΔ /VYUͷެࣜυΩϡϝϯταΠτ͕OFUMJGZΛ࢖ͬͯϗεςΟϯά͍ͯ͠Δ ɾ(JU)VCͱ࿈ܞͯ͠σϓϩΠ͕؆୯ ɾςετ؀ڥ΋༻ҙͰ͖Δ ϓϧϦΫ୯ҐͰςετ؀ڥ͕༻ҙͰ͖Δ ɾଞαʔϏεͱͷ࿈ܞ͕Մೳ XFCIPPL͕࢖͑Δ ɾҰఆͷϦΫΤετ·Ͱ͸ແྉͰ࢖͑Δ

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

DPOUFOUGVM ɾϔουϨε$.4 άϥϑΟΧϧͳ6*Λఏڙ͠ͳ͍$.4 ɾ8PSE1SFTTͱ͸ҧ͍$POUFOUGVM͸ϑϩϯτ෦෼ Ϣʔβʔ ͕৮ΕΔը໘ ͸Ұ੾ఏڙͳ͍ ɾ8PSE1SFTTͷ؅ཧը໘͚ͩ͋ΔΠϝʔδ ɾσʔλ͸"1*ܦ༝Ͱऔಘ͢Δ ɾҰఆͷ༰ྔ·Ͱ͸ແྉͰ࢖͑Δ

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

)FSPLV4DIFEVMFS ɾόονॲཧ DSPO Λͯ͘͠ΕΔ)FSPLVͷϓϥάΠϯ ɾ෯޿͍ݴޠʹରԠ͍ͯ͠Δ 1ZUIPOʹ΋ରԠ͍ͯ͠Δ ɾҰఆྔ·ͰແྉͰ࢖͑Δ ɾ%ZOP μΠϊ ͱ͍͏ίϯςφ͕ར༻Ͱ͖Δ ɾ EZOP݄·Ͱແྉˠ ݄࣌ؒ·Ͱແྉ ɾ೔਺ճͷόονॲཧ͙Β͍ͳΒ༨༟Ͱແྉͷൣғ಺

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

'JSFCBTF 'JSFTUPSF ɾ/P42-ͷσʔλϕʔε ɾ֊૚ܕσʔλߏ଄ʹରԠ͍ͯ͠Δ υΩϡϝϯτͱίϨΫγϣϯ ɾϦΞϧλΠϜੑʹڧ͍ ɾಡΈऔΓ͸ SFREBZ·Ͱແྉ ɾॻ͖ࠐΈ͸ SFREBZ·Ͱແྉ ࡟আ΋ SFREBZ·Ͱແྉ

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

8FCIPPL CVJME "1* "1* )FSPLV 1ZUIPO 'JSF4UPSF 8FCIPPL CVJME ΞʔΩςΫνϟɹ֓ཁ º ̋ ΫϥΠΞϯτ͔Β'JSFTUPSF ΁͸ϦΫΤετͤͣɺ OFUMJGZͷϏϧυ࣌ʹ౓ͩ ͚ϦΫΤετ͢Δ

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

8FCIPPL CVJME "1* "1* )FSPLV 1ZUIPO 'JSF4UPSF 8FCIPPL CVJME ΞʔΩςΫνϟɹ֓ཁɹ·ͱΊ 1ZUIPO όοΫΤϯυ։ൃ؀ڥ

Slide 38

Slide 38 text

&/%

Slide 39

Slide 39 text

"11&/%*9

Slide 40

Slide 40 text

ࢀߟهࣄ ɾෳۀͰ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