← 2026-04-09 の一覧へ戻るホーム
Railway のフロントエンドを Next.js から切り離し、ビルド時間を「10 分以上」から「2 分未満」に短縮しました。

2026/04/08 15:01

Railway のフロントエンドを Next.js から切り離し、ビルド時間を「10 分以上」から「2 分未満」に短縮しました。

RSS: https://news.ycombinator.com/rss

元のHacker News記事へ ↗
要約▶

Japanese Translation:

Railwayは、Next.jsからVite + TanStack Startスタックへ、本番フロントエンド（ダッシュボード、キャンバス、およびrailway.com）を完全に移行し、ダウンタイムゼロで実現しました。移行は2回のプルリクエストだけで完了しました：PR 1では

next/image
、
next/head
、
next/router
などすべてのNext.js固有APIを削除し、PR 2ではフレームワークを切り替え約200個のルートを移動しました。ビルド時間は10分以上から2分未満に短縮され、ホットモジュールリプレースメント（HMR）が即時化しました。TanStack Startは型安全なルーティング、第一級のパスレスレイアウト、および開発者中心モデルを提供し、Railwayがレンダリングパターンをより厳密に制御できるようになりました。

Railwayは現在、SSR（サーバー側レンダリング）を必要なページ（マーケティングページ、変更ログ、採用情報）のみで使用しています。残りのサイトは完全にクライアント側で動作します。

next.config.js
はNitroに置き換えられ、500件以上のリダイレクト、安全ヘッダー、およびキャッシュルールを1つの設定ファイルに統合しました。また、Nodeポリフィルはブラウザネイティブ代替品へと差し替えました。移行によってビルトイン画像最適化が失われましたが、これは現在
<img>
タグとFastlyエッジ最適化で処理され、next‑seoやnext‑sitemapなどのエコシステムツールは社内対応に置き換えられています。

フレームワークを変更してもRailwayのデプロイワークフローは変わりません：PRごとにプレビュー展開、ヘルスチェック、およびダウンタイムゼロでのリリースが行われます。Fastlyエッジキャッシュはほぼすべてのトラフィックを直接エッジから提供し、Viteの不変資産モデルはキャッシュフレンドリーなチャンクを保証するため、変更されたモジュールのみが再ダウンロードされます。この決定は、より高速なイテレーションサイクル、クライアントファーストの明確なアーキテクチャ、およびレンダリングパターンへのより良い制御を求める必要性から導かれました。結果として、チームは既存のデプロイメントパイプラインを維持しながら、著しい速度向上とルーティング制御の強化を実現できることが示されています。

本文

目次

  1. Next.js は当初うまくいったが、やがてそうではなくなった。
  2. TanStack Start と Vite を選んだ理由
  3. ２つの PR でダウンタイムゼロを実現
  4. 放棄したもの
  5. Railway のフロントエンドは Railway 上で動く
  6. なぜ今なのか

1. Next.js は当初うまくいったが、やがてそうではなくなった。

Next.js は railway.com をゼロから数百万ユーザーを毎月サービスする本番アプリへと育てました。素晴らしいフレームワークですが、私たちのプロダクトにはもはや最適とは言えませんでした。

  • フロントエンドビルドが 10 分を超えるまでに時間がかかり、Next.js のみで 6 分、残りの 4 分は「ページ最適化の確定」に費やされていました。
  • 複数回/日頻繁にリリースするチームにとって、このビルド時間は大きなコストです。
  • Railway のアプリはほぼクライアント側で動作します：ダッシュボードはリッチで状態を持ち、キャンバスは WebSocket でリアルタイムに更新されます。
  • Next.js のサーバー優先のプリミティブはほとんど使われず、Pages Router 上に独自抽象化を構築していました（レイアウトやルーティングに関する要件がフレームワークで満たせなかったため）。
  • Pages Router を残したまま共有レイアウトをハックし、すべてのレイアウトパターンはボルトオンの回避策になっていました。
  • App Router はいくつかの問題を解決できましたが、サーバー優先に偏り過ぎるため、私たちのプロダクトには合わないと判断しました。

2. TanStack Start と Vite を選んだ理由

