Node.js

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

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

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

続きを読む

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

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

UI flickering はイケてない

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

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

react-ui-flickering-when-state-updated

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

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

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

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

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

続きを読む

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

はじめに(執筆の動機)

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

続きを読む

Jestでテストを書いてみよう(実践編)

こんにちは、エンジニアのYoheiです。

早速ですが、皆さんはテストコードを書いたことはありますか?

テストを書くとなると腰が重くなってしまう方もいるかもしれませんが、実はテストを書くと良いことがたくさんあるんです。

テストについてよくわからない方、これからテストを書き始めるという方はぜひ読んでみてください!

前半は、テストの概要について説明します。

後半は、Javascriptの テスティングフレームワークである Jest を使って実際のコードを例に説明していきます。

まずはテストの概要について簡単に見ていきましょう。

続きを読む

Node.js|EventEmitterの使い方解説

この投稿は、弊社が提供するWESEEK TECH通信の一環です。
WESEEK TECH通信とは、WESEEKのエンジニアがキャッチアップした技術に関する情報を、techブログを通じて定期的に発信していくものです。

はじめに

こんにちは、システムエンジニアの かおり です。本記事では、Node.jsのEventEmitterについてお話します。この記事で取り上げる内容は以下になります。

続きを読む

Mongooseでモデルを定義しデータベースへ値を保存する

この投稿は、弊社が提供するWESEEK TECH通信の一環です。
WESEEK TECH通信とは、WESEEKのエンジニアがキャッチアップした技術に関する情報を、techブログを通じて定期的に発信していくものです

はじめに

こんにちは、システムエンジニアの かおりです。今回はNode.jsのDB操作に欠かせないmongooseについて取り扱っていきます。DBに値を保存するにあたって必要な手順やスキーマについて解説します。

続きを読む

実践Node.jsパフォーマンスアップ|Stream編

この記事は、2021/7/8 に行われた WESEEK Tech Conference の内容です。

パフォーマンスって何だろう

パフォーマンスについて調べると次のような意味が出てきます。

パフォーマンスは、プロセス、システム、プロセッサー、ネットワーク、またはデバイスが、
特定の作業単位の負荷に対してどのように働くかを意味します。

出典: IBM 「パフォーマンスを特徴付ける条件」 から引用 https://www.ibm.com/docs/ja/zos/2.2.0?topic=tuning-how-is-performance-characterized

難しい定義を意識しなくとも、日常生活では直感的に感じているはずです。
例えば、Webサイトである操作を行なった時にその結果が反映されるまで時間がかかることや、動作が重くなってサイト自体が落ちることなど。

ユーザーの視点で見るとかなり表面的な部分が評価されます。

ユーザーは厳しいです。
少しでも使いづらいと感じると直ちに離脱の要因になってしまいます。

このスライドでは、ユーザーの離脱を防ぐために処理速度やメモリ消費を改善する方法について考えていきます。

ある問題へのパフォーマンスチューニングを依頼されたと仮定して
問題の認識、原因調査、戦略立案、実践・評価
を行い一緒に考えていきましょう 🤝

続きを読む

JavaScript/Node.jsでMongoDB+Mongooseのデータマイグレーション

古くは「LAMP」に代表されるような技術スタック、JavaScript 界隈では「MEAN」スタックという用語もあるくらい、JavaScript(Node.js) との組み合わせでは MongoDB がよく使われるようです。

NoSQL ではスキーマレスのためデータマイグレーションを気にせず開発することも多いわけですが、例えば一度バージョン1をリリースして既にユーザーがついているシステムを更改するような場合、後方互換を保つためにもデータマイグレーション機構は重要です。

本記事では、Node.js 環境で MongoDB および Mongoose を利用しているようなシステムにデータマイグレーション機構を導入する Tips を紹介します。

続きを読む