React の基礎と落とし穴

React の基礎と落とし穴。主に公式のドキュメント からの抜粋。

サービスワーカーとWeb ワーカーの違い

Web ワーカーとサービスワーカーはどちらも、メインのブラウザースレッドとは別にバックグラウンドで実行される JavaScript ワーカーの一種です。ただし、目的が異なり、特徴も異なります。

コールバックによる非同期並列動作

async ライブラリには、parallel という便利なメソッドがあり、実行する非同期関数のコレクションと、すべての関数が正常に完了した後に実行するオプションのコールバックを受け取ります。

エポックミリ秒タイムスタンプを読み取り可能な日付時刻に変換する

JSON 形式の API 応答を処理したり、Web サイトに埋め込まれた JavaScript アセットを操作したりするなど、多くの場合、13 桁の長い数字を頻繁に目にします。おそらく、それが new Date().getTime() などのコードから生成されたエポック タイムスタンプであることはわかっていますが、人間にはそれがどの日付と時刻を表しているかをすぐには判断できません。Epoch Converter という便利な Web サイトがあり、これを人間が読める形式に簡単に変換できますが、開発者にとっては、Web サイトを開くよりもさらに迅速な方法があります。それは、多くのプログラミング言語に付属している インタラクティブ シェル を使用することです。

Nodejs でストリームをバッファに変換する方法

Nodejs では、ネットワーク経由での転送やディスクからの読み取りなどの非テキスト ファイル (画像など) の IO 操作を処理するときに、コンテンツを stream.Readable として受け取る可能性が高く、バイト サイズや画像のサイズを計算するなど、メモリ内の完全なデータを処理する前に、streambuffer に保存する必要があります。その方法はいくつかあります。

Intellij IDEA eslint とエイリアスの解析問題解決方法

私は日常の開発に Intellj IDEA Ultimate の永久フォールバック ライセンス バージョンを使用していますが、最近、JavaScript 開発環境で ESLint とモジュール エイリアスの解析に関連する 2 つの問題に気付きました。幸運なことに、どちらの問題も解決策を見つけることができました。

JSON stringify で BigInt を処理する方法

ご存知のとおり、BigInt 型は、任意の大きな整数を表すことができるデータ型として JavaScript で使用できます。これは、値が number で表せる範囲を超える場合の補助として役立ちます。ただし、JSON 形式でデータを交換する必要があるアプリケーションで作業する場合、JSON はデフォルトで BigInt 値をシリアル化する方法を認識しないため、BigInt 値が問題になります。このような場合、1 つの解決策は、この投稿で示されているように、BigIntstring に変換することです。

socket.io を v3 から v4 にアップグレードする

socket.io を v2 から v3 にアップグレード に続き、この投稿では、socket.io と関連パッケージをこの投稿の執筆時点での最新バージョンにアップグレードすることについて説明します。設定の変更は、redis-adapater と、今回はクライアント io をインポートする方法のみのようです (特定のユースケースの場合)。

socket.io を v2 から v3 にアップグレードする

socket.iosocket.io-redis-adaptersocket.io-redis-emitter などの関連ライブラリは、v3 以降、機能または動作にいくつかの重大な変更があり、v2 から v3 への移行中に問題が発生する可能性があります。この投稿では、実際の経験に基づいて、特定のユースケースで発生した問題とその解決方法をリストします。

JS リソース

最近はバックエンド開発やフロントエンド開発に関係なく、JavaScript でコードを書く機会が増えているので、少なくとも 10 年以上ぶりに JavaScript を真剣に検討してみるべきだと考えました。ここでは、長い間見過ごされてきたこのプログラミング言語を詳しく調べる際に役立つリソースを紹介します。

JavaScript の typeof の戻り値と偽値

JavaScript の typeof の戻り値と偽値。

jsを動的に挿入する方法

jsを動的に挿入する方法。

js で 26 個の英語文字を生成する方法

js で 26 個の英語文字を生成する方法。

Nodenv コマンド チートシート

nodenv は、複数の NodeJS バージョンを管理するための優れたツールです。ここでは、クイックリファレンスとして、よく使用されるコマンドの一部をまとめています。

非同期データとレンダリングにおける React-csv の問題

フロントエンド開発では、データ(通常はJSON形式)をダウンロード可能なcsv形式でエクスポートする必要がある場合があります。ReactJS関連のWebアプリケーションに取り組んでいる場合は、react-csvというパッケージがあり、DRYを破ることなく済みます...ただし、このパッケージを特定のシナリオに適用すると、問題が発生する可能性もあります。たとえば、すぐに書き留めるシナリオでは、データが非同期で読み込まれますが、最初のUIレンダリングには必要です。

フローティング水平スクロールバー

jQuery プラグインを使用してフローティング水平スクロールバーを実装する方法。これは、ページの部分的なコンテンツ (データ テーブルなど) が大きく、動的に更新され、部分的なコンテンツをスクロールするためにブラウザーのスクロール バーを使用したくない単一ページ アプリケーションに特に役立ちます。

Javascript カレンダー

JavaScript カレンダー。