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

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

nof
August 29, 2019

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

nof

August 29, 2019
Tweet

More Decks by nof

Other Decks in Programming

Transcript

  1. Rails࢖͍ͷNuxt.jsೖ໳
    ۜ࠲Rails#12 2019/08/29
    גࣜձࣾιχοΫΨʔσϯ ࡔ઒խढ़

    View full-size slide

  2. ࣗݾ঺հ
    • ࡔ઒խढ़ @ssh_nof
    • גࣜձࣾιχοΫΨʔσϯॴଐ
    • ޿ౡͷࣗ୐͔ΒϦϞʔτϫʔΫ
    • झຯɿα΢φ (໦༵͸α΢φͷ೔)

    View full-size slide

  3. ࿩͢͜ͱ
    • Rails ϓϩάϥϚͷ๻͕ Nuxt.js Ͱ։ൃ͢Δ࣌ͷྲྀΕ
    • ୊ࡐ͸Α͋͘ΔTODOফ͠ࠐΈॲཧ
    • ͍ͬͪΐ৮ͬͯΈΑ͏͔ͳͱࢥͬͯ΋Β͏ͨΊͷೖ໳ฤ

    View full-size slide

  4. Nuxt.js
    • Vue.js ։ൃͷͨΊͷϑϨʔϜϫʔΫ
    • SSR (αʔόʔαΠυϨϯμϦϯά)
    • SPA (γϯάϧϖʔδΞϓϦέʔγϣϯ)
    • ଞʹ΋ϑϨʔϜϫʔΫͱͯ͠ͷ༷ʑͳػೳ͕͋Γ·͕͢ɺׂѪ
    ࠓճ͸ͪ͜Β

    View full-size slide

  5. ׬੒Πϝʔδ
    νΣοΫϘοΫεͷΫϦοΫͰɺϦετΛ੾Γସ͑

    νΣοΫϘοΫεͷΫϦοΫ
    ΍ͬͨ͜ͱϦετʹҠಈ

    View full-size slide

  6. ϓϩδΣΫτͷ࡞੒ʙىಈ

    View full-size slide

  7. ϓϩδΣΫτΛ࡞Δ
    w CPPUTUSBQ
    w WVFUJGZ
    w CVMNB
    w UFJMXJOE
    w FMFNFOUVJ
    w CVFGZ
    w &4-JOU࢖͏
    w 1SFUUJFS࢖͏
    w OQNPSZBSO
    ର࿩ࣜͰઃఆ npx create-nux-app
    ( npx :μ΢ϯϩʔυ͔Β࣮ߦ·ͰҰൃͰͰ͖ΔίϚϯυɻ࠷ۙͷ Node.js ʹ͸ೖ͍ͬͯ·͢ɻ )

    View full-size slide

  8. ىಈ
    http://localhost:3000/
    $ cd todo-list
    $ yarn dev
    ϑΝΠϧͷฤूͰࣗಈͰը໘͕੾ΓସΘΓ·͢ (ϗοτϦϩʔυ)
    +

    View full-size slide

  9. pugʹ͍ͭͯগ͠

    ul.list-group
    li.list-group-item foo
    li.list-group-item bar

    • ؆ུه๏ͰHTMLΛָʹॻ͚ΔςϯϓϨʔτΤϯδϯ
    • Rails࢖͍ͷօ༷ʹ͸͓ͳ͡Έͷ slim ͱ΄ͱΜͲಉ͡
    • yarn add —dev pug pug-plain-loader ͰΠϯετʔϧ
    • ࠓճHTMLͰઆ໌͢ΔͱεϥΠυͷେ͖͕͞଍Γͳ͍ͷͰ pug Λ࢖͍·͢

    foo
    bar

    View full-size slide

  10. pagesσΟϨΫτϦʹ.vueϑΝΠϧΛ഑ஔ
    pages
    !"" index.vue
    #"" tasks
    #"" index.vue
    λεΫҰཡIUUQMPDBMIPTUUBTLT
    pages ʹϑΝΠϧΛ഑ஔ͢Ε͹ vue-router ͷ
    ઃఆΛࣗಈతʹ΍ͬͯ͘Ε·͢
    τοϓϖʔδIUUQMPDBMIPTU

    View full-size slide

  11. ./pages/index.vue

    section.container
    nuxt-link(to="/tasks") λεΫҰཡ

    τοϓϖʔδ
    IUUQMPDBMIPTU
    • nuxt-link ίϯϙʔωϯτͰผ vue ΁ͷભҠ
    • ੜ੒͞ΕΔͷ͸aλάͰ͕͢ɺઌಡΈͯ͠ύϑΥʔϚϯεΛߴΊͯ͘ΕΔ

    View full-size slide

  12. ./pages/tasks/index.vue (λεΫҰཡશମ૾)

    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 }}

    <br/>export default {<br/>data() {<br/>return {<br/>tasks: [<br/>{ id: 1, title: 'ڇೕΛങ͏', finished: false },<br/>{ id: 2, title: 'ͨ·͝Λങ͏', finished: false },<br/>]<br/>}<br/>},<br/>computed: {<br/>finishedTasks() {<br/>return this.tasks.filter((task) => { return task.finished })<br/>},<br/>unfinishedTasks() {<br/>return this.tasks.filter((task) => { return !task.finished })<br/>}<br/>},<br/>}<br/>
    IUUQMPDBMIPTUUBTLT
    UFNQMBUF
    TDSJQU
    ࣍ͷϖʔδͰॱʹઆ໌͠·͢
    ໨ΛڽΒͯ͠ಡ·ͳͯ͘େৎ෉

    View full-size slide

  13. <br/><script><br/>export default {<br/>data() {<br/>return {<br/>tasks: [<br/>{ id: 1, title: 'ڇೕΛങ͏', finished: false },<br/>{ id: 2, title: 'ͨ·͝Λങ͏', finished: false },<br/>]<br/>}<br/>},<br/>computed: {<br/>finishedTasks() {<br/>return this.tasks.filter((task) => { return task.finished })<br/>},<br/>unfinishedTasks() {<br/>return this.tasks.filter((task) => { return !task.finished })<br/>}<br/>},<br/>}<br/>
    EBUB
    DPNQVUFE ΍ͬͨ͜ͱҰཡ
    pOJTIFE
    pOJTIFEϑϥάΛ੾Γସ͑Δ
    ΍Δ͜ͱҰཡ
    pOJTIFE

    View full-size slide



  14. 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 }}

    νΣοΫϘοΫε
    WNPEFMͰσʔλͱ઀ଓ
    λΠτϧ
    UBTLUJUMFΛࢀর

    View full-size slide

  15. ։ൃͷྲྀΕৼΓฦΓ
    • ϓϩδΣΫτ࡞੒
    • λεΫҰཡը໘࡞੒ /pages
    • λεΫҰཡ෦෼ΛίϯϙʔωϯτԽ /components
    w શମϨΠΞ΢τ
    w EBUBߟ͑Δ
    w EBUBͷมߋํ๏ߟ͑Δ
    w ੔ཧ

    View full-size slide

  16. /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 ͷ෦෼͸ԿͰ΋ྑ͍

    View full-size slide

  17. ·ͱΊ
    • TODOফ͠ࠐΈػೳΛNuxt.jsͰ࡞ͬͯΈͨ
    • pages ʹ vue ϑΝΠϧΛ഑ஔ͢Δϧʔϧ (ઃఆΑΓن໿)
    • ࠓճ঺հͨ͠ͷ͸΄ΜͷҰ෦ (layouts, store, middleware, …)
    • ͘͢͝؆୯ʹ࢝ΊΒΕΔͷͰɺࠓि຤ʹͰ΋ npx create-
    nuxt-app ʂ

    View full-size slide

  18. λεΫҰཡΛίϯϙʔωϯτԽ͢Δ

    View full-size slide


  19. section.container
    .card
    .card-header ΍Δ͜ͱ
    task-list(:tasks="unfinishedTasks" @check="onTaskCheck")
    .card
    .card-header ΍ͬͨ͜ͱ
    task-list(:tasks="finishedTasks" @check="onTaskCheck")

    <br/>import TaskList from '~/components/TaskList.vue'<br/>export default {<br/>components: { TaskList },<br/>data() {<br/>return {<br/>tasks: [<br/>{ id: 1, title: 'ڇೕΛങ͏', finished: false },<br/>{ id: 2, title: 'ͨ·͝Λങ͏', finished: false },<br/>]<br/>}<br/>},<br/>computed: {<br/>finishedTasks() { return this.tasks.filter((task) => { return task.finished }) },<br/>unfinishedTasks() { return this.tasks.filter((task) => { return !task.finished }) }<br/>},<br/>methods: {<br/>onTaskCheck(taskId) {<br/>const task = this.tasks.find(task => task.id === taskId)<br/>this.$set(task, 'finished', !task.finished)<br/>}<br/>}<br/>}<br/>
    ./pages/tasks/index.vue

    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 }}

    <br/>export default {<br/>props: {<br/>tasks: {<br/>type: Array,<br/>required: true<br/>}<br/>}<br/>}<br/>
    ./components/TaskList.vue
    DIFDLΠϕϯτൃՐ
    UBTLpOJTIFE൓స

    View full-size slide