Boot Campアプリの動きを追ってみよう！/ Follow BootCamp App

2022年7月30日(土)に、フィヨルドブートキャンプで開催された「初めてのLT会 Vol.12」に登壇したときの発表資料です。

Transcript

1. Boot CampΞϓϦͷಈ͖Λ ௥ͬͯΈΑ͏ʂ Fjord Boot Camp ॳΊͯͷLTձ Vol.12 @SatoshiHaramuraɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹ2022/7/30
2. ࣗݾ঺հ ɹɹɹɹ@SatoshiHaramura ɹɹɹɹɹݱࡏͷϓϥΫςΟεɹɿνʔϜ։ൃ ɹɹɹɹɹ޷͖ͳ͜ͱɹɹɹɹɹɿα΢φ🧖 ɹɹɹɹɹϗοͱ͢ΔॠؒɹɹɹɿϋϜελʔͷ͙͠͞ 2
3. νʔϜ։ൃʹऔΓ૊Ήʹ͋ͨͬͯ 
 ɹɹɹɹɹɹɹɹɹAs IsɹɹɹɹɹɹɹɹɹTo Be 
 ɹɹɹɹɹɹɹɹɹɹݱࡏͷ࢟ɹɹɹˠɹɹɹ͋Δ΂͖࢟ ɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹˢ 
 ɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹΪϟοϓɹɹɹɹɹ=ɹIssue 
 ɹɹɹɹɹɹɹɹɹɹɹɹɹɹ ɹΪϟοϓΛຒΊΔɹ=ɹPR ɹɹɹɹɹɹɹɹɹɹɹɹ·ͣ͸ɺݱࡏͷ࢟ Λ஌Ζ͏ʂ 3
4. λʔήοτͱΰʔϧ •λʔήοτ 
 ɹBoot CampΞϓϦͷ։ൃΛ࢝ΊΑ͏ͱ͢Δਓ •ΰʔϧ 
 ʮΞϓϦͷಈ͖͕গ͠ཧղͰ͖ͨͧʂʯͱࢥ͑Δ͜ͱ 
 ɹɹe.g. ʮ೔ใʯΛҰཡͰදࣔ͢Δ 4 ά ϩ
5. 1. HTMLΛऔಘ 5 HTTPϦΫΤετ URI ɿ/reports MethodɿGET class ReportsController < ApplicationController def index; end end HTTPϨεϙϯε HTML ϧʔτ৘ใ controllers/reports_controller.rb views/reports/index.html.slim μογϡϘʔυ ೔ใҰཡ Path Method Controller#Action /reports(:format) GET reports#index header.page-header .container .page-header__inner h2.page-header__title = title = render 'reports/new_report' .page-body .container.is-md .page-filter.form = form_with url: reports_path, local: true, method: 'get' .form-item.is-inline-md-up = label_tag :practice_id, 'ϓϥΫςΟεͰߜΓࠐΉ', … = select_tag :practice_id, … #js-reports divλάͷidଐੑʹଐੑ஋(js-reports)Λ෇༩͍ͯ͠Δ͚ͩ DOMߏஙޙ͸ɺҰॠԿ΋දࣔ͞Εͳ͍
6. 2. DOMߏஙޙɺVueΠϯελϯεΛϚ΢ϯτ 6 import Vue from 'vue' import Reports from 'reports.vue' document.addEventListener('DOMContentLoaded', () => { const selector = '#js-reports' const reports = document.querySelector(selector) if (reports) { const userId = reports.getAttribute('data-user-id') const limit = reports.getAttribute('data-limit') const companyId = reports.getAttribute('company-id') new Vue({ render: (h) => h(Reports, { props: { userId: userId, limit: limit, companyId: companyId } }) }).$mount(selector) } }) reports.js (RailsଆͷJSϑΝΠϧ) DOMͷߏஙޙ idͷଐੑ஋͕js-reportsΛ୳͢ VueΠϯελϯεΛੜ੒ idͷଐੑ஋͕js-reportsʹରͯ͠ɺVueΠϯελϯεΛϚ΢ϯτ ೔ใҰཡίϯϙʔωϯτ(ෳ਺ͷ೔ใΛଋͶͨ΋ͷ)
7. 3. ஔ͖׵͑ΒΕΔVueΠϯελϯε 7 <template lang=“pug"> ɹ// fetchத͸ɺLoadingListPlaceholderΛදࣔ ɹ// fetch׬ྃޙ͸ɺPagerͱReportΛදࣔ </template> <script> import LoadingListPlaceholder from ‘loading-list-placeholder.vue' import Pager from 'pager.vue' import Report from ‘report.vue' … export default { computed: { reportsAPI() { const params = this.newParams if (this.isUncheckedReportsPage) { return `/api/reports/unchecked.json?${params}` } else { return `/api/reports.json?${params}` } }, methods: { async getReports() { const response = await fetch(this.reportsAPI, { method: ‘GET’, credentials: ‘same-origin’, … }).catch((error) => console.warn(error)) const json = await response.json().catch((error) => console.warn(error)) this.reports = json.reports … } } </script> reports.vue (೔ใҰཡίϯϙʔωϯτ) loading-list-placeholder.vue (ϩʔυதΛදݱ͢Δίϯϙʔωϯτ) • fetchத pager.vue (ϖʔδϟʔίϯϙʔωϯτ) • fetch׬ྃޙ report.vue (೔ใίϯϙʔωϯτ) /api/reports.json?page=1ʹରͯ͠ɺGETϝιου
8. 4. JSONܗࣜͷσʔλΛऔಘ 8 HTTPϦΫΤετ URI ɿ/api/reports.json?page=1 MethodɿGET class API::ReportsController < API::BaseController def index @company = Company.find(params[:company_id]) if params[:company_id] @reports = Report.list.page(params[:page]) … end end HTTPϨεϙϯε JSONܗࣜͷจࣈྻ ϧʔτ৘ใ controllers/api/reports_controller.rb views/api/reports/index.json.jbuilder ೔ใҰཡ (fetchத) ೔ใҰཡ (fetch׬ྃޙ) Path Method Controller#Action /api/reports(:format) GET api/reports#index json.reports @reports do |report| json.partial! "api/reports/report", report: report json.partial! "api/reports/checks", checks: report.checks json.partial! "api/comments/user_icons", comments: report.comments json.user do json.partial! "api/users/user", user: report.user end end json.currentUserId current_user.id json.totalPages @reports.total_pages ϩʔυத ೔ใҰཡ { “reports”: [ { “id”: 1234512168338, “title”: "ࠓ೔͸ؤுΓ·ͨ͠", … }, … ], … }
9. ·ͱΊ • Rails͸ϦΫΤετʹԠͯ͡ɺHTML΍JSONܗࣜͷσʔλΛฦ͢ • DOMͷߏஙΛτϦΨʔʹɺطଘͷDOMͱVue.jsͷԾ૝DOMΛஔ͖׵͑Δ • Ծ૝DOMͷཁૉ͸ίϯϙʔωϯτԽ͞Ε͍ͯΔ • fetchϝιουͰɺίϯϙʔωϯτʹඞཁͳσʔλͷΈΛऔಘ 9