こんにちは。Findy Freelance開発チームの久木田です。 今回は、社内で運用している支払明細書PDFの生成基盤を、Lambda + Puppeteerから@react-pdf/rendererへ全面的に移行した話を書きます。最終的に処理時間はP50（中央値）で約27倍速くなり、メモリ消費も実測で約1/4まで落とせました。 これまでのPDF生成基盤と課題 対症療法でしのいだ期間 根本対応を決めた3つの背景 技術選定: 戻れる順に試す 移行で押さえておきたい実装ポイント 設計と実装のキモ テンプレート構造 esbuildで橋渡し どう変わったか 学び これまでのPDF生成基盤と課題 現在、システムから発行しているPDFはいくつかありますが、本記事では一例として支払明細書PDFに絞って紹介します。ファインディからフリーランスエンジニアへの支払明細として月次で一括発行しているPDFです。
Reactがこれまでどのように開発されてきたかについての詳細な考察と、コミュニティでよく見られる混乱や懸念事項についての説明 はじめに 今日、Reactとそのエコシステムの状況は複雑で分裂しており、成功、懐疑、そして論争が入り混じっています。 ポジティブな面として、Reactは最も広く利用されているUIフレームワークであり、そのコンセプトはJSエコシステムの他の部分にも影響を与えてきました。Reactチームは数年にわたる開発の末、先日React 19をリリースしました。これは、公式に安定版となったReact Server Componentsのサポート、Promiseを扱うための新しいuseフック、複数の新しいフォーム連携、そして長らく非推奨であった多くの時代遅れな機能の削除を含む、大規模なリリースでした。 しかし、私が観察し、また経験してきたところでは、Reactコミュニティでは、Rea
WebアプリでURLシェアを実装する際に、URLにすべての情報を持たせてしまいたい場合があります。そのとき、情報をそのままクエリ文字列に渡してしまうとURLの文字数制限に引っかかってしまうかもしれません(厳密にはURLに上限はないようですが、現実はいつもブラウザ実装依存)。 そんなときURLセーフな文字列形式で圧縮してくれるライブラリがあります。lz-sringです。 変換の例 ライブラリで compressToEncodedURIComponent というAPIが提供されているのでこれを使用します。標準のencodeURIComponentでURLセーフな文字列に変換した場合とサイズ比較をしてみましょう。 import lzstring from "lz-string"; const rawData = "Lorem ipsum dolor sit amet, consectetur a
OpenStatus - ステータスページ App Router Turborepo Drizzle Clerk tRPC Tailwind shadcn/ui LLM Report - OpenAI モニタリング App Router Prisma NextAuth shadcn/ui Stripe Dub - URL 短縮 App Router Turborepo Prisma NextAuth Tailwind Stripe slug - URL 短縮 Prisma NextAuth tRPC Tailwind Cal.com - 日程調整 Turborepo Prisma NextAuth tRPC Tailwind Taxonomy - ブログ App Router Prisma NextAuth Tailwind Rowy - ローコード GUI Firebase Dorf -
本書の目標は、本読者がNestJSをすぐに実務で利用できる(具体的に言えばNestJSで簡単なプロダクトを開発できる)ように、最短ルートに読者を導く一冊になることです。本書は、NestJSの網羅的なドキュメントではありません。取り扱う内容は頻出する機能に絞って、「実務でNestJSを扱うなら、最低限ここだけは理解しておこう」「これさえ押さえておけば実務でも安心できる」という観点で執筆しています。 本書はNestJSを中心に取り扱いますが、実務上、必要になる知識としてJavaScriptやTypeScriptの仕様やフロントエンドフレームワークのReactやVueについても扱います。
はじめに Reduxは遠い昔に誕生したものなので、いまReduxを使っていない人も多いかもしれません。 Reduxは、出現当時はそれほど大きなソフトウェアではなかったのですが、ときが経つにつれて、いろいろな便利関数たちが現れてきて、そのせいで今からReduxを調べる人は、何が本質なのかを調べるのが難しくなっていると思います。 そこで3分でReduxもどきを実装しました。こちらです。20行！！ じゃーん！ JavaScriptでうごきます！！ // 実装 const createStore = (reducer) => { let state = 0; const listeners = []; const dispatch = (action) => { const newState = reducer(state, action); state = newState; listeners
最近会社で Next.js のチュートリアルを担当することがあったり、これからもあるので資料として記事をしたためておこうと思う。 対象は、React は知っているけどこれから Next を学ぼうとする人が想定。 つまり React 単体と Next の差分をまとめる。 React そのものから学びたい人は別の資料にアクセスした方が良いだろう。 Next の学習教材 とりあえず公式だけ読めば良い。(これでいまブラウザバックされたら面白いな・・・) 主に二つあり、 ドキュメントや API: https://nextjs.org/docs/getting-started チュートリアル: https://nextjs.org/learn/foundations/about-nextjs を読むと良い。 Next は何を解決しているか、何が嬉しいか 元々は SSR のための煩雑な手続きをしなくてい
Next.jsといえば、Vercelで簡便なデプロイができることで有名ですが、GCPのCloud Runでもそれに負けないくらい簡単にデプロイできるようになってきました。 本記事では、GitHubでソース管理されたNext.jsアプリケーションをCloud Runにデプロイし、mainブランチへのpushをトリガーとしたデプロイの自動化を設定する方法を紹介します。 1. Next.jsアプリケーションの作成 Cloud Runでデプロイするためには、Next.jsをDockerに対応させる必要があります。Next.js公式がwith-dockerというexampleを公開しているので、今回はこれを利用しましょう。
はじめに KODANSHAtechという会社でFRIDAYの開発案件に携わっています。 FRIDAYは講談社から発行されている写真週刊誌です。スクープ記事が注目されがちですがグラビアも多くやっており、撮影時の動画をウェブで提供しています。本記事では、FRIDAYにおける動画特典ページをNext.js ＋ Vercelでリプレースした事例を紹介します。 上記の画像はユーザーが動画を見るまでのフローを示したものです。ユーザーはFRIDAY紙面に掲載されたQRコードを読み込み、遷移先のページでパスワードを入力します。入力すると、動画を視聴できるようになります。 移行の経緯・技術選定 FRIDAYには古くから存在する月額課金のサービスが存在し、そのサービスに相乗りする形で紙面の動画特典ページを運用していました。しかし、サブスクリプションのサービスにリプレースしたタイミングで、動画特典ページを別アプ
Reactを取り巻く状態管理の潮流を学ぼう。HooksやServer Componentsなどの登場で何が変わるか Reactを取り巻く状態管理のアプローチは変化を続けていますが、いま知っておくべき手法とはどのようなものでしょうか。小林 徹（@koba04）さんに、現在、そしてこの先の状態管理について執筆いただきました。 こんにちは、小林（@koba04）です。 2019年5月に『SPAにおける状態管理:関数型のアプローチも取り入れるフロントエンド系アーキテクチャの変遷』という記事を書きましたが、そこから2年以上が経過し、Reactを用いた状態管理は大きく変わりました。本記事ではReactを取り巻く状態管理の変遷について解説します。 広がるReduxの採用 Hooksの登場 コンポーネントツリーから独立した状態管理 Concurrent Featuresによる新しいユーザー体験 状態とキャ
例によって、今回も備忘録です。 まず完成したものは、こちら このようなネイティブアプリを作ろうと思い地図を作りましたが、データを一回載せてみてみたくて、自分のサイトに乗っけてみました。 ローカルでの実装はテンプレ通りすぐできます。が、ビルドするためにエラーを消すのに一苦労でした。 環境 Next.js, TypeScriptのサイト Google Cloud PlatformでAPIを発行する GCPでMaps JavaScript APIを発行し、Keyを.envに入れる react-google-mapsで、実装したいモデルを探す イントロダクションを見て、インストール可能です。 Reactのバージョンが新しいと使えるコンポネントが違うので、一応読みましょう。 さっきコピったAPIKeyを入れれば、サンプルを見れます。 今回は、古地図のデータをSVGで用意し、マップ上に張り付けて透過さ
For your frontend, this application will be using Next.js and Tailwind CSS. You will learn how to maneuver around an app and build a strong static pricing page. For your backend AND authentication, we will make use of Supabase. Supabase is open source and is all of the backend services that you will need to build your site. It includes a dedicated and scalable Postgres database and user management
こんにちは、よしこです。 この記事は 2020年に立ち上げたWebフロントエンド構成の振り返り の「Componentのディレクトリ構成」項の詳細記事です。単体でも読めますが、よければ元記事もあわせてどうぞ！ この記事では、今わたしが 株式会社ナレッジワーク というスタートアップで開発・運用しているプロジェクトにおいてうまくいっていると感じているComponentのディレクトリ構成についてご紹介していきます。 ディレクトリ構成 Componentは src/components の中にまとめていて、その下に以下の4種類の分類ディレクトリを切っています。 src/components/page src/components/model src/components/ui src/components/functional 分類ディレクトリを考えるにあたって重視したポイントは以下。 新しくco
【Next.js 12 コラム追加版】2021年からReactを始めるなら React Server Components 一択ではないか？ VTeacher所属の Masaki Suzuki です。 この記事では、私が在職する SUZUKI SOFTWARE LABO, LLC というスタートアップにて、 VTeacher のプロジェクトで得た知見を紹介していきます。 前回の記事 にコラム（Next.js 12）を追加した記事です。 Next.js 12 から！正式に React Server Components が発表されましたね。 さすが 約113億円を資金調達 したVercel。Rust製コンパイラ（swc）を採用してビルドを高速化したり、ミドルウェア（エッジ関数等）導入でIaaSらしいことをしたりと目が離せません。「おまえたちはフロントに集中しろ！それ以外は俺たちがやってやる」
🚀 はじめに Nintendo Switchをブラウザから操作し、自動化もできるツールPhantomHandを公開しました。 本記事は「PhantomHand」の技術面について書かれています。 使い方や導入方法だけサクッと知りたい方はマクロコンを自作してNintendo Switchをブラウザから操作する【導入編】をご覧ください。 リポジトリ 完成品 💡 何ができるか？ 簡潔に言うと、PCのブラウザに移植されたマクロコントローラーです。 具体的には、以下の機能をReactとArduinoで開発しました。 ブラウザのGUIでSwitchを操作 一連の操作をコマンドとして保存（マクロ機能） 保存したコマンドを呼び出して再現（マクロ再生機能） コマンドをTwitterでフォロワーに共有 偉大なる先駆者たちが作ったマクロツールとの違いは以下の通りです。 OSを問わずに(Windows / Ma
In this five part series, we will "recreate" React from the ground up, learning how it works along the way. Once we have finished, you should have a good grasp of how React works, and when and why it calls the various lifecycle methods of a component. This series is based on React 15.3, in particular using ReactDOM and the stack reconciler. React 16 and beyond have changed a lot. I still think thi
はじめに この記事は、筆者がOOPartsというプロダクトにおいて、Reactのアプリを 「Create React App」 から 「Next.js」 に置き換えた事例を記す内容となっています。 これまで 「0からのNext.jsアプリケーションの作成」 文脈における記事は多くありましたが、「Create React App」から「Next.js」という、 同じReact環境における移行記事 はそこまで多くなかったと認識しています。 ある程度育ちきっているプロダクトであれば、フレームワークごと移行することは中々困難になると思っていますし、それを成し遂げることはとてもチャレンジングなことです。その結果、事例としての大規模移行事例は中々存在しませんし、稀有なことだと思っています。 本記事におけるOOPartsのNext.js移行に関する知見は、今後大きな移行する人たちの参考になれば良いと思っ
npx は npm パッケージをインストールせずに実行できる便利コマンドで、npm バージョン5.2.0 から追加された機能です。 React 環境構築を Webpack 手書きとかすると死ぬほどしんどいので、世の中の大半の React 解説記事ではセットアップで手を抜くために、create-react-app というツールを npx や yarn 経由で起動して、環境を構築しています。 npx create-react-app --template typescript proj あるいは yarn create react-app --template typescript proj で proj というディレクトリに、React のプロジェクトが作成されます。 これはとても説明に便利で、ブログや書籍を書く人にとって大切なものですが、一つ致命的な問題があります。 create-reac
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