実際に構築している形に合わせたい――明示的でクライアントファースト、そして高速なイテレーションを可能にするスタックが欲しかったのです。さらに、作業自体も楽しく感じました。以下のポイントが決め手になりました。

  • 型安全なルーティング ― ルートパラメータと検索パラメータは推論され、全ルートツリーでオートコンプリートが機能します。ファイルシステムから自動生成されます。
  • 一級レイアウト ― パスレスレイアウトルートが以前のハックを置き換え、構成可能で予測可能な実装に変わります。
  • 高速開発サイクル ― 即時 HMR とほぼゼロ起動時間。コード変更と結果確認のフィードバックループが実質消滅します。
  • SSR が必要な場面だけ ― マーケティングページ、更新履歴、採用情報は SSR を利用し、それ以外は純粋クライアント側でレンダリング。サーバー描画を強制せずに済みます。
  • 明示的モデル ― TanStack はフレームワークのマジックに依存せず、内部構造をコントロールしやすくします。

休日中に数人で TanStack Start を試した結果、全員が「これで作業するのが楽しい」と合意。Railway のダッシュボードというプロダクトには、ベンチマーク以上に重要な点です。

3. ２つの PR でダウンタイムゼロを実現

選択した後は速やかに作業へ。マージ前にスカッシュして数百コミットを行いました。

200+ ルートを持つ本番フロントエンドを移行する場合、通常は並行稼働と段階的切替で何ヶ月も要します。しかし締め切りが迫っていたため、２つの PR で完結しました。

PR 1 – Next.js 固有部分の除去

  • next/image
    ・
    next/head
    ・
    next/router
    をネイティブブラウザ API やフレームワーク非依存代替に置き換え。
  • フレームワーク自体には変更を加えず、PR 2 がクリーンな切り替えになるようすべての Next.js への依存を除去。

PR 2 – フレームワークの入れ替え

  • 200+ ルートを系統的に移行：ページファイルからルーティング以外を個別 React コンポーネントへ分離し、元のページツリーからすべてのルートを生成。
  • Nitro をサーバー層として追加し、
    next.config.js
    を Nitro 設定に置き換え（500+ リダイレクト・セキュリティヘッダー・キャッシュルールを一元化）。
  • Next.js がポリフィルしていた Node.js API（Buffer, url.parse など）をブラウザネイティブ代替へ置き換え、コードをクリーンに。

日曜の早朝にマージ。チームは Discord のライブワーグループで即座にテストし、同日に修正がデプロイされました ― ダウンタイムゼロです。

4. 放棄したもの

  • 組み込み画像最適化 ― 
    next/image
    を 
    <img>
    タグと Fastly エッジ最適化に置き換え。
  • エコシステムの一部 ― 
    next-seo
    , 
    next-sitemap
    などを小規模な社内実装へ差し替え、依存関係を削減。
  • 成熟度 ― TanStack Start は新しいため、まだ粗い部分がありますが、方向性は正しく、メンテナーの応答も良好。Vite と TanStack のスポンサーであることも安心材料です。

5. Railway のフロントエンドは Railway 上で動く

本番フロントエンドをユーザーと同じ方法で運用しています：PR 毎にプレビューデプロイ、ヘルスチェック、ダウンタイムゼロのローリングリリース。ビルドシステムとフレームワーク全体を入れ替えてもインフラは触らず、コードを書いてプッシュすれば Railway が残りを処理します。

  • Fastly はほぼすべてのトラフィックをエッジで直接配信。
  • マーケティングページはキャッシュ済み；動的ページは必要に応じて ISR を利用。
  • フロントエンドサーバーはほとんどアイドル状態。
  • Vite のアセットモデルが特に有効：各モジュールが内容ハッシュ付きチャンクとして分離されるため、請求変更だけを配信すれば他のユーザーは数キロバイトだけダウンロード。

フロントエンドは高速ビルド、イミュータブルでキャッシュフレンドリーなアセット、そしてロールアウト・プレビュー・ルーティングを追加作業なしに処理できるインフラでデプロイされるべきです。フレームワークはイテレーション速度を最適化し、インフラはその結果をユーザーへ見えない形で届けます。

6. なぜ今なのか

