なぽろぐ

気ままに感じたことを記事にまとめます。Vtuberのイベントのことと、プログラム関連のことが多めだと思います。

Typescript

よく使いそうなtemplate-literal-typesを使った型定義

いつもTSのPlaygroundで作ってるなぁと思うやつをメモする 下に書いてあるやつすべてplaygroundで実行しているやつ www.typescriptlang.org splitの型定義 // 文字列を受け取って受け取ってその文字列をDelimiterでsplitする型 type Split<T, U extends string> = T extends strin</t,>…

TypeScriptのTemplateStringTypesでorder関数

Array.prototype.sortにわたすorder関数の型定義 Playgroundはこちらいろいろ触ってみてください。 www.typescriptlang.org 文章 sortにわたすorder関数を配列の要素がネストしているオブジェクトだったとき即時関数で書かなきゃいけないのが辛いというのが…

flowからTypeScriptへ移行するときこんな感じでやればいいんじゃないかという案

flowからTypeScriptへ ts-migrateをつかう 新しく作るページをts化して参照するモジュールにd.tsをかく ts-migrateを使う これで倒せるなら最高だが、テストを書いてないと主要なページすべてを動作確認する必要がありそう。ASTで機械的に変更すると言っても…

normalizrの型定義を書いた

Normalizrの型定義を(制約付きで)書いた normalizrのhelper型です。こうなってくれているといいなぁと思って書きました。 読むのめんどくさいよ〜って人はサンプルを用意したのでcodesandboxか手元の環境でガチャガチャいじってみてください https://github.…

Firebase + Nextjsに挑戦していました(できませんでした)

firebase難しくない? Nextjs(ssr)のデプロイ環境を作ろう思って挑戦したのですが,時間だけとかして日曜日が終わりそうなので日課にしたいブログを書くことにしました. 気分転換です 理想型 firebase emulatorを使う&&Nextjsでの開発環境上での最高体験を…

aspidaとNestJSでHTTPClientにも型定義しながら開発するぞ!!!!!!!

aspidaとNestJSを使って気持ちがいい開発がしたい!したくない? 今回もお試しリポジトリが存在します.NestJS x aspida x Reactの環境で作っています.是非お試しください github.com なにするの? NestJSはにはSwaggerModuleがありOpenAPIでしゃべることが…

DIVでBlurっぽいことをやる(React)

DIVでもInput要素のblur的なことがしたい! InputElementは別のところを触るとBlurイベントを発火してフォーカスが外れます. developer.mozilla.org MDNのサイトで動作は確認できるかと思います. これをDIV Elementでもやりたいなぁと言うのが今回の議題で…

LottieWebでチェックボックスの状態を管理する

Lottieで消えちゃうCheckBox作るぞ! コードの全体像 index.tsx 最後に わかっていること Lottieで消えちゃうCheckBox作るぞ! こういうのを作りたい https://naporin0624.github.io/napoblog-assets/#/ 今回はこちらのチェックボックスアニメーションを使わ…

react-transition-groupでリストを表示するときはkeyにindexを設定するのはやめよう

リストで表示したものにトランジションを適用したい コードを比較 変な挙動をするコード 想定している動きをするコード 原因 styles.ts リストで表示したものにトランジションを適用したい こんなやつをやりたかった なんかこうなる コードを比較 styles.ts…

【NestJSアドベントカレンダー】NestJSとwebpack-dev-middlewareを組み合わせる【23日目】【遅刻】

NestJSにwebpack-dev-middlewareを組み込む 2020-04-09追記 ライブラリとして公開しました www.npmjs.com 遅刻しました.今日は25日.クリスマスです.名取の配信見てたら24日もいつのまにか終わっていました. 23日目は研究室の実験があり,徹夜でNestJSを…

【NestJSアドベントカレンダー】NestJS & TyoeORMをWebackでつかう!!!【21日目】

NestJS & TypeORM & Webpackで優勝したい! NestJsはmoduleが膨れ上がっていくと, ts-nodeだと起動がめちゃくちゃ遅くなって開発時にすごいストレスになります。それを解決できるのがHMRで、webpackです qiita.com はじめに結論 github.com entities: getMet…