はてなブックマーク

はじめに 最近なにかと話題のTailwindCSSですが、個人的には結構手に馴染むし、何よりもUI構造とスタイルをセットにできるところがかなり好きだったりします。 ただしTailwindCSSはその便利さゆえに自由奔放に書くことができてしまうため、無秩序なUIコンポーネントの定義ができてしまったりします。そういった状況を数々経験してきた方々は、あまりTailwindCSSをよく思わないかもしれません。 個人的には「TailwindCSSは、ルールを守って運用できれば楽しくUIコンポーネントの実装ができる」のかなと思ったりします。 今回は楽しいTailwindCSSを用いた開発を実現するために、守るべきお作法を共有できたらと思います。 個人的Tailwindcssお作法の四箇条 今回紹介したいTailwindCSSのお作法は、以下の四箇条です。 classNameは見やすさ重視で改行すべし

はじめに 普段React・Next.jsを用いた開発に際して、UIコンポーネントを作成する際にReact.FCやJSX.Element、ReactNodeなどの"要素やコンポーネントに関する型"を使用する場面が多々あるかなと思います。 昨今のReactコンポーネント開発において、実際には要素やコンポーネントの型を「何を使うか」をあまり意識しないでもちゃんと開発できてしまいます。とはいえ、それぞれの型には微妙に異なる特徴や特性がありますので、今回はよく見かける以下の四つの型について、それぞれの違いや特性を紹介していきたいと思います。 JSX.Element ReactElement ReactNode React.FC

