起きたら腰痛いし、常に椅子に座って作業してるのでどう考えても運動不足で常に腰に負担をかけ続けている生活を送ってたし、健康診断に行ったら基本的には健康ですが背骨が曲がってますねぇ......って言われるくらい腰が終わってました。
あまりに痛いので整体にここ1ヶ月くらい通ってたのですが、そこでおすすめされた枕を購入してみるとまじで劇的な変化があったのでおすすめしておきます。全腰痛民族に捧ぐ.....
僕は枕が終わってたために腰を痛めていたようでした。前買った枕3年くらい使ってたものだったのでそれはそうかも知れない.....
これ高さ調整ができる(中のクッションが層になっている)のである程度自分用に調整できます。
2週間くらいつかってみた結果ですがまじで調子がいい。ありえないくらい調子がいい。無限に作業ができるし座ってられる。あと睡眠欲がめっちゃ増えた(睡眠による回復がとてつもないため)
枕は1年、2年おきくらいに変えたほうがええ
実際に使っている様子を写真で取ろうと思ったけど掃除してないのでやめた。部屋が汚ねぇ
ので調べました。コード自体は100行くらいで1ファイルだけだったのでとても読みやすかったです。
reselectはreduxのためのselectorライブラリです。どうやらメモ化してくれるらしいが.....？
reselectは受け取るオブジェクトを整形する関数と結果を計算する関数を受け取って、selectorを作る関数です。
以下の例だと、state => state.itemsとstate => state.selectIdがオブジェクトを整形する関数、(items, id) => items.find(item => item.id === id)が結果を計算する関数です。
stateが変更したときどこが再計算されて、どこがメモ化されるのかを知ることでreselectの力を最大限使おうというのが本記事の意図です。
import { createSelector } from "reselect"; const state = { items: [ { id: 1, name: "hoge" }, { id: 2, name: "huga" }, { id: 3, name: "nyan" } ], selectId: 1, }; type State = typeof state; type Item = State["items"] extends Array<infer U> ? U : never; const findUser = createSelector<State, State["items"], State["selectId"], Item | undefined>( state => state.items, state => state.selectId, (items, id) => items.find(item => item.id === id) )
どこがメモ化されるのか先に言うと、最後の関数(items, id) => items.find(item => item.id === id)です。この子だけstateが変更されたときに計算がスキップされることがあります。それ以外の関数state => state.items, state => state.selectIdに関しては毎回計算されます。では実際にどのようなコードで実現されているのかを見ていきます。
まずはcreateSelector。いつもimportして使う関数から見ていきます。これは単にcreateSelectorCreatorにdefaultMemoizeを食わせているだけのようです。何もわかりませんね。
reselect/index.js at master · reduxjs/reselect · GitHub
export const createSelector = /* #__PURE__ */ createSelectorCreator(defaultMemoize)
どうやら関数と比較関数を受け取る関数みたいです。比較関数defaultEqualityCheckは単にa === bをするだけのコードでした。気になる方は見てみてもいいかもしれませんが、ほんとにこれだけです。
areArgumentsShallowlyEqualに比較関数(equalityCheck)、前回入力された引数(lastArgs)、今回入力された引数(arguments)を食わせます。前回と今回入力された引数を比較してshallowEqualがfalseならfuncを再計算してlastResultに再代入するという感じでしょう。
argumentsに関してはjavascript組み込みなのでMDNを見るといいと思います。
reselect/index.js at master · reduxjs/reselect · GitHub
export function defaultMemoize(func, equalityCheck = defaultEqualityCheck) { let lastArgs = null let lastResult = null // we reference arguments instead of spreading them for performance reasons return function () { if (!areArgumentsShallowlyEqual(equalityCheck, lastArgs, arguments)) { // apply arguments instead of spreading for performance. lastResult = func.apply(null, arguments) } lastArgs = arguments return lastResult } }
equalityCheckは比較関数、prev, nextは配列でやってくるようですね。配列の要素を総ナメして同じ値ならtrueそうでないならfalseを返すだけの関数です。
reselect/index.js at master · reduxjs/reselect · GitHub
function areArgumentsShallowlyEqual(equalityCheck, prev, next) { if (prev === null || next === null || prev.length !== next.length) { return false } // Do this in a for loop (and not a `forEach` or an `every`) so we can determine equality as fast as possible. const length = prev.length for (let i = 0; i < length; i++) { if (!equalityCheck(prev[i], next[i])) { return false } } return true }
ここまででわかったことをまとめます。
こんな感じでしょうか。次に行きましょう。
ここでのmemoizeはdefaultではdefaultMemoizeです。...memoizeOpptionsはユーザがmemoize関数を定義したときoptionを渡したときに使うものです。今回はdefaultMemoizeが使われる前提なのでいらない子として扱います。
この関数では受け取ったデータ整形用の関数と結果生成用の関数からメモ化された関数を返します。
変数名で言うとresultFuncが結果生成用の関数。dependenciesがデータ整形用の関数です。
memoizedResultFuncは結果出力関数をdefualtMemoizeでラップしただけのものなのでselectorだけを見ていきましょう。
reselect/index.js at master · reduxjs/reselect · GitHub
export function createSelectorCreator(memoize, ...memoizeOptions) { return (...funcs) => { let recomputations = 0 const resultFunc = funcs.pop() const dependencies = getDependencies(funcs) const memoizedResultFunc = memoize( function () { recomputations++ // apply arguments instead of spreading for performance. return resultFunc.apply(null, arguments) }, ...memoizeOptions ) // If a selector is called with the exact same arguments we don't need to traverse our dependencies again. const selector = memoize(function () { const params = [] const length = dependencies.length for (let i = 0; i < length; i++) { // apply arguments instead of spreading and mutate a local list of params for performance. params.push(dependencies[i].apply(null, arguments)) } // apply arguments instead of spreading for performance. return memoizedResultFunc.apply(null, params) }) selector.resultFunc = resultFunc selector.dependencies = dependencies selector.recomputations = () => recomputations selector.resetRecomputations = () => recomputations = 0 return selector } }
このselectorはcreateSelector()の返り値そのものです。なのでこの子が実データ(一番はじめの例でいうとstate)を受け取ります。
与えられた実データをargumetns経由で取り出します。それをデータ整形用の関数(dependencies)に食わせます。このときdependenciesの関数たちに引数を適用する計算はselector実行時に毎回呼ばれるのでデータ整形用の関数はコストの小さい関数を置いておくのがいいでしょう。
こうして得られた配列paramsをmemoizedResultFuncに与えます。paramsの結果が前回と同じであれば計算をスキップし、前回の結果を返します。reselectにおいてここだけが計算が省略される部分というわけでした。
reselect/index.js at master · reduxjs/reselect · GitHub
const selector = memoize(function () { const params = [] const length = dependencies.length for (let i = 0; i < length; i++) { // apply arguments instead of spreading and mutate a local list of params for performance. params.push(dependencies[i].apply(null, arguments)) } // apply arguments instead of spreading for performance. return memoizedResultFunc.apply(null, params) })
createSelectorで渡す引数のうち最後の関数だけ！この2つだけわかれば十分すぎるくらいです。reselect完全に理解した！ですね！
reselectメモ化してくれることは知っていたのですが、どこメモ化されるのか全くわからずuseSelectorに食わせる関数を作ってくれる君程度にしか思ってなかったのでちゃんと理解できてよかったです。
あとarguments。存在を知らなかったので突然定義してないやつが出てきた！？！？！？と凄い驚きました。
おわりです。ありがとうございました。
最近あまりにも腰が痛かったり、肩首が終わってるので整体に行き始めました。
手首回した時に
整体師 < すごいですね〜これ
と言われてしまい
僕 < え、何がですか？
って聞いたところ
整体師 < 普通こんなに手首ってパキパキ言わないんですよ…
って言われてしまいめちゃくちゃ驚きました！！
手首って回すとパキパキ音が鳴って痛いのは全人類そうなると思ってました………
運動しないし、ほぼ座ったままの生活、良くないですね…
日記でした
Playgroundはこちらいろいろ触ってみてください。
sortにわたすorder関数を配列の要素がネストしているオブジェクトだったとき即時関数で書かなきゃいけないのが辛いというのが根底にある気持ちです。
僕が求めるorder関数は、型とsortしたいkey(string)をわたしてdesc, ascだけ決めればokみたいなインターフェースでした。
TypeScriptだと配列の要素がネストしているオブジェクトのときkeyがstringでかけないな〜というのが悩みでしたが、TemplateStringTypesでそれが解決できたので作って見ました。order関数がそれに当たります。
optionsの中にあるadapterというのはsortの方法をカスタマイズするためのオプション引数です。
type NestColumn<T, U extends string> = T extends { [key: string]: unknown } ? `${U}.${Columns<T>}` : U; type Columns<T extends { [key: string]: unknown }> = { [K in keyof T]: K extends string ? NestColumn<T[K], K> : never }[keyof T] type Split<T extends string, D extends string> = T extends `${infer Head}${D}${infer Tail}` ? [Head, ...Split<Tail, D>] : [T]; type O<T, C extends unknown[]> = T extends { [key: string]: unknown } ? Target<T, C> : never type Target<T extends { [key: string]: unknown }, C extends unknown[]> = { [K in keyof T]: C extends [infer Head, ...(infer Tail)] ? K extends Head ? Tail extends [unknown, ...(infer _Tail1)] ? O<T[K], Tail> // Tailが残っているとき : T[K] // 解析終了 : never // 対象のkeyじゃないとき : never // そもそもCが空のとき }[keyof T] type Options<T extends { [key: string]: unknown }, C extends unknown[], S extends string> = { adapter?: (t1: Target<T, C>, t2: Target<T, C>, sort: S) => number } function order<T extends { [key: string]: unknown }, C extends Columns<T>>( columns: C, sort: "asc" | "desc", options?: Options<T, Split<C, ".">, "asc" | "desc">) { const keys = columns.split(".") as Split<C, "."> return (obj1: T, obj2: T) => { let t1: any = obj1; let t2: any = obj2; keys.forEach(key => { t1 = t1[key] t2 = t2[key] }) if (options?.adapter) return options.adapter(t1, t2, sort) if (sort === "asc") return t1 > t2 ? 1 : -1 return t1 < t2 ? 1 : -1 } }
こういうのでもライブラリ化していいのかな〜オレオレ型定義ライブラリ作りてぇ〜〜〜〜〜
anyを使ってしまいました。懺悔します。
let t1: any = obj1; let t2: any = obj2;
以上です。
僕のハンドルネールはNaporitanとかなぽりたんでやっています。
会社では「なぽりくん」って呼ばれています。インターネットでは「なぽ」ってよばれてることがおおいです。
社内で初めて合う人とかに軽く自己紹介的なことするじゃないですか、
〇〇です。こんちには。 今日はこれこれするためにやってきました
みたいなこと言うじゃないですか......
その時毎回、「本名じゃないんですが」とか「社内ではこう呼ばれてて」っていうprefixをつける必要があるんですよね。
なんかこう・・・・・ちょっと恥ずかしい！！！！
それもこれも、「なぽりたん」とかいう明らかに食べ物名をハンドルネームにしてるからですね・・・・
ハンドルネームは名前っぽい名前にしてないと初対面に自己紹介するときにちょっと恥ずかしいよって話でした。