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

React Nativeの使い方

Gotoo
February 11, 2024

React Nativeの使い方

学生自主勉強会での資料です。

Gotoo

February 11, 2024
Tweet

More Decks by Gotoo

Other Decks in Business

Transcript

  1. ޙ౻ɹᠳ࠸
    3FBDU/BUJWFͷ࢖͍ํ

    View full-size slide

  2. 3FBDU/BUJWFͱ͸
    .FUB͕ࣾ։ൃͨ͠ΫϩεϓϥοτϑΥʔϜʢ3FBDUʣͷϑϨʔϜϫʔΫ

    +BWB4DSJQU΍3FBDUͷΞϓϦ։ൃΛ͢Δҝʹ࡞ΒΕͨ΋ͷ
    αΠτͷ63-IUUQTSFBDUOBUJWFEFW

    View full-size slide

  3. 3FBDU/BUJWFͱ͸
    αΠτͷ63-IUUQTSFBDUOBUJWFEFW
    +BWB4DSJQUʢ+49ʣ
    5ZQF4DSJQUͰ։ൃʢੈؒతʹ͸ͪ͜Βͷํ͕ओྲྀΒ͍͠ʣ
    ։ൃݴޠ

    View full-size slide

  4. ϗοτϦϩʔυ
    ɹιʔείʔυΛอଘ͢ΔͨͼʹࣗಈͰϦϩʔυ͕ߦΘΕΔɻ
    ɹɹᵋগ͠ͷमਖ਼Ͱ΋ίϯύΠϧΛ͠ͳͯ͘΋ྑ͍ɻ

    J04΋"OESPJE΋྆ํ։ൃ
    ɹ
    3FBDU/BUJWFͱ͸
    ಛ௃

    View full-size slide

  5. 3FBDU/BUJWFͱ͸
    සൟʹେܕΞοϓσʔτ͕͕ߦΘΕΔ

    ɹᵋΤϥʔ͕ग़ͨΓɺಈ͔ͳ͔ͬͨΓͳΔՄೳੑ͕͋Δ

    3FBDUɺ+49ͳͲͷֶशίετ͕͍Δ
    ஫ҙ఺

    View full-size slide

  6. 3FBDU/BUJWFͱ͸
    'BDF#PPL *OTUBHSBN %JTDPBE
    ࢖ΘΕ͍ͯΔ୅දతͳΞϓϦ

    View full-size slide

  7. ؀ڥߏங
    ؀ڥߏஙͷྲྀΕ
    OPEFKTͷΠϯετʔϧɺઃఆͳͲ
    XBUDINBOͷΠϯετʔϧ
    &910ͷΠϯετʔϧɺΞΧ΢ϯτઃఆͳͲ
    ࣮ࡍʹ৮ͬͯΈΔ

    View full-size slide

  8. ؀ڥߏங
    &910ͱ͸
    3FBDU/BUJWFΛ࢖ͬͨ։ൃͷͨΊͷ

    ϑϨʔϜϫʔΫɺϓϥοτϑΥʔϜ
    ΞϓϦΛ؆୯ʹ
    ։ൃɺϏϧυɺσϓϩΠ͢Δ͜ͱ͕Մೳ

    View full-size slide

  9. ؀ڥߏங
    OPEFKTͷΠϯετʔϧɺઃఆ
    ಛఆͷOPEFKTΛΠϯετʔϧʢࠓճ͸ɺWʣ
    OPEFCSFXJOTUBMMW
    Πϯετʔϧͨ͠OPEFKTΛ൓өͤ͞Δ
    OPEFCSFXVTFW
    ݱࡏͷOPEFKBͷόʔδϣϯ֬ೝɺ൓ө֬ೝ
    OPEFCSFXMT
    ˞OPEFKTʢOPEFCSFXʣ͕ೖ͍ͬͯΔ૝ఆͰਐΊ͍͖ͯ·͢

    View full-size slide

  10. ؀ڥߏங
    XBUDINBOͷΠϯετʔϧ
    XBUDINBOͷΠϯετʔϧ
    CSFXJOTUBMMXBUDINBO
    ͪΌΜͱೖ͍ͬͯΔ͔֬ೝ
    OPEFCSFXVTFW
    )PNFCSFX͕࢖༻͢ΔύοέʔδϦϙδτϦΛ࠷৽ʹ͢Δ
    CSFXVQEBUF
    ˞)PNFCSFX͕ೖ͍ͬͯΔ૝ఆͰਐΊ͍͖ͯ·͢
    ϑΝΠϧͷมߋΛ؂ࢹͯ͠

    ޮ཰తͳϗοτϦϩʔυΛߦ͏ͨΊ

    View full-size slide

  11. ؀ڥߏங
    ̎छྨ


    ɹOQYΛ࢖ͬͯɺϦϞʔτͰ࣮ߦ͢Δ

    ɹɹᵋࠓճ͸ͪ͜Βͷ΍ΓํͰਐΊ·͢
    ɹύιίϯʹ௚઀μ΢ϯϩʔυ࣮ͯ͠ߦ

    &910DMJͷ࢖͍ํ

    View full-size slide

  12. ؀ڥߏங
    &910ͷΞΧ΢ϯτొ࿥ɺϩάΠϯ
    &910ͷձһొ࿥Λ͢Δ

    λʔϛφϧͰ΋ग़དྷΔ͕
    ΢ΣϒαΠτͰ࡞Δํָ͕

    Ϣʔβ໊ͱύεϫʔυ͸

    ͦͷޙ࢖͏ͷͰ͓֮͑ͯ͘
    XFCTJUFIUUQTFYQPEFW

    View full-size slide

  13. ؀ڥߏங
    "QQ4UPSFIUUQTBQQTBQQMFDPNKQBQQFYQPHPJE
    (PPHMF1MBZIUUQTQMBZHPPHMFDPNTUPSFBQQTEFUBJMT JEIPTUFYQFYQPOFOUIMKBHM64
    &910(PͷΠϯετʔϧ
    &YQPϓϩδΣΫτΛ࣮ߦͯ͠ϓϨϏϡʔ

    ͢ΔͨΊͷϞόΠϧΞϓϦ


    ։ൃதͷΞϓϦͷ֎؍΍ಈ࡞ΛϦΞϧλΠϜ
    Ͱ֬ೝ͢ΔͨΊͷศརͳπʔϧ

    View full-size slide

  14. ࣮ࡍʹ৮ͬͯΈΔ
    &910(P΁ͷϩάΠϯ
    8FCαΠτͰొ࿥ͨ͠

    ϝʔϧΞυϨεͱύεϫʔυͰϩάΠϯ͢Δ

    View full-size slide

  15. ࣮ࡍʹ৮ͬͯΈΔ
    &910ͷϩάΠϯʢλʔϛφϧଆʣ
    ϩάΠϯ͍ͯ͠Δ͔֬ೝ
    ϩάΠϯ͢Δ
    OQYFYQPXIPBNJ
    OQYFYQPMPHJO
    ϝʔϧΞυϨεʢϢʔβ໊ʣɺύεϫʔυΛೖྗ

    View full-size slide

  16. ࣮ࡍʹ৮ͬͯΈΔ
    ϓϩδΣΫτ࡞੒
    ෼͔Γ΍͍͢Α͏ʹσεΫτοϓʹ࡞Γ͍ͨ
    DE%FTLUPQ
    ผͷ৔ॴʹ࡞੒͍ͨ͠ਓ͸ɺ࡞੒ޙʹͦ͜ͷ֊૚·ͰҠಈ͢Δ
    DE̋̋̋̋

    View full-size slide

  17. ࣮ࡍʹ৮ͬͯΈΔ
    ϓϩδΣΫτ࡞੒
    ϓϩδΣΫτ࡞੒
    ςϯϓϨʔτ͕ೖͬͨঢ়ଶͰͷϓϩδΣΫτ࡞੒
    OQYDSFBUFFYQPBQQ
    OQYDSFBUFFYQPBQQUFNQMBUF
    ෼͔Γ΍͍͢ͷͰࠓճ͸ͪ͜ΒΛ࢖༻

    View full-size slide

  18. ࣮ࡍʹ৮ͬͯΈΔ
    ϓϩδΣΫτ࡞੒
    ͲͷςϯϓϨʔτͰ࡞੒͢Δ͔

    ࠓճ͸൪γϯϓϧͳʮ#MBOLʯΛબ୒
    ޷͖ͳ໊લͰ࣮ߦ
    ࡞ΒΕͨϑΝΠϧ΁Ҡಈ͢Δ
    DE̋̋̋̋

    View full-size slide

  19. ࣮ࡍʹ৮ͬͯΈΔ
    ϓϩδΣΫτ࡞੒
    ϑΝΠϧͷத਎Λ֬ೝ
    ಉ͡Α͏ʹͳ͍ͬͯΕ͹੒ޭ
    MT
    SNQBDLBHFMPDLKTPO

    View full-size slide

  20. ࣮ࡍʹ৮ͬͯΈΔ
    ϓϩδΣΫτ࡞੒
    ϑΝΠϧͷத਎Λ֬ೝ
    QBDLBHFMPDLKTPO͸ཁΒͳ͍ͷͰফ͓ͯ͘͠
    MT
    SNQBDLBHFMPDLKTPO

    View full-size slide

  21. ࣮ࡍʹ৮ͬͯΈΔ
    ϓϩδΣΫτ࡞੒
    αʔόʔΛ্ཱͪ͛ͯ࢖͑ΔΑ͏ʹ͢Δ
    ΋͠ɺΤϥʔΛు͍ͨ৔߹ʹ࣮ߦ
    OQYFYQPTUBSU
    XBUDINBOGPSFHSPVOE

    View full-size slide

  22. ࣮ࡍʹ৮ͬͯΈΔ
    ϓϩδΣΫτ࡞੒
    ىಈޙʹͲͷΑ͏ͳॲཧΛߦ͏͔දࣔ͞ΕΔ

    ྫʣ

    QSFTTB
    ɹ"OESPJEͷγϡϛϨʔλʔͰ࣮ߦ͍ͨ࣌͠

    QSFTTJ

    ɹJ04ͷγϡϛϨʔλʔͰ࣮ߦ͍ͨ࣌͠

    QSFTTK

    ɹXFCϒϥ΢βͰ࣮ߦ͍ͨ࣌͠

    View full-size slide

  23. ࣮ࡍʹ৮ͬͯΈΔ
    ϓϩδΣΫτ࡞੒
    &910(PͰ23ίʔυΛಡΈࠐΉ

    ᵋطଘͷΧϝϥΞϓϦͰಡΈࠐΜͰ΋0,

    ϩάΠϯࡁΈͰ͋Ε͹
    εϚϗը໘ʹɺϑΝΠϧ໊͕දࣔ͞Ε͍ͯΕ͹

    ͦΕΛԡ͢͜ͱͰɺը໘ͷ൓ө͕׬ྃ͢Δ

    View full-size slide

  24. ࣮ࡍʹ৮ͬͯΈΔ
    ॻ͖ํͷઆ໌

    )5.-ͬΆ͘ॻͨ͘Ίʹ+49Λ࢖༻

    3FBDU/BUJWFͰ͸༻ҙ͞Ε͍ͯΔ΋ͷΛ࢖͏
    ԼهͷJNQPSU಺ʹએݴ͢Δ͜ͱͰɺ࢖͑ΔΑ͏ʹͳΔ
    7JFXEJW

    5FYUQΈ͍ͨͳײ͡

    View full-size slide

  25. ࣮ࡍʹ৮ͬͯΈΔ
    ॻ͖ํͷઆ໌
    ม਺ʹએݴ͢Δ͜ͱͰɺ৭Μͳॴʹ࢖͑ΔΑ͏ʹ͢Δ
    ࢖͍͍ͨͱ͜ΖͰΛݺͼग़͢͜ͱͰɺ൓өͤ͞Δ͜ͱ͕ग़དྷΔ

    View full-size slide

  26. ࣮ࡍʹ৮ͬͯΈΔ
    ·ͣ͸ɺը૾දࣔͳͲͷ࢖͍ํ

    View full-size slide

  27. ࣮ࡍʹ৮ͬͯΈΔ
    ίϯϙʔωϯτԽͯ͠ɺ7JFXΛ࢖͍ճ͢
    એݴ͠ɺ

    ݺͼग़͢͜ͱͰɺԿճ΋࢖͑Δ

    View full-size slide

  28. ࣮ࡍʹ৮ͬͯΈΔ
    ਌͔Βࢠ΁σʔλΛ౉͢
    QSPQTͱ͸

    ਌ίϯϙʔωϯτ͔ΒɺࢠίϯϙʔωϯτʹσʔλΛ౉͢ҝͷએݴ
    σʔλΛड͚औΔଆʢࢠʣ σʔλΛૹΔଆʢ਌ʣ

    View full-size slide

  29. ࣮ࡍʹ৮ͬͯΈΔ
    μϛʔσʔλͷड͚औΓ
    NBQؔ਺ͱ͸

    ഑ྻ΍ΦϒδΣΫτΛऔΓग़ͯ͠܁Γฦ͠ॲཧΛߦ͏
    +BWB4DSJQUͷϝιου

    View full-size slide

  30. ࣮ࡍʹ৮ͬͯΈΔ
    ը໘ભҠͷ࣮ࢪ
    XFCTJUFIUUQTSFBDUOBWJHBUJPOPSHEPDTHFUUJOHTUBSUFE
    ը໘ؒͷφϏήʔγϣϯʹඞཁͳϥΠϒϥϦʢOQNʣ
    OQNJOTUBMM!SFBDUOBWJHBUJPOOBUJWF
    ը໘ͷελοΫΛ؅ཧ͠ɺ੍ޚ͢ΔϥΠϒϥϦʢZBSOʣ
    OQNJOTUBMM!SFBDUOBWJHBUJPOOBUJWFTUBDL
    εϜʔζʹը໘ભҠΛߦ͏ͨΊͷϥΠϒϥϦ
    OQYFYQPJOTUBMMSFBDUOBUJWFTDSFFOTSFBDUOBUJWFTBGFBSFBDPOUFYU

    View full-size slide

  31. ࣮ࡍʹ৮ͬͯΈΔ
    ը໘ભҠͷ࣮ࢪ
    5PVDIBCMF0QBDJUZ
    λονՄೳͳྖҬΛ࡞੒͢ΔͨΊͷίϯϙʔωϯτ

    View full-size slide

  32. ࣮ࡍʹ৮ͬͯΈΔ
    ը໘ભҠͷ࣮ࢪ
    "QQKTΛը໘ભҠΛ؅ཧ͢Δ΋ͷʹ͢Δ

    View full-size slide

  33. ࣮ࡍʹ৮ͬͯΈΔ
    ը໘ભҠͷ࣮ࢪ
    )PNF4DSFFOͰ

    PO1SSFTTΠϕϯτΛऔಘ͠ɺ

    "SUJDMը໘΁ඈ͹͢

    View full-size slide

  34. ࣮ࡍʹ৮ͬͯΈΔ
    Ԡ༻ɿͽΑϏϡʔ
    λοϓ͞ΕΔͱը໘ભҠ͠ɺ

    ભҠઌʹରԠͨ͠ը૾ͱςΩετදࣔ

    View full-size slide

  35. ͍͞͝ʹ
    ࢀߟʹͨ͠αΠτ

    3FBDU/BUJWFೖ໳ɿχϡʔεΞϓϦΛ࡞Γͳ͕Β֮͑Α͏
    IUUQTXXXVEFNZDPNDPVSTFSFBDUOBUJWFGJSTUTUFQ
    ݸਓతͳײ૝
    ϗοτϦϩʔυʹײಈ͢Δʂ
    4XJGUʹൺ΂ɺศརͳ෦෼΋͋Δ͕ɺෆศͳ෦෼΋͋Δ

    ௥هɿΤϥʔ͕Ͳ͔͜Θ͔Βͳ͍ʜ

    View full-size slide