Rails使いのNuxt.js入門 - 銀座Rails#12

Transcript

1. Rails࢖͍ͷNuxt.jsೖ໳ ۜ࠲Rails#12 2019/08/29 גࣜձࣾιχοΫΨʔσϯ ࡔ઒խढ़
2. ࣗݾ঺հ • ࡔ઒խढ़ @ssh_nof • גࣜձࣾιχοΫΨʔσϯॴଐ • ޿ౡͷࣗ୐͔ΒϦϞʔτϫʔΫ • झຯɿα΢φ (໦༵͸α΢φͷ೔)
3. ࿩͢͜ͱ • Rails ϓϩάϥϚͷ๻͕ Nuxt.js Ͱ։ൃ͢Δ࣌ͷྲྀΕ • ୊ࡐ͸Α͋͘ΔTODOফ͠ࠐΈॲཧ • ͍ͬͪΐ৮ͬͯΈΑ͏͔ͳͱࢥͬͯ΋Β͏ͨΊͷೖ໳ฤ
4. Nuxt.js ?
5. Nuxt.js • Vue.js ։ൃͷͨΊͷϑϨʔϜϫʔΫ • SSR (αʔόʔαΠυϨϯμϦϯά) • SPA (γϯάϧϖʔδΞϓϦέʔγϣϯ) • ଞʹ΋ϑϨʔϜϫʔΫͱͯ͠ͷ༷ʑͳػೳ͕͋Γ·͕͢ɺׂѪ ࠓճ͸ͪ͜Β
6. ͓୊
7. ׬੒Πϝʔδ νΣοΫϘοΫεͷΫϦοΫͰɺϦετΛ੾Γସ͑ ↓ νΣοΫϘοΫεͷΫϦοΫ ΍ͬͨ͜ͱϦετʹҠಈ
8. ϓϩδΣΫτͷ࡞੒ʙىಈ
9. ϓϩδΣΫτΛ࡞Δ w CPPUTUSBQ
   w WVFUJGZ
   w CVMNB
   w UFJMXJOE
   w FMFNFOUVJ
   w CVFGZ w &4-JOU
   ࢖͏
   w 1SFUUJFS
   ࢖͏
   w OQN
   PS
   ZBSO
   ର࿩ࣜͰઃఆ npx create-nux-app <project name> ( npx :μ΢ϯϩʔυ͔Β࣮ߦ·ͰҰൃͰͰ͖ΔίϚϯυɻ࠷ۙͷ Node.js ʹ͸ೖ͍ͬͯ·͢ɻ )
10. ىಈ http://localhost:3000/ $ cd todo-list $ yarn dev ϑΝΠϧͷฤूͰࣗಈͰը໘͕੾ΓସΘΓ·͢ (ϗοτϦϩʔυ) +
11. ։ൃ͢Δ
12. pugʹ͍ͭͯগ͠ <template lang="pug"> ul.list-group li.list-group-item foo li.list-group-item bar </template> • ؆ུه๏ͰHTMLΛָʹॻ͚ΔςϯϓϨʔτΤϯδϯ • Rails࢖͍ͷօ༷ʹ͸͓ͳ͡Έͷ slim ͱ΄ͱΜͲಉ͡ • yarn add —dev pug pug-plain-loader ͰΠϯετʔϧ • ࠓճHTMLͰઆ໌͢ΔͱεϥΠυͷେ͖͕͞଍Γͳ͍ͷͰ pug Λ࢖͍·͢ <ul class="list-group"> <li class="list-group-item">foo</li> <li class="list-group-item">bar</li> </ul>
13. pagesσΟϨΫτϦʹ.vueϑΝΠϧΛ഑ஔ pages !"" index.vue #"" tasks #"" index.vue λεΫҰཡ
    
    IUUQMPDBMIPTUUBTLT pages ʹϑΝΠϧΛ഑ஔ͢Ε͹ vue-router ͷ ઃఆΛࣗಈతʹ΍ͬͯ͘Ε·͢ τοϓϖʔδ
    
    IUUQMPDBMIPTU
14. ./pages/index.vue <template lang="pug"> section.container nuxt-link(to="/tasks") λεΫҰཡ </template> τοϓϖʔδ
    IUUQMPDBMIPTU • nuxt-link ίϯϙʔωϯτͰผ vue ΁ͷભҠ • ੜ੒͞ΕΔͷ͸aλάͰ͕͢ɺઌಡΈͯ͠ύϑΥʔϚϯεΛߴΊͯ͘ΕΔ
15. ./pages/tasks/index.vue (λεΫҰཡશମ૾) <template lang="pug"> section.container.pt-5 .row .col-6 .card .card-header ΍Δ͜ͱ ul.list-group.list-group-flush.px-3 li.list-group-item(v-for="task in unfinishedTasks" :key="task.id") input.form-check-input( :id="`task-checkbox-${task.id}`" v-model="task.finished" type="checkbox") label(:for="`task-checkbox-${task.id}`") {{ task.title }} .col-6 .card .card-header ΍ͬͨ͜ͱ ul.list-group.list-group-flush.px-3 li.list-group-item(v-for="task in finishedTasks" :key="task.id") input.form-check-input( :id="`task-checkbox-${task.id}`" v-model="task.finished" type="checkbox") label(:for="`task-checkbox-${task.id}`") {{ task.title }} </template> <script> export default { data() { return { tasks: [ { id: 1, title: 'ڇೕΛങ͏', finished: false }, { id: 2, title: 'ͨ·͝Λങ͏', finished: false }, ] } }, computed: { finishedTasks() { return this.tasks.filter((task) => { return task.finished }) }, unfinishedTasks() { return this.tasks.filter((task) => { return !task.finished }) } }, } </script> IUUQMPDBMIPTUUBTLT UFNQMBUF TDSJQU ࣍ͷϖʔδͰॱʹઆ໌͠·͢
    ໨ΛڽΒͯ͠ಡ·ͳͯ͘େৎ෉
