「とりあえずNext.js」をやめてBetter-T-Stackを試してみた
株式会社アップルワールドのrikuです。 ※この記事はアップルワールド Advent Calendar 2025の9日目の記事です。 はじめに 2025年12月3日に起きたNext.jsおよびRSCのセキュリティ問題を受けて、弊社のフロントエンド技術選定について真剣に考える必要が出てきました。 今回の問題については各所で再三触れられているため、ここでは詳細を割愛します。 弊社では今まで利用者数が多いこと、AIによる開発と親和性が高いことを理由に2025年は「とりあえずNext.js」にすることが多かったのですが、弊社の規模・状況だと万が一問題が発生した際に会社存続のリスクに繋がる可能性があるので、2026年は並行して別の選択肢も試したいと考えました。 現在使用されているライブラリ・フレームワーク 私の知る限り、弊社のJavaScript/TypeScriptを利用した開発には主に以下のライ
型安全にクエリパラメーターを扱う 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
俺のフロントエンド依存管理ポリシー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 か、一つ前の
さようならLodash、TypeScript時代の新星ユーティリティ【Radash】 - コハム
Lodash is dead. Long live Radash. 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 Lodashの何が問題なのか？ 関数の詳細分析 Lodashの_.get関数 Lodashの_.filter関数 Lodashの_.map関数 コード品質 でも、そのコミュニティは... では、どうするか？ try関数 parallel関数 retry関数 counting関数 range関数 list関数 Lodashの何が問題なのか？ JavaScriptの動的な能力が欠点ではなく特徴として捉えられていた時代に、Lodashは異なる入力に対して異なる振る舞いをする関数を提供することで、できる限り役立つように作られました。現在では、私たちはより良い方法を知っています。純粋関数、決定論的な振る舞い、関数合成といった関数型のコ
テスト用のオブジェクトを簡単に作れるFactoryJSというライブラリを作った｜noteエンジニアチームの技術記事
登壇者 TypeScriptでバックエンドのテストを書くときの課題早速なんですが、みなさんテストを書いてますでしょうか？ 昨今では、TypeScriptでバックエンドを書けるのが普通になってきました。バックエンドで利用できるORMやフレームワークも充実してきています。 バックエンドはフロントエンドに比べてデータベースを扱ったり、重要なロジックが含まれているので、しっかりとテストを書きたいというモチベーションが湧いてくると思います。 そこで課題になるのが、テストデータの準備ですね。 例えば、Prismaで「ユーザーが管理者ならtrueを返す」というシンプルな関数を作ったとします。テスト対象のコードがシンプルなので、テストもシンプルに書けると思うかもしれません。 しかし、上記のテストコードを見てもらうとわかるとおり、ユーザーデータの作成する処理で数行のコードを書く必要があります。テストと関係の
JSR Meetup に参加してきた
JSR Meetup JSR が気になっていたことや、Deno の中の人が主催というのも良いなと思って、ささっと参加してきました。自分用に雑にまとめておきます。 https://jsr.io/ https://github.com/jsr-io/jsr ハッシュタグ 自分のメモ Deno Land Inc. が開発、運用しているパッケージレジストリ プライベートは今のところ予定されていない TypeScript をそのまま登録できる ESM 対応 OSS で開発されている 自前の JSR を立てることもできる 積極的に改善されていきそう ドキュメントが生成される Web UI がモダン Deno が流行らないと苦しそう @std を Deno が持ってるのは他からはちょっとな ... って思われそう キレイな npm 雑感 印象としては使ってみても良さそうという感じです。ただ無理に npm
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の挙動について整理する。 いきなり書かれても把握できないかもしれないが、一旦こ
Deno、モダンなJavaScript/TypeScriptに最適化したパッケージレジストリ「JSR」パブリックベータ公開。Node.js、Bun、Cloudflareなどにも対応
JavaScript/TypeScriptランタイムの「Deno」を開発提供しているDeno Land Inc.は、モダンなJavaScriptおよびTypeScriptに最適化した新しいパッケージレジストリ「JSR」をパブリックベータとして公開しました。 現在、JavaScriptのパッケージレジストリは、Node.js用に構築され、GitHubが運営するnpm（Node Pacage Manager）が事実上の標準となっています。 参考：GitHubがnpmの買収を発表、JavaScriptのパッケージ管理サービス。将来的にはGitHubとnpmを統合へ npmにはさまざまな機能を備えたパッケージモジュールが大量に登録されており、この豊富なパッケージモジュールの存在がNode.jsの大きな利点となっています。そのため、現在ではDeno、Bun、Cloudflare Workersなど後
シェルスクリプトをJavaScript/TypeScriptで記述、どのOSでも実行できる「Bun Shell」、JavaScriptランタイムのBunが発表
JavaScriptランタイムのBunは、新機能としてシェルスクリプトをJavaScriptもしくはTypeScriptで記述し、特定のOSに依存せずに実行できる「Bun Shell」を発表しました。 シェルスクリプトは特定のシェルに依存するもの LinuxやmacOS、WindowsなどのOSは一般に、「シェル」（Shell）と呼ばれる機能を備えています。 シェルはコマンドラインインターフェイスなどのユーザーとの対話機能を備えており、例えばLinuxのコマンドラインで「ls」コマンドを打ち込むとファイルの一覧が返ってくるという動作はシェルが提供しています。 そしてシェルでは一般に、こうしたコマンドを複数つなげた一連の動作をスクリプトとして定義し実行できる「シェルスクリプト」が利用可能です。例えば、次のシェルスクリプトは、「ls」コマンドによるファイルの一覧をファイル「list.txt」に
Honoで見直すMPAの開発者体験
Next.js App Routerのリリース以降、 async function で書けるServer Componentsいいじゃんファイルベースルーティングも使いやすいなと触ってたのですが、まだ安定していないこともあり不可解なエラーメッセージや複雑なキャッシュの仕組み、デプロイ先を選ぶ感じなどこのままNext.jsにベットしてていいのかなと感じていました。 そんな折にHonoでシンプルなフォームを持つWebアプリを書く機会があり、非常に優れた開発者体験に驚きました。5年以上前にMPAを開発した経験もありますがそこから比べてもとても良くなっていて、Honoの良さを感じるとともにMPAというアプローチを見直すきっかけになりました。 そもそも現在Webフロントエンドを構築する際に当たり前のように選択肢に上がるSPAですが、必ずしもSPAが適していない場合でもSPAが選択されることが少なくな
フロントエンドにおけるテスト駆動開発の実践と概説
はじめに 自動テストが叫ばれて10数年以上の時を経ていますが、今なお開発者の興味を惹くトピックの1つであります。 実際、Developers Summit 2023ではテストを主題とした講演が多く、また人気も博したと耳にします。 さて自動テストと共に話題になるトピックの1つと言えばテスト駆動開発でしょう。 ただテスト駆動開発は、設計・開発手法のため自動テストとは厳密にはジャンル違いであり、誤解を受けがちなトピックでもあります。 またテスト駆動開発を解説する書籍の多くが、Java等のオブジェクト指向言語のスタイルで書かれているためフロントエンドエンジニアのコードスタイルとは若干差異があリます。 当記事ではフロントエンドエンジニアのためにテスト駆動開発の技法の数々をTypeScript、Reactを用いて実践します。 フレームワークとしてReactを採用しましたが、記事内のコードはモダンフロン
eslint-cjs-to-esm: CJSをESMへとマイグレーションするツールを書いた
最近、色々なライブラリをCommonJS(CJS)からECMAScript Module(ESM)へとマイグレーションしています。 その際に、ESMでは__dirnameやrequireなどCommonJS特有の機能は使えなくなっています。 また、TypeScriptやBabelなど多くのツールはCJSではimport時に拡張子はなくても大丈夫ですが、ESMの場合はimport時に拡張子が必要になります。 import url from "node:url"; - import { mdEscape } from "./mdEscape"; + import { mdEscape } from "./mdEscape.js"; // ESMでは相対パスに拡張子は省略できない + const __filename = url.fileURLToPath(import.meta.url); /
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
イテレータとイテラブルの概要と課題、未来
TSKaigi Kansai 2024 - 構造的部分型と serialize 境界
Prisma ORMを2年運用して培ったノウハウを共有する
Deep dive into Biome in JSConf 2023
GitHub - azat-io/eslint-plugin-perfectionist: ☂️ ESLint plugin for sorting various data such as objects, imports, types, enums, JSX props, etc.
TypeScript project references | moonrepo
逆引き 型ファースト Zod
