iOSDC Japan 2018に登壇します #iosdc

f:id:yutailang0119:20180816015426p:plain

会社のdeveloperブログに書いた通りですが、登壇します。

developer.hatenastaff.com

weak vs unowned (LT)

  • id:yutailang0119
  • 2018/09/02 16:25〜 Track A(5分)
  • Swiftを扱う上で度々議論となるweakとunownedによるキャプチャ。「確実にクラッシュを防げるweakの方がよい」、「unownedの方がパフォーマンスが優位である」よく聞く意見ではありますが、それは本当なのでしょうか。なぜメモリリークが起こるのかを復習して、両者のメリット/デメリットを再整理し、実コードにおける使い分け方を考え直してみようと思います。

この時期、いろいろと思うところはあったものの、CfP出して、採択されたので、まずは1山超えた感じ。

ありがたいことに2年連続で、採択されました。

去年は「iOSDCだけではもったいない!iOSアプリケーションエンジニアの他言語コミュニティ生存戦略」と、直接的な技術ネタじゃなかったので、大人数の前で技術ネタ話すのは初めてです。

まだ準備を始めた段階ですが、5分間でいい感じにまとめたいと思います。

P.S.

その次の週はbuilderscon tokyo 2018 ということで、10日間ほど東京にいます。
忙しくはありますが、ぜひお誘いください。

株式会社はてなに入ってからの半年を振り返る

早いもので、先日の8/10で株式会社はてなに入社して半年が経った。
会社としても期の変わり目で、振り返りがあったので、それも踏まえて残しておく。
そして、忘れていたが、去年は突然にお盆休みが発生して、8/16にはてなの東京オフィスにお昼を食べに来てたらしい。

いろいろな縁が重なって入社した、はてなでの半年を振り返る。

入る時のエントリはこちら

yutailang0119.hatenablog.com

はてなでやってきたこと

ジャンプルーキー!

オファーをもらった段階で、マンガチームということは決まっていた。
平たく言うなら、受託サービスで、とても葛藤があったことを覚えている。
蓋を開けてみると、このチームでの経験は大きかった。

ここには id:niwatako くんがすでに属していることも知っていたし、入社する頃には id:ikesyo さんもいることがわかり、念願のという感じだった。
社内のスマートフォンアプリケーションエンジニアが集結したチームでの開発は、自分の基礎レベルをかなり上げた。
また、自分のSwift力が可視化されて、とてもよかった。*1

実際のところ、開発はかなりタイトで、リリース直前は労働時間で量をまかなうという感じではあったが、初めて業務でRxSwiftを使えたり、DIKitを導入できたり、デザイナーとHangoutで会話しながら画面構成考えたり、3年ぶりにAndroidやってみたりもできて、辛いとは感じなかった。
一方で、振り返りの時にも感じたが、自分は軽度のワーカホリック的な部分があるなと感じていて、

  • 仕事が片付いて、手が空くとそわそわする
  • 夜中まで働いた時はハイになってたけど、効率が良いわけではなかった

と思ったので、労働集約型の働き方はよくないし、マインドも矯正して行かなきゃだなと、痛感した。

はてなブックマーク

直近は、はてなブックマークを担当している。
このチームではiOSAndroidに担当の区別がなく、両プラットフォームの開発をしてる。
まだまだKotlinやGradleのことわからんなーという状態。
自分よりも何倍もiOSに携わっている id:nakiwo さんと対等 *2 に議論させてもらいながら、開発を行っている。

昔から使っていたサービスの開発を担当することになるとは、まさか大学生の自分は思わなかっただろうな。
自分は今の状態が最上ではないと思っているので、コードもUIも改革したい。

それ以外

はてなには多くのサービスがあって、特別な制約があるサービスを除くリポジトリには、基本的にアクセスできる。
はてなの歴史が見れるし、自分が担当していないサービスにふらっと立ち寄ってPRを出したりもした。
それだけでなく、CTOの id:motemen さんと一緒にコード書いたり、コードレビューしたりと超豪華

