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化して使っちゃおう的なお話をば。

TypeScriptでd.ts内でimportすると外部でその型が読み込めなくなるのを解決した的なお話

タイトルからするとよくわかりづらいんだけど。
React Native x TypeScriptで型をtypesディレクトリの中につらつらと書く感じで自分は開発してる。
そうするとどこでもtype Hogeを読み出すことができるんだけど、d.ts内でimport { FirebaseFirestoreTypes } from '@react-native-firebase/firestore';みたいにすると途端にHogeが読み出せなくなってしまう的な。

ということで今日はそれを解決するには的なお話をば。

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

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

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

firebase clound functionsをTypeScript + webpackでalias(絶対パス)付きでビルドしてみる的なお話

firebaseが昨今注目されまくってて色々と情報があるわけで。
まぁAWSでいうlambdaみたいなものなんだけどこれがまた便利だったりするわけで。
ということでcron的な感じでts-nodeを使って色々と回してたTypeScript製のやつをfirebaseに載せちゃおうと思ったりなんだり。

tscでビルドするなりfirebase deployするなり色々と面倒な工程が増えたわけだけどもそれでも十分得るものは大きいなぁと。
けどその中で特に面倒だったのがtsconfig.jsonで絶対パスとしてファイルを読み込むために設定していたpathsがビルドされると自動で変換されないっていう。

ということで今日は絶対パスで記述していたtsファイルをビルドしてfirebase serveするまで的なお話をば。

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

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

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

TypeScriptでユニオン型というか共用体型で特定のプロパティがあるかなしかで云々みたいなことをしたいとき的なお話

APiとか叩いたときに、正常異常で型が違うときってあるよね的な。
そういうときってそもそもどうやって型を定義するかとかもあるんだけど、気持ち的にはユニオン型にしておくとなんとなく気持ちいい感じであったり。
そうしたときに単純にプロパティの比較をやろうとするとコンパイルできなかったりしたり。
ということで今日はそれをちゃんとできるようにするには的なお話をば。

TypeScriptでビルドしようとしたけどVariable 'require' must be of type 'NodeRequire', but here has type 'ReactNativeRequireFunction'ってエラーが出たのでその解決方法的なお話

typescriptでreact-native-simple-twitterを作り直してて、途中までビルドできてたのに突然ビルドできなくなるっていう。
多分jest関連のpackageを色々と入れたからかなぁみたいな感じではあるんだけど。

node_modules/@types/react-native/index.d.ts:9302:9 - error TS2403: Subsequent variable declarations must have the same type. Variable 'require' must be of type 'NodeRequire', but here has type 'ReactNativeRequireFunction'.
とりあえずこんな感じのエラーが出てきた。
割と悩んだので今日はその解決法をば。

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

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

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

@typescript-eslintでtypescriptのlintをeslintで行いつつ、airbnbの設定でいきましょう的なお話

typescriptを最近使い始めたわけで。
lintをするにはtslintが一般的だったんだけど、なんかeslintでもできるようになるよみたいなニュースもあったし、VSCodeのtslintのプラグインにdeprecatedっていう名前がつき始めるし。
ってことでtslintじゃなくてeslintでlintしちゃおうかな〜っていう。
で、さらにいつもeslintではairbnbでやってたから今回もairbnbでlintしたいなぁと。

ということで今日は@typescript-eslintを使ってeslintのairbnbをtypescriptにも適用しちゃおう的なお話をば。
ちなみについでにhooksのlintも入れてみましょう的な。