White Box技術部

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

TypeScript

【React】Quillを表示するカスタムフックと、それをReact Hook Formで使うサンプル

QuillというWYSIWYGエディタをReact Hook Formで使うメモです。 主要ライブラリ 動作時のライブラリバージョンは以下になります。 dependencies "react": "18.2.0" "react-hook-form": "7.44.3" "quill": "1.3.7" "react-quilljs": "1.3.3" devDependencies …

ReactとSassそれぞれのSP判定について

レスポンシブ対応したサイトを作成する場合、PCとSPでスタイルを切り替えたり、表示内容を変えたりすると思うのですが、 私がやっているTSX側とSCSS側の切り替え方法について記載します。 React側の準備 react-responsiveを使って、指定サイズ以下になった場…

【React】未編集時に確認ダイアログを出すカスタムフック

『Formデータに編集済みデータがあれば、ブラウザの戻るが実行された場合に確認ダイアログを出す』というよくあるやつを出したくなって調べたところ、 この記事にあたりました。 わかりやすくていい記事だったので、やりたい人はこれを見てくださいで良いの…

【TypeScript】nodeのfetchとaxiosのタイムアウト処理

戒めを込めて。 最初からaxiosを使おう(結論) HTTPクライアントとしてFetch APIが標準化されてから、「標準とか言うならfetch使うべき?」とか思ってリクエストをfetchで実装し、 しばらくしてタイムアウト処理が欲しくなった段階で、「これなら最初からax…

React Hook Formで複数項目間のバリデーション(相関チェック)

相関チェックって言葉、そういえばもう全然聞かないなーとは思いつつ、 React Hook Formで、複数項目をまたぐ入力値のチェックを実装したので知見を残しておきます。 ↓こういうやつ 手順 ここでは郵便番号のように情報としては1つのものを、複数の入力項目で…

Firebase AuthenticationとFirestoreへのTypeScriptでのアクセス方法

TypeScriptで書いているNext.jsアプリのユーザ情報管理を、 Firebase AuthenticationとFirestoreで行ったのですが、 調べたときに見かけたコードサンプルは、呼び出し方がJavaScriptのままだったので、 TypeScriptっぽいサンプルもここに残して置きます。 と…

Google Apps Script(GAS)からBox APIを叩くためのすべて

四苦八苦してしまって本当に辛かったので、他の人が同じような苦労をしないように・・・ 個人アカウントのOAuth認証で良い場合はこのサイトの手順が参考になります。 How to Use the Box API with Google Apps Script - Digital Inspiration ただ今回は、App…

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でいいなぁと思っていた…