フロントエンドのイテレーションスピードがこれまで以上に重要になっています。

  • ビルド時間が 10 分超から 2 分以内に短縮。
  • 開発サーバーは即時起動。
  • ルート変更は境界で型チェックされる。
  • レイアウトはワークアラウンドなしで組み合わせ可能。

コードを書いてユーザーへ届けるまでのギャップを埋めることが私たちの課題です。Vite + TanStack はフロントエンド変更をほぼ即時に配信できる環境を提供し、我々が目指す未来を実現します。

同じ日のほかのニュース

一覧に戻る →

2026/04/09 0:40

私、macOS XをNintendo Wiiにポート（移植）いたしました。

## Japanese Translation: --- ## 改良された要約 Mac OS X 10.0（Cheetah）は、Nintendo Wii 上でネイティブに動作するようにポートされ、コンソールをキーボード/マウス入力と GUI サポート付きの完全機能型デスクトップへ変貌させました。プロジェクトのコアは、*ppcskel* をベースに最初から書き直されたカスタムブートローダーです。このブートローダーは、Wii の PowerPC 750CL CPU を起動し、メモリレイアウトを設定し、最小限のデバイスツリー（root → cpus → PowerPC,750; memory）を作成します。SD カードから XNU カーネルをロードし、実行中にカーネルバイナリをパッチ（MEM1/MEM2 用の BAT 設定と USB Gecko へのコンソール出力）し、制御を XNU に渡します。 ブートローダーが提供する主要ドライバーは次の通りです： - **SD‑カードドライバー**：Starlet MINI IPC コマンド（IPC_SDMMC_SIZE, READ, WRITE）を介して IOBlockStorageDevice を実装し、XNU が SD カードからルートファイルシステムをマウントできるようにします。 - **フレームバッファドライバー**：0x01700000 に RGB フレームバッファ（640×480 @ 16 bpp）を提供し、Wii のアナログテレビ出力用に YUV へ変換して Mac OS X GUI を実現します。 - **USB サポート**：PCI デバイスのニブ（NintendoWiiHollywoodPCIDevice）を作成し、AppleUSBOHCI をパッチして受け入れさせ、OHCI ドライバーからバイトスワップ処理を除去することでリバースレトルエンディアンハードウェアに対応し、USB キーボード/マウス機能をフル実装します。 ブートローダーは Apple Partition Map を解析し、起動可能なパーティションを一覧表示し、/chosen/memory‑map ノード経由でカーネル拡張を直接メモリにロードできるようにするため、改変されていない Mac OS X インストーラーパーティションからのインストールも可能です。必要なカーネル変更は最小限（BAT 設定、“hollywood” I/O ベース取得、フレームバッファキャッシュ整合性修正）で済み、その他すべてのドライバーはブートローダーが提供します。 この成果は、歴史的にサポートされていなかったプラットフォーム――Nintendo Wii――でも Mac OS X Cheetah をエンドツーエンドで動作させることを示し、ホビイストに低コストのレトロコンソールとして機能するデスクトップコンピュータを提供します。

2026/04/09 4:23

**ソフトウェア開発者のためのUSB：ユーザースペース USB ドライバー作成入門**

## Japanese Translation: ``` USB デバイスの操作は、libusb を使用してユーザー空間だけで完全に処理できるため、カーネルレベルのドライバ開発は不要です。 例として、Fastboot モード（VID 18d1 / PID 4ee0）にある Android フォンを挙げます。接続すると `lsusb` は「Google Inc. Nexus/Pixel Device (fastboot)」と表示し、カーネルドライバは付いていません。また、ベンダー固有クラスインターフェースが 2 つのバルクエンドポイントを公開します：コマンド送信用 OUT 0x02 とレスポンス受信用 IN 0x81。 libusb のホットプラグコールバックはこのデバイスの到着を検出し、Fastboot コマンドを自動的に発行できます。典型的な手順は次のとおりです： 1. `libusb_control_transfer` を使用して GET_STATUS リクエストを送信します。2 バイトの応答はデバイスがセルフパワーであり、リモートウェイクアップをサポートしないことを示します。 2. GET_DESCRIPTOR リクエストを送信して完全なデバイスディスクリプタ（ベンダー／プロダクト ID、USB バージョン等）を取得します。 3. バルク OUT 0x02 を介して Fastboot コマンドを発行します（例：「getvar:version」を 64 バイトにパディング）。 デバイスは IN 0x81 で 4 文字のステータス（「OKAY」または「FAIL」）と任意のペイロードを返します。 同じユーザー空間アプローチは、バルク転送に依存する他の USB プロトコルにも適用できます。主な作業はカーネルコードを書く代わりにプロトコルロジックを実装することです。これにより OEM 向けドライバ開発が簡素化され、ブートローダーのテストが迅速化し、カーネルモジュールなしでカスタム USB デバイスの高速プロトタイピングやデバッグが可能になり、組込み開発者と広範な USB エコシステムに恩恵をもたらします。 ```