はじめに アプリケーションの開発では、やっぱり認証・認可の部分は辛みが多い部分かなと思います。 SupabaseやFirebaseのAuthenticationやNextAuthなど認証・認可のサービス・ソフトウェアは様々ありますね。 先日のVercel Shipでも発表があったClerkという認証サービスを個人開発に導入してみたのですがかなり開発体験が良く、従来の認証・認可の実装の際にぶち当たる辛みがかなり少なかったので、今回はClerkを使った認証・認可周りの知見を共有できたらと思います。 Clerkとは Clerkとは、Clerk社が提供するフロントエンドフレームワーク(example: Next.js, React)向けの認証・認可サービスです。認証処理の提供のみならず、Clerkが標準で提供する認証情報コンポーネント(例えば、新規登録フォームのコンポーネントである<SignUp

はじめに フロントエンドエンジニアの守備範囲が広がる昨今、みなさん(主にフロントエンドエンジニアの皆々様方)は普段からReactやNext.js等でアプリケーションの開発を行う際に、脳死でVercelデプロイを選択していませんか？ 自分は完全に脳死でVercelデプロイを選択し、${アプリケーション名}.vercel.appのドメインでアプリケーションのホスティングを行っていました。 今回は、普段Vercelがやってくれているホスティングを理解したいフロントエンドエンジニア向けに、「Vercelに頼らず、CloudFront + S3 + Route53を使って独自ドメインでアプリケーションのHTTPSでホスティング・公開する手順」を紹介できたらと思います。 記事を読み進める前に 今回は説明は省略しますが、独自ドメインをお名前.comを使用して取得しております。 本記事では、独自ドメインを

はじめに タイトルで大袈裟にZero API Web Applicationという名前をつけてしまいましたが、要するにNext.jsのversion13.4のServer ActionとReact Server Componentを活用してAPIを作らない・叩かないWeb Applicationを開発するというものです。 今回は趣味で作った麻雀のゲームを例に、Next.js@13.4でAPI要らずなアプリケーション開発及び、開発で得た知見を紹介できたらと思います。 補足ですが、今回開発したアプリケーションの概要としては、麻雀のさまざまな局面に応じて「あなたならどの牌を切る？」というアンケート型のゲームです。 話すこと 今回以下の二点に絞って知見を共有できたらと思います。 RSCとserver actionsでZero APIの実現 ファイルベースのOGP・favicon 成果物とその構成

はじめに 先日のNext.jsのver13.4の発表でApp Routerがstableになり、まだあまり普及していませんが、React Server Componentが今後本格的に広まっていきそうですね。 React Srever Componentの登場により、Reactのレンダリングプロセスは以前のそれとは異なるものにりました。 今回は、そんなReact Server Componentのレンダリングプロセスをざっくり解説していきます。

はじめに 先日(2023/5/1)にVercelの新機能・サービスを発表するビッグイベント 『 Vercel Ship 』 が開催されました。 Next.jsやVercelの激アツな発表がたくさんあり、非常に大きな盛り上がりを見せているように感じます。 今回は、最近社内でも活用されているISRという技術を支えるstale-while-revalidateに触れつつ、Vercel(with Next.js)のキャッシュについて、最低限知っておきたい知見について共有できたらなと思います。 Vercelのインフラストラクチャ概要 Vercel Edge Network を使用すると、顧客の近くにコンテンツを保存し、データに近いリージョンでコンピューティングを実行できるため、待ち時間が短縮され、エンドユーザーのパフォーマンスが向上します。 エッジ ネットワークは、コンテンツ配信ネットワーク (CD

はじめに GWに入り、5日連続のVercelによる新機能の発表が始まりました。早速初日(2023 5/1)からすさまじい機能の発表がありました。 初日に発表されたのは、以下の三つのStorageサービスです。 Vercel Postgres Vercel KV Vercel Blob 今回はこの中のVercel Postgresを実際に使いながら、ClientからServerまで網羅しためっちゃ簡易的なフルスタックなアプリケーションを、実用性の側面も加味してPrisma + Next.jsで作っていこうと思います。

【ふーん、”エッジ”じゃん】Cloudflare Workersが0ms Cold Startsを実現するカラクリ はじめに CDNやキャッシュ周りの知見を深めていく中で、個人的に最近はエッジ関連がめっっっっっっちゃくちゃ熱いと感じました。 と言いますのも、Cloudflare Workersをはじめとした様々なインフラサービスにおいて、いろんな「エッジで動作する系」のものが登場しています。 有名どころでいうとこんな感じになります。 Cloudflare workers Vercel Edge Functions Supabase Edge Functions Netlify Edge Functions Deno Deploy Fastly Compute@Edge AWS Lambda@Edge 今回は、一度基礎に立ち返って"エッジ"とはなんぞや？というところから学び直しつつ、僕がとて

はじめに 普段何気なく使っているCDNですが、どんな仕組みで、CDNを使うと具体的に何が嬉しいか、どんなことに気をつけるべきかなど自分の中であいまいののままだったので整理整頓してみることにしました。 そもそもCDNとは？？ CDNとは、コンテンツデリバリーネットワークの略で、大容量のデジタルコンテンツをインターネット上で大量配信するためのネットワークのことです。 引用: CDNとは、Content Delivery Networkの略称で、画像や動画などといった様々なリソース（データ）を世界中の複数のサーバー（キャッシュサーバーまたはエッジサーバーと呼ばれることが多い）にコンテンツを分散させることで、ユーザーがアクセスした際に最も近いサーバーからコンテンツを取得できるようにするといういわゆる分散型のネットワークシステムのことです。 エンドユーザーから最も近いサーバからコンテンツを取得できる

はじめに 最近Denoをよく触っており、DenoのSSRフレームワークであるFreshのミドルウェア・キャッシュについて調べている際にブラウザキャッシュのEtagヘッダが使用されており、気になったのでブラウザキャッシュの仕組みについて調べてみました。 Etagの正体 Etagとは、ブラウザキャッシュの仕組みの中で使用されるHTTPレスポンスヘッダーでリソースの特定のバージョンに関する識別子のことです。 Etagがあることでウェブサーバーは、コンテンツが変更されていない場合はレスポンス全体を再送する必要がないので、キャッシュがより効率的になる。 ブラウザキャッシュの設定について ブラウザキャッシュを設定する際に必要なHTTPレスポンスヘッダーはEtagを含めて以下の通りです。 Expiresヘッダー Cache-Controlヘッダー Last-Modifiedヘッダー Etagヘッダー そ