npm packageを作っていてタグをつけたりなんだりしたい的なお話

npm packageを作成している場合のみにしかいらない話ではあるんだけども。
npm packageはlatestがついてるとそれをインストール時にとってくるんだけど、開発している最中に最新版をアップデートしたくはないわけで。
そういう場合はbetaなりのタグをつけてあげればいい。
そして作り終わったら外してlatestをつけてあげればいい。

ということで今日はそれのやり方的なお話をば。

firebase functionsでDate()使ったときに9時間ずれてしまうのを直す的なお話

firebase functionsがアップされるサーバがUSのために9時間ずれてしまう的な。

ということで今日はそれを直す方法的なお話をば。

firebase functionsのhttps以外をローカルでテストするには的なお話

firebase functions使うとちょっとしたものを公開するのにすごく便利なわけで。
それにhttpsだけではなくpub/subなんていうのもあったりする。
このpub/subを使うとcronみたいなスケジュール的なことができたり。

ってことで今日はこのpubsubのテストをするには的なお話をば。

JavaScriptで書いてたreact-nativeのnpm packageをTypeScriptで書き直したのでその手順的なお話

たまに作っているnpm package。
JavaScriptで書いてたんだけど最近TypeScriptがんばりはじめてるし、TypeScriptで書き直してみようかな〜って思ってやってみた。
ちなみに今回修正したのはreact-native-store-versionっていうパッケージで、現在のアプリバージョンとストアで公開されてるアプリバージョンを比較して、それがnewなのかoldなのかequalなのかを判断してくれる感じ。

ということで今日はnpm packageのTypeScript化に伴う手順的なお話をば。

無限スクロールというか無限ページングを実施するためのjavascriptというかreactの書き方的なお話

jQueryを使うような記事が多いので、使わないような書き方をば。
ちなみに前提としてReact環境下だけど。

package.jsonのパッケージで気をつけておきたいバージョン記法のキャレット(^)とチルダ(~)的なお話

reactとかもちろんpackage.jsonでパッケージの管理をしているわけで。
そこで気をつけないといけないのがdependenciesとかdevDependenciesとか色々とあるわけだけども。
実は一番気をつけないといけないのがバージョンの指定方法。

現在babelの6とか7が入り乱れてる戦国時代的なことになっていて、webpackもだしparcelもだし色んなところでその煽りを食らっていたり。
特にparcelでその煽りを食らってしまい、なおかつこのバージョン指定方法でミスっていたために問題が発生してしまった的な。
ということで今日はバージョン記法についてのお話をば。

React Nativeでファイルアップロードをするときに何%みたいな進行状態を出したい的なお話

画像とか動画とかファイルアップロードするときに進行具合がほしいわけで。
今何%ぐらいみたいなやつ。
普通のfetchだとできないけどxhrだとできるわけで。

ということで今日はそのお話をば。

firebaseのfirestoreで文字列のプレフィックス検索(前方一致検索)を行いたい的なお話し

firebaseはなかなか便利なもので。
中規模程度までのもので、SNSとかじゃないリレーションがあまり発生しないアプリとかサービスだったらオススメ的な。
とりあえずサーバサイドを書かずともいろんなのが使えるサービスだよ的な。

で、今日はそんなfirebaseでfirestoreを使っているんだけども。
firestoreのドキュメントを見ていると検索をするときに文字列型なのに">="とか使っているからどういうこっちゃと。
これの意味がわからないんだけど試してみるとどうやら文字が検索できるっぽい。
色々と調べたり試してみるとプレフィックス検索ができるみたい。

てなわけで今日はfirestoreにて文字列のプレフィックス検索を行う的なお話しをば。

React Native(Expo)を使って、Twitterのいいねを検索するためのアプリを作ったので諸々晒す的なお話

Twitterの公式検索の機能ではいいねを検索する機能はないわけで。
過去に自分がどういういいねをしていたのか、またいいねしたんだけどいつのツイートをいいねしたんだっけ？みたいなことってあるわけで。
そんなときに検索ができるアプリがあったらいいな〜と思って作ってみた。

ちなみにReact NativeでExpoを使って実装。
さらに自分が作ったreact-native-simple-twitterを使っている。
ということで今日はExpoのどういうコンポーネントやらを使ってたり、npmのパッケージを使っているかどうか的なお話をば。

react-navigationをv1からv2に更新した的なお話

react-navigationをv1からv2へとバージョンアップした的なお話。
v1からv2に移行するにあたって色々と変更する点があったので、それらを雑多なメモ的な感じで。

react-nativeでWebView内のCookieをjsのコードのみで削除するには的なお話

そもそもWebViewのCookieを削除する場面ってある？と思ったんだけども、最近instagramのAPIを簡単に扱うためのライブラリを作った。
watanabeyu/react-native-simple-instagram
これはまぁ以前作ったwatanabeyu/react-native-simple-twitterとほぼ同じ的なもので、
とりあえずreact-native linkとか必要なしにjsだけでinstagramのAPIを叩けるようにしましょう的な。
Twitterと違ってInstagramのAPIはかなり実装は楽だった。

ただ問題になるのはAPIを使うためにTwitterもだしInstagramもだけど、ログインをする必要がある。
Twitterの場合は都度このアカウントでよいですか？みたいな表示を出してくれるけど、Instagramの場合はそういうアラートも出ないのでアカウントの切り替えが出来ない。
Cookieが残っているからというのが理由なんだけど、WebViewのメソッドだったりでCookieを削除するようなものはなかったりする。
ちなみにiOSだったらNSHTTPCookieStorageに保存されているのでここをいじらなければいけない。
ということで今日はnativeをbridgeしなくてもWebViewのCookieを削除するには的なお話をば。

