AbortControllerを知らないなんて - Qiita
多くの開発者がAbortControllerを理解していると思っているかもしれませんが、その機能は基本的な用途をはるかに超えています。たとえば、fetchリクエストのキャンセル、イベントリスナーの管理、Reactフックとの連携などです。 本当にAbortControllerの威力を知っていますか？それでは見てみましょう。 AbortControllerを使ったfetchリクエストのキャンセル AbortControllerをfetchと一緒に使うことは、最も一般的な用途です。 以下は、AbortControllerを使ってキャンセル可能なfetchリクエストを作成する例です： fetchButton.onclick = async () => { const controller = new AbortController(); // キャンセルボタンを追加 abortButton.onc
JavaScript PrimerのNotebookLMが利用可能になりました！
JavaScript PrimerのNotebookLMが利用可能になりました。 NotebookLMは、Googleが提供するAIを活用したノートブック環境で、登録したソースに対して質問をしたり、情報を検索したりすることができます。 次のリンクから、JavaScript PrimerのNotebookLMにアクセスできます。 📖 JavaScript Primer - 迷わないための入門書 - NotebookLM JavaScript Primer on NotebookLM JavaScript PrimerのコンテンツがNotebookLMに入ってることで、読者は書籍の内容についてNotebookLMに直接質問したり、Podcastとして音声で聞いたりすることができるようになります。 NotebookLMを活用することで、JavaScript Primerを読み進める中で生じた疑
TypeScript/JavaScript Array完全攻略2024 | フューチャー技術ブログ
TypeScriptアドベントカレンダーの12/5のエントリーです。昨日は@nanasi-1さんの【TypeScript】ジェネレーターによる遅延評価でフィボナッチ数列を生成するでした。 イマドキのJavaScriptの書き方2018というのを以前書いたのだけど、配列周りはかなり変わっているな、というのを思ったので、そこの部分だけアップデートするつもりで書いてみました。 実環境で使えるECMAScriptバージョン今時のブラウザは常に最新に更新されるはずなのでECMAScript 2024の機能もフルに使えるはずですが、おそらくNode.jsのLTSが一番古いJavaScriptエンジンということになるのかな、と思います。本記事執筆時点でサポート中のバージョンは以下の4つです。軽くメソッドを調べたりした感じ、こんな感じかと。202x年の11月ぐらいになると、ES202xがLTSバージョンで
IndexedDB
InexedDB は組み込みのデータベースで、localStorage よりも遥かに強力です。 key/value ストレージ: 値は何でもよく、複数のキーの型があります。 信頼性のためのトランザクションをサポートします。 キー範囲のクエリ、インデックスをサポートします。 localStorage よりもずっと多くのデータを格納することができます。 通常、この機能は伝統的なクライアント-サーバアプリケーションには過大です。IndexedDB は、ServiceWorkers や他のテクノロジーと組み合わせるオフラインアプリケーションを想定しています。 仕様 に記載されている IndexedDB のネイティブインターフェースは、イベントベースです。 idb のように、promise ベースのラッパーを使って async/await を使うこともできます。これは非常に便利ですが、ラッパーは完璧
React / Remix への依存を最小にするフロントエンド設計 - 一休.com Developers Blog
CTO 室の恩田(@takashi_onda)です。 一休レストランのフロントエンドアーキテクトを担当しています。 Intro 一休レストランでは、以前ご紹介したようにフロントエンドで React / Remix を利用しています。 user-first.ikyu.co.jp 一方、設計方針としては、React / Remix への依存が最小になるように心掛けています。 今日は、そんな一見矛盾するような設計方針について、ご紹介したいと思います。 この記事を読んでいただき Remix に興味をもたれたら、明後日 2024/8/7(水) 19:00〜 のオンラインイベント offers-jp.connpass.com にもご参加いただけると嬉しいです。 この記事でご紹介している疎結合なフロントエンドアーキテクチャを実現する Remix の魅力についてお話します。 なぜ依存を最小にするのか？ R
JavaScriptで小数点付きの計算をしよう
はじめに 記事の修正や追加等はコメントまたはGitHubの編集リクエストをお待ちしております。 また、この記事の内容は私が個人的に開発しているモジュールのコードを抜き出した物です。 特別な処理がいる理由 JavaScriptは計算の際暗黙的に2進数で計算しています。 例えば0.1を2進数にすると0.000110011001100…となります。
【TypeScript】カリー化・部分適用は便利だよ！ - Qiita
【TypeScript】カリー化・部分適用は便利だよ！ カリー化・部分適用利用してますか？ 調べたけど「関数を第一級オブジェクトとしてー」とか「関数を部分適用してー」とか説明が講義っぽくて途中で諦めた方も多いと思います。自分もそうでした。 また、知ってるけどどんな時に使うべきか迷って使ってないという方もいると思います。 具体的なコードを交えながら、カリー化・部分適用について、噛み砕いて説明していきたいと思います。 なお、すべてのTypeScriptのサンプルコードは実際に動かして確認することができますので、TypeScript Playgroundなどで是非お試しください。 カリー化と部分適用 まずはカリー化と部分適用の定義をば。 カリー化 (currying, カリー化された=curried) とは、複数の引数をとる関数を、引数が「もとの関数の最初の引数」で戻り値が「もとの関数の残りの引
WebAssembly・PWAの習作アプリを作成して感じたこと
はじめに この記事では、個人の習作としてwasm-image-resizerという簡易な画像リサイズ・フォーマット変換ツールをWebAssembly + PWA + Reactで作成したので、そのときに私の得た知見を記載したいと思います。 アプリとしては実に単純であんまり面白みもないのですが、半ばちょっとした好奇心と勢いで自分なりに作ってみました。手探りで拙いですが、ソースコードは以下に配布していますので、よかったら見てみてください。 アプリの技術目標 このアプリを通して私が考えた技術目標は以下のとおりです。 フロントエンドとしては言語はTypeScript、Viteをベースにする UIのフレームワークとしてReactを使用 画像変換などのアプリでやりたいコアな処理はRustで記述 wasm-bindgenとwasm-packでWebAssembly化・javascriptパッケージ化を行
jestでもDataProviderが使いたい！
はじめに jestのテストを書いているうちに、ケースが増えてきて見づらくなってしまったのでPHPUnitのDataProvider的なのを書けないか調べたところあったので備忘録として残しておきます。 テスト対象の関数 下記のような足し算をする関数があるとします。ではこの関数のテストを書いてみましょう！ export const addition = ( firstNumber: number, secondNumber: number ): number => { return firstNumber + secondNumber; }; よく書く書き方 test.eachを使う場合はおそらくこういった書き方をすると思います。 しかしこの渡している配列郡をパット見て、どれが何のパラメーターか分かりづらいですよね... そこで今回はPHPUnitのDataProviderみたいな形で書き直し
Node.js + TypeScriptのモジュールを整理してみる
はじめにlink 最近受けるNode.js + TypeScript環境の相談の中で、CommonJSやECMAScript Modulesのあたりで落とし穴にはまっている人が多いという事に気づいた。 Node.jsは歴史的にCommonJSとECMAScript Modules（以後ESMと表記）がどうしても入り乱れる環境にあり、これにTypeScriptのモジュールが加わると組み合わせでさらに複雑度が増すのが現状である。 説明する際に口頭より整理した文章が欲しいと思ったので記事にする。 以下のリポジトリで検証コードを管理している。 https://github.com/koh110/module_test Node.jsモジュールチェックシートlink まず最初にNode.jsにおけるCommonJSとESMの挙動について整理する。 いきなり書かれても把握できないかもしれないが、一旦こ
Biome v1.7
Today we’re excited to announce the release of Biome v1.7! This new version provides an easy path to migrate from ESLint and Prettier. It also introduces experimental machine-readable reports for the formatter and the linter, new linter rules, and many fixes. Update Biome using the following commands: 1npm install --save-dev --save-exact @biomejs/biome@latest2npx @biomejs/biome migrate Migrate fro
動的にプロパティ名を設定できるようになりました。（現代的JavaScriptおれおれアドベントカレンダー2017 – 07日目） | Ginpen.com
現代的JavaScriptおれおれアドベントカレンダー2017 – 07日目 概要 オブジェクト定義時に、プロパティ名に変数を使えるようになりました。 今までこう↓分けて書かなくちゃいけなかったのを、 const id = '12345'; const obj = {}; obj[id] = { name: 'Newcomer!' }, console.log(obj[id]);
文字数のカウントはどれが正解なのか?
A. ユースケース次第でどう実装すべきかは変わる。Intl.Segmenter が万能というわけでもない。 (クソ最悪な小バズをかましてしまったので、贖罪も兼ねて記事を書きました) 「文字数を数える」のは難しい 「文字数を数える」実装は意外と難しいです。というのも、アルファベットや数字だけなら str.length でも正しく数えられますが、絵文字や異体字などが入った文字列は見た目どおりに数えられません。
HTMLにTypeScriptを書いてブラウザで直接実行できるって知ってた？ - Qiita
<!doctype html> <meta charset="utf-8"> <script async type="module"> import {transpile, ScriptTarget} from "https://esm.sh/typescript@5.6.3?target=esnext"; import {minify} from "https://esm.sh/terser@5.36.0?target=esnext"; // esnext-polyfill Uint8Array.prototype.toBase64 ??= function() { return btoa(Array.from(this, (v) => String.fromCharCode(v)).join("")); } for(const {type, textContent} of docume
ESLint を使って JSDoc / TSDoc の記述を必須化する
これはなに コードベースに対し JSDoc の記述を必須化するための ESLint 設定手順をまとめたものです。 JSDoc を始めとする Doc コメントはコードに最も近いドキュメントであり、これがあるのと無いのとではコードベースの保守性に天と地ほどの差が生まれます。そんな JSDoc ですが、OSS ならともかく（内製・受託を問わず）商業ソフトウェア開発の現場では軽視されがちです。後からコーディング規約を定めたところで開発メンバーにドキュメントを書く習慣が備わっていなければ書き漏れが頻発するのが関の山です。 コードレビューで都度指摘するにはあまりにコストがかかるため、ESLint に委ねるのが望ましいです。 前提 フレームワークは React（or Next.js）を使っている。 TypeScript を主体としている。 ビルドスクリプトや設定ファイルは JavaScript も併用し
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TypeScriptでモジュラーモノリスやってみた
tsconfig.jsonの設定を見直そう！�フロントエンド向け 2024夏
React 19を概念から理解する
TypeScriptでWebAssemblyに入門しよう
Intlの今までとこれから
