インターラプト開発者ブログ

インターラプトのプロダクト・サービスに関する開発ブログ

React

ts-resultsで安全にasync awaitを使う

TypescriptやJavaScriptで開発をしていると、async awaitをよく使います。コールバック関数のネストを防ぎ、コードのリーダビリティを保ちながらコードを書くことが出来るため有用なシンタックスです。 awaitの注意点 async functionでは、awaitを使う事がで…

React超入門 mapでリストアイテムを繰り返す

この記事ではTypeScriptを使います。 Reactでよく使う実装にArray.mapでのループがあります。 ループというのは繰り返しのことで一つのReactエレメントを繰り返してリスト表示させることができる機能です。 リストって何? リストとは配列のことで、順番に要…

NextJsでSSRに対応していないライブラリを使う

NextJsで読み込まれたライブラリは、サーバサイドでもレンダリングできるようになっていますが、稀にSSRに対応していないライブラリがあります。ベースがjQueryになっているようなライブラリだとよくあります。 原因は内部でwindowを呼んでいることで、windo…

Reactで気づいたらすべてがuseになっていた話

ReactはHooksが導入される前から書いていました。同時はconstでコンポーネントを定義するのではなく、class構文で書いていました。今ネットで検索してもclass構文で、stateへのセットもthis.setStateでした。 パフォーマンス改善と利便性のために、construct…

Nextjsでデータベースに接続する時に「Critical dependency: the request of a dependency is an expression」が出る

NextJsではWebpackを使用しているため、モジュールがWebpackに対応していないとCritical dependency: the request of a dependency is an expression というエラーが発生します。 NextJsでは、Sequelize や knex などでエラーが発生します。 これを回避する…

わかりやすいかも知れないReact.FCの使い方

前提 この記事ではTypeScriptを使用しています。 17.0.1 のReactを使用しています。 Nextjs 10での動作確認をしています。 はじめに ReactにはReact.FCという型定義があります。 こちらは、React.FunctionComponentが略された型で同じ型です。開発では殆どが…

絶対に再レンダリングさせたくない場合のコンポーネント活用

TL;DR useMemoを使って一切再レンダリングされないコンポーネントを作成する コンポーネント内のDOM更新は dispatchEventを利用する 絶対に再レンダリングさせたくない jQueryなどで直接DOM操作しているライブラリをReactから呼び出して使うと、すこし困った…