新しくCJSとESMの間での解決方法が変わる提案が出てきました。 まだマージされてませんが、すでに複数の承認があり、この方針から変わることはないように見えるので紹介したいと思います。 module: support require()ing synchronous ESM graphs by joyeecheung · Pull Request #51977 · nodejs/node Summary This patch adds require() support for synchronous ESM graphs under the flag --experimental-r... 新しい提案 この仕組みを利用する場合、--experimental-require-moduleフラグが必要となります。 以下は、わかりやすいようにpackage typeを指定せずにデフォルトはCJS
Web アクセシビリティに興味があったので、まず機械的なチェックツールから学んで知識を増やそうということでこのサイトに @axe-core/playwright と markuplint を導入してみました。 @axe-core/playwright のセットアップ 既に Playwright が導入されている状況を想定し進めます。まず@axe-core/playwright をインストールします。 pnpm add -D @axe-core/playwright このサイトの場合 VRT として Playwright を動かしているテストがあるので(過去資料)、そのプロセスに同居する形で axe を実行することにしました。 e2e.test.tsimport AxeBuilder from "@axe-core/playwright"; import type { Page, TestI
[beta] Next.jsクイズ2 • <p>にはなにが表示されるでしょうか？ /app/page.tsx "use client"; import { useCallback, useEffect, useState } from "react"; export default function Home() { const [date, setDate] = useState(); const fetchDate = useCallback(async () => { const response = await fetch("/api"); const data = await response.json(); setDate(data.date); }, []); useEffect(() => { fetchDate(); }, [fetchDate]); return ( <
追記 コメントありがとうございます、ご指摘を参考に読みやすくなるように修正しました！ はじめに (本記事は初歩的な内容ですが、少なくとも僕は引っかかったので記事化したものです) Cookie に HttpOnly という属性があります。 この HttpOnly を設定することで JavaScript からの直接の参照・操作を禁止することによって、XSS などの手法によって悪意のある第三者から Cookie の内容を見られるのを防止することができます。 ここまでは多くの記事に書いてあるのですが、私は一点ずっと勘違いしていました。 いや、直接値を読み取れないってだけで、API呼び出しとかの時に使えないってわけじゃないんかーーーーーーーーーーい！！！ いや、まあそれすらできなかったら何のための Cookie なんですかという話なのでそりゃそうなんですが... ということで見ていきます。 実装例(
令和最新版 CoffeeScriptで書かれたnodeと上手くやっていく方法、そして決別 <わかれ> - moznion
moznion サーバーサイドエンジニア Seattle, Washington在住 10年モノのCoffeeScript on node というのは若干言いすぎで、およそ9年モノです 2014年当時の状況 ES2015以前 (そりゃそう) Babelはあった TypeScriptブレイク以前 (だいたい2016年くらいから広くproduction readyになったという印象) AltJSの萌芽 => この時点でCoffeeScriptを採用したのは間違いではないはず...... 2023年現在の状況 JavaScriptの言語機能がめちゃ拡張された TypeScriptがメジャーに DHH、TypeScriptをやめる => CoffeeScriptを使うメリットはおそらく失なわれたと言ってもよい (このへんを参考にした: https://yosuke-furukawa.hatenab
GraphQL のレスポンスのモックデータの作成を補助する TypeScript ライブラリを作った - mizdra's blog
GraphQL を使って Web アプリケーションを実装していると、GraphQL API のリクエストをモックしたいことがあると思います。 ユニットテストのために、ダミーレスポンスに差し替えたい ビジュアルリグレッションテストのために、ダミーレスポンスに差し替えたい Storybook で story を書くために、ダミーレスポンスに差し替えたい バックエンドの resolver 実装を待たずにフロントエンド側の開発を始めるために、ダミーレスポンスに差し替えたい 一般には GraphQL Client にモックするための機能が実装されてるので、そうしたものを使うことが多いと思います。 zenn.dev また最近は Client よりも外側のレイヤーでリクエストを interrupt してモックする「msw」を使うケースも増えてきてます *1。 blog.engineer.adways.n
はじめに promiseを使うとき、いつもpromiseメソッドチェーンで記載していますか？ async/awaitを利用していますか？ もちろん状況によって両方書くのが殆どだとは思うのですが、私はasync/awaitの方が同期的な書き方ゆえに読みやすいため、なるべくそちらで記載しています。しかしながら、エラーハンドリングが理解できていなかったため、エラーの所在を突き止めるのに苦労してしまいました。 そのため、これを機にasync/awaitにおけるエラーハンドリングについて備忘録的にまとめておきます。 この記事のまとめ; catchされるエラーはrejectのみか、throwされたエラーも含まれるか →両方catchできる async関数における処理の順序、awaitがある場合とない場合 →awaitがない場合には同期的に処理が実行され、catchできなくなる エラー処理を外側に伝播し
はじめに 登壇版 Taskの本質 C# のイテレータ async/await Compiler Transform ExecutionContext builder.Start() の重要性 IAsyncStateMachine.MoveNext おわりに はじめに C#er は呼吸するように使っている async/await。 そんな async/await について、先日 Stephen Toub 氏 (.NET の中の人。中心人物の一人。) が How Async/Await Really Works in C# という非常に面白い記事を投稿していました。 この記事では Stephen 氏の記事をベースに、C# において async/await は実際どうやって動いてるの？というお話をしていきます。 以前に C#での非同期メソッドの分析。 という翻訳記事を書いたのですが、元になった記
前編と後編の2部構成にしています。 前編は【今までのReactらしい状態管理術】 後編は【Next.js 13 /app (React Server Components) らしい状態管理術】 の説明です。両者を比較します。 コンポーネント単位でサーバー側のレンダリングを選択できるので、GraphQLでなくてもバックエンドへのアクセスを纏められたり、あらかじめサーバー側でデータを加工することで、バンドルサイズ0を目指せる React Server Components 。 これは周知の通り、クライアントコンポーネントとサーバーコンポーネントに分かれますが、 useState や Recoil などはサーバーコンポーネントでは利用できないので、 Next.js 13 /app （React Server Components） らしい状態管理術はこんな感じになります。 サーバーコンポーネント
はじめに C#におけるasync/awaitを使う上で、絶対に意識しないといけないものは「キャンセル処理」です。 正しく処理をキャンセルしないとメモリリークを起こしたり、デッドロックやデータ不整合を引き起こす可能性があります。 今回はこの「async/awaitにおけるキャンセル処理」について話します。 対象 C#におけるasync/await全般 Task/ValueTask/UniTaskすべてに共通します Unity含む C#のasyc/awaitについてイマイチ自信が持ててない人 先に「結論」 asyncメソッドはCancellationTokenを引数に取るべき await対象が引数にCancellationTokenを要求する場合は省略せずに渡すべき OperationCanceledExceptionの取り扱いを意識するべき 解説 そもそも「キャンセル」とは何を指すのか そも
はじめに ncaq氏の記事を読んで様々なことを学習できました。 asyncが「syncしない」なのにawaitが「waitする」なのは何故か。awaitがasync waitであるという説は正しいのか。async/awaitの語源について学習したことを記事にしました。 asyncとawaitのa-の違い asyncはsynchronize（同期）にa-（否定）が付いてasync（同期しない）となります。 awaitはwait（待つ）にa-（否定）が付いて「待たない」となりません。a-（方向）が付いてawait（待つ）となります。 a-（否定）とa-（方向）の違いです。 a-（否定）は「エイ」と発音する傾向 asynchronous エイスィンクロナス 非同期 Ajax エイジャックス(Asynchronous JavaScript And XML) asymmetry エイスィメトゥリィ
RFC: First class support for promises and async/await by acdlite · Pull Request #229 · reactjs/rfcs
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Intro Fetch API の実装が広まり、 IE もリタイアを迎えたことで、今後忘れ去られていくことになるだろう XMLHttpRequest について。 どのように始まり、どのように広まり、どのように使われなくなっていくのか。その間に残した多大な功績を残す。 XMLHttpRequest の始まり この名前は非常に長いため、通常 XHR と略される。 この API は、現在の Web API のように W3C/WHATWG による標準化を経て策定された API ではない。 Microsoft によるいわゆる独自実装の API として始まり、後追いで標準化される。 したがって、 Web API の中でもかなり異質な命名である XHR が、 XmlHttpRequest でも XMLHTTPRequest でもなく XMLHttpRequest である理由も、 Microsoft の命
DDDにおけるRepositoryパターン
Repositoryパターンについて再学習した際の備忘録です。 Repositoryパターン ドメインオブジェクトの集まり (以降、集約)を抽象化する設計手法。 DAO(DataAccessObject)とよく似ているが、DAOはデータアクセスの処理を抽象化する手法であり、Repositoryとは意識する点が真逆になっている。 また、DAOはクラスの分割方法については定義されていない点がRepositoryとは違う所となる。 データアクセスの抽象化という観点から、ORMもDAOの一種とも言える。 その特徴からRepositoryの内部でDAOを使用してデータを取得する事はあるが、逆にDAOの内部でRepositoryを使用してデータを取得する事は基本的には無い。 interface PostRepository { findById(postId: PostId): Promise<Pos
実装例から見る React のテストの書き方 - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは！フロントエンドエキスパートチームの@nus3_です。 kintone のフロントエンド刷新プロジェクト（フロリア）では、品質を保ったまま開発を加速させるためにフロントエンドのテストを積極的に行っています。 今回はそんなフロントエンドのテストの実装例をいくつか紹介します。この記事がフロントエンドのテストを行う上での参考になれば幸いです。 テストに使用する主なパッケージ コンポーネントのテスト 補足: Testing Library の記法をチェックしてくれるeslint-plugin-testing-library カスタムフックのテスト 補足: React v18 では @testing-library/react の renderHook を使う 参考リンク 色々なテスト事例 setTimeout を使うコンポーネントのテスト 補足: Storybook の story を使
async/awaitの鬼門の一つとして、適切なキャンセル処理が挙げられます。別に基本的にはそんな難しいことではなく、CancellationTokenSourceを作る、CanellationTokenを渡す、OperationCanceledExceptionをハンドリングする。というだけの話です。けれど、Tokenに手動でコールバックをRegisterしたときとか、渡す口が空いてないものに無理やりなんとかするときとか、タイムアウトに使った場合の始末とか、ちょっと気の利いた処理をしたいような場面もあり、そうした時にどうすれば良いのか悩むこともあります。 こういうのはパターンと対応さえ覚えてしまえばいい話でもあるので、今回はAlterNatsの実装時に直面したパターンから、「外部キャンセル・タイムアウト・大元のDispose」が複合された状況での処理の記述方法と、適切な例外処理、そして最
皆さんこんにちは。現在、フロントエンドでは宣言的UIが大流行しており、そのためのライブラリもReactを筆頭に複数存在しています。 ライブラリが複数存在するところには当然のように比較や論争が起こるものですが、UIライブラリの場合はパフォーマンスがよく焦点となります。 筆者はReactの信者ですが、Reactは古株ということもあってか、最近の議論ではReactは他のライブラリと比較されるかませ犬のような役割を担うのがよく見られます。「仮想DOMは必要ない」といった類のものです。 しかし、筆者の考えではReactは今でも、もっとも真剣にパフォーマンスに取り組んでいるUIライブラリです。特に、Reactはパフォーマンスを高いユーザーエクスペリエンスのための手段として捉えており、ドキュメントにもユーザーエクスペリエンスという言葉が多く出てきます。 そこで、今回はReactが最も有利になるようなベン
jestでDBありのテストを高速化する
課題link お手伝いしているシステムでNestJSを採用しているバックエンドのテストが遅いという課題があったので対処した。 前提link フレームワークDBテストランナーその他 テストの総数は700弱。 最終結果link 最終的には2段階の改修を経てローカルのテストが3倍速程度高速化した。 # before Test Suites: 145 passed, 145 total Tests: 2 skipped, 681 passed, 683 total Snapshots: 0 total Time: 925.063 s Ran all test suites. Done in 926.48s. # ts-jestを@swc/jestに置き換えた Test Suites: 145 passed, 145 total Tests: 2 skipped, 681 passed, 683 t
Deno入門 ─ 新しいTypeScript/JavaScript実行環境でWebアプリ開発とデータベース接続の基本を体験しよう｜ハイクラス転職・求人情報サイト AMBI（アンビ）
例えばmain.tsというスクリプトに対して、ファイルの読み取りだけを許可したい場合は、以下のようにコマンドを実行します。 $ deno run --allow-read main.ts このときmain.tsプログラムはファイルの読み取りだけが可能になるため、ファイルの書き込みやネットワークアクセスをするとPermissionErrorによる実行時エラーになります。 なお、実行時にフラグを何も与えなければ、どの権限も持っていない状態になります。 各フラグにはパラメータを指定でき、例えば次のように実行すると/home/userディレクトリの読み込みだけが許可されます（--allow-writeフラグも同様）。 $ deno run --allow-read=/home/user main.ts また、--allow-netを次のように指定すると、特定のドメインとポートだけのアクセスを許可で
JavaScriptの仕様であるECMAScriptはEcma Internationalによって定められています。ECMAScript 2015（ES6）の登場以降は、ECMAScript 2016、ECMAScript 2017･･･と、年次で仕様が更新されています。ECMAScript 2022（ES2022）は2022年6月22日のEcma InternationalのGA 123rd meetingにて、ECMAScript 2023（ES2023）は2023年6月27日のGA 125th meetingで承認されました。 ES2022とES2023はすでに多くのブラウザやNode.js環境で利用可能です。本記事では新仕様と使いどころを紹介します。 ES2023 - 配列の非破壊操作 ES2023では配列を非破壊で操作できるメソッドが追加されています。非破壊とは、元の配列を変更せ
GitHub - httptoolkit/mockrtc: Powerful friendly WebRTC mock peer & proxy
Let's write an automated test with MockRTC. To test WebRTC-based code, you will typically need to: Start a MockRTC mock session Define rules that match and mock the traffic you're interested in Create a WebRTC connection to a mock peer, by either: Using MockRTC's offer or answer directly. Applying the provided MockRTC.hookWebRTCConnection hook function to your RTC connection, and then connecting t
この本は、ブルーベリー本の 8 章からインスパイアされて、 TS の型が示す情報から Promise というものを理解してみる、というアプローチで書いたJSの非同期処理の解説です。 これらの資料と合わせて読むことを推奨します。 JSのイベントループのイメージを掴む JSでは中々意識することが少ないですが、正しく理解するには OS レベルのスレッドの視点で考え始める必要があります。 ブラウザや Node.js では一つのスクリプト実行単位を1つのスレッドに割り当てます。それをメインスレッドと呼んだり、ブラウザだったら UI スレッドと呼んだりします。 例えばブラウザでは、これは秒間60回、つまり 16.6ms ごとにループを呼び出します。(node だったらこれがもっと短いです) 仮に setTimeout の実装がなかったとして、それ相当の擬似コードを書くのを試みます。 let handl
Node.js v18がリリースされました 🎉 nodejs.org この記事では Node.js v18 の主な変更点を抜粋して紹介します！ fetch() がフラグ無しで実行可能に (experimental) HTTP requestTiemout()のデフォルト値の変更 node:test モジュール（テストランナー）の追加 (experimental) V8 アップデートによる新しい JavaScript の API の追加 Array#findLast(), Array#findLastIndex() Intl.supportedValuesOf() その他の改善 Web Streams API のグローバルへの追加、実行時の警告の削除 (experimental) まとめ fetch() がフラグ無しで実行可能に (experimental) github.com Node
はじめに JavaScript の非同期処理を学習してみて「ある程度自信を持って理解できたと言える」状態に到達したので、その感想とまとめの学習ロードマップとその中でどのような知識が必要になるかを紹介したいと思います。 あるいは、自分が実際に学習してきた道筋に基づいているのでショートカットとして参考にしてもらったり、使えるリソースなどの情報が共有できると思います。もしくは「JavaScript 初心者が非同期処理を理解できるようになるまでの道筋」というストーリーで１つのサンプルとして見ていただけるといいかもしれません。 ChangeLog 大きな変更のみをトラッキングしています。 2022-11-16 本の内容を反映させた追記・修正を追加 2022-05-21 構成を修正 「V8 エンジンから考える」の項目を追加 2022-04-30 「イベントループの共通性質」の項目を追加 「ロードマップ
SPA認証トークンはlocalStorageでもCookieでもない、Auth0方式はいいねというお話 - @mizumotokのブログ
SPA認証トークンをどこに保存するかは論争が絶えません。localStorageやCookieがよく使われますが、Auth0は違う方法を採用しています。この記事では、Auth0のトークン管理の方式を理解でき、トークン管理上のセキュリティへの理解を深めることができます。 SPAの認証トークンをどこに保存するか ブラウザでトークンを保存できる場所 保存場所の比較 メリット・デメリット Auth0のアプローチ トークンはインメモリに保存 OpenID Connect準拠とトークン取得のUI/UXの悪化回避を両立 Auth0のjsライブラリ ログイン アクセストークンの（再）取得 図解 ログイン アクセストークンの（再）取得 自サービス内の認証だけのもっと簡易な構成 ログイン IDトークン取得 まとめ SPAの認証トークンをどこに保存するか React やVueで認証付きSPA（Single Pa
Playwright & Vite ではじめる脱レガシー向け軽量 Visual Regression Test - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは！フロントエンドエキスパートチームの @mugi_uno です。 みなさんは Visual Regression Test は普段活用していますか？ 昨今では事例もよく耳にするようになった印象です。一度使って手放せなくなった方もいるのではないでしょうか。 今回の記事では、通常のプロダクト新規開発とは異なる “脱レガシー” の文脈で Playwright を用いた簡易的な Visual Regression Test を試してみたので、導入に至る経緯と、どのように実施しているかを紹介します。 フロントエンドリアーキテクチャとサイレントリリース 現在サイボウズでは kintone のフロントエンドリアーキテクチャプロジェクトと称して、Closure Tools から React への脱レガシー作業が進行中です。プロジェクトの詳細については @koba04 が書いた次の記事をご覧くださ
選ばれたのは Next.jsでした - Next.jsによるServer Side OGP ⽣成 / Next.js was chosen - Server Side OGP generation with Next.js
isoken26 (LINE株式会社) UIT meetup vol.11『フロントエンド紅白LT合戦』での発表資料です https://uit.connpass.com/event/197740/
こんにちは、ぬこすけです。 近年、Webフロントエンドではサイトのパフォーマンスの重要性が高まっています。 例えば、GoogleはCore Web Vitalというパフォーマンスに指標を検索結果のランキング要因に組み込みました。 また、近年の某企業が「パフォーマンスの改善に取り組んだ結果、セッション数〇％アップ、CVR〇％アップ...」などの事例は枚挙にいとまがないでしょう。 パフォーマンスチューニングするためには、定量的に計測してボトルネックを探すようなトップダウンなアプローチもあります。 しかしながら、時には千本ノック的にハウツーを片っ端から試していくボトムアップなアプローチも有効になることもあったり、日々のコーディングでパフォーマンスを意識したコードを書くことは大切でしょう。 この記事ではパフォーマンス最適化のハウツーを紹介します。 パフォーマンス改善の施策が思い浮かばない時やフロン
グーグルが開発した画像圧縮ツールSquoosh。フロント開発向けにNode.jsで扱う方法まとめ 『Squooshスクーシュ』というGoogleが開発した画像圧縮ウェブアプリがあります。ブラウザで変換結果を見ながら圧縮設定ができるので、画像圧縮の難しい知識を持たない方でも使いやすいことが特徴です。圧縮だけでなく、WebPなどの各種フォーマットへの変換・リサイズといったこともできる便利ツールです。 このSquooshをNode.jsで扱える『libSquoosh』が存在します。libSquooshは大量の画像を一括で圧縮、WebPへの変換、リサイズなどの処理をこれ1つで完結できるのがポイントです。昨今のウェブはページの読み込み時間が重視される傾向があります。画像のファイルサイズは読み込み時間に大きく影響するため、画像圧縮は重要なテクニックです。libSquooshをwebpack・Viteと
はじめに .NET 6 がリリースされて、もうすぐ 3 カ月になります。時が経つのは早いですね…。 .NET 6 は長期サポートバージョンで .NET Framework と比べて一般的に性能がいいので、マイグレーションについて考えてる人も多いと思います。 そんな性能のいい .NET 6 ですが、特定の文脈で性能の悪いコードを書くことも当然出来ますし、そうならないように色々ベストプラクティスが提供されています。 例えば ASP.NET Core 6.0 向けでは以下のようなドキュメントがあります。 その他にも Azure Functions でも以下のようなドキュメントがあります。 色々書いてありますが、大体のドキュメントに書いてある内容として非同期 API を使って呼び出しのブロックをしないというものがあります。Web アプリケーションだとスレッドプールを使ってリクエストを捌いているので
Rust大好きっ子のためのデータベース考
経緯 趣味プロジェクトとしてRustをサーバーサイドに採用したWebアプリケーションをぼんやり考えています。その過程で、データベースのチョイスについてかなり悩んだので、一度ここでまとめておきます。 前提 データベースに入れるデータは ・ユーザーデータ（名前、メールアドレスなど） ・アイテムデータ（ユーザーが登録するもの。アイテム名、更新時間など） といったごく一般的なものを考えます。 サーバーサイドのフレームワークは、actix-web…で考えていましたが、最終的には非同期ランタイムとしてtokioを使うaxumにしました（理由は後述）。 また、データ量やアクセス頻度については仮定をおきません。巨大なデータを扱うということになれば、おそらくその時点でかなり候補が絞られることになるかと思いますが、今回は運用面でのパフォーマンスの差については扱わないものとします。 特に今回は「趣味」なので、趣
jest における MSW の活用事例
MSW を使った jest のテストについて、引数などの検査が面倒という記事を拝見したので、もし同様にアプローチを模索されている方がいらっしゃれば参考に、と思い記事にしました。筆者は普段以下の様に、server.use内にjest.fnを仕込みテストしています。例えば API が2回呼ばれたことを検証する場合、次の様になります。 const server = setupMockServer(...handlers); describe("API call の検証", () => { const mockFn = jest.fn(); beforeEach(() => { server.use( rest.get("/path/to/api", async (req, res, ctx) => { mockFn(); // <- here return res(ctx.json({}));
この記事は Qiita C# Advent Calendar 2021 の5日目の記事です。 はじめに C# で async/await が登場してからずいぶんと時間がたち、モダンな C# においてはほぼ必須となりました。Unity でも UniTask などのライブラリもあり、簡単に非同期処理が書けます。この記事では C# での非同期処理の歴史にも触れつつ async/await の動作原理について書きます。 Unity C# の話を書いた方が需要が高そうなので Unity および UniTask を前提にした説明とコードが多く出てきますが、async/await は C# の言語機能であるため、動作原理自体は .NET でも同じです。非 Unity の文脈では適宜読み替えてください。 また、詳細を完璧に説明するよりもわかりやすさを重視したため、一部正確さを欠いた説明をしています。ご了承
C# Advent Calendar 2021の参加記事となっています。去年は2個エントリーしたあげく、1個すっぽかした（！）という有様だったので、今年は反省してちゃんと書きます。 スクレイピングに関しては10年前にC#でスクレイピング:HTMLパース(Linq to Html)のためのSGMLReader利用法という記事でSGMLReaderを使ったやり方を紹介していたのですが、10年前ですよ、10年前！さすがにもう古臭くて、現在ではもっとずっと効率的に簡単にできるようになってます。 今回メインで使うのはAngleSharpというライブラリです。AngleSharp自体は2015年ぐらいからもう既に定番ライブラリとして、日本でも紹介記事が幾つかあります。が、いまいち踏み込んで書かれているものがない気がするので、今回はもう少しがっつりと紹介していきたいと思っています。それと直近Visual
CI 環境でのユニットテストの実行時間を2倍速くした話 (Jest + Mongo DB + Circle CI) - ミツモア Tech blog
こんにちは。ミツモアでテックリードしております白柳（@yanaemon) です。 ミツモアのプロダクトは TypeScript で、クライアントサイドの React とサーバサイドの Node.js で書かれており、ユニットテストは Jest + Mongo DB + Circle CI を利用しています。 しかし、プロダクトが大きくなるにつれて、全ユニットテストを実行するのに 10 分程度かかり、開発効率が悪くなっていました。 今回は、それを 2 倍以上速度改善した取り組みについて紹介します。 実施したこと いきなりですが、具体的に実施したことと、改善結果になります。 実施内容 改善結果 1. ファイル分割をし、並列度をあげる これ単体では速度改善は期待できない 2. テスト対象を修正されたファイルのみにする x1 ~ x10 速度 UP ※ただし最終的にはやめました 3. DB 生成な
こんにちは。虎の穴ラボのH.Hです。 今回は先日発表されたChromeの開発中の新機能であるRecorder機能について使用方法や利用する際の注意点などをまとめました。 Recoder機能とは ブラウザのChrome97で追加される予定の機能で、ブラウザの画面上で操作した記録を取得してくれる機能になります。 この記事を書いている2021年11月17日では一般に提供されているChromeの最新版は96となり、開発中の「Chrome Dev」もしくは「Chrome Canary」でRecorder機能を使用することができます。 利用している時の様子はChromeの開発者向けのページに公開されています。 developer.chrome.com 主な機能は以下の通りです。 ・操作の記録及び再実行(リプレイ)できる ・再実行時にパフォーマンスの記録・確認できる ・記録した内容の編集ができる ・操作
Amazon Web Services ブログ AWS Lambdaによる進化的アーキテクチャの構築 この投稿は、メディアとエンターテインメントのプリンシパルソリューションアーキテクトであるLuca Mezzaliraによって書かれました。 俊敏性により、必要に応じてワークロードを迅速に進化させ、新機能を追加したり、新しいインフラストラクチャを導入したりできます。コードベースでアジリティを実現するための主な特徴は、疎結合コンポーネントと強力なカプセル化です。 疎結合は、テストカバレッジを改善し、一貫したリファクタリングを作成するのに役立ちます。カプセル化を使用すると、実装ロジックを明らかにすることなく、サービスとのやり取りに必要なものだけを公開できます。 進化的なアーキテクチャは、設計の俊敏性を実現するのに役立ちます。「進化的アーキテクチャの構築」という本の中で、このアーキテクチャは「複数
前置き 業務で大量のWeb APIを並行で投げる必要があり、良い方法がないか探したところ、asyncio が良いソリューションだったため勉強した。勉強したことをまとめて、アウトプットするということで情報をここで公開する。これから asyncio を学習する人の役に立つとうれしい。 想定読者 並列・並行処理の概念はわかっているが、asyncio の処理がいまいち理解できてないので理解したい人 検証環境 Python 3.9.4 Jupyter Notebook 上で検証 asyncio とは asyncio (→公式ドキュメント) とはざっくり言ってしまうと、async/await 構文を使ってシングルスレッドで並行処理を行うためのライブラリ。 Python には並列処理・並行処理を行うためのライブラリがいくつかあるが、シングルスレッドで動くのがポイント。下記図のように、あるライブラリではマ
JavaScriptの非同期処理をじっくり理解する (4) AbortSignal, Event, Async Context
対象読者と目的 非同期処理の実装方法は知っているが、仕組みを詳しく知らないのでベストプラクティスがわからないときがある 実行順序の保証がよくわからないので自信をもってデプロイできない変更がある より詳しい仕組みを理解することでより計画的な実装をできるようになりたい という動機で書かれた記事です。同様の課題を抱える人を対象読者として想定しています。 目次 実行モデルとタスクキュー Promise async/await AbortSignal, Event, Async Context WHATWG Streams / Node.js Streams (執筆中) 未定 中止処理 並行処理ではしばしば実行中の処理を中止したい場合があります。 古典的なキャンセル処理 Webブラウザ/Node.jsともに、 setTimeout の中止が可能です。 const timeout = setTimeo
テストの可読性を支える技術
テストの可読性は、とても大事です。 そんな可読性をあげてくれるパッケージや考え方などを解説したので ぜひご覧いただければ幸いです。
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Node.jsに入る新しいCJSからESMへの読み込み方法の紹介 - hiroppy's site
axe-core/playwrightとmarkuplintを導入しアクセシビリティの自動テストをできるようにした
You Don't Need Next.js | ドクセル
Cookie の HttpOnly 属性について勘違いしていたこと - Qiita
async/awaitにおけるエラー処理を実行の順番から整理する - Qiita
【C#】C# の async/await は実際にどうやって動いているか。 - ねののお庭。
(Next13 /app) React Server Components 時代の状態管理術【前編】
【C#】async/awaitのキャンセル処理まとめ - Qiita
async/awaitのaの違い～async wait説への反論 - Qiita
XMLHttpRequest とはなんだったのか | blog.jxck.io
neue cc - async/awaitのキャンセル処理やタイムアウトを効率的に扱うためのパターン＆プラクティス
Reactに有利なベンチマークを作ってみた - Qiita
JavaScriptのES2023・ES2022の新機能まとめ - ICS MEDIA
イベントループと TypeScript の型から理解する非同期処理
Node.js v18 の主な変更点 - 別にしんどくないブログ
JSの非同期処理を理解するために必要だった知識と学習ロードマップ
Webフロントエンドパフォーマンスチューニング80選 - Qiita
グーグルが開発した画像圧縮ツールSquoosh。フロント開発向けにNode.jsで扱う方法まとめ - ICS MEDIA
C# の Web アプリで async/await を使わないとどれくらい性能劣化するか見てみよう
(C#) async/await を理解する - ネコのために鐘は鳴る
neue cc - .NET 6とAngleSharpによるC#でのスクレイピング技法
Chromeに入るRecorder機能の利用と注意点 - 虎の穴開発室ブログ
AWS Lambdaによる進化的アーキテクチャの構築 | Amazon Web Services
図解でわかる asyncio 入門 - Qiita