進化するPromiseオブジェクト ［JS Modern Features no.2］ | gihyo.jp
こんにちは！ サイボウズフロントエンドエキスパートチームの左治木です。 今回のテーマは「進化するPromiseオブジェクト」です。 Promiseは、非同期処理を管理するためのオブジェクトで、ECMAScript 2015 (ES6)で導入されました。ECMAScript 2017ではasync／await構文が追加され、非同期処理がより直感的に記述できるようになりました。現在では、async／await構文が非同期処理の主流となっています。 一方で、Promiseの機能はasync／await構文の登場後も進化を続けています。これにより、非同期処理がさらに扱いやすくなり、従来のPromiseでは難しかった細かい処理も可能になっています。今回は、ES2020以降で追加されたPromiseの新機能をユースケースを交えて解説します。 Promiseの基本を簡単におさらい Promiseは、非同
君だけのオリジナル async / await を作ろう / TSKaigi 2025
TSKaigi 2025 での発表資料です - スピーカーノート リポジトリ…
Storybook Play functionでAHA testingのすゝめ - LayerX エンジニアブログ
バクラク事業部でソフトウェアエンジニアをしている @ta1m1kam です。 フロントエンド開発において「どのテストをどれだけ書くべきか？」という問いは、誰もが一度は悩むテーマです。ユニットテスト？E2Eテスト？ビジュアルリグレッション？それぞれに役割があり、バランスが求められます。 Testing Trophy そんな悩みに対する一つの指針として、Kent C. Dodds氏が提唱した 「Testing Trophy（テスティング・トロフィー）」 という考え方あります。（提唱自体は2021年ごろなので、今では割と一般的になっているかなと感じています。） kentcdodds.com ポイントは「ピラミッド」ではなく「トロフィー」 この考えでは「最も費用対効果が高いのは統合テスト」だと指摘しています。 実際、アプリケーションでのユースケースを1つのコンポーネント単位でシナリオベースに検証で
ChatGPT (o1-preview) にテストを渡してコードを実装させるとどうなるか試した
はじめに 前にも別のモデルでやってる ただ o1-preview は、やり取りを重ねるよりも一発で終わらせるほうがいいらしいので、最終的なテスト全体を渡すようにした。 情報の提示方法が異なると当然結果も変わるので、 gpt-4o でも同様なことを試した。 材料 プロンプトは以下。 基本的に最初にやったときと同じ。ペアプロではないのでその部分の調整をしている - 私がテストコードを提示するのでそのテストケースをパスする最小限の実装をしてください - Vue.js のバージョン 3 と Typescript で実装を行ってください - コードのみを示してくださいコードの解説などは必要ありません - スタイリングは必要ありません - テストケースに失敗したらその内容をチャットで送信するので最小限のコードの修正をしてください - テストのコードには vitest を利用しています jest と互換
"use server"; でexportした関数が意図せず？公開される
Next.js AppRouterで利用できるReactのServer Actions機能。クライアントからサーバ上の処理を関数で呼び出せるので非常に便利ですが、 "use server"; のことをあまり知らず、誤った使い方をすると意図せず公開したくない関数が外部に公開されてしまうケースがあるので注意です（ほとんどこんなケースはないと思いますが、なくはないので注意喚起です）。 Server Actionsの例 Server Actions用の関数として宣言するためには "use server"; が必要です。それ以外は至って普通の非同期関数で大丈夫です。 "use server"; export async function someAction() { return { message: "Server Action", }; } 次に定義したServer Actionsの関数を呼び出
LINE Botの開発でCloudflareとHonoを使う理由
概要 速さが正義 LINE Botの開発でCloudflareとHonoを使う理由 Cloudflare Workersの応答速度が速いから PoPについて CloudflareはAWSのlambdaに比べてポイントオブプレゼンス（PoP）の数が多く、処理が実行される場所がよりユーザーの近くにある可能性が高い。 そのため、パフォーマンステストではAWS Lambda、AWS Lambda@Edgeよりも応答時間が小さいという結果になった。 コールドスタートがない Cloudflare Workersはコールドスタートがなく、LambdaとLambda@EdgeのようにEventBridgeで1分おきにツンツンしなくていい。 Service bindingsが便利だから Cloudflare WorkersのService bindingsを使用することで、worker間の通信はパブリックに
axe-core/playwrightとmarkuplintを導入しアクセシビリティの自動テストをできるようにした
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
You Don't Need Next.js | ドクセル
[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 ( <
令和最新版 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
個人ブログの Next.js v13 移行でやったことまとめ
Next.js v13 への移行でやったことまとめ 準備 基礎となる記事に目を通した -> https://zenn.dev/link/comments/eefa4975aaedaf マイグレーションガイドを見て一つずつ対応しようかなと思ったけど、記事が長いのでnext devで動かして出てきたエラーを潰していく方法にした。とりあえずビルドできるようになったら、見落としやより良いやり方があるか確認するために読む。 ページコンポーネントに対して pages にあるファイルを app ディレクトリに移動させる 規約 通りに page と layout にコンポーネントを分割する getServerSideProps の処理をasync function getData() に変更する コンポーネントを async 関数にする props ではなくコンポーネントの中でgetData()の返り値を
JavaScriptのES2023・ES2022の新機能まとめ - ICS MEDIA
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では配列を非破壊で操作できるメソッドが追加されています。非破壊とは、元の配列を変更せ
JSの非同期処理を理解するために必要だった知識と学習ロードマップ
はじめに JavaScript の非同期処理を学習してみて「ある程度自信を持って理解できたと言える」状態に到達したので、その感想とまとめの学習ロードマップとその中でどのような知識が必要になるかを紹介したいと思います。 あるいは、自分が実際に学習してきた道筋に基づいているのでショートカットとして参考にしてもらったり、使えるリソースなどの情報が共有できると思います。もしくは「JavaScript 初心者が非同期処理を理解できるようになるまでの道筋」というストーリーで１つのサンプルとして見ていただけるといいかもしれません。 ChangeLog 大きな変更のみをトラッキングしています。 2022-11-16 本の内容を反映させた追記・修正を追加 2022-05-21 構成を修正 「V8 エンジンから考える」の項目を追加 2022-04-30 「イベントループの共通性質」の項目を追加 「ロードマップ
実行環境依存のコードに対してテストを書く考え方
社内用の啓発記事ですが、閉じる理由がないのでここに投げます。 ブラウザにべったりなコードを書いてると、ブラウザや node.js 固有の環境をインラインで記述してしまうことが多々あると思います。 あえてダメダメなブラウザ向けのエントリポイントの例を書きます。 // main.ts let id = localStorage.get('id'); if (!id) { id = `${navigator.userAgent}-${Math.random()}`; localStorage.set('id', id); fetch('/auth', { method: 'POST', credentials: 'include', body: JSON.stringify({ id, at: Date.now(), }), headers: {'Content-Type': 'applicat
マイクロサービスにおける非同期処理は何で実現させるか？ Callback地獄などを起こさないKotlin Coroutineのメリット
LINEが定期的に開催する、Kotlinをテーマにした技術者向けのミートアップ「LINE Developer Meetup for Kotlin」。ここで、開発3センターの岩谷氏が登壇。「LIVEBUY」の開発でKotlin Coroutineを利用した知見を紹介します。 自己紹介とセッションの概要 岩谷明氏：みなさんこんにちは。LINEの岩谷と申します。LINE Developers Meetup for Kotlinにご参加いただき、誠にありがとうございます。本日最初のセッションですが、「LINEでKotlinを活用してサービスを作っていく話」と題して、発表します。よろしくお願いいたします。 簡単に自己紹介します。私は2016年にLINE株式会社に入社しました。今までは「LINE LIVE」や「LINEノベル」などのiOSやAndroidのエンジニアをしていましたが、2019年から、本
Node.jsのネイティブES Modulesサポートが抱える問題を解決するBabelプラグインを書いた
babel-plugin-node-cjs-interop というパッケージを作ったのでその紹介です。 (GitHub) 何が問題か Node.jsのネイティブES ModulesサポートとBabelやTypeScriptのES Modulesサポートを併用したときに問題が起きます。 ESMとCJS JavaScriptには標準のモジュールシステム (ES Modules, ESM) がありますが、ESMの策定前に先だっていくつかのコミュニティー定義のモジュールシステムが存在していました。そのうちNode.jsを中心として使われていたのがCommonJS Modules (CJS) です。そのNode.js界隈でもESMへの移行が進んでいます。 移行にあたって問題になることのひとつが、ESMとCJSのエクスポートモデルの違いです。 ESMでは、モジュールは0個以上の名前つきエクスポートを定
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 生成な
Chromeに入るRecorder機能の利用と注意点 - 虎の穴開発室ブログ
こんにちは。虎の穴ラボのH.Hです。 今回は先日発表されたChromeの開発中の新機能であるRecorder機能について使用方法や利用する際の注意点などをまとめました。 Recoder機能とは ブラウザのChrome97で追加される予定の機能で、ブラウザの画面上で操作した記録を取得してくれる機能になります。 この記事を書いている2021年11月17日では一般に提供されているChromeの最新版は96となり、開発中の「Chrome Dev」もしくは「Chrome Canary」でRecorder機能を使用することができます。 利用している時の様子はChromeの開発者向けのページに公開されています。 developer.chrome.com 主な機能は以下の通りです。 ・操作の記録及び再実行(リプレイ)できる ・再実行時にパフォーマンスの記録・確認できる ・記録した内容の編集ができる ・操作
WHATWG Stream の話
Node学園37時限目で発表した WHATWG Stream の話です。
Facebook、次期ビルドシステムの開発でRust言語の採用を明らかに
Facebookは同社のソフトウェア開発において、同社が主導して開発しているオープンソースのビルドシステム「Buck」を利用しています。 Backは高速なビルドが可能な点を大きな特徴としており、もともとAndroidアプリケーション向けのビルドシステムとして登場しました。 その後対応する言語やプラットフォームが拡張され、現在では15種類以上のプログラミング言語と、さまざまなスマートデバイス、VRヘッドセット、そしてサーバアプリケーションにまで対応しています。 次期ビルドシステムの開発を決断 しかしこうした拡張を重ねる中でBuckの複雑さは増していき、新機能の追加がどんどん難しくなってきたと、Facebook Developersのブログに投稿された記事「The future of Buck」で吐露されています。 同社の開発チームは約4年前から、Buckのアーキテクチャの改善を段階的に行う取
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - tc39/proposal-async-explicit-resource-management: ECMAScript Async Explicit Resource Management
