Improving the development environment for react-native

React Native Meetup #12 @Online
https://react-native-meetup.connpass.com/event/210587/

いいかんじにバージョンアゲアゲくん
https://gist.github.com/mrtry/8bd873f3f4629692d698c3c1f318b560

release後処理くん
https://gist.github.com/mrtry/52fe8a60e3e4fe81f5455e9d728281e3

よしなにnpm installするくん
https://gist.github.com/mrtry/6a624966e536299e9ca9157ed89cad7d

.xcode-versionと一致してるかをチェックするスクリプト
https://gist.github.com/mrtry/5c30b67d0dbb6342550399c61a34219f

Transcript

1. DXΛόΫ্͛͢ΔͨΊʹ
   

   ͍Ζ͍Ζ΍ͬͨ͜ͱ
   mrtry
   
   
   2021/05/21
   

   View Slide

2. ࣗݾ঺հ
   • ͱΒ͍(@mrtry)
   
   
   • Yamamoto Shinnosuke
   
   
   • v0.56.0͙Β͍͔Β৮ͬͯΔ(4೥ੜ)
   
   
   • AndroidΤϯδχΞͱReact NativeΤϯδχΞΛߦ͖དྷͯ͠Δ
   

   View Slide

3. View Slide

4. ͋Β͢͡
   • ΞϓϦ಺੡Ϛϯͱͯ͠࠷ۙೖࣾ🥳
   
   
   • ৭ʑͱ։ൃ؀ڥ͕੔ͬͯͳ͍😇
   
   
   • DXΛόΫ্͍͖͍͛ͯͨ͠💪
   

   View Slide

5. DXΛόΫ্͍͖͍͛ͯͨ͠🤞
   ͦΕͧΕGistʹࡌͤͯ·͢🥳
   
   
   • releaseޙॲཧ͘Μ
   
   
   • Α͠ͳʹnpm install͢Δ͘Μ
   
   
   • ͍͍͔Μ͡ʹόʔδϣϯΞήΞή͘Μ
   
   
   • ֤छπʔϧͷόʔδϣϯݻఆ(node/npmɺXcodeɺfastlane)
   

   View Slide

6. releaseޙॲཧ͘Μ
   

   View Slide

7. releaseޙॲཧ͘Μ
   ϦϦʔεޙʹ΍Δޙॲཧ͕໘౗ 😇 (git
   fl
   owӡ༻)
   
   
   • tagଧͪ
   
   
   • masterʹmerge
   
   
   • developͷࠩ෼͋Ε͹औΓࠐΜͰɺdevelop΁merge
   

   View Slide

8. releaseޙॲཧ͘Μ
   ϦϦʔεޙʹ΍Δޙॲཧ͕໘౗ 😇 (git
   fl
   owӡ༻)
   
   
   • tagଧͪ ← ࣗಈԽͰ΍ͬͯ΄͍͠
   
   
   • masterʹmerge ← ࣗಈԽͰ΍ͬͯ΄͍͠
   
   
   • developͷࠩ෼͋Ε͹औΓࠐΜͰɺdevelop΁merge
   

   View Slide

9. releaseޙॲཧ͘Μ
   GitHub ActionͰࣗಈԽͨ͠🥳
   
   
   ϦϦʔε͕ऴΘͬͨλΠϛϯάͰPRΛ࡞Δͱɺ
   
   
   PR࡞੒ۦಈͰrelease/x.x.xͷcommit಺༰ͰҎԼΛ࣮ߦ͢Δ
   
   
   x.x.x ͷλάΛଧͭ
   
   
   commitΛmasterʹ൓ө͢Δ
   
   
   

   View Slide

10. releaseޙॲཧ͘Μ
    jobs:
    create-tag:
    steps:
    - name: Create tag
    id: create_tag
    run: |
    tag=$( release branch͔Βx.x.xൈ͍ͯ͘Δ )
    - uses: actions/checkout@v2
    - run: |
    git tag ${{ tag }}
    git push origin ${{ tag }
    }
    
    merge-to-master:
    steps:
    - uses: mtanzi/action-automerge@v1
    with:
    github_token: ${{ github.token }}
    source: ${{ release branch }}
    target: 'master
    λάͱmaster൓ө͕ࣗಈͰ͞ΕΔ
    
    
    ͋ͱ͸ɺdevelop෼Λmergeͯ͠ऴΘΓ🥳
    

    View Slide

11. Α͠ͳʹ
    
    
    npm install͢Δ͘Μ
    

    View Slide

12. Α͠ͳʹnpm install͢Δ͘Μ
    npm͠๨Ε͕ͪ໰୊ɺ͋Δͱ͓΋͍·͢ 😇
    
    
    • ϦϑΝΫλ͍ͯ͠Δͱ΍Γ͕ͪ😇
    
    
    • ৽نػೳ࣮૷͍ͯ͠Δͱ΍Γ͕ͪ😇
    
    
    • ʮcheckout͚ͨ͠Ͳɺಈ͔ͳ͍…ʯͱ΍Γ͕ͪ😇
    
    
    BranchҠಈͨ͠λΠϛϯάͰɺnpm iͯ͠΄͍͠😭
    

    View Slide

13. Α͠ͳʹnpm install͢Δ͘Μ
    huskyΛಋೖ🐶
    
    
    • GitͷΠϕϯτۦಈͰεΫϦϓτΛ࣮ߦͰ͖ΔΑ͏ʹ͢Δ͘Μ
    
    
    git checkoutͷλΠϛϯάͰεΫϦϓτΛ࣮ߦ͢Δ🤟
    
    
    • git checkoutલޙͷpackage.jsonͷhashΛऔಘ
    
    
    • ࠩ෼͕͋ͬͨΒnpm i͢Δ
    

    View Slide

