Nova.js - A collection of dependency-free React hooksA collection of dependency-free React hooksCarefully developed React hooks that you can copy and paste into your projects.
ESLint の Flat Config を書く時に読んでほしい記事 (2024-08版) - Object.create(null)
ESLint v9 から Flat Config がデフォルトの設定ファイルの形式となり, 徐々に対応しているプラグインも増えて移行が進みつつありますが, 実際に移行したプロジェクトを見ているとしばしば勘違いなどから誤った設定をしている事例を目にします. ということで, Flat Config を書くにあたっていくつか知っておいて欲しいことや, よく見かけるミスをまとめてみました. この記事では網羅的な説明はしませんので, ESLint や typescript-eslint の公式ドキュメントを前提として, 副読本的に参照してください. Getting Started with ESLint - ESLint - Pluggable JavaScript Linter Getting Started | typescript-eslint Flat Config のしくみ Flat Co
BunはNodeより速いのか？ Misskeyで検証 | gihyo.jp
本連載では分散型マイクロブログ用ソフトウェアMisskeyの開発に関する紹介と、関連するWeb技術について解説を行っています。 今回はNode.js互換のJavaScriptランタイム、Bunのパフォーマンスについて、Misskeyのコードベースを用いて検証を行います。 Bunとは Bunは、Node.js（以下Node）互換である後発のJavaScriptランタイムです。 JavaScriptエンジンにNodeで採用されているV8ではなくJavaScriptCoreを採用しているほか、TypeScriptを事前コンパイルなしに実行することもできます。 肉まんのようなマスコットキャラクターが特徴です。 モチベーション そんなBunの公式サイトではNodeよりも大幅に性能上のアドバンテージがあるように紹介されていますが、こうした競合ソフトウェアとの一方的な比較は得てして限られた条件での有利な
Poku
🐷 What's Poku?A cross-platform test runner that brings the JavaScript essence back to testing. ⚡️ Quick Tutorials
Skypack: search millions of open source JavaScript packages
How to Use Defaulthttps://cdn.skypack.dev/package-name https://cdn.skypack.dev/@scope/package-name Package Versionhttps://cdn.skypack.dev/preact@10 https://cdn.skypack.dev/preact@^10.5.0 https://cdn.skypack.dev/preact@10.5.5 Package Exporthttps://cdn.skypack.dev/preact/hooks https://cdn.skypack.dev/preact@^10.5.0/hooks Minified (?min)https://cdn.skypack.dev/preact?minDeno (?dts)https://cdn.skypack
Array.prototype.with による不変の配列の更新 | Blog | web.dev
最近、配列に対して呼び出すことができる、相互運用可能な新しいメソッドがブラウザに導入されました。 Array.prototype.with()。 対応ブラウザ <ph type="x-smartling-placeholder"></ph> 110 回 <ph type="x-smartling-placeholder"></ph> 110 回 <ph type="x-smartling-placeholder"></ph> 115 <ph type="x-smartling-placeholder"></ph> 16 ソース この記事では、このメソッドの仕組みと、このメソッドを使用して配列を更新する方法について説明します。 コピーされます。 Array.prototype.with(index, value) の概要 Array.prototype.with(index, value)
ProviderタワーをRecoilに置き換える
ReactアプリケーションではProviderタワーがよく見られます。Providerタワーは、アプリの上の方で次のコードのように複数のProviderが積み重なっている状態のことです（一般的な呼称かどうかは知りません）。 const App: React.FC = () => { return ( <FooProvider> <BarProvider> <BazProvider> <MainContents /> </BazProvider> </BarProvider> </FooProvider> ); }; Providerは、コンテキストに対して値を供給する役割を担っており、コンポーネントツリー内でProviderより内側に配置されたコンポーネントからはそのコンテキストの値を参照することができます。コンテキストは、Reactにおいて外部ライブラリを使わずにステート管理（特にアプリ
eslint-plugin-import-accessではじめるディレクトリ単位カプセル化
こんにちは。この記事は筆者が製作した ESLint 向けプラグイン eslint-plugin-import-accessを紹介する記事です。 このプラグインにより TypeScript プログラムに擬似的なpackage-private exportの概念が生まれます。JSDoc で@packageとアノテートされたexport宣言は、そのファイルが属するディレクトリの外からインポートすることができなくなります。 従来、TypeScript で可能なカプセル化の最大の単位は「ファイル」であり、ファイルからエクスポートしない変数はそのファイル（モジュール）の中に閉じている一方で、一旦エクスポートしたものはプロジェクトのどこからでもインポート可能になります。これでは不都合な場合がありました。 最近の具体的な例としてはRecoilが挙げられます。筆者の以前の記事では、Atom や Select
TypeScriptのmoduleSuffixesについて考えて納得した - Qiita
みなさんこんにちは。今日は、TypeScriptの新しいコンパイラオプション（おそらく4.7で導入）であるmoduleSuffixesについての話題がTwitterで見られました。 moduleSuffixesについて詳しくはこちらをご参照ください。 これについては、「モジュール解決がさらに複雑化する」などいくつかの方向性から否定的な意見が見られました。しかし、筆者が考えてみたところ、正当性のある機能追加だと納得できたので考えをご紹介します。 3行でまとめると これまで通りランタイムの挙動に影響しないから大丈夫だよ pathsが怖くないならmoduleSuffixesも怖くないよ TypeScriptはJavaScript環境に追随するよ moduleSuffixesとは では、moduleSuffixesはどんなコンパイラオプションなのかという解説をまず少しします。これはTypeScri
corepack でモジュールごとに npm クライアントを指定する
tl;dr node 14.19.0 で npm のバージョンを明示的に切り替える corepack が入った package.json の packageManager フィールドで npm 自体のバージョンや yarn の使用するバージョンを指定できる 詳しくは https://zenn.dev/teppeis/articles/2021-05-corepack 現状の npm-cli 自体が corepack に対応してないので、有効にしたければ npm コマンド自体を corepack に移す必要がある 現時点で packageManager を指定するだけだとまだ他の環境で有効にならないが、将来的に npm と node の corepack 対応が行き渡った時点で段階的に有効になる。 もっと詳しく # 手元の node を v14.19.0 以上に更新する # 自分は nvm
GitHubのトレンドで振り返る2021年のJavaScript/TypeScript
今年も GitHub のトレンドで 2021 年の JavaScript/TypeScript を振り返ります。去年の記事はこちらです。 — GitHub のトレンドで振り返る 2020 年の JavaScript | WEB EGG 集計方法 GitHub トレンドは過去の履歴を公式に提供していないため、非公式に集計されたデータを利用しています。 データソースはlarsbijl/trending_archiveを使用 去年はxiaobaiha/github-trending-historyを利用したが今年のデータは無かったので変更 日ごとにまとめた markdown になっており、remark で AST→ データ化しました 集計期間は 2021/01/01 から 2021/12/15 まで 対象言語はJavaScriptとTypeScriptのみ 集計後のデータはこちらのスプレッドシー
Deno v1.15で導入されたNode.js互換モードについて
2021/10/12にDeno v1.15がリリースされました。 この記事では、Deno v1.15で新しく導入されたNode.jsの互換モードについて解説します。 Node.jsの互換モードとは？ まず、以下のようなJavaScriptファイルがあったとします。 import { EventEmitter } from "events"; const emitter = new EventEmitter(); emitter.on("foo", () => console.log("foo")); emitter.emit("foo"); $ deno run main.mjs error: Relative import path "events" not prefixed with / or ./ or ../ from "file:///home/uki00a/ghq/github
【追記あり】ES2022 Array#at がちょっとおかしい #fix_ecmascript_at - Qiita
既に Stage 4 になっているので諦めていたんですが、流石に見逃せないかなと思ったので TC39 の Discourse にトピックをたててみました。意見がある方はこちらにお願いします。 https://es.discourse.group/t/fix-at/983 議論に伴って私が実際に欲しかったものをモジュールにして公開してみました。 https://github.com/petamoriken/safe-at それといまいちユーザーからの声が伝わっていない感じがしたのでハッシュタグ #fix_ecmascript_at を用意してみました。協力をよろしくおねがいします。 String#char{At, CodeAt} という存在を忘れてたんですが、この似た名前のメソッドたちが引数を整数に丸めるのに String#at が丸めないのはたしかに変だということに気づいてしまったので、自
React TypeScript Cheatsheets | React TypeScript Cheatsheets
React TypeScript CheatsheetsCheatsheets for experienced React developers getting started with TypeScript
ABEMA Web で Polyfill のコードをモダンブラウザ向けに 99% 削減した話 | CyberAgent Developers Blog
これらを踏まえて polyfill-library を使って Polyfill の出し分けをすることが最適解だと確信しました。 Polyfill の出し分けの実装方法 最初に実装したコードの全体像を見せると次の通りになります。それぞれの変数や関数についての説明は後ほどおこないます。 import crypto from "crypto"; import { Response, Request } from "express"; import { getPolyfillString } from "polyfill-library"; import polyfillLibraryPackageJson from "polyfill-library/package.json"; const FEATURES_OPTION = { flags: ["gated"] }; const FEATUR
vanilla-extract — Zero-runtime Stylesheets-in-TypeScript.
import { createTheme, style } from '@vanilla-extract/css'; export const [themeClass, vars] = createTheme({ color: { brand: 'blue', white: '#fff' }, space: { small: '4px', medium: '8px', } }); export const hero = style({ backgroundColor: vars.color.brandd, color: vars.color.white, padding: vars.space.large });
webcontainer とは
stackblitz が提唱して実装している node.js が動くブラウザ環境。container といってるが、 Docker 等とは関係ない。 stackblitz/webcontainer-core このコンテナはブラウザ内で node.js (らしきもの)が動くことがターゲットで、現在デモとして next.js をビルドしてプレビューできている。これによって node.js + webpack + next.js cli が動いていることがわかる。 デモはここで試せる。 まだ OSS ではないので、この記事の大部分は想像によって書かれている。 webcontainer 概要 (自分の理解なので話半分に) ブラウザサンドボックスでも electron なしでも動かせるようになってきた。しかし現在 node.js を動かすには色々と欠けている部分があるので、それらを総称して webc
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
よりシンプルになる Svelte の世界
GitHub - colinhacks/zod: TypeScript-first schema validation with static type inference
GitHub - nicoespeon/abracadabra: Automated refactorings for VS Code (JS & TS) ✨ It's magic ✨