会社としても、QOLが高い。
有名な話だけど、飲み物、お菓子、昼食は準備されている。
エンジニアは本当の意味で裁量労働なので、早めに帰るというのも結構できている。

エンジニアだから特別扱いというわけではないと認識していて、それぞれの職種やポジションの中で、必要とされる/許容される範囲で、最高の状態にしたいねという空気はある。
思ったこと、問題意識、アラートを上げやすい環境だと感じている。

design.hatenastaff.com

自分は心からいい会社だなと思っていて、人を誘える。
「xxxさんだけずるい」みたいな声があがる世の中は生きづらいと思っているので、そんな状況で疲弊している、はてなで働くことに興味がある人がいれば、ぜひランチに招待します!!!

WWDC

ありがたいことに、念願のWWDCに行った。
来年も行きたいなぁとは思うけど、どうだろう。

yutailang0119.hatenablog.com

OSS活動

自分もOSS活動をちゃんとやっていきたい

空が青いので転職しました - がんばってなんか書く

自分でもそれなりできたと思うし、習慣化された。

今はサマーインターン期間で、インターン用の課題も合間でやってみている。
今年はGo!!!

京都

京都に住み始めても半年。
通勤のストレスがなくなったことは、最高にQOLを上げた。

  • 小学校 徒歩15分
  • 中学校 徒歩10分
  • 高校 自転車25分
  • 大学 徒歩10分
  • 社会人1社目 電車20分
  • 社会人2社目
    • 前半 電車10分 + 徒歩10分
    • 後半 電車 20分 + 徒歩10分
  • 現在 徒歩7分

と生きてきたので、幼少期から通勤通学に時間をかける生活は向いていないのだと思う。

いい意味で繁華街が集中しているので、徒歩圏内で大体生活できる。
徒歩圏内にLOFTもROUND1もあるのすごい、映画館がすぐ近くなのにまだ行ってないので、通いたい。

反面、デメリットは確かにある。
東京にいた頃に比べて、休日に集まってもくもくしようとなる友人は減ったし、勉強会も減った。
こっちにも友人増えるといいなと思っているので、これから解決したい。
解決案も広く募集しています。

以上、直近の半年をまとめてみた。
半年後の1周年でも、どう変化があるか経過観察していきたい。

*1:低くはないはず

*2:🙇‍♂️

WWDC 2018の写真を眺める会

会社の朝会で使ったやつ。

出発前

このエントリーの影響で、ステッカーくださいと結構言われた
f:id:yutailang0119:20180802142126j:plain

developer.hatenastaff.com

WWDC会場

駅もWWDC仕様
f:id:yutailang0119:20180802142440j:plain

会場
f:id:yutailang0119:20180802142605j:plain

Keynoteにみんな並ぶ、開始9時なのに5時くらいから並んだ
f:id:yutailang0119:20180802142633j:plain

結構、前の方に座れた f:id:yutailang0119:20180816003527j:plain

セッションだけじゃなくて、Appleのエンジニアに質問できるLabもある
f:id:yutailang0119:20180802142839j:plain

人気なものはめっちゃ並ぶ、これはSwift
f:id:yutailang0119:20180802142925j:plain

ランチも出るけど、クッキーが超甘い
f:id:yutailang0119:20180802143027j:plain

サーモンが1番おいしかった
f:id:yutailang0119:20180802143207j:plain

自分で見ても楽しそうですね
f:id:yutailang0119:20180802143313j:plain

会場周辺

おしゃれ〜〜〜
f:id:yutailang0119:20180802143400j:plain f:id:yutailang0119:20180802143436j:plain

空が青い
f:id:yutailang0119:20180802143525j:plain f:id:yutailang0119:20180802143553j:plain

海外あるあるの謎日本もあった
f:id:yutailang0119:20180802144242j:plain

シェア電動スクーターがいっぱいある
f:id:yutailang0119:20180802144428j:plain

Apple Park

こちらが聖地です f:id:yutailang0119:20180802145712j:plain