14. Α͠ͳʹnpm install͢Δ͘Μ
    prevPackageHash=$(Ҡಈલͷpackage.jsonͷhash
    )
    
    nextPackageHash=$(Ҡಈޙͷpackage.jsonͷhash)
    if [ "$prevPackageHash" != "$nextPackageHash" ]; then
    npm
    i
    
    els
    e
    
    echo "post-checkout: do nothing
    "
    
    f
    i
    
    npm i͠๨ΕʹΑΔʮͳΜ͔ಈ͔ͳ͍ʯ͕ղফ͞Εͨ🥳
    

    View Slide

15. ͍͍͔Μ͡ʹ
    
    
    ΞϓϦͷόʔδϣϯ
    
    
    ΞήΞή͘Μ
    

    View Slide

16. ͍͍͔Μ͡ʹόʔδϣϯΞήΞή͘Μ
    ϦϦʔεલͷόʔδϣϯߋ৽͕໘౗🤮
    
    
    • JavaScript (package.json / package-lock.json)
    
    
    • Android (build.gradle)
    
    
    • iOS (Xcode)
    
    
    ίϚϯυҰൃΩϝͨΒͦΕͧΕΑ͠ͳʹߋ৽͞Εͯ΄͍͠😭
    

    View Slide

17. ͍͍͔Μ͡ʹόʔδϣϯΞήΞή͘Μ
    Release branchͷόʔδϣϯΛ൓ө͢ΔεΫϦϓτΛ࡞Δ
    
    
    JavaScript
    
    
    • npmʹόʔδϣϯߋ৽ػೳ͋ΔͷͰ࢖͏
    
    
    Android, iOS
    
    
    • Fastlaneʹόʔδϣϯߋ৽ϓϥάΠϯ͕͋ΔͷͰ࢖͏
    

    View Slide

18. ͍͍͔Μ͡ʹ
    
    
    όʔδϣϯ
    
    
    ΞήΞή͘Μ
    # package.json·ΘΓΛߋ৽
    npm --no-git-tag-version version $versionName
    # iOS
    fastlane run increment_build_number
    fastlane run increment_version_number $versionName
    # Android
    fastlane run increment_version_code
    
    
    fastlane run increment_version_name $versionName
    # diffΛ֬ೝ
    git add -u
    git diff --cached
    ͜ΕΛΩϝΕ͹ղܾ🤟
    
    
    Android͸Plugin࢖ͬͯΔ
    

    View Slide

19. ֤छπʔϧͷόʔδϣϯݻఆ
    

    View Slide

20. ֤छπʔϧͷόʔδϣϯݻఆ
    ։ൃ࣌ͷπʔϧଟ͗͢໰୊ɺ͋Δͱࢥ͍·͢
    
    
    ؀ڥߏஙͰࣄނΔཁҼNo.1 (ಠஅͱภݟ)
    
    
    ʮͳʹ͔͠Βͷπʔϧ͕όʔδϣϯζϨͯͯಈ͔ͳ͍ʯ
    
    
    ͭΒ͍ͷͰɺͦΖ͓͖͍͑ͯͨ
    

    View Slide

21. ֤छπʔϧͷόʔδϣϯݻఆ
    ͦΕͧΕͷόʔδϣϯΛݻఆ & ࣮ߦ࣌νΣοΫͯ͠ἧ͍͑ͨ
    
    
    • npm/node
    
    
    • Xcode
    
    
    • fastlane
    
    
    • (Android·ΘΓ͸ͦΜͳʹࠔΒͳ͍ؾ͕͢Δ)
    

    View Slide

22. ֤छπʔϧͷόʔδϣϯݻఆ(npm/node)
    {
    ...
    "engines": {
    "node": "14.16.1",
    "npm": "6.14.12"
    },
    ...
    }
    nvmͰόʔδϣϯἧ͑ͨ
    
    
    .npmrc Ͱ engine-strict=true ͯ͠ɺ࣮ߦ࣌νΣοΫ͔͚ͨ
    

    View Slide

23. ֤छπʔϧͷόʔδϣϯݻఆ(Xcode)
    # Project rootʹҠಈ
    cd $(git rev-parse --show-toplevel)
    # όʔδϣϯνΣοΫ
    if [ "$(cat .xcode-version)" != "$(xcodebuild -version | awk 'NR==1{print $2}')" ]; then
    echo 'Invalid Xcode version'
    exit 1
    fi
    xcode-install (gem) Λಋೖͨ͠
    
    
    ҎԼͷεΫϦϓτͰɺϏϧυ࣌ʹνΣοΫ͔͚ͨ
    

    View Slide

24. ֤छπʔϧͷόʔδϣϯݻఆ(fastlane)
    # `fastlane-version` ͱͯ͠Project rootʹఆٛ

    gem 'fastlane', ‘2.183.2
    '
    
    

    # `android/` `ios/` ҎԼͷGemfileʹҎԼΛ௥Ճ

    # `fastlane-version` ΛಡΈࠐΜͰόʔδϣϯΛἧ͑Δ
    fastlaneVersion = File.join(File.dirname(__FILE__), '../fastlane-version')
    eval_gemfile(fastlaneVersion) if File.exist?(fastlaneVersion
    )
    
    fastlaneͷPluginͷॻ͖ํΛࢀߟʹͨ͠
    

    View Slide

25. \ we are hiring /
    ʮ׬ʯ
    

    View Slide