さて、第３章「天気予報アプリを作ろう」のお時間です。
第２章の写経は一通り完了しました。
[Fetch API？]
どうやら、fetch APIというのを使って通信を行い、データを取得するらしい。
へっぽこフロントエンド開発者なので、ブラウザAPIとか全然キャッチアップできてない。写経を始める前にちょっと調べてみた。
- 実験段階の機能
Internet Explorerは非対応 （2018年1月時点）XMLHttpRequestの代わりになる
ということらしい。なるほどなるほど。
仕事だとIE対応必須だったりする案件が多いので、知らないのも仕方ない（違）。
[写経開始直後につまずく]
事前準備としてOpenWeatherMapのユーザー登録を済ませてAPIキーを取得してから、例によってreact-native init Webdb102Weatherのコマンドでスタートする。
src/CurrentWeather.js src/WeatherService.js src/WeatherScreen.js
を一から写経し、App.jsからWeatherScreenを呼び出すように修正する。
この状態でシミュレータなどで確認すると、デバッガに通信結果が表示される筈、ということで、シミュレータを起動してみる。
？！
画面には何も表示されないどころか、でかでかとスタックトレースが表示されるわ、そもそもデバッガ（Chrome）も起動しないわで泣きそうになる。
最新版だからかと思ったが、第２章を写経した時とReact Nativeのバージョンは変わらず0.52.0。
そして第２章を写経したプロジェクトをreact-native run-iosで起動しようとすると同じエラーが表示される。これは一体……。
エラーメッセージで検索してみると、少し前の情報がヒットする。
ネットワークプロキシを利用してると発生するとか、Chromeのウィンドウが２つ開いてるとダメとか、macを再起動しろとか書いてある。
で、たまたまそのタイミングでmacOS 10.3.2追加アップデートが来ていたので、再起動がてらOSを更新してみる。と、デバッガが表示され、コンソールに通信結果のログが出力された。
OpenWeatherMapのAPIとの通信は上手くいったらしい。
[やはり画面開発でもつまずく]
画面開発というほどでもないが、UIに変更を加えていく。
まずは取得したデータをシンプルに画面に表示する。
ステータスバーにかぶって表示されるが気にするな、と記事中のありがたいお言葉を信じ先を急ぐ。
スタイルを適用し、Imageコンポーネントで画像を表示したところ。ここから、予報データを表示する機能を追加していく。
天気予報オブジェクト（WeatherForecast.js）は残念ながら記事中に記載がなかったので、Githubのソースを見ながら写経する。
これを取得するメソッドをWeatherService.jsに追加しろ、とある。こちらもGithubを参照のこと、と書かれていたが、自前で実装を試みる。適当に実装して、取得したデータを画面に描画するために新たなコンポーネントForecastListItem.jsの写経を行う。WeatherScreen.jsを修正して写経したばかりのForecastListItemコンポーネントを呼び出し、シミュレータの画面を確認する。
どうやら写経に漏れがあったらしい。Componentをimportする。
Raw text cannot be used outside of a <Text> tag.のメッセージでググるが、どうやら何か不正な文字列が<Text>タグで囲まれていないのが原因らしい。
後から思えば普通にgrepすれば良かったのだが、AtomのShow Invisiblesオプションを有効にして、目grepを行う。
見つけた！
どうやら全角スペースが紛れ込んでしまったらしい。写経あるあるだ。
早速半角スペースに置き換えてみる。
無事にリストが表示された！
[まとめ]
大した量のコードを書かなくても変化が大きいのでやはりフロントエンド開発は楽しい。
写経結果はこちら。
[2018/01/23追記]
続きを書いた。