オリジナルARコンテンツでApple Parkの内部構造を見れる f:id:yutailang0119:20180802145747j:plain

Bash

カンファレンス会場すぐ近くの公園、全体がモノポリーになってるらしい

ライブが始まると、前の方の集団は踊り狂っていた
f:id:yutailang0119:20180802143647j:plain

何度も言うが、ここは本来公園
f:id:yutailang0119:20180802143832j:plain

サンフランシスコ

1日サンフランシスコ観光ができた。

作画崩壊したような坂
f:id:yutailang0119:20180802144623j:plain

🌉

フィッシャーマンズワーフ
f:id:yutailang0119:20180802144938j:plain

🦀
f:id:yutailang0119:20180802144754j:plain

我々のホーム

🐙🐈
f:id:yutailang0119:20180802145335j:plain

行かせてくれてありがとうございました ✈️

おまけ

id:ikesyo さんの奥様と事前に顔合わせを行い、渡米中の出来事は逐一報告しました。

xccache-sweeperというgolang製CLIを作ってる

github.com

f:id:yutailang0119:20180727175550p:plain

Swiftで作ってるxcopenよりも前に作っていた。 yutailang0119.hatenablog.com

DeviceSupportが溜まってきてて、不便を感じてきたので、アップデートした。

READMEから引用

READMEに書いてるけど、一応説明

Instllation

$ go get github.com/yutailang0119/xccache-sweeper

こっちはgolang製なので、go get だけで使い始めることができて、golangの恩恵という感じ *1

Usage

NAME:
   xccache-sweeper - Sweep Xcode caches

USAGE:
   xccache-sweeper [global options] command [command options] [arguments...]

VERSION:
   0.1.0

