続・WEB+DB PRESS Vol.102のReact Native記事第2章を2018年1月の最新バージョンで実装してみた話とか

どーも、へっぽこフロントエンド開発者です。

 

今日はこの間の記事の続き。

kdnakt.hatenablog.com

 

引き続き、第2章「React Nativeの基本」を写経しつつ勉強する。

 

 

[ES6]

React NativeはES6で書ける、とあるが、本章では具体的な実装はなさそう。

以前仕事でフロントエンドを実装した時は、古いIE対応の必要があったので(IE9とか)、ES6はほとんど初心者なので、助かるといえば助かる。とはいえいつまでもできませんじゃ仕方ないので、記事中でオススメされていた以下のサイトを開き、Trelloにタスクを作成して次に進む。いつかブログ書く。

babeljs.io

 

[Flowによる型チェック]

Flowという静的型チェックの機能を追加してくれるライブラリがあるのか。React Native同様Facebook製だが、react-native initコマンドだけでは自動的に依存ライブラリとして追加されないらしい。謎。

npm list --depth 0を実行して確認して見ると、確かにflowと名のつくライブラリはない。

しかし、ls -aで確認すると.flowconfigというファイルは存在した。マジで謎。最初っからインストールしておいてくれればいいのに。

 

flow.org

公式サイトを確認しつつ、npm install --save-dev flow-binで懲りずに最新版をインストールしていく。

flow-bin@0.62.0がインストールされた。よしよし。

 

Flowを実行するには、`(npm bin)`/flowというコマンドを実行すれば良いらしい。`(npm bin)`って何だろう。

npm binとターミナルで実行してみると、/path/to/WebdbReactNativeExample/node_modules/.binと表示された。

プロジェクトのnode_modules/.binディレクトリにインストールされたコマンドを呼び出せるようだ。やっぱり写経は勉強になるなあ。

ググると、$(npm bin)でも同じことができるとのこと。なるほどなるほど。

 

早速$(npm bin)/flowのコマンドを実行する。エラー。

.flowconfig:45 Unsupported option specified! (unsafe.enable_getters_and_setters)

 

おや、.flowconfigをいじれとは記事に書いてなかったが、と思い記事を読み直すと、.flowconfigに記載されたバージョンと同じバージョンのFlowが必要とのこと。無念。

.flowconfigファイルを確認すると、末尾に以下の記述が。

[version]
^0.57.0 

 

semverの表記を覚えてないので、公式サイトをチェックする。

docs.npmjs.com

キャレット(^)が付いている場合は、一番左側のゼロじゃない数字が変わらなければOK、と。つまり、^0.57.0という表記なので、0.57.0以上、0.58.0未満ならば対応しているということになる。

今回インストールした最新版は0.62.0だったから全然駄目だった。

開発元はFlowもReact Nativeも同じだけど、React Nativeがデフォルトで要求するのが少し前のバージョンのFlowってことは、Flowの機能開発はガンガン先に進んでて、React Nativeは安定版を利用してるということなのだろう。きっとそのうちデフォルトで0.62.0に対応したReact Nativeが使えるようになるに違いない。 

にしても、プロジェクト作成時にデフォルトでインストールしてくれれば良いのに(二回目)。

 

というわけで、npm uninstall --save-dev flow-binでアンインストールする。

単純にnpm install --save-dev flow-bin@0.57.0で良いかとも思ったが、念のため利用可能なバージョンを調べてみる。

npm info flow-bin versionsの実行結果は以下の通り。

[ '0.1.0',

'0.56.0',
'0.57.1',
'0.57.2',
'0.57.3',
'0.58.0',
'0.59.0',
'0.60.0',
'0.60.1',
'0.61.0',
'0.62.0' ]

0.57.0というちょうど良いバージョンは無さそう。利用可能な最新バージョンである0.57.3をインストールして、flowコマンドを実行すると先ほどのエラーは出ない。うまく行ったようだ。

f:id:kidani_a:20180105224416p:plain

しかし、型チェックエラー。これは記事に記載の通り。

 

文字列にしていた"2"を数値の2に修正して、再度flowコマンドを実行すると、No errors!と出力された。

 

[最新版Flow(0.62.0)を試してみる]

さて、ところでこのエラーだ。 

.flowconfig:45 Unsupported option specified! (unsafe.enable_getters_and_setters)

 

npm uninstall --save-dev flow-bin0.57.3をアンインストールして、 npm install --save-dev flow-binで再び最新版をインストールする。

flowコマンドを実行するとやはり同じエラーが出る。

 

45行目に問題があるらしい。というわけで.flowconfigファイルを確認してみる。

unsafe.enable_getters_and_setters=true

確かに問題のオプションが指定されている。

以下のようにコメントアウトして、

; unsafe.enable_getters_and_setters=true

flowを実行してみる。

f:id:kidani_a:20180106114305p:plain

あらら。指定されてるバージョンと違うからFlowサーバを起動できない、とのこと。残念だけど指定されているバージョン以外では動かせない模様。

 

[まとめ] 

次回に続きます。

大した量じゃないけど、写経したコードはGithubで公開しています。 

github.com

 

[2018/01/07追記]

続きを書いた。 

kdnakt.hatenablog.com