react-navigationでnestした特定のスクリーンでDrawerのgestureを一時的にオフにしたい

react-navigationを使って様々な組み方をすると思うんだけど、よくあるのがネストして複雑なnavigationを作るという感じ。
stackNavigatorをネストしまくるとか、TabNavigatorの中にStackNavigatorとか、DrawerNavigatorの中にStackNavigatorとか。

で、今回はDrawerNavigatorについて。
スワイプしたらDrawerが出てきてしまうので、スワイプで戻りたい時にも出てきてしまう。
ということで今日はDrawerのスワイプを一時的にオフにするお話をば。

electronでprisma使うときに気をつけておきましょう的なお話

create-react-app + electron + ffmpeg static + prismaで以前作った動画エンコードアプリを作り直しているんだけど、二つ大きな問題が出てきた。
1つはQuery engine binary for current platform "darwin"で、npx prisma generateしたときにnode_modules/.prisma/clientに入ってるはずのquery-engine-darwinが見つからないよっていう問題。
もう1つは上記問題を解決したあと本番パッケージングをして出てきたError: ENOTDIR: not a directory, chmod 'path/to/app/Contents/Resources/app.asar/build/query-engine-darwin'っていうエラー。

ということで今日はそれらの問題が出てくる理由と解決方法をば。 cp file asarをしない

create-react-app v4 + React v17 + ESLint v7 + TypeScriptでeslint-config-airbnbを使っていると、d.ts読み込めてるのにerror "Hoge" is not definedって感じでno-undefエラーが出てきてしまう的なお話

今までcreate-react-appのv3系を使っていて、えいやっていう気持ちでv4にアップしたので、内部的に入っていたESLintもついに7系になりって感じ。
だったんだけど、今までd.tsで通っていた型がESLintで通らなくなるというか、VSCode上ではちゃんと引っ張ってきてるのにno-undefエラーが出てしまったという。

ということで今日はそれを解決する方法をば。

Reactで綺麗に無限スクロールを実現するためにIntersectionObserverを使いましょう的なお話

色々と実装していると、なんだかんだで無限スクロールを実装したいことって多々あるわけで。
もちろん単純なページングを実装してもいいのだけど、React使ってSPA的なことを書いているとページングよりも無限スクロールで配列にガンガン後ろに足していくっていう方が楽だったりもするわけで。
その際にもっと見るボタンをユーザが押して新しくデータを取って来て云々をしてもいいけどやっぱ流れるようにみたいわけで。

ってことでIntersectionObserverを使うとそこらへんの実装が簡単になるので、それをhooks化して使っちゃおう的なお話をば。

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

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

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みたいなものを作るには的なお話をば。

react nativeでcomponentのimportを相対パスじゃなくて絶対パスで記述したい的なお話

Web用のreactで書いた内容はこちら
とりあえずこれと同じような感じで、基本的に階層が深くなるほど相対パスを記述するのが面倒なわけで。
特に階層の深さを変更をしたときとか。

ってなわけで今日はこれで簡単にかけますよ的なみたいなお話をば。

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

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

ReactのStateless Functional Componentsでrefを関数で定義して、親のcomponentに渡してrefとして扱ってバリデーションする的なお話

「ReactのStateless Functional Componentsでrefの代わりにonChangeでstateを使いましょう的なお話」を書いたけど、refを使うやり方を考えたので今日はそれの解説をば。
ちなみに前回と同じくお問い合わせフォームに関するものなので、そちらと見比べてもらえるとわかりやすいかと。
onChangeとかstateが減るのでこちらの方がみやすくていいんじゃないかと。

ReactのStateless Functional Componentsでrefの代わりにonChangeでstateを使いましょう的なお話

ReactでStateless Functional Componentsを使うと気持ち綺麗にかけるよねという感じ。
特にお問い合わせフォームでメールを送信したあとで画面を切り替えるときに、
jsx内で{}を使って条件分けするにも長いと見づらくなるわけで。
なのでStateless Functional Componentsを使うことによって綺麗にしましょうと。
ただその場合はrefが使えないのでじゃあどうしようという。

ということでrefの代わりにstateとonChangeを使うことで代替できるよ的なお話。

ReactでclassNameをサクッと動的に変化させる方法的なお話

ローディング中とかでクラス名を変えたいときがあるわけだけれども。
そういう時に色々と面倒な感じの書き方は嫌だよね的な。

ということで今日はそれを一行で書きましょう的な。

