ソース Cloudflare Blogより 開発者向けのMonorepo構成ページ 2024年4月4日の発表の通り、Cloudflare PagesがMonorepo対応しました。 npm/yarm/pnpmのWorkspaceに対応したほか、以下のMonorepo管理ツールにも対応しています。 Turborepo Nx Lerna また手元での簡単な動作確認ではありますが、BunのWorkspaceでも動きました。(Bun自体不安定なのと、公式のドキュメントには出てこないので、バグは多いかもしれません) 影響範囲 Cloudflareは個人開発でよく使われ、Pagesもフロントエンドのデプロイ先として大人気ですが、今回の対応でエンタープライズ領域でも一層使いやすくなったと感じました。 NextJSがフルスタックフレームワーク化していますが、初めからそれなりの規模のサービスを作ろうとすると

はじめに タイトルはこちらから拝借しました。この記事は他のパブリッククラウド(Azure, GCP)を薦める記事でもなければ、プライベートクラウドを薦める記事でもありません。また私自身、エンジニアキャリアの中でAWSはたくさん使ってきましたし、今でもソフトウェア開発のわがままに答えてくれる素晴らしいサービスだと思っているので、AWSを貶めるような記事でもありません。むしろ以下に紹介するサービスはAWS上に構築されていることが多く、間接的にもますます世界中の基盤として発展していくはずです。 PaaSアーキテクチャ 前提条件 前提として、現在でも主流なSPAを中心としたフロントエンド、バックエンド、データベースサービスからなるアプリケーションを想定します。 この場合、 フロントエンド　→　CDN + Static Hosting バックエンド　→　Container Deploy(Auto S

TL;DR 弊社で実験的に導入を始めている、2024初頭時点で今後に期待が高まる最新のweb技術についてまとめています。 新規プロダクトの技術選定に迷っている方などにおすすめです。 Turborepo - Monorepo管理 モノレポ構成における懸念点の一つとして、プロダクトが大きくなるにつれてビルド時間が膨大になって来る点です。 TurborepoはRust製、並列化、差分ビルド、Remote Cashingなど、肥大化しがちなmonorepoのビルド時間を短縮するメソッドがたくさん詰まっています。 Bun - Package manager (runtime, test tool) 正確にはBunはランタイムですが、Nextなど厳密にはNode.jsで動かす必要があるため、弊社では（ほぼ）パッケージマネジャーとして活用しています。 pnpmやyarnと比較してnpm installな

はじめに アプリ開発には本体の開発とは別に、運用・保守するための管理画面の開発も必要不可欠になると思います。機能と言っても、登録、参照、編集、削除 程度であることがほとんどなので、そこまで時間もかけたくないものです。そこで今回は、弊社で採用することにした Refine についてご紹介したいと思います。 多少の環境構築はあるものの、準備が整えば、1 ページあたり 5 分で実装できるようになります。 豊富なサンプル GUI を使って 上記の公式サイトを見ると、「Try it Online!」のボタンがあります(2023-09 現在)。ここから要素技術を選択していくことで、お好みのプロジェクトが作成可能です。 GitHub から Clone この公式ページには、コンポーネント、フレームワーク、UI など様々な要件・要素技術に応じたサンプルコードが GitHub 上に数多く提供されています。 今回

はじめに マイクロサービスの開発では、サービスが増え続けるバックエンドに対して、フロントエンドは接続先が増えるため、開発効率を下げてしまいます。その対策として、さまざまな設計パターンが存在します。 弊社の開発ではGraphQL Gatewayを用いていますが、そこに至るまでや周辺の技術/アーキテクチャを解説します。 マイクロサービスとフロントエンド マイクロサービスを採用する場合、フロントエンド（ウェブアプリケーション、モバイルアプリケーションなど）は複数のサービスとの連携が必要になることが多いです。各マイクロサービスは通常、API（REST、gRPCなど）を提供し、フロントエンドはこれらのAPIを通じてデータの取得や操作を行います。 API Gateway API Gatewayは、フロントエンドとマイクロサービス間の中間に位置するコンポーネントとして機能し、マイクロサービスアーキテクチ

app router とは next.js で使用できるファイルシステムベースのルーターです。以前は pages router というものがありましたが、そちらの進化系といえます。 ポイントは error.tsx や loading.tsx などの決められた名前でコンポーネントを作成することで、エラーバウンダリーやサスペンスなどの機能が簡単に利用できるようになったことです。 これにより開発速度が上がり、面倒な実装はフレームワークに任せることができます。 また、内部で RSC を使用しており、これとサスペンスにより、コンポーネントレベルで SSR と CSR を組み合わせられるようになりました。 今回はそういった機能の、弊社プロダクトにおける使用例を紹介します。 使用技術 error.tsx エラーバウンダリーです。fallback コンポーネントを書くだけで ok です。 import {