2022.10.27
2023.04.17

Next.js 13 の Turbopack をカスタムサーバーで試そうとした話

経緯

Next.js Conf 2022 でNext.js 13に関する発表、その中には Turbopack なる大変アツい代物がありました。

Next.js 13 Blog から

700倍だと？？
これは試してみたいですね。

2022.08.08
2023.04.17

【JavaScript】正規表現リテラルと RegExp クラス

皆さんこんにちは！WESEEK ソフトウェアエンジニアの増山です。

今回はブラウザ上で実行される JavaScript の正規表現がテーマです。正規表現リテラルと RegExp クラスは何が違うのか、どんなメリットデメリットがあるのかについて解説します。また、ブラウザ上で実行する際の注意点についても説明します。

2022.06.14
2023.04.17

React＆SWRでレンダリング時のチラつきを撲滅する３つのテクニック

ステータス	有用度	日時	備考
公開	⭐⭐⭐	2022/06/14
更新	⭐⭐⭐	2022/09/30	SWR 2.0 に関する追記

UI flickering はイケてない

WESEEK エンジニアの武井です。

みなさん、フロントエンドプログラミングやってますか？
今回のネタは「UI flickering」。React の初回レンダリングやステートを更新した際、こんな感じの挙動してないでしょうか。

出典: https://stackoverflow.com/questions/55032136/react-ui-flickering-when-state-updated

この一瞬今描画しているアイテム消えてパッと次のアイテムが出てくるまでの一瞬の間が見える現象、こちらが「UI flickering」です。

和製英語だと「UIフリッカー」とか言われる事もありますがあまり一般的ではなく、「カクつき」「チラつき」みたいな表現の方が馴染みがあるかもしれません。

UI flickering は、普通に React で Backend/DB からデータ取ってきて更新するコンポーネントを何も考えずに書くと大体起こってしまいます。UI/UX が壊滅的に悪くなるものではないのでプロダクト・実装箇所によっては許容されるかもしれませんが、イケてるかイケてないかで言えばやっぱりあんまりイケてない部類に入ります。

今回はそれを撲滅するための3つの Tips を紹介します。

2022.06.08
2023.04.17

semver(Node.jsライブラリ)のチートシートと実例紹介

はじめに(執筆の動機)

GROWI.cloud は、弊社が主に開発し、 OSS として GitHub に公開されている GROWI を、 SaaS としてクラウド版提供するサービスです。
本サービスでは、サービス上で立ち上げる GROWI のバージョンを適切にコントロールするために npm で公開されている semver ライブラリを利用しています。
実装の際に調べてみたところ、https://devhints.io/semver など semver の概念のチートシートはありましたが、Node.js の semver ライブラリの日本語版で分かりやすいチートシートや参考記事が少ないなと感じたため、今後の誰かのためになるならと思い執筆しました。
ご参考になれば幸いです。