型安全にクエリパラメーターを扱う nuqs
型安全にクエリパラメーターを扱う nuqs 2025.01.25 フロントエンドの状態管理のパターンとしてクエリパラメータを信頼できる唯一の情報源(single source of truth)として扱うことがあります。ですが、クエリパラメーターの型が文字列であるため、型安全性が保証されないという課題があります。この記事では `nuqs` というライブラリを使用してクエリパラメーターを型安全に扱う方法について解説します。 フロントエンドの状態管理のパターンとしてクエリパラメータを信頼できる唯一の情報源(single source of truth)として扱うことがあります。つまり、useState などの React の状態管理フックを使用してメモリ上に保持した状態を使用するのではなく、location.search などでクエリパラメーターを取得し、それの情報を元に画面を描画するというこ
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 をインストールする プロジェクトの packageManager field に 2 と同じバージョンの 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进行代码检查和格式化的原因，包括更灵活的格式化、可扩展性、优秀的生态和类型感知的lint规则。性能虽然不如其他工具，但在实际使用中并不是主要问题。官方推荐与Prettier等格式化工具配合使用，但个人认为这并不是问题。" 前言# これは ESLint と他の関連ツールの優劣を比較する記事ではなく、私がコードチェックとフォーマットに ESLint を選んだ理由を紹介するものです。他のツールについて言及せざるを得ないこともありますが、私は人気のあるツールが存在するのは、それぞれに特徴と利点があるからだと思います。ユーザーとして、私たちは自分のニーズや好みに基づいて適切なツールを選べば良いのです。ツールに問題がある場合は、フィードバックや貢献を通じて改善を手助けできます。 私が重視する ESLint の利点# より柔軟なフォーマット# なぜPrettierやdprintのような
フロントエンドの段階的モダナイズ、のための自走設計 (株式会社スタディスト様)
株式会社スタディスト様の依頼で、フロントエンド傭兵として、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から使えるようです。 The Document Picture-in-Picture API makes it possible to open an always-on-top window that can be populated with arbitrary HTML content — for example a video with custom controls or a set of streams showing the participants of a video conference call. It extends the earlier Picture-in-Picture API for <video>, whi
【JavaScript × Terraform】次世代のモダン AltJS「JS.tf」の紹介
人類は HCL (Hashicorp Configuration Language) で JavaScript を記述するべきなので、次世代のモダン AltJS である「JS.tf」をリリースしました。 例えば次のコードは標準出力に hello world と出力する JS.tf のプログラムです。 data "js_function_call" "hello_world" { caller = "console" function = "log" args = ["hello world"] } data "js_program" "main" { statements = [data.js_function_call.hello_world.statement] } # index.js としてファイル出力 resource "local_file" "main" { filename
monorepo内でのパッケージのバージョンを1つだけに統一するOne Version Ruleをpnpm catalogで実装する - newmo 技術ブログ
newmoでは、フロントエンド、バックエンド、iOSやAndroidなどのモバイルアプリをすべて同じリポジトリで管理するmonorepoを採用しています。 monorepoを採用することで、アプリケーション間で共通のコードを共有することができたり、CIの管理が楽になったり、他のチームのコードを見るのにわざわざリポジトリをcloneする必要がなくなります。 また、monorepoを採用することで、アプリケーションが利用しているパッケージ(ライブラリやツール)のバージョンを1つだけにするOne Version Ruleが実装できます。 One Version Rule One Version Ruleは、monorepo内のパッケージのパッケージのバージョンを1つだけにするルールです。 The One Version Rule | Google Open Source One Versio
JavaScriptのモジュール解決の相互運用性 / JSConf JP 2024 - Interoperability of Module Resolutions in JavaScript
https://jsconf.jp/2024/talk/berlysia/
Nx活用術！Larger runnerの動的設定でGitHub Actionsのコスパ改善！ - Findy Tech Blog
ファインディ株式会社でフロントエンドのリードをしている新福(@puku0x)です。 皆さん、GitHub ActionsのLarger runnerはご存知でしょうか？ 高性能なマシンを使ってCIを実行できる一方、変更の少ない場合や計算負荷の低いCIではコストパフォーマンスが悪くなってしまいがちですよね？🤷♂️ この記事では、Nxの機能を利用してLarger runnerを動的に切り替える方法をご紹介します。 Nxについては以前の記事で紹介しておりますので、気になる方は是非ご覧ください。 tech.findy.co.jp Larger runner（より大きなランナー） 課題 解決策 結果 まとめ Larger runner（より大きなランナー） Larger runnerは、「GitHub Teamプラン」または「GitHub Enterprise Cloudプラン」の場合に利用可能
俺のフロントエンド依存管理ポリシー20241120
ポリシー: この世界では常に最新版を使うという気持ちで生きていく Node.js は枯れるという概念がなく、常に古いことはリスク という認識。LTS も短め(3年) 古いAPIのドキュメントは常に消失する モダンなツールは、モダンな前提を要求する ~2020: CJS/ESM 関連で断絶がある(jestが動かなくなりつつある) ~2019: パフォーマンス意識が低い時代の実装が多い ~2015: Node.js のみでしか動かないものが多い。peerDeps の意識が低い この辺で目視でポチポチする npm: npm-check-updates - npm yarn upgrade-iteractive pnpm upgrade -i サーバーランタイムには安定を、ツールチェインにはパフォーマンスを サーバーランタイム(Node.js) Node 本体は Stable LTS か、一つ前の
ブラウザで動作する地理空間データ処理ライブラリとして DuckDB-wasm を使い、 SQL を TypeScript で管理する仕組みを作る - newmo 技術ブログ
newmo では、地図データや地理情報を扱う場面が多くあります。 たとえば、タクシーやライドシェアでは、営業区域のような営業していいエリアといった地理的な定義があります。 また、乗り入れ禁止区域のようなタクシーが乗り入れてはいけないエリアといった定義も必要になります。 これらの地理に関する定義は GeoJSON のような地理情報を扱うデータ形式で管理されることが多いです。 しかし、GeoJSONなどの定義をテキストとして手書きするのは困難です。 そのため、地図上に区域を作図するエディタやその定義した区域が正しいかをチェックするような管理ツールが必要です。 管理ツールは、ウェブアプリケーションとして作った方が利用できる環境が広がります。 このような地理情報は一度に扱うデータが多かったり、空間的な計算処理が必要になるため、専用の仕組みを使うことが多いです。 このような技術を、地理情報システム（
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
イベント リスナーを取得してデバッグする | Blog | Chrome for Developers
JavaScriptツール群「UnJS」を5分で一気に駆け巡る！
イテレータとイテラブルの概要と課題、未来
TSKaigi Kansai 2024 - 構造的部分型と serialize 境界
テストコード品質を高めるためにMutation Testingライブラリ・Strykerを実戦導入してみた話
