はじめに現代のWebアプリケーションにおいて、ユーザが写真や動画などのファイルをアップロードする機能は、しばしば求められます。 本記事では、ファイルアップロードを実現するための一手段として、「署名付きURL」を利用した方式を取り上げ、その設計について詳しく解説します。 今回は、Amazon Web Services（AWS）を利用する前提のもと、このアプローチを探求していきます。 前半部分は署名付きURLをそもそもよく知らない方向けの導入部となっていますので、要点だけ抑えたい方は設計上のポイントから読まれることをお勧めします。 ファイルアップロードの実現方式パターン署名付きURLの話をする前に、ファイルアップロード機能をWeb APIとして実現する方式について、いくつか代表的なものを紹介します。 Pattern 1. multipart/form-datamultipart/form-da

React Hook Form で Zod を使う時の 5 つパターン 2023.02.11 React Hook Form で Zod を使用する時によくあるバリデーションのパターンを 5 つ紹介します 非同期バリデーション email の重複チェックを行う場合には API に問い合わせる必要があるので、非同期でバリデーションをすることになるかと思います。 refine() メソッドはカスタムバリデーションロジックを提供するためのメソッドです。refine メソッドの第 1 引数には boolean を返すバリデーター関数を受け取ります、このバリデーター関数は Promise を返すことができるため、手軽に非同期のバリデーションを実施できます。 import { z } from "zod"; import { isUniqueEmail } from "./api"; export c

カリスマ型リーダーシップをとっていた私が、サーバントリーダーシップを獲得してスクラムマスターの一歩目を踏むために必要だったマインドセットの転換について言語化しました

はじめに 現在、海外のプロダクトのほとんどがダークモードに対応しており、その普及は加速しています。ダークモード対応は単なるデザイン要素にとどまらず、プロダクトの品質や開発力の高さ、アクセシビリティへの配慮を示す効果もあります。 日本ではまだまだ普及が遅れているダークモード対応ですが、効率的な実装を行えば実は少ない工数でダークモードに対応できます。この記事では Tailwind CSS におけるダークモードの効率的な実装について解説します。 本記事は shadcn/ui や Tailwind UI のコードを参考にしており、著者の属人的アプローチではありません。 結論 CSS 変数と Tailwind CSS の色拡張を使うことでテーマごとの配色を一元管理しつつ、Tailwind CSS の直感的な DX も維持できます。 Demo 実装例を用意しました。 css と tailwind.co

はじめに この記事は、Alan Alickovicさんの著書「React Application Architecture for Production」をまとめたものになります。Alanさんと言えばZennで最も人気のある記事「bulletproof-react」の作者であり、彼のprojectから学ぶことはとても多い印象です。 今回紹介する本は2023年1月に公開されたため、bulletproof-react以後のReactアプリケーションにおけるベストプラクティスの宝庫となっています。また、本で扱われているアプリケーションのProjectがGitHubで公開されていることから、Projectを眺めるだけでも勉強になる点があるかと思います。 想定読者 Reactのアーキテクチャを模索している方 テスト手法やCI/CDなどのアプリケーション設計に関心がある方 使用される技術と本の構成 言

sumirenです。 2023年5月5日、ついにNext.js App Routerがstableになりましたね！ おめでとうございます！！ありがとうございます！！！ 今から本番で使うのが楽しみで待ちきれません。 13.4のリリースではstableの宣言とともに、目玉機能としてServer Actionsが来ています。Data Fetch（というか、もはやData Handling的なもの）の機能の一部として、とても興味深いです。 さて、Server Actions自体の解説は他の方に任せるとして、リリースノートには以下のような一文があります。 Server Actions in Next.js have been designed for deep integration with the rest of the data lifecycle, including the Next.js

はじめに Vercel Ship、アツい発表が続いていますね。 特に初日の Storage は、KV、Postgres、Blob と 3 つのプロダクトが公開され、「とりあえず何か試したい！」「今の構成のあのコンポーネントは Vercel で済ませられるようになりそう！」となった方も多いんじゃないでしょうか。 Vercel で何かしら関数を動かすとなった時に一番最初に思い付かれがちな選択肢は、とりあえず create-next-app して pages/api/hello.ts を作成して... というあれですが、Vercel を使ってみたい人（またはプロジェクト）のうち全員が React を使っているわけではありませんし、そもそもフロントエンド無しで完結するユースケースも多いはずです。 Vercel の Serverless Functions は（ご存知の方も多いと思いますが）実際には

ReactのuseEffectは、フックの中でも使い方が難しいものの一つです。そこで、この記事では筆者が考えるuseEffectの望ましい使い方を皆さんに伝授します。 基本原則 技術やその要素の使い方を考えるにあたって、筆者が好んでいるのは基本原則を置いてそれに基づいて判断することです。ということで、この記事ではまず筆者が考えるReactの基本原則を紹介します。 筆者がもっとも重要視する原則は、ReactはUIライブラリであるということです。つまり、ReactにはUIの管理をさせるべきであって、その他のことはReactの役目ではないということです。Reactが難しいと思う人がいる場合、何でもかんでもReactにやらせようとするから余計に難しくなっているのだと思います。 例えばアプリケーションのロジックの管理やそれに付随するステートの管理はReactの役目ではないので、Reactの外部で処理

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

