JSConf.jp おかわり Node学園46時限目 - https://nodejs.connpass.com/event/344588/ X - https://twitter.com/sajikix
フロントエンドで日時処理と戦うために 2025 ver
JSConf.jp おかわり Node学園46時限目 - https://nodejs.connpass.com/event/344588/ X - https://twitter.com/sajikix
Deno + Pglite + Drizzle で依存の少ないDBアプリを作る
CI まで一式動いてるのがここ pglite は postgres を wasm コンパイルしたもの。 これを deno + drizzle からマイグレーションして叩く。 なぜこの組み合わせか ローカルにAIエージェント用の簡単なDBツールを量産したかった。deno でスクリプトを書きまくってるので、 deno を前提に色々試した。 色々試したのだが、最終的に Pglite で Postgres を叩くことにした。インストールが不要で、DB周りのセットアップが一番手数が少ない。手数の少なさを最重要とした。 最低限これだけでいい。 import { PGlite } from "npm:@electric-sql/pglite"; const db = new PGlite(); // `{dataDir: ...}` で初期化パスを渡せる await db.exec("create ta
UnJS製のライブラリ・cittyを使ってNode.jsでさくっとCLIを作る - 空の箱
cittyを使ってみたところめっちゃ良かったのでメモがてらエントリを書く。 citty unjs.io Nitroとかh3とかいろいろいい感じのライブラリを作ってるUnJSのライブラリの一つ。いい感じにCLIツールを作れる。 準備 npm install citty 公式のサンプルソースを拝借。 import { defineCommand, runMain } from "citty"; const main = defineCommand({ meta: { name: "hello", version: "1.0.0", description: "My Awesome CLI App", }, args: { name: { type: "positional", description: "Your name", required: true, }, friendly: { ty
全員開発時代のaquaで実現するローカル環境爆速セットアップ - LayerX エンジニアブログ
バクラク事業部エンジニアの id:upamune です。最近、ローカル開発環境構築に対して人より熱意があるということに気がつきました。 ということで、この記事ではバクラク事業部での、ローカル開発環境構築の今について書きます。 はじめに 近頃、AIの発展により開発、特にコーディングのハードルは大きく下がりました。弊社でもプロダクトマネージャーやデザイナーがエンジニアに混じってPRを出しています。 詳しくはバクラクビジネスカードでプロダクトマネージャーをしている原山がnoteを書いているのでご覧ください。 note.com しかし、ここで開発の障壁となるのが最初のローカル開発環境の構築です。セットアップドキュメントは存在しますが、主にソフトウェアエンジニア向けに書かれており、ローカルでアプリケーションを動かすだけなら不要なツールまでまとめてインストールするため、時間のかかるものになっていました
DeepDive Lighthouse
Lighthouse のコードを読んだので、その実装を解説していきます。CLIの使い方から、直接APIを叩く方法、そして個別のAuditの実装を理解する流れを解説します。 これは Lighthouse を理解するための資料で、Lighthouseの使い方ではありません。 とはいえ、内部実装を理解することで Lighthouse についての理解が深まることでしょう。 Chrome Devtools Protocol Puppeteer が Chrome に向けて喋っているもの。Lighthouse も基本的に CDP を直接操作します。 Lighthouseの実装自体も、あんまり Puppeteer に依存せずに直接 CDP を操作する方向性を感じます。 CLI でデータを収集/解析 まず、lighthouse は計測対象である audits が存在します。これらの一覧を見てみましょう。 $
BiomeのPluginについて
こんにちは、mehm8128 です。 最近、Roadmap 2025 and Biome 2.0 | Biomeが公開されました。 その中でも一番気になっているのはやはりプラグイン機能です。そこで、RFC を簡単にまとめて寄り道などしながら、Biome のプラグインについて理解している範囲で紹介します。 間違いなどありましたらコメント欄にて教えていただけると助かります。 Biome のプラグイン そもそも Biome のプラグインとは、ESLint のプラグイン機能のように、Biome 自体が提供している lint ルール以外にもユーザーが独自のルールを作成できるようにするものです（format に関してもサポートされる可能性があります）。 RFC は以下の discussion で提案されています。 issue はこちら。 Biome のプラグインには主に GritQL というクエリ言語
なぜあなたのウェブサイトは遅いのか
自己紹介 https://x.com/mizchi Node.js とフロントエンドの専門家 経歴 ゲームクライアント開発 Electron アプリ開発 サードパーティスクリプト フリーランス(2回目) 現在: 1ヶ月でパフォチュする傭兵 Core Web Vitals CI/CD 今日のスコープ 話すこと 主にフロントエンド/アプリケーション視点での計測 とくにエンドユーザーから見たウェブパフォーマンス体験 話さないこと 各クラウドやDBに特化したチューニング 結果として観測できるが、最初からターゲットにはしない パフォーマンス傭兵を始めた経緯 前職でサードパーティがサイト全体に与える影響(CWV)について調査 とにかくいろんなサイトを外部から計測 真の問題を特定しても「弊社とは無関係」で打ち返す以外なく、歯痒い コスパよく直せる部分をみんな放置している！！！ 非機能要件の優先度が上がら
then() を export した結果ｗｗｗ - Object.create(null)
Promise と Thenable Promise が ECMAScript の言語仕様に追加されたのは ES2015 ですが, Promise ライクなオブジェクトはそれ以前からも広く使われてきました (jQuery の Deferred など). そういった Promise ライクなオブジェクトとの互換性のため, Promise の仕様は本物の Promise と Promise ライクなオブジェクトを混ぜて使えるようになっています. 具体的には, Promise ライクなオブジェクトは一般に Thenable という共通のインターフェースを持つことになっています. オブジェクトが Thenable であるために必要なのは「then() という名前のメソッドを持っている」という一点のみです. もし Promise を解決 (resolve) するときに使われた値が Thenable
型安全にクエリパラメーターを扱う nuqs
この記事では Next.js で nuqs を使用してクエリパラメーターを型安全に扱う方法について解説します。 インストール nuqs@^2 は以下のフレームワークをサポートしています。 Next.js: 14.2.0 and above (including Next.js 15) React SPA: 18.3.0 & 19 RC Remix: 2 and above React Router v6: react-router-dom@^6 React Router v7: react-router@^7 上記よりも古い Next.js のバージョンを使用している場合には nuqs@^1 を使用する必要があります。 以下のコマンドで nuqs をインストールします。 npm install nuqs 続いて nuqs をフレームワークに統合するために <NuqsAdapter> Con
Rust/Tauriに入門したので画像変換デスクトップアプリを開発してみた
こんにちは！某製造業で新米DXエンジニアをしているものです。 先月から Rust の学習を始めました。 学習している理由としては 今までインタプリタ言語を使ってきたので、コンパイル言語に挑戦したい 爆速で動くコードを書きたい ネイティブアプリの開発をしてみたい WebAssembly を使えるようになって、Web アプリ開発の幅を広げたい といったところです。 そんな中、Rust でデスクトップアプリを開発するために Tauri を使ってみました。 正月の暇をつぶすために軽い気持ちで始めましたが、色々苦しんだので備忘録を残しておきます。 今回は長くなりそうなので、目次をご活用ください m(._.)m アプリの概要 今回作ったアプリは、ざっくり言うと 主要形式の画像を次世代拡張子である AVIF,WEBP に圧縮、変換するデスクトップアプリです。⚡️ 制作期間は5～7日くらいです。 GitH
Learn Yjs by Jamsocket
Welcome to Learn Yjs — an interactive tutorial series on building realtime collaborative applications using the Yjs CRDT library. This very page is an example of a realtime collaborative application. Every other cursor in the garden above is a real live person reading the page right now. Click one of the plants to change it for everyone else! Learn Yjs starts with the basics of Yjs, then covers te
pnpm v10 で corepack 不要で pnpm 自身のバージョン管理が可能に
といいつつも、この機能自体は要オプションで v9.7 からありましたが、 v10 でオプション不要になったので、 GA の気持ちで紹介します。 結論 pnpm v10 以上がローカルにインストールされていれば、 packageManager field に pnpm が指定されているプロジェクトでは、そのプロジェクトの pnpm を使うようになります。 ただし、その pnpm 自体はどこかしらにインストールされている必要があり、一般的にはプロジェクトの devDependencies にインストールするものかと思われます。 執筆当時はそうだったのかおま環を勘違いしていたのか分かりませんが、現在は指定は不要です。 やるべきこと ローカルの pnpm を v10 以上にする。 プロジェクトの devDependencies に、使いたいバージョンの pnpm をインストールする プロジェクトの
Next.js + shadcn/ui + TanStackTableでモダンなテーブルを作ろう
テーブルの実装には、react-data-table-componentや、MUIのDataGrid、MantineUIのMantineDataTableなどが用いられてきました。 今回はテーブルのHeadressUIライブラリであるTanstackTableと、RadixUIとTailwindCSSで実装したコンポーネント群であるshadcn/uiを使って、簡単なテーブルを作ります。 shadcn/uiについて Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source. あなたのアプリにコピー＆ペーストできる、美しくデザインされたコンポーネント。アクセスしやすい。カスタマイズ可能。オープンソース。（機械翻訳） shadc
なぜ ESLint なのか - Hyoban
前言# これは ESLint と他の関連ツールの優劣を比較する記事ではなく、私がコードチェックとフォーマットに ESLint を選んだ理由を紹介するものです。他のツールについて言及せざるを得ないこともありますが、私は人気のあるツールが存在するのは、それぞれに特徴と利点があるからだと思います。ユーザーとしては、自分のニーズや好みに基づいて適切なツールを選べばよいのです。ツールに問題がある場合は、フィードバックや貢献を通じて改善を手助けできます。 私が重視する ESLint の利点# より柔軟なフォーマット# なぜPrettierやdprintのようなフォーマットツールを使用しないのかについては、Anthony Fu のWhy I don't use Prettierの記事が十分に明確に述べています。ここでは、自分の考えを少し補足します。 printWidthを設定しても、Prettier に
フロントエンドの段階的モダナイズ、のための自走設計 (株式会社スタディスト様)
株式会社スタディスト様の依頼で、フロントエンド傭兵として、Rails 内の巨大SPA の段階的なモダナイズの提案を行った事例紹介です。 いつもはパフォーマンス視点で仕事にかかるのですが、今回はマクロな設計視点でソースコードを読んでいきます。一旦は中期ゴールを提案しつつ、その作業の必要性を通して、なぜその変更が必要なのかという解説をしていきました。 コスパが良い部分からやりたいですね。でもコスパ感覚は人それぞれです。あくまでフロントエンド専門家の自分が優先度付けるなら、という観点でやっていきます。 今回の仕事にあたっていくつかの技術的な課題を取り上げますが、それはスタディスト様に問題があるという話ではありません。むしろ問題を修正しようという意思が強く、実際1ヶ月の期間中にいくつかの修正をマージすることもできています。 以下、敬称略。注意点として、今回の内容は中の人達が見返すための記述が多いの
LibJSのざっくりとしたアーキテクチャと読み方
LibJSをなんとなく読んでみて、ざっくりアーキテクチャがつかめたのでメモ。V8やJSCなどのメジャーJSエンジンと違ってJITや大量のファストパスや独自言語がない[1]ので読みやすい。 LibJSは、まあなんというかよくある感じのバイトコードインタプリタとして実装されている。 そうすると、 ソースコードをパースしてASTを作るところ ASTをコンパイルしてバイトコードを作るところ バイトコードの列を実行するところ がわかれば、まあなんとなくの動きを追いかけやすくなる。 パース まず 1. ソースコードをパースしてASTを作るところ は、実行コンテクストがスクリプトがモジュールかによるが、 Script.cpp 内の Script::parse SourceTextModule.cpp 内の SourceTextModule::parse などにある。これらの関数が、Parser.cpp
記事をPicture-in-Pictureで読めるようにしてみた | stin's Blog
Document Picture-in-Picture APIというWeb APIがあります。まだブラウザの実装が限定的ですが、Chromeなら116から使えるようです。 Picture in Picture(以下PiP)と言えば、動画を再生しながら別のタブを開いたり別のアプリケーションを開いたりできる機能ですが、"Document" Picture-in-PictureはそれをHTML要素でも可能にするAPIです。最近Google MeetがこのAPIを使い始めて、別タブに移動したタイミングで勝手にPiPを表示するようになりました。なんか賛否あった気がしたけど僕は便利に使っています。決してミーティングに集中していないわけではないです、えぇ。 このブログサイトでも、Document Picture-in-Picture APIを使って記事をPiPで読めるようにしてみました。APIをサポート
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
イベント リスナーを取得してデバッグする | Blog | Chrome for Developers
JavaScriptツール群「UnJS」を5分で一気に駆け巡る！
イテレータとイテラブルの概要と課題、未来
