Firebaseオンリー + React Nativeでアプリを作ると果たして簡単になるのか?

254ef4587f3c010fc0c52517ff5514c2?s=47 Yu Watanabe
December 03, 2019

Firebaseオンリー + React Nativeでアプリを作ると果たして簡単になるのか?

バックエンドをFirebaseにし、アプリをReact Nativeで作ると通常作るよりも簡単にできるのかについての発表となります。

254ef4587f3c010fc0c52517ff5514c2?s=128

Yu Watanabe

December 03, 2019
Tweet

Transcript

  1. 2019/12/03 Θͨͳ΂Ώ͏ FIREBASEΦϯϦʔ + REACT NATIVEͰ ΞϓϦΛ࡞ΔͱՌͨͯ͠؆୯ʹͳΔͷ͔ʁ

  2. ▸ ࣗݾ঺հ ▸ ؆୯ʹͳͬͨͳͱײͨ͡෦෼ ▸ ਏ͔ͬͨ෦෼ ▸ ޻෉ͨ͠෦෼ ▸ Ͳ͏͍͏ΞϓϦʹ޲͍ͯΔ͔

    ▸ ·ͱΊ ֓ཁ
  3. ࣗݾ঺հ(1) Θͨͳ΂Ώ͏ ▸ ॴଐ ▸ גࣜձࣾg&h ▸ Web / ΞϓϦΛझຯͰެ։

    ▸ ࢓ࣄ಺༰ ▸ αʔό / ϑϩϯτ / ΞϓϦ / Web ▸ ΞΧ΢ϯτ ▸ Twitter : @hmktsu ▸ Github : @watanabeyu
  4. ࣗݾ঺հ(2) ▸ https://www.gandh.jp ▸ 5໊(ΤϯδχΞ͸2ਓ)Ͱฏۉ೥ྸ30ͪΐ͍ͷձࣾ ▸ ετϦʔτΧϧνϟʔ × ITͳαʔϏεΛӡӦ ▸

    ࠓ࡞͍ͬͯΔࣄۀ ▸ ετϦʔτμϯεͷΦϯϥΠϯϨοεϯΞϓϦ ▸ react-native + firebase + TypeScript
  5. FIREBASEΦϯϦʔ + REACT NATIVEͰΞϓϦΛ࡞ΔͱՌͨͯ͠؆୯ʹͳΔͷ͔ʁ ͍͖ͳΓ͚ͩͲ݁࿦ ͍ͩͿ؆୯ʹͳͬͨؾ͕͢Δ

  6. Ͳ͕͜؆୯ʹͳͬͨͷ͔ʁ(1) ʙೝূ෦෼ʙ ▸ AuthenticationΛ࢖͏͜ͱͰϢʔβ෦෼Λ·Δ·ΔεΩοϓ ▸ ϝʔϧΞυϨε֬ೝػೳ ▸ ύεϫʔυมߋػೳ ▸ ࣗಈૹ৴ϝʔϧΛݴޠ͝ͱʹมߋՄೳ

  7. Ͳ͕͜؆୯ʹͳͬͨͷ͔ʁ(2) ʙσʔλ෦෼ʙ ▸ Firestore͔Β௚઀σʔλΛऔಘ ▸ ϧʔϧͷม਺ͱͯ͠authͳͲ΋࢖͑ΔͷͰ੍ݶ͕؆୯ ▸ FirestoreΛτϦΨʔͱͯ͠FunctionsΛىಈͤͯ͞ͷσʔλ੔ཧ ▸ ΞϓϦ΋web΋΄΅΄΅ڞ௨Ͱσʔλऔಘ༻ؔ਺͕ॻ͚Δ

  8. Ͳ͕͜؆୯ʹͳͬͨͷ͔ʁ(3) ʙͦͷଞʙ ▸ όοΫΤϯυΛ༻͍Δඞཁ͕ͳ͔ͬͨ ▸ ؅ཧը໘͕ॆ࣮͍ͯ͠ΔͳͲͳͲ

  9. FIREBASEΦϯϦʔ + REACT NATIVEͰΞϓϦΛ࡞ΔͱՌͨͯ͠؆୯ʹͳΔͷ͔ʁ ͱ͸͍͑Ͳਏ͍෦෼΋͋Γ

  10. Ͳ͕͜ਏ͔ͬͨͷ͔ʁ ▸ AuthenticationͰ࣋ͯΔ৘ใ͸ݶΒΕΔ ▸ id,email,displayName, photoUrl,emailVerified,֤छϓϩύΠμ ▸ FirestoreʹσʔλΛͦͷ··ೖΕΔ͜ͱ͕Ͱ͖ΔͷͰɺ
 ϑϩϯτଆͷόϦσʔγϣϯΛ͔ͬ͠Γͱ͠ͳ͍ͱ͍͚ͳ͍ ▸

    ϧʔϧΛશһ͕ͪΌΜͱ೺Ѳ͍ͯ͠Δ͔ ▸ Firestore͸͋͘·ͰNoSQLతͳ෦ྨͳͷͰݕࡧ͸ڧ͘ͳ͍ ▸ ίϨΫγϣϯ͕૿͑ΔͱτϦΨʔͷ೺Ѳ͕໘౗ʹ ▸ ίϨΫγϣϯ͕૿͑Δͱ͍Δͷ͔͍Βͳ͍ͷ͔͕೉͘͠ͳΔ ▸ ෳ਺ϦϙδτϦʹލͬͨ৔߹ͷFunctionsͷ؅ཧํ๏ ▸ ͳͲͳͲ…
  11. FIREBASEΦϯϦʔ + REACT NATIVEͰΞϓϦΛ࡞ΔͱՌͨͯ͠؆୯ʹͳΔͷ͔ʁ ͜͏͍͏޻෉Λ͠·ͨ͠

  12. Ͳ͏͍͏޻෉Λ͔ͨ͠ʁ(1) ▸ TypeScriptͰFirestoreͷίϨΫγϣϯͷܕΛͪΌΜͱ؅ཧ ▸ ݕࡧ݁ՌΛ͋Β͔͡Ίอଘ͓ͯ͘͠ ▸ HIPHOPʹؔ͢ΔϨοεϯΛอଘ͓ͯ͘͠υΩϡϝϯτΛ༻ҙͳͲ ▸ NoSQLͱ͍͏͜ͱΛ಄ʹೖΕͯίϨΫγϣϯͳͲΛ࡞੒ ▸

    τϦΨʔͳͲؔ࿈ੑΛͪΌΜͱਤʹॻ͍ͯ೺Ѳ
  13. Ͳ͏͍͏޻෉Λ͔ͨ͠ʁ(2) ▸ AdminͰ࢖͍͍ͨɺΞϓϦͰ࢖͍͍ͨɺ WebͰ࢖͍͍ͨΑ͏ͳ Functions͸ͦΕͧΕͷϦϙδτϦʹ෼ׂͯ͠؅ཧ ▸ exports͢Δؔ਺ΛΦϒδΣΫτʹ͢Δ $ firebase deploy

    --only functions:admin exports.admin = { func1: require(“./func1”), func2: require(“./func2”), };
  14. FIREBASEΦϯϦʔ + REACT NATIVEͰΞϓϦΛ࡞ΔͱՌͨͯ͠؆୯ʹͳΔͷ͔ʁ ͜͏͍ͬͨΞϓϦͩͱ࠾༻͠ͳ͔͔ͬͨ΋

  15. ͜͏͍͏ΞϓϦͩͱ࠾༻͠ͳ͔͔ͬͨ΋ ▸ SNSͷΑ͏ͳϦϨʔγϣϯ͕ෳࡶʹབྷΈ߹͏Α͏ͳαʔϏε ▸ firestore΍functions͕ೖΓཚΕͯ͠·͏ͨΊ ▸ ݕࡧ৚͕݅ෳࡶͩͬͨΓ͢ΔΑ͏ͳαʔϏε ▸ ෳ߹ΠϯσοΫε΍શจݕࡧͷͨΊʹalgoliaಋೖͳͲ͕໘౗ ▸

    ήʔϜͷΑ͏ͳεϐʔυΛॏཁࢹ͍ͨ͠αʔϏε ▸ τϥϯβΫγϣϯ΍ॻ͖ࠐΈ଎౓͕ωοΫͱͳΔͷͰ ޲͖ෆ޲͖͕͋ΔͷͰཁ஫ҙ
  16. FIREBASEΦϯϦʔ + REACT NATIVEͰΞϓϦΛ࡞ΔͱՌͨͯ͠؆୯ʹͳΔͷ͔ʁ ·ͱΊ

  17. ·ͱΊ ▸ ඇSNSΞϓϦͰ͸؆୯ʹͳΔͷͰ͓͢͢Ί ▸ ୯७ʹίϨΫγϣϯ͔Βऔಘ͢ΔΑΓ͸ɺ
 ݕࡧ݁ՌΛ·ͱΊͨυΩϡϝϯτΛ༻ҙ͓ͯ͘͠ͱΤίͰָ ▸ τϦΨʔىಈͷFunctionsͳͲ͕େྔʹઃஔ͞ΕΔՄೳੑ͕ߴ͍ͷͰɺ
 ͔ͬ͠Γͱؔ܎ੑΛ؅ཧͰ͖ΔΑ͏ͳֆΛඳ͘ ▸

    ຊLTͰ͸঺հ͍ͯ͠ͳ͍͕ɺFCM΍ΞφϦςΟΫεͳͲΞϓϦΛ࡞Δ্ Ͱඞཁͳ΋ͷ͕શͯἧ͍ͬͯΔ ࡞Γ͍ͨ΋ͷʹΑΔ͕ গਓ਺Ͱͺͺͬͱ։ൃΛ͢ΔͳΒ͹!
  18. ͓ΘΓ