記事リスト
Supabase の本番プロジェクトに安全にマイグレーションする CI/CD 設計
Supabase CLI を使って、安全に本番、ステージング環境にマイグレーションする CI/CD 設計について解説します。Supabase は PostgreSQL 版の Firebase の認識で、DB、認証、ストレージ、function...etc と、プロダクトを作る上で必要なものは大体揃っています。実際にステージングと本番環境で使える内容です。
ts-morphを使ってJSX向けの小さなリファクタリングツールを作成する - Zenn
こんにちはhiro08です。 最近はASTやパーサに興味があって色々コードを書いたり調べたりしています。便利なツールを作りたい！！ 概要 早速本題になりますが、ライブラリの破壊的変更や選定技術のリアーキテクトなどで、コードベースが大きく変更する機会は多々あると思います。その際に、膨大なコードを一つ一つ手作業で変更して心が折れそうになった経験は誰しもあるのではないでしょうか。 私もその一人で、今では出来るだけ手動でやらずに機械的に変更する方法を考えます。 以前に、VueのDOMをReactに移行する作業の一部で、classからclassNameに移行する作業がありました。その際に使った...
Vitest で Table Driven Test (テーブル駆動テスト) のアプローチ
Table-Driven Testing は、ソフトウェアのテスト手法の一つで、テストケースをテーブル単位でまとめ、それをもとにテストを実行する方法です。この手法は、同じ処理に対して異なる入力値を与え、その結果が期待通りかどうかを確認する際に特に有効です。
Awaited<Type> を使って Promise の返り型を定義する
TypeScript のユーティリティ型に Awaited<Type> があります。内容としては、Promise<T> に対して、T の型定義を利用したい場合に使います。
Next.jsのファイル名をeslint-plugin-validate-filenameで命名規則を作成する - Zenn
こんにちはhiro08です。 長期休みを利用して、ファイルの命名規則をLintで検証するライブラリを作成してみました。興味のある方は、ぜひPRやスターを頂ければ嬉しいです。 https://github.com/hiro08gh/eslint-plugin-validate-filename 作成したモチベーションとして、フロントエンド環境のファイル名にはプロジェクトによって、暗黙の命名ルールが多いことにあります。 例えば、一般的にコンポーネントファイルはパスカルケースですが、apiやutility関連のファイルはキャメルケースで作成する、またはHooksの処理はファイル名の頭にuseを...
microCMSのリッチエディタをマークダウンとして管理できるライブラリを作成しました - Zenn
こんにちはhiro08です。microCMSでは主にプロダクト開発をしています。 今年のマージしたPRを眺めると、結構色々開発したなーという感覚なのですが、その中でもリッチエディタの開発は大きく記憶に残っています。機会があればぜひ触ってみてください。 https://blog.microcms.io/release-richeditor-public-version/ ヘッドレスCMSにおけるWYSIWYGエディタの開発は通常とは違い、少し難しい点があります。それは、管理画面上の見た目とAPIのレスポンスが異なることです。保存しているデータは共通であることに対して、管理画面の見た目と、A...
microCMS SDK + Next.jsを用いた開発手順 - Zenn
こんにちはhiro08です。 現在フロントエンドエンジニアとしてmicroCMS本体の開発に携わっていて、日々サービスの新機能開発や改善を行っています。 そして、先日リリースされたmicroCMSのJavaScript、iOS、Android SDKの3つのうち、JavaScript SDKの開発を担当させて頂きました。リリース時のブログはこちらです。 https://blog.microcms.io/introduce-sdk microcms-js-sdkはnpmで配布されていて、GitHubにオープンソースとして公開されています。 ※現在はGetリクエストのみに対応しています。今後...
GatsbyJS + microCMSにGraphQL Code Generatorを使って型安全な開発をする - Zenn
こんにちはhiro08です。 もし、GatsbyJS + microCMS + TypeScriptで開発を行ってる場合、GraphQL Code Generatorを使って型安全にすることをオススメします。なぜなら、GraphQLのクエリに対する型定義は複雑で手間のかかる作業になってしまうからです。 GraphQL Code Generatorを使えば、少ない設定で型定義を自動生成してくれます。今回は型安全に開発する一例をピックアップします。 https://graphql-code-generator.com/ 前提 microCMSの公式が出している、gatsby-source...
ESLintの設定をパッケージ化してnpmで公開する - Zenn
こんにちはhiro08です。 各プロジェクトで ESLint の設定が混在していたため、パッケージ化して npm に公開しました。下記が GitHub のリポジトリと npm で公開したパッケージです。 GitHub リポジトリ https://github.com/hiro08gh/eslint-config npm パッケージ https://www.npmjs.com/package/@hiro08/eslint-config 今回の設定は、個人プロジェクトで使ってます。各プロジェクトで ESLint の設定を共通化できたことで個人的に運用がしやすくなりました。なので、今回は ES...