この記事はTSKaigi2024での以下の私の発表内容を書き下ろしたものです。 なぜAPIに型をつけたいのか 現代のWebのシステム開発において、クライアント・サーバーともに型のある言語で開発されることが増えてきました。静的な型検査はコードの堅牢性やよりよいメンテナンス性の向上をもたらします。 プログラミング内部だけで型検査をするだけでも十分メリットはありますが、外部I/Oに対する型付けが不十分だとそのメリットを最大限に発揮してるとは言えません。外部I/Oとは、例えばWebフロントエンドだとLocalStorageやDOMからの入力値、それからネットワーク通信（今回はこれをAPIと呼びます[1]）などですね。サーバー側でいうとAPIからの入力・レスポンスやデータベースへの読み書きが該当します。 個人的な経験から言うと、Webシステムの開発におけるエラーの多くはAPIやデータベースとのやり取
Pythonでasyncとawaitキーワードを使用し複数の非同期処理を並行して実行してみます。 ■今回の環境（Python） 今回のPythonはバージョン3.8.5を用いる。（Mac OS） ■asyncとawaitキーワードを使用し複数の非同期処理を並行して実行する では、asyncとawaitキーワードを使用し複数の非同期処理を並行して実行するスクリプトを書いていきます。 ■コード import asyncio # 非同期関数 async def fetch_data(url): print("データ取得開始:", url) await asyncio.sleep(2) # ダミーの非同期待機（2秒） print("データ取得完了:", url) return "Data from " + url # メイン関数 async def main(): # 非同期処理の並行実行 tas
Pythonでasyncとawaitキーワードを使用してカウントダウンを作成し実装してみます。 ■今回の環境（Python） 今回のPythonはバージョン3.8.5を用いる。（Mac OS） ■asyncとawaitキーワードを使用してカウントダウンの作成 では、早速asyncとawaitキーワードを使用してカウントダウンの作成するために、コードを書いていきます。 ■コード import asyncio # 非同期関数 async def count_down(): print("カウントダウンを開始します") for i in range(10, 0, -1): print(i) await asyncio.sleep(1) # 非同期に1秒待機 print("カウントダウンが終了しました") # イベントループの作成と実行 loop = asyncio.get_event_loop(
新しく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を書いたりしていませんか？ Node.jsでJSを書いていて、非同期通信にPromiseを使うことはよくありますよね。 非同期なのでエラーになることも考えtry-chatch文を使って安全性にも配慮が必要です。 例えばこんなコードはどうでしょうか？ コード例 try { await getPromiseResolve(); //←resolveするだけのPromise new Promise((resolve, reject)=>{ reject("[test]:promise reject"); }) .then((result) => { console.error("promise -> then : result =", {result}); }); } catch (error) { console.error("promise -> catch: error
はじめに promiseを使うとき、いつもpromiseメソッドチェーンで記載していますか？ async/awaitを利用していますか？ もちろん状況によって両方書くのが殆どだとは思うのですが、私はasync/awaitの方が同期的な書き方ゆえに読みやすいため、なるべくそちらで記載しています。しかしながら、エラーハンドリングが理解できていなかったため、エラーの所在を突き止めるのに苦労してしまいました。 そのため、これを機にasync/awaitにおけるエラーハンドリングについて備忘録的にまとめておきます。 この記事のまとめ; catchされるエラーはrejectのみか、throwされたエラーも含まれるか →両方catchできる async関数における処理の順序、awaitがある場合とない場合 →awaitがない場合には同期的に処理が実行され、catchできなくなる エラー処理を外側に伝播し
■今回の環境（Python） 今回のPythonはバージョン3.8.5を用いる。（Mac OS） ■asyncとawaitキーワードを使用して非同期関数と非同期処理を行うでは、早速asyncとawaitキーワードを使用して非同期関数と非同期処理を行うために、コードを書いていきます。 ■コードimport asyncio # 非同期関数 async def print_message(message): print("処理を開始します") await asyncio.sleep(1) # 非同期に1秒待機 print(message) print("処理が完了しました") # イベントループの作成 loop = asyncio.get_event_loop() # 非同期関数の実行 loop.run_until_complete(print_message("Hello, World!"))
はじめに 登壇版 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の取り扱いを意識するべき 解説 そもそも「キャンセル」とは何を指すのか そも
はじめに 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 を使
どうも。CX事業本部Delivery部のえーたん（@eetann092）です。 今まで雰囲気でJavaScript（TypeScript）のasync/await、Promiseを使っていて最近苦しんだため、ハマったところの例と対策を備忘録として残しておきます。 await付け忘れ やらかした例 まず、awaitを付け忘れた例です。 import { setTimeout } from "timers/promises"; const unit = 1000; async function logSleepLog(msg: string) { console.log(msg); await setTimeout(1.5 * unit); console.log(msg); } (async () => { logSleepLog("hoo"); console.log("finish");
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では配列を非破壊で操作できるメソッドが追加されています。非破壊とは、元の配列を変更せ
【UniTask】UniTaskCompletionSourceを使って好きなタイミングで結果を確定させるUniTaskを生成する(ついでにUniTask.Voidの紹介) - はなちるのマイノート
はじめに 今回はUniTaskCompletionSourceについて紹介したいと思います。 github.com UniTaskCompletionSourceを使うことで好きなタイミングで結果を確定させるUniTaskを生成することができます。 早速見ていきましょう。 はじめに UniTaskCompletionSource UniTask.Void UniTaskCompletionSource UniTaskCompletionSourceの使い方new UniTaskCompletionSource()からTrySetResult(), TrySetCanceled(), TrySetException()が呼ばれるまで待つUniTaskをUniTaskCompletionSource.Taskから生成することができます。 public UniTask Task { [Debug
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
async await編 async awaitとは何か？ async&awaitとは.NETFramework4.5で追加された機能で，非同期処理をより同期的に記述できる機能です。 async awaitを使うとどんな良いことがあるのか？ async&awaitは前述のTaskと組み合わせることで同期プログラミングをしているような書き方で非同期プログラミングができます。.NETFramework4.5以降の開発環境でプログラミングしている場合は積極的にasync&awaitを使用しましょう。 async awaitを使わないとどんな悪いことがあるのか？ async&awaitを使わない場合は，UIスレッドに戻す記述を前述のTaskで紹介したContinueWithを使用して記述する必要があるので，async&awaitに比べると可読性は下がります。 async awaitの使い方 pub
はじめに 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 が書いた次の記事をご覧くださ
C#の非同期プログラミングは.NETFramework4.5以降はTaskとasync&awaitを使ったプログラミングを主流です。非同期プログラミングになじみのない人には非同期処理事態がわからないと思うのでそのあたりをじっくり解説した上で，C#でできる非同期プログラミングの具体的な実装方法を解説して行きます。 非同期ってはじめて聞く人には何のことかよくわからないと思いますが，簡単に言うと，例えばデータの検索画面があったとして，検索を実行してから検索が完了するまでに10秒くらいかかるとします。その10秒の待ち時間の間，次のどちらの処理がいいでしょうか？ （A）まったく画面操作ができなくて，画面が固まっていて，動いているのか止まっているのかも分からない。 （B)画面操作ができたり，プログレスバーがくるくる動作して「処理中です…」って感じで進捗状況を出してくれて，処理中を示してくれる。 間違い
選ばれたのは 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〇％アップ...」などの事例は枚挙にいとまがないでしょう。 パフォーマンスチューニングするためには、定量的に計測してボトルネックを探すようなトップダウンなアプローチもあります。 しかしながら、時には千本ノック的にハウツーを片っ端から試していくボトムアップなアプローチも有効になることもあったり、日々のコーディングでパフォーマンスを意識したコードを書くことは大切でしょう。 この記事ではパフォーマンス最適化のハウツーを紹介します。 パフォーマンス改善の施策が思い浮かばない時やフロン
■asyncとは asyncは関数やメソッドで使用するキーワードです。 asyncを使用して定義された関数は、実行するとPromiseを生成して返します。 ■awaitとは awaitはPromiseオブジェクトに使用するキーワードで、async関数内のみで使用できます。 awaitは非同期処理の結果がでるまでコードを停止します。 結果が出たら、再開して後に続くコードを実行します。 ただしこれはコードの流れ上の話で、停止中はタイマーなどの他の非同期処理も処理されます。
グーグルが開発した画像圧縮ツールSquoosh。フロント開発向けにNode.jsで扱う方法まとめ 『Squooshスクーシュ』というGoogleが開発した画像圧縮ウェブアプリがあります。ブラウザで変換結果を見ながら圧縮設定ができるので、画像圧縮の難しい知識を持たない方でも使いやすいことが特徴です。圧縮だけでなく、WebPなどの各種フォーマットへの変換・リサイズといったこともできる便利ツールです。 このSquooshをNode.jsで扱える『libSquoosh』が存在します。libSquooshは大量の画像を一括で圧縮、WebPへの変換、リサイズなどの処理をこれ1つで完結できるのがポイントです。昨今のウェブはページの読み込み時間が重視される傾向があります。画像のファイルサイズは読み込み時間に大きく影響するため、画像圧縮は重要なテクニックです。libSquooshをwebpack・Viteと
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TypeScriptとGraphQLで実現する型安全なAPI実装
Pythonでasyncとawaitキーワードを使用し複数の非同期処理を並行して実行する
Pythonでasyncとawaitキーワードを使用してカウントダウンを作成する
Node.jsに入る新しいCJSからESMへの読み込み方法の紹介 - hiroppy's site
axe-core/playwrightとmarkuplintを導入しアクセシビリティの自動テストをできるようにした
You Don't Need Next.js | ドクセル
Cookie の HttpOnly 属性について勘違いしていたこと - Qiita
Promise.thenとasync/awaitは混ぜるな危険。まぎらわしくてcatch処理を書き忘れる
async/awaitにおけるエラー処理を実行の順番から整理する - Qiita
Pythonでasyncとawaitキーワードを使用して非同期関数と非同期処理を行う
【C#】C# の async/await は実際にどうやって動いているか。 - ねののお庭。
(Next13 /app) React Server Components 時代の状態管理術【前編】
【C#】async/awaitのキャンセル処理まとめ - Qiita
【C#】async/awaitのキャンセル処理まとめ - Qiita
async/awaitのaの違い～async wait説への反論 - Qiita
XMLHttpRequest とはなんだったのか | blog.jxck.io
async/await周りで苦しんだ箇所の例と対策 | DevelopersIO
neue cc - async/awaitのキャンセル処理やタイムアウトを効率的に扱うためのパターン＆プラクティス
Reactに有利なベンチマークを作ってみた - Qiita
JavaScriptのES2023・ES2022の新機能まとめ - ICS MEDIA
イベントループと TypeScript の型から理解する非同期処理
Node.js v18 の主な変更点 - 別にしんどくないブログ
C#でのasync&awaitとTaskの使い方と非同期の考え方をわかりやすく解説#5 - ピーコックアンダーソン
JSの非同期処理を理解するために必要だった知識と学習ロードマップ
C#でのasync&awaitとTaskの使い方と非同期の考え方をわかりやすく解説#1 - ピーコックアンダーソン
Webフロントエンドパフォーマンスチューニング80選 - Qiita
【JavaScript】 async/awaitを解説します
グーグルが開発した画像圧縮ツールSquoosh。フロント開発向けにNode.jsで扱う方法まとめ - ICS MEDIA