React-Reduxを使っていてactionが複数ある場合の扱いが面倒だし、containerで都度importやdispatchするのが面倒な場合の対処的なお話

reduxを使うとかなり便利なわけで。
ただサンプルだとか色々と公開されているのはactionが複数とかあまり考慮されていないものが多く。
そうなるとactionが複数の場合はどうすればいいんだとなったりするよね的な。

とりあえずはcontainerでactionを個別にimportしてdispatchをする手法が一つ。
次にそもそもcontainerでconnectする際にmapDispathToPropsを記述しないとthis.dispatchが渡されるので、
componentでactionを個別にimportしてdispatch(hoge())みたいにやる方法がある。

どっちもactionを編集したら、containerなりcomponentなりにimportを反映させないといけないから面倒なわけで。
かといってreducerみたいにやろうにも、bindActionCreators()はobjectを再帰的にみるわけではないという。

ということで今日はとりあえず面倒なactionsをそもそも最終的に一つにまとめちゃおう的なお話をば。

React-Reduxを使ったWebアプリをサーバサイドレンダリング(SSR)するには、こういう風にしたらいいんじゃないか的なお話

React-Reduxを使った開発でのディレクトリ構成をどうしたらいいのか的なことから、こうやって組んだらいいんじゃないか的なお話ということで、前回つらつらと書いたわけだけど。
これはクライアント側のjs単体で動くわけだから細かいことを気にする必要がなかったからよかったが、SNSにシェアしたときにOGPが設定されないと困るわけで。
というのもfacebookやtwitterのbotがjsをレンダリングすることができないから。
ちなみにgoogleはちゃんとjsをレンダリングしてクローリングしてくれるからSEOとかは問題ないわけだけど、たまにSEOのためにSSRをしないとって言っている人がいるのは個人的に謎。

ということで今日はOGPに対応するためのサーバサイドレンダリング(SSR)をするにはこういう感じがいいよ的なお話をば。

Immutable.jsを使ってReactで入れ子になってるstate更新をするとかそういったときに楽しよう的なお話

Reactを使っていると頻繁に発生するstateの更新。
もちろん単純にthis.setState(obj)とかやってあげればいいわけだけど、
objが入れ子になっている中での深い階層の一部を変更したいとかそういう場合はかなり面倒。

ということで今日はImmutable.jsを使えばこれはかなり楽になるよというお話をば。

Reactで開発してるときに、require(import)を相対パスで書くのが面倒だから絶対パスで書くには的なお話

Reactを使ってるとrequire(import)を多用するわけで。
ただ面倒なのが相対パスで書くっていう感じのこと。
これをやるとComponentが深いところにあるとかそういうときに、../../../とかかなり書かないといけないっていう。

ということで今日はこの相対パスを絶対パスで書くには的なお話をば。
ちなみに前提としてwebpackを使っていることが条件。

React-Reduxを使った開発でのディレクトリ構成をどうしたらいいのか的なことから、こうやって組んだらいいんじゃないか的なお話

React-Reduxを使うとすっごく便利なわけで。
ただ問題となるのがディレクトリ構成をどうしようかと。
もちろん公式での書き方とかあったりするけれども、github上で他の人がアップしているexampleとか見ると若干違うような気がするとか。

人それぞれいろんな書き方があるのはわかるけれども、なんていうか気持ち悪いというかなんというか。
ってことで今回はどこらへんに注目しつつ、自分としてはこうやって構成した方が気持ちいいんじゃないかというお話をば。

ReactでModalを使いたいときに、body直下にModalをappendするみたいに、body直下にcomponentをおきたい的なお話

ReactでModalを使おうと思った時に選択肢はいくつかあるわけで。
例えばReact BootstrapのModalとかMaterial UIのDialogとか。
けど実際こんなにたくさんcomponentを使うつもりはないんだよなぁってときはmodal単体のcomponentを使うということがある。
ちなみに実際に自分が使っているのはBoronっていうModal。
軽量だしそもそもそんなにオプションがないからすごく使いやすいしっていう。

けどこのBoronだけど面倒なことにbody直下にModalが生成されるわけではなく、componentを入れた位置にModalが生成される。
気持ち悪くないといえば気持ち悪くないけど、Modalみたいなものはbody直下においた方が気持ちいいよねっていう。

ということで今日はどうやってbody直下にModalを置くか、それを使うとどういうことができるか的なお話をば。