react-navigationで画面遷移したときにuseSWRをrevalidateしたいときの話

@zxing/browserとReactの組み合わせでQR Code Reader作る

Prisma2でDB Resetを無理やり行う

lodashの代わりにjustを使う

M5Stack CoreInkをWeb経由で取得して表示するやつ作った記録

cheerioをやめてpuppeteerでローカルファイルもスクレイピングを完結させる

next.jsで乱数を使う時にハマったメモ

大腸の内視鏡検査をしたので次回のためにメモ。
[** 1ヶ月前]
どうも尻から血が出るし痔っぽかったので肛門科を探して行った。
感覚的に切れ痔とかじゃないのかと思ったがどうも中から出てるっぽかった。
「とりあえず薬出しときますね」と言われたのと同時に「内視鏡検査とかやったことある？なかったら一回ぐらいやっといたら？」と言われたので「ああ、そうですか」みたいな感じでやることにした。

内視鏡検査した

next.jsのルーティングはindex.jsを使うと綺麗にまとまる

material-uiのDataGridが無限に伸びる時の対処

nodeからBalenaSDKをサーバーで使うときはdataDirectoryを設定する

Vercelとreact-adminを組み合わせるとrangeヘッダでエラーが出るので注意

息子が2歳になったので0〜1歳向けの良かった絵本をまとめる（主に乗り物系）

Process `string | string[]` item with `flat()` and `map()`

Thinking about expo ( React native) versioning.

expo(React Native)における私的バージョニングルール検討（あるいは如何にしてOTAと付き合うか）

Generate staging app.json for Expo like flavor

Expoでflavorっぽいことをする

- M5 Burner
- UIFlow-1.4.5.1
- SeriesをAtom-Matrixにする
- Baudrateは750000
- いまいちわかってない。

M5 AtomでmicropythonのREPLやるやつ

[*** 使っていた自前]
https://github.com/terrierscript/dogrun-template
構成
Parcel / React / TypeScript / chakra-ui / jest / prettier
[*** なぜ自前で素振りにしてたか？]

自前の素振り用テンプレをやめてnext.jsでまかなえるか？

#GCP
↓移動しました
https://zenn.dev/terrierscript/articles/2020-06-10-cloud-run-cloud-sql-hasura-prisma 

CloudRun + CloudSQLでHasuraとかPrismaとか使うときの設定のアレ

[** 概要]
マックのモバイルオーダーアプリが色々考えて最高
2019/7月頃には部分的に実験してたらしい
https://gasket.bizright.co.jp/2019/07/4/
上記記事によれば2020/01頃に全国展開

マックのモバイルオーダーが好きすぎる

当たり前だけど<RecoilRoot>がなければ怒られる
同じキーを設定したら上書きされる
当たり前だけど下記は怒られる
atomGenerator的な関数は可能

Recoil

Subscribe Pusher on the node environment

#GraphQL
hasura
サーバーを立ててそこにHTTPアクセスする
クライアント側は提供してない。apolloか何かとかで組み合わせる
API周り生成したかったらgraphql-code-generatorを組み合わせる

hasuraとPrisma2

[** 色々前提]
mac版は gd32v-mac-unofficial じゃないと動かない
dfu-utilが多分いる（うろ覚え）
焼き込むときはresetボタンを押しながらbootボタンを押して離す。どっちがどっちかわからない
[** とりあえずCでサンプル動かしたやつ]

Longan Nano Liteあそび

https://github.com/hasura/awesome-fluent-graphql/
[*** JSで記述したオブジェクトをGraphQL化する系]
gotQL
リクエストクライアント内包型
クエリの書き心地はだいぶ変わる

Awesome Fluent GraphQL つまみ食い

#redux #react
[*** 食わず嫌いしている理由]
「あくまで選択肢の一つ」というのは理解出来る
しかしRedux Toolkitが「Style Guideとして推奨されている」という事実にはあまり好みな感情を持っていない
https://redux.js.org/style-guide/style-guide#use-redux-toolkit-for-writing-redux-logic

redux-toolkitを食わず嫌いしないでみる

#React
[*** 課題]
[** パターン]
state, actionsごとにわける
reducerの中でactionを作る

複数のuseReducer、どうまとめる問題

[** 方向性]
言語をいじくりまわすのと同じ気持ちを忘れない
楽しいからという目的のみでやる。
rustで遊ぶのはなぜか？rustをやりたいからであってrustの仕事をするためではない
飽きたらやめる。

English

#React_Native
stack
あくまでstackの動きをエミュレートしてると考えるのが良さそう
https://twitter.com/terrierscript/status/1231598848021151749?s=20
stackの考えのwebとの違い