COMMANDS:
     archives       Sweep Archives. Defaults is /Users/user/Library/Developer/Xcode/Archives
     deriveddata    Sweep DerivedData. Defaults is /Users/user/Library/Developer/Xcode/DerivedData
     caches         Sweep Archives and DerivedData.
     devicesupport  Sweep Device Support. ~/Library/Developer/Xcode/*DeviceSupport
     help, h        Shows a list of commands or help for one command

GLOBAL OPTIONS:
   --help, -h     show help
   --version, -v  print the version

Xcodeのデフォルトの設定だと ~/Library/Developer/Xcode/ に追加されていくデータ郡の掃除用のCLIだと思ってもらうとよい。 *2

所感

前に xccache-sweeper というCLIも作ったが、これはgolangで作った。 この時はSwift PM Package.swiftでかなり疲弊して、Swiftで作るのを断念したので、今回はSwiftで作るぞ!とやった。 ツール自体のロジックは、普段使い慣れているSwiftなので、非常に書きやすかった。

xcopenというSwift製CLIを作った - がんばってなんか書く

環境構築やMakefileの書き方、CLIのarguments perserは圧倒的にgolangの方が楽。
golang製のCLIツールはいっぱいあるので、参考にできるものが多いし、SwiftPM Utilityは癖が強い。

一方で、やはりgolangは書き慣れてなくて、お作法がわかってないことも多いし、やっぱりSwift好きだなと思った。
でも、golangももうちょっとマシに書けるようになりたい。
APIサーバーくらいは書いて、もっと手になじませたい。

xccache-sweeperもアップデート続けます。

*1:xcopenはMintで簡単に入れれるので、ぜひ使ってほしい (コントリビュート続けてる)

*2:今気づいたけど、pathの部分の書き方がバラバラだし、バージョン番号もミスってるので直したい...

CocoaPodsで公開しているライブラリのアップデート

今までやったことがなかったのだけど、機会があったので記しておく。

今回の題材はこちら yashigani/WebKitPlus

0. (Ownerに登録してなければ) 追加してもらう

https://guides.cocoapods.org/terminal/commands.html#pod_trunk_add_owner

$ pod trunk add-owner WebKitPlus email@email.com

ユーザー登録がまだの場合はこちら -> https://guides.cocoapods.org/terminal/commands.html#pod_trunk_register

1. podspecのバージョン指定をアップデート

https://github.com/yashigani/WebKitPlus/pull/20/files

 Pod::Spec.new do |s|
      s.name = "WebKitPlus"
 -    s.version = "0.3.0"
 +    s.version = "0.3.1"

GitHub上のタグも同じところに打っておくとCarthageと差がなくなってよい https://github.com/yashigani/WebKitPlus/releases/tag/0.3.1

2. pushする

https://guides.cocoapods.org/terminal/commands.html#pod_trunk_push

$ pod trunk push

[!] Found podspec `WebKitPlus.podspec`
Updating spec repo `master`
Validating podspec
 -> WebKitPlus (0.3.1)

Updating spec repo `master`

--------------------------------------------------------------------------------
 🎉  Congrats

 🚀  WebKitPlus (0.3.1) successfully published
 📅  July 6th, 14:15
 🌎  https://cocoapods.org/pods/WebKitPlus
 👍  Tell your friends!
--------------------------------------------------------------------------------

( ᐛ👐)

xcopenというSwift製CLIを作った

GW暇だったので、Swift製CLIを作ってた。

github.com

現状あるのは openlist というコマンドだけだけど、とりあえず実用を始めることができるレベルにはなったかなと思ったので、公開した。

f:id:yutailang0119:20180504211933p:plain

動機

構想自体は3ヶ月くらい前からあったが、SwiftPM Utility周りの理解がおぼつかなくて、実際にロジックを組み始めるまでの時間がかかってしまった。

最近、working directory構成を

- Documents
    - workspace
        - github.com
            - Swift
            - others
        - gitlab.com
            - Swift
            - others

みたいな感じにしてみた。
(golang~/go/src/github.com/yutailang0119/ にあるので、ちょっと歪ではあるんだけど)

これはこれで事故が起こりにくくてよいなと思う反面、「あのファイルどこに置いたっけ?」となったり、リポジトリをforkしつつ、オリジナルのリポジトリも手元に置いていた時に、混乱することが多々あった。
たぶん各々効率的なやり方があるとは思うんだけど、我々iOSアプリケーションエンジニアはpcを開いている間の90%はXcodeと戯れることとなると思うので、Xcodeに特化したものを作ろうと思った。
ということで、

  • .xcodeproj
  • .xcworkspace
  • .playground

といったXcodeで扱うであろうファイルを簡単に開いたり、リスト表示したりするツールを作った。

また、xcopen という名のツールはいくつか存在する https://github.com/search?utf8=✓&q=xcopen&type= が、自分が想定しているユースケースではないこと、メンテされていないことを鑑みて、この名前のツールの覇権を奪いに行くつもりで付けた。

所感

前に xccache-sweeper というCLIも作ったが、これはgolangで作った。
この時はSwift PM Package.swiftでかなり疲弊して、Swiftで作るのを断念したので、今回はSwiftで作るぞ!とやった。
ツール自体のロジックは、普段使い慣れているSwiftなので、非常に書きやすかった。
一方で、普段iOSアプリでは扱うことがないDarwinモジュール使ってみたりと、初めてのことも多々あり、新鮮だった。

謝辞

今回のツールを作るにあたり、岸川さんがSwift PM Utility ArgumentParserについて解説してくれた。
ありがとうございました! 🙇‍♂️

React Native + TypeScript環境を作る

週末に社内有志で集まって、React Native眺める会をした。
React Nativeをほとんどやったことがない人間たちが、あーでもないこーでもないと言いながら、TypeScriptを組み合わせてアプリを作ってみた。
React Nativeに興味はあったけど、1人で取り組もうというのはなかなか心理的障壁が高いので、集まってわいわいやってみる会は非常によかったし、ハマりを共有して、解決できるのもよかった。

この後にさらに面白いことをしたのだけど、そもそものTypeScript導入までで躓きがあったので、まずまとめておく。

React Nativeを導入、ビルド

$ brew install node watchman yarn

$ yarn global add react-native-cli

$ react-native init Xxxx
$ cd Xxxx

$ yarn install
$ yarn run react-native run-ios

TypeScriptを入れる

MicrosoftGitHubにおいている資料を参考にした。

github.com

ただ、若干変わっているので、参考にしつつ、現状に沿ったものにした。

$ mkdir src
$ mv index.js ./src
$ mv ./__tests__/ ./src/__tests__/

./index.js を編集

import './lib/index';

./src/index.js を編集

import { AppRegistry } from 'react-native';
import App from './App';

AppRegistry.registerComponent('Xxxx', () => App);

TypeScriptをinstall

$ yarn add typescript ts-jest @types/jest @types/react @types/react-native @types/react-test-renderer --dev
$ yarn tsc --init

./tsconfig.json を編集 (最終的に以下になった)

{
  "compilerOptions": {
    /* Basic Options */
    "target": "es6",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
    "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
    "lib": ["es6", "dom", "esnext.asynciterable"], /* Specify library files to be included in the compilation. */
    // "allowJs": true,                       /* Allow javascript files to be compiled. */
    // "checkJs": true,                       /* Report errors in .js files. */
    "jsx": "react-native",                    /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
    // "declaration": true,                   /* Generates corresponding '.d.ts' file. */
    "sourceMap": true,                        /* Generates corresponding '.map' file. */
    // "outFile": "./",                       /* Concatenate and emit output to single file. */
    "outDir": "./lib",                        /* Redirect output structure to the directory. */
    // "rootDir": "./",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
    // "removeComments": true,                /* Do not emit comments to output. */
    // "noEmit": true,                        /* Do not emit outputs. */
    // "importHelpers": true,                 /* Import emit helpers from 'tslib'. */
    // "downlevelIteration": true,            /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
    // "isolatedModules": true,               /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */

    /* Strict Type-Checking Options */
    "strict": true,                           /* Enable all strict type-checking options. */
    // "noImplicitAny": true,                 /* Raise error on expressions and declarations with an implied 'any' type. */
    // "strictNullChecks": true,              /* Enable strict null checks. */
    // "strictFunctionTypes": true,           /* Enable strict checking of function types. */
    // "strictPropertyInitialization": true,  /* Enable strict checking of property initialization in classes. */
    // "noImplicitThis": true,                /* Raise error on 'this' expressions with an implied 'any' type. */
    // "alwaysStrict": true,                  /* Parse in strict mode and emit "use strict" for each source file. */

    /* Additional Checks */
    // "noUnusedLocals": true,                /* Report errors on unused locals. */
    // "noUnusedParameters": true,            /* Report errors on unused parameters. */
    // "noImplicitReturns": true,             /* Report error when not all code paths in function return a value. */
    // "noFallthroughCasesInSwitch": true,    /* Report errors for fallthrough cases in switch statement. */

    /* Module Resolution Options */
    // "moduleResolution": "node",            /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
    // "baseUrl": "./",                       /* Base directory to resolve non-absolute module names. */
    // "paths": {},                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
    // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
    // "typeRoots": [],                       /* List of folders to include type definitions from. */
    // "types": [],                           /* Type declaration files to be included in compilation. */
    // "allowSyntheticDefaultImports": true,  /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
    "esModuleInterop": true                   /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
    // "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */

    /* Source Map Options */
    // "sourceRoot": "./",                    /* Specify the location where debugger should locate TypeScript files instead of source locations. */
    // "mapRoot": "./",                       /* Specify the location where debugger should locate map files instead of generated locations. */
    // "inlineSourceMap": true,               /* Emit a single file with source maps instead of having a separate file. */
    // "inlineSources": true,                 /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */

    /* Experimental Options */
    // "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */
    // "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
  },
  "include": ["./src/"]
}