2026/04/08 17:53

**コードを読む前に実行しておくべき一般的な Git コマンド** - `git fetch --all` *リモートの全ブランチとタグを取得します。* - `git status` *現在のブランチと未コミットの変更点を確認します。* - `git checkout <branch>` *対象となる機能やバグ修正用ブランチに切り替えます。* - `git pull --rebase` *ローカルブランチを最新の upstream コミットで更新します。* - `git log --oneline --graph --decorate -5` *簡潔なコミット履歴を表示し、文脈を把握します。* - `git diff origin/<branch>..HEAD` *まだプッシュしていない変更点を確認します。* - `git rev-parse HEAD` *現在のコミットハッシュを取得（参照に便利）。* - `git tag --list` *利用可能なタグ一覧を表示し、バージョン管理に役立てます。* - `git show <commit>` *特定のコミットの詳細と差分を調べます。* これらのコマンドで、コードを掘り下げる前にリポジトリの状態を素早く把握できます。

## 日本語訳: 以下の文章を日本語に翻訳してください。 ### 修正版要約 この記事は、ソースファイルを検査する前にコードベースの簡易監査が隠れた健康リスクを明らかにできる方法を示しています。これは5つの簡潔な Git コマンドを実行することで達成されます。 1. `git log --format=format: --name-only --since="1 year ago" | sort | uniq -c | sort -nr | head -20` 過去 1 年間で最も変更頻度が高い上位 20 ファイルを一覧表示し、潜在的な「ドラッグ」スポット（高い変更率）をフラグ付けします。 2. `git shortlog -sn --no-merges` コミット数で貢献者をランク付けします。単一人物が 70 % 超を占める場合はバスファクターが低く、過去 6 ヶ月にその貢献者がいない場合は危機的状況を示唆します。 3. `git log -i -E --grep="fix|bug|broken" --name-only --format='' | sort | uniq -c | sort -nr | head -20` バグ関連コミットが最も多いファイルを特定し、変更率データと照合して最高リスクコードをピンポイントします。 4. `git log --format='%ad' --date=format:'%Y-%m' | sort | uniq -c` 月ごとのコミット数を表示し、活動の加速または減退（例：半月間のドロップ）が重要人物の離脱を示す可能性があります。 5. `git log --oneline --since="1 year ago" | grep -iE 'revert|hotfix|emergency|rollback'` リバートとホットフィックスの数をカウントします。頻繁なリバートはデプロイ/テストが不安定であることを示し、ゼロの場合は安定性またはコミットメッセージ不足を意味する可能性があります。 これらの指標（変更ホットスポット、バスファクター問題、バグクラスタ、プロジェクトモーメンタム、火災対策頻度）は、コード複雑度測定だけよりも欠陥予測精度が高いと示されています（Microsoft Research 2005）。記事はスクワッシュマージワークフローが著者データを歪めることを警告しています。最初の監査に1時間を費やした後、筆者は特定されたリスクスポットに対して週単位で詳細調査を計画しています。関連研究としてはエンジニアリングチーム速度、Vim 使用、レガシー Rails 監査、Rails `default_scope` が引用されています。この手法は開発者に迅速なコミット履歴ベースの診断を提供し、高リスクファイルへの詳細コードレビューを集中させることでバグ削減、チームレジリエンス、およびリリース信頼性の向上を実現します。