『新しい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 …

Supabase の JavaScript クライアントでテーブル結合を行う方法をメモ。 www.npmjs.com テーブルが以下のようにあるとします。ユーザーに紐づく投稿画像があり、その画像に対してコメントが付くようなイメージです。 # ユーザー users: id: string fullname:…

Supabase では storage にアップロードしたリソースのパブリックなURLを取得するメソッド getPublicUrl() が用意されているのですが、このメソッドを使って取得した値が 404 になるケースに遭遇しました。 export const removeBucketPath = (key: string, bu…

TypeScript でアロー関数（Arrow Functions）を書く際に、Generics を使おうとすると、素直に書いた場合うまくコンパイルされない場合があります。 例えば、以下のような T型 の値を引数に取り、そのまま引数を return する関数があるとします。 const ident…

今作っているアプリケーションで、Firebase Authentication のソーシャルログインを活用しているものがある。そこで、ソーシャルログインしたのち（この時点でFirebase Authentication 上にユーザー情報が作られる）、場合によってすぐにユーザー情報を削除…

Firebase Authentication を活用したアプリケーションにおいて、取得したユーザ情報を useContext などを使ってグローバルに保持するケースがあると思います。具体的には以下のような実装です。 import { FC, createContext, useEffect, useState } from 're…

Next.js で今個人的に作っているアプリケーションにおいて、クライアント（ブラウザ）から環境変数（.env.*）が読めないという事象に遭遇したので、その原因と解決法をメモしておきます。やりたいことは、ページコンポーネント上で、アクセス時に毎回 Fireba…

【前提】Stripe のビジネスアカウントを持っていることが前提です。Stripe で開発者用モード（テストモード）に切り替えるには、ダッシュボード画面の左カラムにある「テストデータの表示中」のトグルをオンにすればOK。また、「開発者 > APIキー」のタブを…

Canvas（Pixi.js）でアニメーションを描画しているページにおいて、パフォーマンスをモニタリングしたくなったので「stats.js」を使ってみました。「stats.js」とはFPS、レンダリングにかかった時間、使用メモリをリアルタイムで表示してくれるパフォーマン…

PIXI.Container()で生成した要素の位置を動的に変えるときの方法です。API自体はこちらに用意されていて、基本はそこにアクセスして値を書き換えれば大丈夫かと思います。 位置を制御するため、x,yの値にアクセスすることができます。PixiJS API Documentati…

NuxtでPixi.jsを使った2Dアニメーションの描画をする際に、アセットの読み込みで詰まったのでメモ。PixiのPIXI.mesh.Ropeというメソッドで複数のポイントを持つテクスチャを描画したい場面があり、components内で以下のように変数stripeを定義していました。…

今月からアサインされるプロジェクトでAuth0を使った認証を使う感じになりそうだったので事前に試してみたのですが、ちょっとつまずいたところがあったのでメモ。以下の記事を参照にNuxtのSPAでAuth0を導入してみました。steady.daas.co.jp▼ 動いてるやつNux…

結構悩んだのですがどこにも解決策がなかったので書いておきます。一般的にRetina対応をする際、psdなどから画像を切り出す際、表示させるサイズの2倍で書き出し、1/2のサイズで表示させることが多いかと思います。参考： Retina対応がイマイチ分からない人…

Gtihubでの方法は簡単に見つかるのですが、Gitlabはあまり見かけなかったので書いておきます。 1. 切り替えたいリポジトリのページの左カラムの「設定」>「一般」をクリック 2. "Visibility, project features, permissions"を展開する 3. "Project visibili…

国産のヘッドレスCMS「microCMS」を使うときに、APIを叩いて取得したデータ（今回の場合個別の記事）を表示しようとすると"undefined"と怒られてしまうことがありました。そのときのコードがこちら。テンプレートで、取得した記事のタイトルを表示させようと…

developブランチとfeatureブランチのみで開発を進めていたプロジェクトで、途中ｍasterブランチを作る必要があったのですがちょっと迷ってしまったのでメモしておきます。なお、今回はSourceTreeを使います。 ローカルで「master」ブランチを作ってpushする …