./package.json のjestについての部分を以下に置き換える

...
"jest": {
    "preset": "react-native",
    "moduleFileExtensions": [
        "ts",
        "tsx",
        "js"
    ],
    "transform": {
        "^.+\\.(js)$": "<rootDir>/node_modules/babel-jest",
        "\\.(ts|tsx)$": "<rootDir>/node_modules/ts-jest/preprocessor.js"
    },
    "testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$",
    "testPathIgnorePatterns": [
        "\\.snap$",
        "<rootDir>/node_modules/",
        "<rootDir>/lib/"
    ],
    "cacheDirectory": ".jest/cache"
}

.js.tsx に置き換える

index.js 以外は、 .tsx 拡張子になる

App.js を元に、 ./src/ 下に App.tsx を作成する

$ mv App.js  ./src/App.tsx
$ vim ./src/App.tsx
// 元の `App.js` を参考にしつつ、TypeScript下で動くコード
import * as React from 'react';
import { Platform, StyleSheet, Text, View } from 'react-native';

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

type Props = {};
export default class App extends React.Component<Props> {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit App.js
        </Text>
        <Text style={styles.instructions}>
          {instructions}
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

testコードも拡張子を変更しておく

$ mv ./src/__test__/App.js ./src/__test__/App.tsx

TypeScript用のファイルを出力

$ yarn tsc

すると以下のようなエラーになった

yarn run v1.5.1
$ /Users/yutailang0119/Documents/workspace/github.com/ReactNative/Xxxx/node_modules/.bin/tsc
node_modules/@types/react-native/index.d.ts(8734,18): error TS2717: Subsequent property declarations must have the same type.  Property 'geolocation' must be of type 'Geolocation', but here has type 'GeolocationStatic'.
error An unexpected error occurred: "Command failed.
Exit code: 2
Command: sh
Arguments: -c /Users/yutailang0119/Documents/workspace/github.com/ReactNative/Xxxx/node_modules/.bin/tsc
Directory: /Users/yutailang0119/Documents/workspace/github.com/ReactNative/Xxxx
Output:
".
info If you think this is a bug, please open a bug report with the information provided in "/Users/yutailang0119/Documents/workspace/github.com/ReactNative/Xxxx/yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

よくわからないので "TS2717" で検索すると、 types/react-dom Same type error does not make sense · Issue #23644 · DefinitelyTyped/DefinitelyTyped · GitHub が見つかった。
yarn upgrade @types/react-dom をやっとけば直るとのことなので、腑に落ちてはないが、一旦これで回避。

$ yarn upgrade @types/react-dom
$ yarn tsc

すると ./lib 下にファイルが出力される。

TypeScript環境でReact Nativeをビルド

$ yarn run react-native run-ios

で表示に問題がなければ成功🎉

.gitignore に追記

Microsoftの指南書 には .gitignore に以下も追加するように書いてある。

# TypeScript
#
lib/

# Jest
#
.jest/

まとめ

TypeScriptを使えるようにするまでに結構作業が必要なので、Ansible等でできるようにするとよいんですかね。

おまけ

CodeFormatter

Prettier · Opinionated Code Formatter を使うことにした。

$ yarn add prettier --dev

.prettierrc に設定を書いて prettier --write filename とするとフォーマットをかけてくれる。

Scripts

package.json の scripts にnpm (yarn) のsubcommandとしてのエイリアスを作ることができる。
前述のprettierでのフォーマットも登録した。

  ...
  "scripts": {
    "start": "tsc --watch & node node_modules/react-native/local-cli/cli.js start",
    "android": "node_modules/.bin/react-native run-android",
    "ios": "node_modules/.bin/react-native run-ios",
    "test": "jest",
    "format": "prettier --write src/**/*.{ts,tsx}"
  },
  ...
$ yarn start
$ yarn ios
$ yarn format

等が使えるようになる

Watchman

$ yarn tsc --watch

としてビルドすると Enable Live Reload という選択肢が現れる。

f:id:yutailang0119:20180403020016p:plain

これをオンにすると、ファイルの書き換えを検知して、シミュレーターを更新してくれる。
実行を忘れそうなので、 yarn start に追加した。