White Box技術部

WEB開発のあれこれ(と何か)

TypeScript

prismaのschemaファイルの書き方(MySQL用)

フルNext.jsアプリケーション作成の一環で、DBマイグレーションツールにprismaを使ってみたので、書き方のメモです。 いきなりですが、prismaは細かくDDL文を制御できず、思ったテーブルを作れなかったので、細かくテーブル定義を設定したい場合はTypeORMの…

Next.jsでLayzr.jsを使って画像読み込みをする方法

既存サイトを書き直していたら、layzr.jsの扱いにハマったので。 next/imageを使えというのは無しで。 結論:useEffectを使えばOK libs/layzr.ts import Layzr from 'layzr.js'; export default function LayzrConfig() { const instance = Layzr({ threshol…

Puppeteerがnodeコンテナで動かなかったから動かした

Puppeteerの実行エラー puppeteerのJestサンプルをTypeScriptで書いて動かそうとしたら、コンテナ側のライブラリ不足エラーが出たので対処していました。 エラー内容 動かそうとしたサンプルは以下で、Dockerコンテナのベースはnode:14-slimです。 これを実…

久しぶりにやったらTypeScriptのWebpackビルドで詰まった

今日は雑記なのでとりとめもないです。 WebpackでTSをビルドしたらWARNINGとERRORがめっちゃ出る ちょっと話題に上がったので、なんとなく昔作ったプログラムをリファクタリングしていたのですが、 JSからTSに変えたついでにWebpackも導入したところ、ビルド…

TypeScriptでwindowにプロパティを追加するいくつかの方法

DjangoのテンプレートにReactを埋め込むとかいう、妙なことをしているときに、とある理由からwindowにReactやらを追加しておく必要ができたのですが、TypeScriptだとそのまま突っ込むと型の関係で怒られました。 調べてみるとほぼこのタイトルの記事があった…

【TypeScript】DangerのTSLintプラグイン紹介と導入の補足

Rubyの方のDangerをTSLintに対応させたかったので、ESLintのDangerプラグインのforkをforkして、DangerのTSLintプラグインを作りました。 danger-tslintの作成経緯 最初はDanger-jsの方のTSLintプラグインを導入したのですが、Dangerでいいなぁと思っていた…