Fetch Upload Streaming でチャットアプリを作ってみる
Fetch Upload Streaming とは Fetch Upload Streaming とは、ブラウザの JavaScript の POST リクエストで HTTP のストリーミングを行える機能です。より具体的には、Fetch API の body に ReadableStream や WritableStream のような Streams API を渡せるようになります。 const stream = new ReadableStream({}) fetch(`/send?room=${roomId}`, { method: "POST", body: stream, duplex: "half", }); かねてより Fetch API ではレスポンスを ReadableStream で取得できたのですが、反対にリクエスト時に body に ReadableStream を渡
Deno の Web フレームワーク Fresh チュートリアル
Fresh は Deno 製の Web フレームワークです。事前のビルドを必要せず、エッジでレンダリングを提供するという特徴があります。また Islands Architecture を採用しており、デフォルトではクライアントに JavaScript が配信されることがありません。 この記事では Fresh を使用して記事投稿サービスのチュートリアルを紹介します。 完成したサイトは以下のようになります。 ソースコードは以下のレポジトリから確認できます。 インストール Fresh を始めるには Deno の v1.22.3 バージョン以降が必要です。Deno をまだインストールしたことがないのならば、installation を参考に Deno をインストールしましょう。 # Shell (Mac, Linux) $ curl -fsSL https://deno.land/install.
Playwright でコンポーネントテスト
Playwright は Cypress Puppeteer と並ぶ E2E テストのための Node.js フレームワークです。Chromium, Chrome, Edge, Firefox, Webkit (Safari)と多くのブラウザに対応しているという特徴があります。 そんな Playwright ですが v1.22.0 から React,Vue.js,Svelte のコンポーネントに対してテストを実行できるようになりました。つまり、もともと備えていた E2E レベルのテストに加えて、結合レベルのテストまでカバーできるようになったということです。 Playwright のコンポーネントテスティングの特徴と使い方を見ていきましょう。 Playwright でテストを書くメリット 現状フロントエンドにおいて、コンポーネントテスティングを実施する際に使用されるフレームワークとして Te
return と return await の3つの違い
Promise を返す非同期関数を扱うとき Promise をそのまま返す書き方と Promise を await してから返す二通りの方法があります。 const fetchUsers1 = async () => { return axios.get("/users"); }; // または const fetchUsers2 = async () => { return await axios.get("/users"); }; 上記のコード例は一見するとどちらも同じように動作するように思えますが、以下のような違いがあります。 例外がキャッチされる場所 スタックトレースの出力 マイクロタスクのタイミング 例外がキャッチされる場所 初めに考えられるもっとも顕著な例として try/catch ブロックと共に使用されている場合です。端的に説明すると return の場合には関数の呼び出し元
Jest setTimeout()のようなでタイマー関数をテストする
JavaScriptには、以下のような時間に関する関数が用意されています。 setTimeout setInterval clearTimeout clearInterval 例えば、setTimeoutは第1引数で渡したコールバック関数を第2引数で渡したミリ秒後に実行します。 標準で用意されている非常に便利な関数群ですが、ユニットテストを記述するときには少々困りものです。setTimeoutのコールバック関数に渡した処理が正しく呼び出されているかどうか調べたいようない場合には、setTimeoutのコールバックが呼び出されるまで待機する処理を挟む必要があります。 setTimeoutに渡したミリ秒の値が大きい場合はタイムアウトを起こす可能性がありますし、何よりテストのたびに長時間待つには耐えられません。 以上の問題を解決するために、Jestにはタイマー関数をモックする便利な機能が備わって
node-ipcに悪意あるコードが含まれている問題について
node-ipcというnpmパッケージに悪意あるコードが含まれていた問題についてのメモ書きです。 2022-03-15に、node-ipcのメンテナーによって悪意あるコードを含むnode-ipcが公開されていた問題です。 問題のあるバージョン 9.2.2 unpublish済み Hidden functionality in node-ipc · GHSA-8gr3-2gjw-jj7g · GitHub Advisory Database 10.1.1, 10.1.2 unpublish済み Embedded Malicious Code in node-ipc · CVE-2022-23812 · GitHub Advisory Database 11.0.0+ node-ipc behavior change · GHSA-3mpp-xfvh-qh37 · GitHub Advisor
Web フロントエンドエンジニアのための Rust 製 Web フロントフレームワーク Yew 入門
Rust と呼ばれる言語はわりかし新しめの言語であり、2016–2021 年の間 Stack Overflow Developer Survey で「もっとも愛されているプログラミング言語」で一位を獲得し続けている人気の高い言語であります。 Rust の得意とする分野は OS やコンパイラなどのいわゆる低レイヤーの領域ですが、Web サーバー、機械学習、コマンドラインアプリケーションなどさまざまな用途で利用されます。 Web フロントエンドの領域では高速化を目的として Rust から WebAssembly（以下、WASM）を生成して JavaScript から実行する用途がよく知られています。その他にも SWC と呼ばれる Rust ベースで作成されているビルドツールが高速に動作することで注目を集めています。（実際に jestの実行 に試してみたところ実行時間が 3 倍ほどになって驚いて
フロントエンドのテストのモックには msw を使うのが最近の流行りらしい
皆様フロントエンドのテストを書いていらっしゃいますでしょうか？ フロントエンドのテストを書くときには API コールする処理を全てモックする必要があります。外部の API をコールする処理をテストに含めると API サーバーが落ちているなどの外部の要因によってテストが失敗してしまう可能性がありますし、テストを実行するたびに実際に API をコールしてしまうとサーバーに負荷がかかってしまうなど外部に対しても悪影響を与えてしまいます。 さて、従来のモックする手段としては Jest のモックを利用して axios や fetch などのモジュールをモック化する手法がよく使われていたかと思います。 最近のテスト手法として API コールをモックする際に Jest ではなく Mock Service Worker (以下 msw ）を使用する手法が注目されています。実施にどのように使用されているのか
Storybook でインタラクションテストを作成して Jest で再利用する
Storybook の Component Story Format 3.0 では新機能として play() 関数が追加されました。 play() 関数は Storybook 上で ユーザーのクリックやフォーム入力のようなインタラクションな操作を表現することができます。 play() 関数の大きな特徴としては Component Story Format の移植性の高さを利用して Storybook 上で定義したインタラクションを Jest など他の領域においても再利用できることです。 この記事では Vite に Storybook を導入してインタラクションテストを作成して Jest で再利用するまでの手順をやってみたいと思います。 Vite プロジェクトの作成 まずは以下コマンドで Vite プロジェクトを作成します。
colorsなどのnpmパッケージに悪意あるコードが含まれている問題について
追記: 2022年1月11日 2:29 JSTにDoS脆弱性としてセキュリティアドバイザーが出されて、悪意あるバージョン(1.4.1や1.4.2)はnpmからunpublishされ、npmの最新は安全なバージョンである1.4.0へと変更されました。 Infinite loop causing Denial of Service in colors · GHSA-5rqg-jm4f-cqx7 · GitHub Advisory Database 2022-01-08 に colors というnpmパッケージにDoS攻撃のコードが含まれたバージョンが1.4.44-liberty-2として公開されました。 GitHub: https://github.com/Marak/colors.js npm: https://www.npmjs.com/package/colors 問題についてのIssu
JSDocで型を定義してTypeScriptの恩恵を受ける
普段から TypeScript で開発されているほうならば、TypeScript の恩恵を十分に堪能されていることと思います。 特に私は VS Code のインテリセンスには頼りっぱなしでこれがなければまともにコーディングができない体になってしまいました。 しかし時には、TypeScript という概念が存在しない退屈な世界で開発を行わなけらばならない状況はあるでしょう。私はもはやキーボードでタイピングすることすらままなりません。 そんな JavaScript しか利用できない状況で代替手段となるのが、JSDoc です。JSDoc のアノテーションによって型を付与することによって最低限の支援を受けることができます。 @Type @Type タグを使用すると、TypeScript で型をつけるときと同じように型を宣言できます。
Webpack5 Module Federation で始めるマイクロフロントエンド
Module Federation とは Module Federation は Webpack 5 からコア機能として導入されました。 Module Federation を使用すると、異なる JavaScript アプリケーションから動的にコードをロードすることができます。これは複数の個別のビルドによって単一のアプリケーションを構築する手段を目的としています。 これはマイクロフロントエンドという言葉でよく知られていると思いますが Module Federation の目的としてはそれに限定されません。 マイクロフロントエンドとは？ マイクロフロントエンドについてうまく説明できる自信はないので説明は委ねます。 マイクロフロントエンドアプリケーションを作成する それでは、実際に Module Federation を使ってアプリケーションを作成してみましょう。 例として、以下の3つのフロン
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