React Nativeでreact-native-swiperを使わずに、indexが変更された際に何かしたい的なお話

React Nativeで代表的なライブラリであるreact-native-swiper。
簡単にcarouselというかpagerみたいなことができるんだけども、厄介なことにchildrenの要素が増えたときにactiveIndexが0に変更されてしまう。
ちなみにScrollViewだとそういうpagerみたいなのを行うのは少々手間が折れる部分があるのでいかんせんし難いところではあるが、
FlatListでonViewableItemsChangedを使うことで実は対応できる。
さらにonViewableItemsChangedを使うことで見えてないViewを一時的に消すとかそういうこともできるわけで。

ということで今日はそのお話をば。

reactjsでes6で作ったnpmパッケージはimportできないので要注意的なお話

タイトル通り。
React Nativeだとそんなことないような気がするんだけど、reactjsだとダメっていう。
class propertiesとかそういうところとかで引っかかる。
ちなみにnpmパッケージじゃなくて自分でes6のcomponentを作ってimportをしたときはbabelの設定をちゃんとしていればOK的な。

とりあえず理由はわからないわけではないんだけど、面倒なので、今日はちゃんとnpm publishする前に確認をしよう的なお話をば。

React16.3.0のざっくりまとめ的なお話

発表されたので自分用に簡単なまとめ。

electron + parcel + react + react-router-dom + node-sass + reduxなボイラープレートを作った的なお話

最近管理画面を作るにしても公開する必要ってあるんだっけ？みたいな感じに思ってて。
特に自分たちしか見ることがないのであればわざわざwebで公開する必要ないよね的な。
ってことでMacアプリ作っちゃえばいいじゃん的な。
そうなるとswiftで書いても面倒だしな…ってことでelectronを使うことに。
特に最近React Nativeばかり書いているからかなりモダンな記法ばかりやってたのもあり、
それにwebpackで設定書くのも面倒だなぁと思ってparcelを使おうかと。

ってことでと今日はparcel使いつつのelectronでbabelもりもりなお話をば。

componentWillMount()みたいなオリジナルイベントをcomponentに持たせるにはHOC使うと便利的なお話

ReactとかReact Nativeで開発をしているときに、同じメソッドを書いて云々とかあるわけで。
そんなときにはHOC(Higher Order Components)を使うと大体解決するわけで。
簡単な例としてはどのページにもローディングを導入したいみたいな。
もちろんcomponentWillMountとcomponentDidMountでつらつら書けばいいけど、
それを全componentに適用するとなると骨が折れるんだけど、HOC使えば一発的な。
アニメーションの中身を変えたいときも楽ちん的な。

さらにそれだけではなく、500msたったら各component内のとあることをしていきたいとかあるかもしれない。
けどHOCで処理をやっているので、各component毎に調整するのは面倒だったりするわけで。
そういうときに各component内にwillMountみたいなイベントハンドラが作れると、
HOCで定めたタイミングで各component内で任意のタイミングでとあることができるようになるわけで。

ってなわけで前置きが長くなったけど、今日はHOCを使うかつwillMountみたいなものを作るには的なお話をば。

expoでdetachしてXcodeとかAndroid Studioとかでビルドしてみたりするには的なお話。

一般的にreact nativeで開発をしていると、
iosとかandroidとかっていうフォルダがあってそれぞれの中にネイティブのコードがあったりするんだけど。
expoは煩わしいことを無くしてくれる優秀なやつだから、そういったものも全て吸収してなかったりする。
けど既存のアプリをreact nativeで書き直すとかの場合だと、各moduleをいかしつつブリッジしつつで開発をしたい場合もあって通常のreact nativeに戻したいときもある。

というわけで今日はdetachしてXcodeだったりAndroid Studioでビルドするまで的なお話をば。

react nativeの環境をexpoを利用して作成し、エミュレータで走らせつつ、ビルドして実機に入れるには的なお話

最近流行ってるだかよくわからないReact Native。
むしろ手を出しているところが少ないという印象というかなんというか。
けどiOSとAndroid両方作れるし、Javascript Bundleだしで意外と高速だし便利だし。

とりあえず環境を作るのが面倒とか色々とあるんだけど、
実はexpoでやってしまえば意外と簡単だよっていう感じではあったりする。

ってなわけで今日はexpoの導入からビルドおよびiOSのデプロイまで的なお話をば。

Reactでビルドしたファイルのサイズが大き過ぎるのを少しでも小さくしたい的なお話

wordpressのサイトをあえてのReact + WP Rest APIで書いているんだけど、
React + Webpackでビルドした際に、ファイルサイズがすごく大きくなってしまうことがある。
いくつか原因があるので、今日はそれらを解決して少しでもファイルサイズを小さくするには的なお話をば。

jsでfetchを使うときにContent-Typeに気をつけましょう的なお話

サーバと通信するためにはjQueryのAjaxを使えばいいんだけど、
fetchっていうものがあったりして、reactとか使ってるとfetchとか使いたくなってくる。
というかむしろjQueryを使わなくなるわけなんだけど。

で、そのfetchを使ってPOSTする時にサーバ側でPOSTデータを受け取れないってことがあった。
ということで今日はそのお話をば。