Understanding the Role of New York Injury Lawyers: A Comprehensive Guide by Alex Hollender Legal Practice In the dynamic and bustling landscape of New York, personal injuries can have profound and far-reaching consequences. This comprehensive guide seeks to elucidate the multifaceted role of a Philadelphia injury lawyer, with a particular emphasis on the exemplary services provided by Alex Hollend

Amazon Connect と ChatGPTのAPIを使い、電話で質問するとChatGPTが何でも答えてくれるコールセンター向けチャットボットシステムを構築してみた 電話で質問するとChatGPTが何でも答えてくれるコールセンター向けチャットボットシステムを構築しました（実際のデモ動画あり）。構築手順についてご説明します。 はじめに 題名の通り、電話でChatGPTが質問に答えてくれるチャットボットシステムを構築してみました。 電話をかけて質問すると、ChatGPTのAPIを利用し、質問に答えてくれます。音声は、Amazon Connectで用意されているものを使用しています。 下記は、イメージ図になります こちらは、電話をかけた時の動画になります 動画では、ChatGPTのレスポンスに時間がかかっているように思えます。 レスポンス時間を短縮する方法をブログ化しましたので、今回の記事を

Intro SPA の隆盛で進化したフロントエンドライブラリによって生み出された「コンポーネント」という資産は、それを View 層の最小単位として扱うエコシステムにその重心をずらした。 近年の Web 開発は、虫食いのテンプレートエンジンにデータをはめ込む方式から、デザインシステムにカタログされたコンポーネント群に、 API から取得したステートを流し込み、それらを「いつ、どこで、どう」レンダリングするかという課題への最適解を、各位が模索するフェーズとなっている。 コンポーネントを敷き詰めるコンテナ側の設計は、 Flexbox および Grid の登場によるレイアウトの進化が手助けしたところも多いにある。しかし、「ページ」を前提に設計された CSS は、「コンポーネント」を前提にした設計に移行するうえで、ミッシングピースが多かった。 現在、提案/実装が進んでいる CSS の新機能群には、

今日もWAI-ARIAの話です。 timwright.org そのまんまのタイトルの記事があったので以下引用。 Presentational roles are used when elements need to be in the DOM, but the semantics of them are inaccurate or unnecessary. role="presentation"は要素がDOMとしては必要だけどセマンティクスが必要ないときに使われるとのこと。それに対し、 aria-hidden="true" means the element is removed from the tree aria-hidden="true"は要素をアクセシビリティツリーから消すために使われる、つまり支援技術から認識されなくなるので、スクリーンリーダーで読み上げられなくなる。 簡単なデモ

import React, { useCallback } from 'react' import { VisXYContainer, VisAxis, VisArea, VisXYLabels } from '@unovis/react' import { data, formats, DataRecord, getLabels } from './data' export default function StackedArea (): JSX.Element { const labels = getLabels(data) return ( <> <VisXYContainer data={data} height={'50vh'}> <VisArea x={useCallback((d: DataRecord) => d.year, [])} y={formats.map(g =>

この記事は2022年12月10日開催のSpectrum Tokyo Design Fest 2022で話したセッションの内容を文字起こししたものです。 僕は15年ほどWebに関する業界で働いています。はじめは小さなベンチャーでWebデザイナーとして仕事をはじめ、自分でデザインして自分でコーディングするというキャリアからはじまりました。それからフロントエンドデベロッパー、UXエンジニア、デザインエンジニアと肩書を変えてきています。 その中で、CSS設計の書籍の執筆や、Figmaのプラグイン開発、デザインシステムのリードなどの活動をしてるんですが、基本的にはコードを書くことをメインにしつつも、デザインに近い領域で仕事をしてきています。 Code is a Material僕がデザインとコードの両方についての考えを巡らせるきっかけになったのは、2019年に観たデザインシステムのカンファレンスのい

この記事はEngineering Management Advent Calendar 2022の7日目です. 今はエンジニアリングマネージャ(EM)としてエンジニアリングマネジメントの4領域(プロダクト・プロジェクト・テクノロジ・ピープル)すべてを見ていますが, それ以前は長い間テックリードをやっていました. その経験を活かして, 最近は後進を育ててテックリードあるいは「弱いEM」*1をできる人材を増やそうとしています(これ自体がピープルマネジメントの一環ですね). テックリードを育てるためにやっていることの全容を詳細に書くと本が1冊書けるくらいになってしまうと思うので, その中でも再利用可能そうな(と言うより再利用可能にしたいと目論んでいる)「テックリード養成講座」について紹介したいと思います. Memeplex.appで生成した, テックなリードが養成されるイメージ 経緯 僕自身は,

皆さんこんにちは。株式会社バベルでエンジニアをしている uhyo です。バベルが提供しているaileadというプロダクトではNext.jsおよびReactを使用しています。以前から、自分はaileadのフロントエンドにおいてRecoilの利用を推進する活動をしてきました。実は、筆者が以前に公開した次の記事もその流れを汲んだものです。 Recoilはステート管理ライブラリとして知られていますが、筆者はRecoilのデータフローグラフを構築しその上にアプリケーションロジックを載せられるという点に可能性を感じています。実際、aileadではそのような方向性の設計に取り組んでいます。 そこで、この記事では筆者がaileadにおいて実践しているRecoilの運用を紹介します。 この記事はReact Advent Calendar 2022の8日目の記事です。 ステート更新に反応するならまずselec