Slide 1
Slide 1 text
/VYUͰ(SBQI2-ͷΫΤϦΛૹ৴͢Δํ๏
3FCPPUWLBOTBJ.FFUVQ
4"8
Slide 2
Slide 2 text
$(whoami)
ࢯ໊Ճ౻फҰ ࡀ
ϋϯυϧωʔϜ4"8
ؔͷ*5ΤϯδχΞίϛϡχςΟͷ͔͠୲ ࣗশ
େࡕࡏॅɾѪग़
9 چ5XJUUFS
!B[VLJ@FBUFS
ಘҙ8FCΞϓϦέʔγϣϯ։ൃ
7VF
-BSBWFM
2
Slide 3
Slide 3 text
ಈػ/VYU͔Β(SBQI2-ͷΫΤϦΛૹ৴͍ͨ͠
/VYUͰϑϩϯτΤϯυΛ։ൃ
όοΫΤϯυ-BSBWFMͰ։ൃ
"1*(SBQI2-Λར༻
/VYU͔Β(SBQI2-ͷΫΤϦΛૹ৴ͯ͠σʔλΛऔಘ͍ͨ͠
/VYU͚ͷ(SBQI2-$MJFOUΛར༻͍ͨ͠
3
ϑϩϯτΤϯυ όοΫΤϯυ
ϦΫΤετ
Ϩεϙϯε
Slide 4
Slide 4 text
/VYUͷͨΊͷ(SBQI2-ΫϥΠΞϯτ
/VYUͷެࣜυΩϡϝϯτͷ/VYU.PEVMFT͔Βݕࡧ
/VYU(SBQI2-$MJFOU
/VYUͷͨΊͷHSBQIRMSFRVFTU(SBQI2-$PEF(FOFSBUPSͷ࠷খߏ
/VYU"QPMMP
/VYUͷͨΊͷ"QPMMP$MJFOU
(SBQI2-3FRVFTU.PEVMF
࠷খͷ(SBQI2-ΫϥΠΞϯτͷͨΊͷαϙʔτΛ͢ΔͨΊͷ/VYUϞδϡʔϧ
4
Slide 5
Slide 5 text
/VYU(SBQI2-$MJFOUͷಛ
(SBQI2-ͷΫΤϦΛผϑΝΠϧʹهड़
7VFͷίʔυ͔Β(SBQI2-ͷΫΤϦΛՄೳ
ݸਓతਪ͠ϙΠϯτ
΄΅ઃఆͳ͠Ͱར༻Մೳ
nuxt.config.tsͷmodulesͱڥมͷઃఆͷΈ
5ZQF4DSJQUΛશαϙʔτ
(SBQI2-ͷΫΤϦΛͱʹϨεϙϯεͷܕใΛࣗಈੜ
5
Slide 6
Slide 6 text
/VYU(SBQI2-$MJFOUͷجຊతͳ͍ํ
(SBQI2-ͷΫΤϦΛهड़
ϑΝΠϧͷ֦ுࢠ.gql·ͨ.graphql
useAsyncGql()Λݺͼग़͠
ΫΤϦoperation͔Βࢦఆ
6
query getCountries {
countries {
code
name
}
}
const { data } = await useAsyncGql({
operation: 'getCountries',
});
(SBQI2-ͷΫΤϦ໊Λ
VTF"TZOD(RM
ͷ
PQFSBUJPOʹࢦఆ
Slide 7
Slide 7 text
ඞཁ࠷খݶͷઃఆ
nuxt.config.tsͷmodulesΛՃ
(SBQI2-αʔόʔͷ63-Λ֨ೲ͢ΔڥมΛઃఆ
(SBQI2-αʔόʔͷ63-Λ.envͷGQL_HOSTʹઃఆ
7
export default defineNuxtConfig({
modules: ['nuxt-graphql-client'],
});
nuxt.config.ts
GQL_HOST='https://localhost/graphql'
.env
Slide 8
Slide 8 text
5ZQF4DSJQUશαϙʔτͷڧΈ
(SBQI2-ͷΫΤϦ͔Βฦ٫ܕͷใΛࣗಈੜ
useAsyncGql()ͷฦΓͷ5ZQF)JOUJOHʹө
8
(SBQI2-$PEF(FOFSBUPSͰ
ΫΤϦ͔ΒܕใΛࣗಈੜ
Slide 9
Slide 9 text
(SBQI2-ͷWBSJBCMFTͷࢦఆ
useAsyncGql()ͷҾ͔ΒมΛࢦఆ
ΫΤϦมvariables͔Βࢦఆ
ΫΤϦͷม͕5ZQF)JOUJOHʹө
9
(SBQI2-$PEF(FOFSBUPSͰ
ΫΤϦม͔ΒܕใΛࣗಈੜ
Slide 10
Slide 10 text
ࠔͬͨ
ެࣜυΩϡϝϯτ͕ಡΈͮΒ͍
ެࣜυΩϡϝϯτҎ֎ͷใগͳΊ
ϑΝΠϧͷΞοϓϩʔυ͕࣮Ͱ͖ͳͦ͞͏
ͦͦґଘύοέʔδͷHSBQIRMSFRVFTU͕ϑΝΠϧΞοϓϩʔυʹඇରԠ
ϛυϧΣΞΛ࣮ͯ͠ΞοϓϩʔυΛ࣮ݱ͢Δ͜ͱՄೳ
/YVU(SBQI2-$MJFOUʹHSBQIRMSFRVFTUͷϛυϧΣΞΛΈࠐΊͳͦ͞͏
10
Slide 11
Slide 11 text
૯ׅ
/VYU(SBQI2-$MJFOUʹ͍ͭͯհ
(SBQI2-ͷΫΤϦΛ7VFϑΝΠϧ͔Βͯ͠هड़
΄΅ઃఆͳ͠Ͱར༻Մೳ
5ZQF4DSJQUͷશαϙʔτͰ5ZQF)JOUJOH͕ར༻Մೳ
/VYU(SBQI2-$MJFOUΛ͏্Ͱࠔͬͨ
υΩϡϝϯτ͕ಡΈͮΒ͍
ϑΝΠϧΞοϓϩʔυʹະରԠͬΆ͍
11
Slide 12
Slide 12 text
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