『新しいLinuxの教科書』を読みました。以下、感想です。 新しいLinuxの教科書作者:三宅 英明,大角 祐介SBクリエイティブAmazon そもそものモチベーションとしては、「Web系のITエンジニアなのに、Linux のことを知らなすぎるから」でした。「OSの一種である…

『Web配信の技術』を読みました。 Web配信の技術―HTTPキャッシュ・リバースプロキシ・CDNを活用する作者:田中 祥平技術評論社Amazon フロントエンドエンジニアとして働いているので、プロダクションレベルでがっつり配信周りの環境を構築したことはないので…

これまで Next.js や Gatsby を使った Jamstack なサイトを作る際には Netlify や Vercel といったホスティングサービスを使うことがほとんどでした。 そこで Jamstack に関する理解を深めるため、AWS の S3 + CloudFront （デプロイは Github Actions で自…

Supabase では、認証状態の変更などに応じてトークンを Cookie にセットするためのメソッド supabase.auth.api.setAuthCookie(req: any, res: any): void が用意されています（厳密には、 GoTrue API を利用している）。 例えば、supabase.auth.onAuthStateC…

最近作っているアプリケーションで使っている Zod で、バリデーションに空文字列を指定する必要があったのでその方法をメモしておきます。 github.com 結論 結論から述べると、以下の書き方で実現できました。 const schema = z.object({, name: z.string().…

Supabase のDBからデータを取得する際に、ネストされた子レコードの order を指定する方法でちょっと躓いたのでメモがてら書いておきます。 前提 まず、前提として以下の posts テーブルと items テーブルがあると仮定します。ここで、items テーブルの post…

React Hook Form を使ったフォームの実装において、フォームの任意の要素にフォーカスを当てる setFocus() メソッドの実行時に TypeError: Cannot read properties of undefined (reading '_f') のエラーが出てしまうことがありました。 useForm - setFocus …

Supabase の DB からデータを取得する際に、少し凝ったフィルタリングの実装に悩んだのでメモがてら書いておきます。 通常 supabase.from() メソッドでデータを取得する際、通常は以下のように eq() メソッドを繋ぎ、条件を指定します。この例では、posts テ…

React 用のフォームバリデーションライブラリ react-hook-form で、zod を使ったバリデーションの実装を行ったのでメモしておきます。 react-hook-form.com github.com zod は、型と値を検証できる軽量なバリデーションライブラリで、react-hook-form にはそ…

React でコンポーネントを作る際（css modules を使う想定）、基本的には以下の2つのファイルを毎回作っています。 ▼ Component/index.tsx import React from 'react' import styles from './index.module.scss' const Component: React.FC = () => { return…

最近、JavaScript（と、主にReact）のデザインパターンをまとめている ebook をちょこちょこ読み進めています。 www.patterns.dev この中で、初めて見たデザインパターンとして Observser Pattern （オブザーバパターン）というパターンが出てきたのですが、…

例えばアプリケーションのログインページおよび新規登録ページが、それぞれ /auth/login、/auth/signup に配置されていると仮定します。 - pages - auth - login.tsx - signup.tsx このとき、これらのページにアクセスできるのは未ログイン状態のユーザーの…

『Reactハンズオンラーニング』を一周し終えたので、ざっくり感想をまとめます。 内容についてと、全体的な感想 「ハンズオンラーニング」と銘打っているだけあって、なにかターゲットとなる目標物をじっくり解説（Reactの）を交えて作り上げていくような本…

「next-realworld-example-app」のコードを読み込んでいて参考になる箇所があったのでメモしておきます。 ごくシンプルなユーティリティ系のコンポーネント <Maybe> です。 props に表示の可否を決定するための値 test を渡し、その値の如何によって表示を制御しま</maybe>…

これまで Node のバージョン管理ツールにはずっと nodebrew を使っていたのですが、プロジェクトごとにバージョンを変える必要がある際に不便だったのと、シンプルに飽きてきたというのもあり、比較的新しい Volta に変更してみました。 volta.sh nodebrew …