16. <script> <script> export default { data() { return { tasks: [ { id: 1, title: 'ڇೕΛങ͏', finished: false }, { id: 2, title: 'ͨ·͝Λങ͏', finished: false }, ] } }, computed: { finishedTasks() { return this.tasks.filter((task) => { return task.finished }) }, unfinishedTasks() { return this.tasks.filter((task) => { return !task.finished }) } }, } </script> EBUB DPNQVUFE ΍ͬͨ͜ͱҰཡ
    
    pOJTIFE pOJTIFE
    ϑϥάΛ੾Γସ͑Δ ΍Δ͜ͱҰཡ
    
    pOJTIFE
17. <template> <template lang="pug"> section.container .card .card-header ΍Δ͜ͱ ul li(v-for="task in unfinishedTasks" :key="task.id") input( :id="`task-checkbox-${task.id}`" v-model="task.finished" type="checkbox") label(:for="`task-checkbox-${task.id}`") {{ task.title }} .card .card-header ΍ͬͨ͜ͱ ul li(v-for="task in finishedTasks" :key="task.id") input( :id="`task-checkbox-${task.id}`" v-model="task.finished" type="checkbox") label(:for="`task-checkbox-${task.id}`") {{ task.title }} </template> νΣοΫϘοΫε
    WNPEFM
    Ͱσʔλͱ઀ଓ λΠτϧ
    UBTLUJUMFΛࢀর
18. ։ൃͷྲྀΕৼΓฦΓ • ϓϩδΣΫτ࡞੒ • λεΫҰཡը໘࡞੒ /pages • λεΫҰཡ෦෼ΛίϯϙʔωϯτԽ /components w શମϨΠΞ΢τ
    w EBUB
    ߟ͑Δ
    w EBUBͷมߋํ๏ߟ͑Δ w ੔ཧ
19. /pages ͷ࢓૊Έʹ͍ͭͯ΋͏ͪΐͬͱ pages └── tasks ├── _id.vue └── _userId └── edit.vue w IUUQMPDBMIPTUUBTLT
    w QBHFTUBTLT@JEWVF
    w 
    ͸
    UIJTSPVUFQBSBNTJE
    ͰಘΒΕΔ w IUUQMPDBMIPTUUBTLTFEJU
    w QBHFTUBTLT@VTFS*EFEJUWVF
    w ϋϚΓϙΠϯτ
    w ಉ֊૚ʹಉ໊͡લ
    @JE
    
    Λ࢖͏ͱ
    OVYUDIJME
    
    ͷѻ͍ʹͳΔ • _ ࢝·Γ͸ಈతϧʔςΟϯά • _id ͷ෦෼͸ԿͰ΋ྑ͍
20. ·ͱΊ • TODOফ͠ࠐΈػೳΛNuxt.jsͰ࡞ͬͯΈͨ • pages ʹ vue ϑΝΠϧΛ഑ஔ͢Δϧʔϧ (ઃఆΑΓن໿) • ࠓճ঺հͨ͠ͷ͸΄ΜͷҰ෦ (layouts, store, middleware, …) • ͘͢͝؆୯ʹ࢝ΊΒΕΔͷͰɺࠓि຤ʹͰ΋ npx create- nuxt-app <project-name> ʂ
21. λεΫҰཡΛίϯϙʔωϯτԽ͢Δ
22. <template lang="pug"> section.container .card .card-header ΍Δ͜ͱ task-list(:tasks="unfinishedTasks" @check="onTaskCheck") .card .card-header ΍ͬͨ͜ͱ task-list(:tasks="finishedTasks" @check="onTaskCheck") </template> <script> import TaskList from '~/components/TaskList.vue' export default { components: { TaskList }, data() { return { tasks: [ { id: 1, title: 'ڇೕΛങ͏', finished: false }, { id: 2, title: 'ͨ·͝Λങ͏', finished: false }, ] } }, computed: { finishedTasks() { return this.tasks.filter((task) => { return task.finished }) }, unfinishedTasks() { return this.tasks.filter((task) => { return !task.finished }) } }, methods: { onTaskCheck(taskId) { const task = this.tasks.find(task => task.id === taskId) this.$set(task, 'finished', !task.finished) } } } </script> ./pages/tasks/index.vue <template lang="pug"> ul.list-group.list-group-flush.px-3 li.list-group-item( v-for="task in tasks" :key="task.id") input.form-check-input( :id="`task-checkbox-${task.id}`" :checked="task.finished" @change="$emit('check', task.id)" type="checkbox") label(:for="`task-checkbox-${task.id}`") |{{ task.title }} </template> <script> export default { props: { tasks: { type: Array, required: true } } } </script> ./components/TaskList.vue DIFDL
    ΠϕϯτൃՐ UBTLpOJTIFE
    ൓స