2019年9月11日水曜日

eslintルールのreact-hooks/exhaustive-depsを設定していると無限ループに陥った的なお話

  • このエントリーをはてなブックマークに追加

hooksは便利というかいい感じなわけで。
useStateとかuseCallbackとか色々とあるわけで。
その中で公式的にESLint入れるならばreact-hooks/exhaustive-depsとreact-hooks/rules-of-hooksを入れておけって言ってるんだけど、react-hooks/exhaustive-depsが悪さをしていたっていう。

ということで今日はreact-hooks/exhaustive-depsが悪さをするパターン的なお話をば。

2019年9月9日月曜日

react-nativeプロジェクトでSplash Screenの調整をしたい的なお話

  • このエントリーをはてなブックマークに追加

React Nativeでアプリを書いていると、スプラッシュスクリーンが終わって画面が表示されるまでに白のブランクスクリーンが一瞬出てきてしまう。
ちなみにExpoでも出てくるんだけどもExpoではSplashというAPIがあって、Splashスクリーンを閉じるタイミングを調整できたりする。
けどReact Nativeではreact-native-splash-screenなどのパッケージを入れないといけないんだけど、これがreact-native linkだけで済むならばいいんだけどそういうわけにもいかなかったりするわけで。
個人的にはなるべくXcodeはいじりたくないという信念があるんだけどこればかりはいかんせん難しかったり。

でもまぁデザイン次第ではあるんだけどどうにかこれを解決する方法を見つけた。
ということで今日はデザイン次第ではあるんだけどSplash Screenの調整をサクッとやる方法的なお話をば。

2019年9月6日金曜日

React Nativeプロジェクトのリポジトリルートにあるindex.jsはindex.tsにしてはいけないお話

  • このエントリーをはてなブックマークに追加

まんまタイトル通り。
これにしてしまうとビルドできない。
ちなみにリポジトリルートにあるindex.jsってAppRegistry.registerComponent(appName, () => App);みたいにするやつ。

というのもビルド(アーカイブ)するときにCLIだかシェルスクリプトが走るんだけど、それがindex.jsを指定しているから。
index.tsにしてもシミュレータではちゃんと走るんですけどという感じではあるんだけど、シミュレータはビルドしていないから。
なんでビルドできないんだって謎だったんだけどこういうオチ。
TypeScript化するのはいいんだけどできないファイルもあるよね的なみたいな。

2019年8月30日金曜日

BitriseでアプリのバージョンとビルドナンバーをXcodeとかAndroid Studioを使わずに簡単に管理するための方法的なお話

  • このエントリーをはてなブックマークに追加

Birtriseはとても便利なCI/CDなわけで。
アプリをビルドしてadhoc配布もしてくれるわ、App Store上にアップロードもしてくれるわ、Google Play Storeにもアップしてくれるわといいことが多い。
もちろんアプリビルドとかがあると無料プランでは収まるわけがないから課金をせざるをえないんだけど、それでも十分すぎるほど楽になる感じ。

けどまぁ普通にやっているとアプリのバージョンとかビルドナンバーはXcodeを開いたりAndroid Studioを開いたりして管理しないといけなくかなり面倒。
もちろんBitriseのステップでビルドナンバーを埋め込んでくれるステップがあったりするんだけど、それはBitriseのジョブIDに準拠する形になるのでバージョンが飛んでしまうのが個人的にはあまり好きじゃなく。
かといって定数としていくつとか入れるのも面倒だし、Tagおよびリリースを発行したタイミングをトリガーにして、そのタグ名の中にビルドナンバーも埋め込んで、さらにバージョンも埋め込んじゃうっていう強引な方法もあるけど、それだとAdhoc配信するときとかどうするんだ?っていう感じでもあったり。

ということで今日はバージョンやビルドナンバーをなるべく簡単に管理する方法的なお話をば。

2019年8月29日木曜日

react nativeで環境別にAPI_URLを出し分けしたいときにはbabel-plugin-transform-inline-environment-variablesを使えばネイティブをいじらずに簡単にできるよ的なお話

  • このエントリーをはてなブックマークに追加

react-nativeでアプリ開発をしているときに直面するconfig的な定数の出し分け。
APIなど環境ごとに変わらないような簡単なアプリでは必要ないんだけど、がっつりと作り込んだアプリの場合に直面するやつ。
Expoだとapp.jsonのextra部分に好きなkey-valueを埋め込むことができ、buildやpublish時に--configでapp.jsonを指定することができるので何も深く考える必要がなかったり。