React Navigationについて知ってること

#React_Native
ファイルを読み込んで云々するやつ
https://twitter.com/terrierscript/status/1225266943831076864
kitten 
themeの作り方

React Native 書けそうな話

#React_Native
expoを使う
expo sdkがある
expo install xxx
tabテンプレートは参考になる

React Nativeについて知ってること

[react] [redux] [React Hooks]
https://twitter.com/terrierscript/status/1207325004095819778
[Hooks時代のReduxについての感想下書き]
[*** 背景]
Hooksが産まれた

2020年になったのでRedux離れを考える

[*** どれ]
https://amzn.to/36KNdsz
[**** ソフト]
[*** CAD化]
tinkercad

安い3Dプリンターを使ったメモ色々

3D Printing JSX model with react-three-renderer

react-three-fiberを使ってJSXを3Dプリントする

styled-componentsで作る年末年始にぴったりなCSS Gridにおける要素の重なりの話

Gatsby + netlify から next.js + zeit/nowに乗り換えようと試みて(未遂)得られた知見

Tips: CSS Variables for styled-components

Create animating element on CSS Grid with React Hooks 

React Hooksを利用してCSS Grid上の要素をアニメーションする

Suspend pinch-zoom on React Hooks

styled-componentsで複数のpropsを利用したい時にcss helperを使ったいい感じのやり方を考える

next.jsでForkTsCheckerWebpackPluginを実行させない方法

gatsbyでmarkdownをコンバートしているところをreact-markdown + remark-syntax-highlightに置き換える

このブログの配信をnetlifyからnow.shにした話

疑似要素
`:in-range`
https://developer.mozilla.org/ja/docs/Web/CSS/:in-range
max/minの値の間かどうかで出し分け出来るやつ
`:out-of-range`

細かすぎて伝わらないCSS機能

parcel2が来る前に不要なmainフィールドはpackage.jsonから消しておいた方が良さそう

Web Componentsをgatsbyで使えばmdxいらずである程度色々出来る

#React #React_Hooks
（量が出てきたら別途まとめたいやつ）
![Hooksアンチパターン]
無限ループ起こる系
ContextにObjectを入れてないか？

React Hooks useEffectsチェックリスト

#javascript #React #React_Hooks
[** 前提]
hooksのdependencyには「いかなる理由があっても嘘をつくべきではない」
https://overreacted.io/ja/a-complete-guide-to-useeffect/
`// eslint-disable exhaustive-deps`は認められないものとする

React hooksのdependencyについて

react hooksで初回に設定されたら変えさせないテクニック

#TypeScript #react
2019/10/05
[* この記事のミッションステートメント]
TSの型に疲れて生JSに戻ろうとしている人の足首を掴み、世の中にある生JSを一つでも減らす
対象読者

今こそ伝えたい！@ts-ignoreの魅力

#React #React_Hooks
DIパターン
共通的な要素のDIのためのもの
Event Receivedパターン
ライフサイクル上で何らかのイベントが発火したらそれを踏まえてイベントを飛ばすなど

Hooks Design Pattern

CSSは辛い。
性格に言うとセレクタやその周辺が辛い
property自体はそこまででもない（いやそこまででもあることもある）
[*** ここが辛いよCSS]
[** カスケード・セレクタ編]

CSS罪に処す

フロントエンドエンジニアというものについて余計なことを考える（2019秋版）

https://note.mu/terrierscript/n/n263331addd7d
↑
こっちに清書した
元ネタ・参考文献
https://shgam.hatenadiary.jp/entry/2019/09/21/104413