ちなみにreact native 環境変数とかで調べると大体の記事がreact-native-configで、次点でreact-native-dotenvという感じになる。
react-native-configはネイティブ部分にも環境変数を渡したいとかそういうときになるんだろうけど、ぶっちゃけそんな使うことある?って思ってしまう。
react-native linkするのも面倒だしましてやgradleをいじったりもかなり面倒だったり。
react-native-dotenvは.envとして中にkey=value形式で記述した環境変数をimport {Hoge} from 'react-native-dotenv'みたいな感じで呼び出すことができるんだけど、個人的に定数に関してはjsonで管理したいなぁっていう気持ちがあったり。
それに複数値を環境変数として定義するよりも、1つのAPP_ENVみたいな変数を見て読み込むファイルを変更する方がいいんじゃないかと。

ということで今日は簡単に環境ごとに読み込む定数を変更したい的なお話をば。

2019年8月28日水曜日

generator-rn-toolboxを使ってReact Nativeアプリのアイコンやスプラッシュスクリーンを簡単に変更しましょう的なお話

  • このエントリーをはてなブックマークに追加

Expoを使わない素のReact Nativeでアプリを開発していると避けては通れないXcodeやAndroid Studio。
面倒なのがネイティブ部分のローカライズやアイコンなどのアセット類の管理。
特にアイコンなどのアセット類に関しては入れる画像の数が大量だったりサイズいっぱい用意しないとで面倒だったりするわけで。

ということで今日はそれを簡単に行うためのツールの紹介をば。

2019年8月17日土曜日

react-native-unimodulesでも@expo/vector-iconsを使いたい的なお話

  • このエントリーをはてなブックマークに追加

素のreact-nativeでアイコンフォントを使いたい場合はreact-native-vector-iconsを使いたいわけで。
Expoを使っている際は@expo/vector-iconsを使えばいいわけで。
react-native-unimodulesにはもちろん@expo/vector-iconsが入っていないからreact-native-vector-iconsを使わないといけないんだけど、podだったりjava部分だったりが汚れるしっていうのもあってあまり使いたくはなかったりするわけで。
expoのドキュメントにはbare workflow(react-native-unimodulesを使ったreact-native)で@expo/vector-iconsを使っている方法がなかったけども実は使えたりする的な。
ということで今日はreact-native-unimodulesでも@expo/vector-iconsを使うためのお話をば。

2019年7月31日水曜日

expo initで出てくるbare-minimum(react-native-unimodules)のreact-nativeのバージョンをv0.59.8 -> v0.60.4にしたお話

  • このエントリーをはてなブックマークに追加

Expoチームが開発してるreact-native-unimodules(bare workflow)というものがあるんだけど、これは素のreact-nativeでExpoのコンポーネントを使えるようにしちゃおう的なパッケージだったり。
で、これの何がすごいってもちろんExpoの便利なコンポーネントを使えるのもそうなんだけど、ExpoKitと違ってreact-nativeのバージョンが自由に使えるということ。
なので最新のreact-nativeもいつでも使える的な。

ということで今日はexpo init -> bare-minimum (react-native-unimodules)したときのプロジェクトを最新版のreact-nativeで使うには的なお話をば。

2019年7月30日火曜日

Expo v34でAndroid 64bitサポートとかiOS13向けとかBare workflowでもExpo Client使えるよ的なお話

  • このエントリーをはてなブックマークに追加

Expoがv34にアップデートした。
今回は前回から2ヶ月以内とかなり早めなアップデート。
特にAndroidの64ビットサポートがやっぱメインとなる内容だよね的な。

Expo SDK 34 is now available

ということで今日は変更点的なお話をば。

Macでファイル文字コードをUTF-8からSJISに変換したい的なお話

  • このエントリーをはてなブックマークに追加

この令和の時代になっても、いまだにSJISのファイルを作成しないといけないことはあるわけで。
例えばデータベースに入っているデータをSJISとしてというならば、PHPなりなんなりで変換してダウンロードさせればいいわけなんだけど。
そうじゃなく手元にあるUTF-8のファイルをSJISに変換しないということもある的な。

ということで今日はMacのコマンドだけでUTF-8ファイルをSJISに変換するお話をば。

Adsense