[archived]JSON色付けに思うフロントエンドのこと(2019年秋版）

#react #redux
2019/09/25
[** 主題: もうnormalizr使うこと無さそう ]
Redux
主となる役割は状態管理である。

さよならnormalizr

#Rust
基礎編
https://doc.rust-jp.rs/the-rust-programming-language-ja/1.6/book/concurrency.html
メッセージパッシング
https://doc.rust-jp.rs/book/second-edition/ch16-02-message-passing.html

Rustの並列性がわからん

#Rust
[*** 前提]
Raspberry Pi Zero HW
SH1106使う
WS-13890

Rustわからん (raspberry pi corss compile編)

#rust
[* Installation]
[* arrayに変換]
[* arrayをloopする]
[* debug]

WASMさっぱりわからん

parcel + rustでwasm_bindingを使うとき （TypeError: WebAssembly.instantiate(): Imports argument must be present and must be an objectの解決

JavaScriptの10..toSting(3)というピリオドが2つ続く記述を見つけたのでを調べた

英語字幕とテキスト読み上げ機能を使うと少しだけ英語が捗った話

gatsby-remark-componentとrehypeでnl2br的な事をする

CSSを書くエンジニアがなるほどデザインを読むとCSSに対して意識が変わるかもしれないという話

#ReactでTypeScript使うときにPropsやStateってinterfaceよりType_Aliasの方よいのでは説
Stateを複数つけてunion typeにすることで、stateの状態決定できるの便利では説
と思ったけどAuthStateのそれぞれはinterfaceにしたほう良くない？
確かに。これだと `status`の名前を書いたとき一括で補完される。type aliasだとこうはならない。
[*** 最終型]

Contextなauthでもstateをtype alias使ってunionにすると便利

onAuthStateChanged
ログインしてなければnull、されていればcurrentUserとれる
しかしこれどこに置く？みたいな問題ある
[* 案]
Contextに置く

ReactでFirebaseの認証どこ置く問題

#redux #TypeScript
補完めっちゃ効いてハッピーハッピー村

ReduxとTypescript型ちゃんとつけてあげる

#Serverless #React #Firebase #next.js
+ Firebase
単純にAPIの代わりなのだから不都合はない
+ next.js
これどうなる？ちょい謎。

Redux + Firebase or next.js

#Firebase #Serverless
verifyの違いは？
verifyIdToken
idTokenVerifier.verifyJWT(idToken)
createIdTokenVerifier

Firebase/Session・認証周り

#Serverless
next.js（あとでわけるかも）
getInitialProps
SSR時に呼ばれる同期的な処理を出来る関数
React.Componentへの独自拡張

next.js

#Serverless
２つある。
flex
https://github.com/GoogleCloudPlatform/nodejs-docs-samples/blob/master/appengine/hello-world/flexible/app.yaml
standard

Google App Engine

#Serverless #Firebase
Auth
めっちゃ強い
認証そろってる。
JWTベース

Firebase

#Serverless
SSRをすべきかどうか？
元々
SSR＝コスパ良いか？うーん微妙　という立場
とはいえ、食わず嫌いみたいな部分ちょっとある

SSRとかSPAとか

#気持ち
システムの分割、難しい
最初から考慮出来るか？
大きい企業の新規事業とかであれば？
最初から一定のスケールが考えられているという場合

システムの分割について

#TypeScript #気持ち
flowとtypescriptを改めて比較しようと考えた
けどそうじゃない、結局TypeScriptが良いというだけだと気づいた
TypeScriptが良いのはそうなんだけどそれよりVSCodeが良くなりすぎてるという方が圧倒的に強い
最近のえげつなく良いVSCodeの機能

TypeScriptとFlowのことを考えたら、ただVSCodeがえげつなく良いだけだと気づいた

[https://lh3.googleusercontent.com/-25kUJKCbg78/AAAAAAAAAAI/AAAAAAAAABs/7w6gHjdUMhA/photo.jpg]
this is terrierscript’s page
#member

terrierscript

VueとReact比較した話：余談

administrateの小ネタ3つ

普段使いから始めるNext.js

yarnでnodeのバージョンが合わない場合に無理やり回避するオプション

Firebase Functions + TypeScriptをparcelで事前ビルドしてやりすごす

#react #React_Hooks
[* こんなhooksは嫌だ]
複数のeffectがdocument.titleが書き換え合戦をする
無限ループeffect
refsに頼りすぎる

Hooksアンチパターン

#react #redux
[* TL: DR (個人的感想)]
相変わらず有益なのはcombineReducer。これが使いたいかどうかで決まりそう
気をつけてればuseContext自前でも行ける気がする（行けると信じたい）
簡易な非同期通信のためのmiddlewareはオサラバしたい（できるとうれしい）

Hooks時代のReduxについての感想下書き

netlify devでportを騙さなくなってよくなった話（ & ERR_INVALID_ARG_TYPEを回避する）

Rewrite Auth0 Example with React Hooks

netlifyでyarnやnodeのバージョンを指定したりフラグを渡したりする

netlify devでparcelがランダムポートにならないように騙す

parcelでCannot read property 'length' of undefinedが出たら`.cache`ディレクトリを消す

parcelでsvelte3をセットアップする

lodashのflattenDeepをArray.prototype.flatで代用する

JavaScriptのMath.max/Math.minが可愛い挙動をしてくるので気をつける

TestCoroutineContextを使ってdelayやtimeoutの絡むCoroutineのテストをする

#rust
[*** Cargo]
`cargo watch -x run` 便利
cargo-watch
cargo-edit

terrier.dev

About me

@terrierscript

Links

Recent Posts