kmkkiii

Biome v1.7からPrettierとESLintから移行するためのコマンドが追加されたので、既存のNext.jsプロジェクトで試しに移行コマンドを叩いてみました。biomejs.devBiomeのインストールと初期設定ESLintからの移行コマンドPrettierからの移行コマンドpackage.jsonのscript変更実行してみるBiomeのインストールと初期設定Biomeをインストール。> npm i --save-dev --save-exact @biomejs/biome@latestadded 3 packages, removed 81 packages, and audited 891 packages in 5s157 packages are looking for funding  run `npm fund` for details3 vulnerabilities (2 moderate, 1 high)To address issues that do not require attention, run:  npm audit fixTo address all issues (including breaking changes), run:  npm audit fix --forceRun `npm audit` for details.設定ファイル生成コマンドを実行する。> npx @biomejs/biome init   Welcome to Biome! Let's get you started...Files created   - biome.json    Your project configuration. See https://biomejs.dev/reference/configurationNext Steps   1. Setup an editor extension     Get live errors as you type and format when you save.     Learn more at https://biomejs.dev/guides/integrate-in-editor/  2. Try a command     biome check  checks formatting, import sorting, and lint rules.     biome --help displays the available commands.  3. Migrate from ESLint and Prettier     biome migrate eslint   migrates your ESLint configuration to Biome.     biome migrate prettier migrates your Prettier configuration to Biome.  4. Read the documentation     Find guides and documentation at https://biomejs.dev/guides/getting-started/  5. Get involved with the community     Ask questions and contribute on GitHub: https://github.com/biomejs/biome     Seek for help on Discord: https://discord.gg/BypW39g6Ycbiome.jsonという設定ファイルが生成される。デフォルトはインデントが深いです。(--jsoncオプションをつければjsoncファイルでも生成できます)// biome.json{    "$schema": "https://biomejs.dev/schemas/1.7.0/schema.json",    "organizeImports": {        "enabled": true    },    "linter": {        "enabled": true,        "rules": {            "recommended": true        }    }}ESLintからの移行コマンド実行するとエラーが出ましたが、今回は無視して進めます。>  npx biome migrate eslint --writemigrate ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━  ✖ Migration has encountered an error: The module '/app/node_modules/eslint-config-next/index.js' cannot be loaded. Make sure that the module exists.  .eslintignore has been successfully migrated../.eslintrc.js has been successfully migrated.Run the command with the option --include-inspired to also migrate inspired rules.// biome.json{    "$schema": "https://biomejs.dev/schemas/1.7.0/schema.json",    "organizeImports": { "enabled": true },    "linter": {        "enabled": true,        "rules": {            "recommended": false,            "complexity": {                "noBannedTypes": "error",                "noExtraBooleanCast": "error",                "noMultipleSpacesInRegularExpressionLiterals": "error",                "noUselessCatch": "error",                "noUselessTypeConstraint": "error",                "noWith": "error"            },            "correctness": {                "noConstAssign": "error",                "noConstantCondition": "error",                "noEmptyCharacterClassInRegex": "error",                "noEmptyPattern": "error",                "noGlobalObjectCalls": "error",                "noInnerDeclarations": "error",                "noInvalidConstructorSuper": "error",                "noNewSymbol": "error",                "noNonoctalDecimalEscape": "error",                "noPrecisionLoss": "error",                "noSelfAssign": "error",                "noSetterReturn": "error",                "noSwitchDeclarations": "error",                "noUndeclaredVariables": "error",                "noUnreachable": "error",                "noUnreachableSuper": "error",                "noUnsafeFinally": "error",                "noUnsafeOptionalChaining": "error",                "noUnusedLabels": "error",                "noUnusedVariables": "error",                "useIsNan": "error",                "useValidForDirection": "error",                "useYield": "error"            },            "style": {                "noNamespace": "error",                "useAsConstAssertion": "error",                "useBlockStatements": "off"            },            "suspicious": {                "noAsyncPromiseExecutor": "error",                "noCatchAssign": "error",                "noClassAssign": "error",                "noCompareNegZero": "error",                "noControlCharactersInRegex": "error",                "noDebugger": "error",                "noDuplicateCase": "error",                "noDuplicateClassMembers": "error",                "noDuplicateObjectKeys": "error",                "noDuplicateParameters": "error",                "noEmptyBlockStatements": "error",                "noExplicitAny": "error",                "noExtraNonNullAssertion": "error",                "noFallthroughSwitchClause": "error",                "noFunctionAssign": "error",                "noGlobalAssign": "error",                "noImportAssign": "error",                "noMisleadingCharacterClass": "error",                "noMisleadingInstantiator": "error",                "noPrototypeBuiltins": "error",                "noRedeclare": "error",                "noShadowRestrictedNames": "error",                "noUnsafeDeclarationMerging": "error",                "noUnsafeNegation": "error",                "useAwait": "error",                "useGetterReturn": "error",                "useValidTypeof": "error"            }        },        "ignore": ["src/generated/*", "src/**/*.d.ts"]    },    "overrides": [        {            "include": ["*.ts", "*.tsx", "*.mts", "*.cts"],            "linter": {                "rules": {                    "correctness": {                        "noConstAssign": "off",                        "noGlobalObjectCalls": "off",                        "noInvalidConstructorSuper": "off",                        "noNewSymbol": "off",                        "noSetterReturn": "off",                        "noUndeclaredVariables": "off",                        "noUnreachable": "off",                        "noUnreachableSuper": "off"                    },                    "style": {                        "noArguments": "error",                        "noVar": "error",                        "useConst": "error"                    },                    "suspicious": {                        "noDuplicateClassMembers": "off",                        "noDuplicateObjectKeys": "off",                        "noDuplicateParameters": "off",                        "noFunctionAssign": "off",                        "noImportAssign": "off",                        "noRedeclare": "off",                        "noUnsafeNegation": "off",                        "useGetterReturn": "off"                    }                }            }        },        {            "include": ["*.ts", "*.tsx", "*.mts", "*.cts"],            "linter": {                "rules": {                    "correctness": {                        "noConstAssign": "off",                        "noGlobalObjectCalls": "off",                        "noInvalidConstructorSuper": "off",                        "noNewSymbol": "off",                        "noSetterReturn": "off",                        "noUndeclaredVariables": "off",                        "noUnreachable": "off",                        "noUnreachableSuper": "off"                    },                    "style": {                        "noArguments": "error",                        "noVar": "error",                        "useConst": "error"                    },                    "suspicious": {                        "noDuplicateClassMembers": "off",                        "noDuplicateObjectKeys": "off",                        "noDuplicateParameters": "off",                        "noFunctionAssign": "off",                        "noImportAssign": "off",                        "noRedeclare": "off",                        "noUnsafeNegation": "off",                        "useGetterReturn": "off"                    }                }            }        }    ]}Prettierからの移行コマンド> npx biome migrate prettier --write.prettierignore has been successfully migrated../prettier.config.js has been successfully migrated.// biome.json{    "$schema": "https://biomejs.dev/schemas/1.7.0/schema.json",    "formatter": {        "enabled": true,        "formatWithErrors": false,        "indentStyle": "space",        "indentWidth": 2,        "lineEnding": "lf",        "lineWidth": 80,        "attributePosition": "auto",        "ignore": ["src/generated/*"]    },    "organizeImports": { "enabled": true },    "linter": {        "enabled": true,        "rules": {            "recommended": false,            "complexity": {                "noBannedTypes": "error",                "noExtraBooleanCast": "error",                "noMultipleSpacesInRegularExpressionLiterals": "error",                "noUselessCatch": "error",                "noUselessTypeConstraint": "error",                "noWith": "error"            },            "correctness": {                "noConstAssign": "error",                "noConstantCondition": "error",                "noEmptyCharacterClassInRegex": "error",                "noEmptyPattern": "error",                "noGlobalObjectCalls": "error",                "noInnerDeclarations": "error",                "noInvalidConstructorSuper": "error",                "noNewSymbol": "error",                "noNonoctalDecimalEscape": "error",                "noPrecisionLoss": "error",                "noSelfAssign": "error",                "noSetterReturn": "error",                "noSwitchDeclarations": "error",                "noUndeclaredVariables": "error",                "noUnreachable": "error",                "noUnreachableSuper": "error",                "noUnsafeFinally": "error",                "noUnsafeOptionalChaining": "error",                "noUnusedLabels": "error",                "noUnusedVariables": "error",                "useIsNan": "error",                "useValidForDirection": "error",                "useYield": "error"            },            "style": {                "noNamespace": "error",                "useAsConstAssertion": "error",                "useBlockStatements": "off"            },            "suspicious": {                "noAsyncPromiseExecutor": "error",                "noCatchAssign": "error",                "noClassAssign": "error",                "noCompareNegZero": "error",                "noControlCharactersInRegex": "error",                "noDebugger": "error",                "noDuplicateCase": "error",                "noDuplicateClassMembers": "error",                "noDuplicateObjectKeys": "error",                "noDuplicateParameters": "error",                "noEmptyBlockStatements": "error",                "noExplicitAny": "error",                "noExtraNonNullAssertion": "error",                "noFallthroughSwitchClause": "error",                "noFunctionAssign": "error",                "noGlobalAssign": "error",                "noImportAssign": "error",                "noMisleadingCharacterClass": "error",                "noMisleadingInstantiator": "error",                "noPrototypeBuiltins": "error",                "noRedeclare": "error",                "noShadowRestrictedNames": "error",                "noUnsafeDeclarationMerging": "error",                "noUnsafeNegation": "error",                "useAwait": "error",                "useGetterReturn": "error",                "useValidTypeof": "error"            }        },        "ignore": ["src/generated/*", "src/**/*.d.ts"]    },    "javascript": {        "formatter": {            "jsxQuoteStyle": "double",            "quoteProperties": "asNeeded",            "trailingComma": "es5",            "semicolons": "asNeeded",            "arrowParentheses": "always",            "bracketSpacing": true,            "bracketSameLine": false,            "quoteStyle": "single",            "attributePosition": "auto"        }    },    "overrides": [        {            "include": ["*.ts", "*.tsx", "*.mts", "*.cts"],            "linter": {                "rules": {                    "correctness": {                        "noConstAssign": "off",                        "noGlobalObjectCalls": "off",                        "noInvalidConstructorSuper": "off",                        "noNewSymbol": "off",                        "noSetterReturn": "off",                        "noUndeclaredVariables": "off",                        "noUnreachable": "off",                        "noUnreachableSuper": "off"                    },                    "style": {                        "noArguments": "error",                        "noVar": "error",                        "useConst": "error"                    },                    "suspicious": {                        "noDuplicateClassMembers": "off",                        "noDuplicateObjectKeys": "off",                        "noDuplicateParameters": "off",                        "noFunctionAssign": "off",                        "noImportAssign": "off",                        "noRedeclare": "off",                        "noUnsafeNegation": "off",                        "useGetterReturn": "off"                    }                }            }        },        {            "include": ["*.ts", "*.tsx", "*.mts", "*.cts"],            "linter": {                "rules": {                    "correctness": {                        "noConstAssign": "off",                        "noGlobalObjectCalls": "off",                        "noInvalidConstructorSuper": "off",                        "noNewSymbol": "off",                        "noSetterReturn": "off",                        "noUndeclaredVariables": "off",                        "noUnreachable": "off",                        "noUnreachableSuper": "off"                    },                    "style": {                        "noArguments": "error",                        "noVar": "error",                        "useConst": "error"                    },                    "suspicious": {                        "noDuplicateClassMembers": "off",                        "noDuplicateObjectKeys": "off",                        "noDuplicateParameters": "off",                        "noFunctionAssign": "off",                        "noImportAssign": "off",                        "noRedeclare": "off",                        "noUnsafeNegation": "off",                        "useGetterReturn": "off"                    }                }            }        }    ]}package.jsonのscript変更// package.json{  "name": "app",  "version": "0.1.0",  "private": true,  "scripts": {    "dev": "next dev",    "build": "next build",    "start": "next start",    "tsc": "tsc --noEmit",-    "lint": "next lint",-    "prettier": "prettier --check .",-    "format": "next lint --fix && prettier --write .",+    "lint": "biome lint --apply .",+    "format": "biome format .",+    "check": "biome check --apply .",  },  ...}実行してみる体感できるくらい爆速になりました！ESLintの移行コマンド実行時にエラーが出てしまいましたが、基本的にmigrateコマンドを実行するだけで簡単に移行できました。> npm run check...Skipped 39 suggested fixes.If you wish to apply the suggested (unsafe) fixes, use the command biome check --apply-unsafeThe number of diagnostics exceeds the number allowed by Biome.Diagnostics not shown: 327.Checked 272 files in 163ms. Fixed 58 files.Found 27 errors.check ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━  ✖ Some errors were emitted while applying fixes.

既存プロジェクトでPrettier・ESLintをBiomeに移行してみた

Web サイトやアプリの開発において、画像の最適化はパフォーマンス向上のために重要なタスクです。特に SVG 形式の画像は、ベクター形式のため拡大や縮小をしても画質が劣化しませんが、ファイルサイズが大きくなりやすいという特徴があります。開発中のアプリで使用されている画像を WebP に変換して最適化を行ったため、やったことを記録として残しておきます。また、SVG から PNG に変換するにあたって一部の画像でクリッピングパスの問題があったため対応した内容を共有します。 PNG 画像を WebP 形式に変換するWebP は Google が開発した画像形式で、PNG や JPE...

SVG→PNG→WebPに変換して画像を最適化する

はじめにNext.js v14 から Stable になった Server Actions。それに対応した フォームライブラリとして TanStack Form を試してみます。TanStac…

TanStack FormでNext.jsのServer Actionsを使ってみた

はじめに準備create-next-apptanstack-form インストールフォーム実装zod のスキーマを定義FormFactory オブジェクトを作成Server Action を定義フォームコンポーネントを作成ページでフォームコンポーネントを使用する動作確認クライアントサイドのバリデーションサーバーサイドのバリデーションTanStack Form を使ってみた感想最後にはじめにNext.js v14 から Stable になった Server Actions。それに対応した フォームライブラリとして Tanstack Form を試してみます。TanStack Form は現時点で v0 の β 版ですが、以下の特徴を備えた フォームライブラリです。ファーストクラスの TypeScript サポートシンプルで簡潔な APIクライアントサイドとサーバーサイド両方のバリデーションに対応ヘッドレス任意の UI フレームと組み合わせて実装可能アグノスティックな設計React、Vue、Angular, Solid, Lit と複数のフレームワークに対応フレームワーク間で再利用可能非同期バリデーションとデバウンシングを組み込みでサポートhttps://tanstack.com/form/latest準備https://tanstack.com/form/latest/docs/framework/react/guides/ssrcreate-next-app % npx create-next-app@latestNeed to install the following packages:create-next-app@14.2.1Ok to proceed? (y) y✔ What is your project named? … nextjs_tanstack_form_example✔ Would you like to use TypeScript? … No / Yes✔ Would you like to use ESLint? … No / Yes✔ Would you like to use Tailwind CSS? … No / Yes✔ Would you like to use `src/` directory? … No / Yes✔ Would you like to use App Router? (recommended) … No / Yes✔ Would you like to customize the default import alias (@/*)? … No / YesCreating a new Next.js app in /Users/kmkkiii/Development/nextjs_tanstack_form_example.Using npm.Initializing project with template: app-twInstalling dependencies:- react- react-dom- nextInstalling devDependencies:- typescript- @types/node- @types/react- @types/react-dom- postcss- tailwindcss- eslint- eslint-config-nextadded 360 packages, and audited 361 packages in 18s133 packages are looking for funding  run `npm fund` for detailsfound 0 vulnerabilitiesInitialized a git repository.Success! Created nextjs_tanstack_form_example at /Users/kmkkiii/Development/nextjs_tanstack_form_exampletanstack-form インストール% npm i @tanstack/react-form今回 validator には zod を使用します。他にも yup、valibot がサポートされていますのでお好みでインストールしてください。% npm i @tanstack/zod-form-adapter zodフォーム実装名前とメールアドレスの入力フォームを例として実装してみました。フォーム実装例zod のスキーマを定義// schema.tsimport { z } from "zod";export const schema = z.object({  name: z.string().min(1, "Client validation: 名前を入力してください"),  email: z    .string()    .min(1, "Client validation: メールアドレスを入力してください")    .email("Client validation: メールアドレスの形式が正しくありません"),});FormFactory オブジェクトを作成useForm フックを使用する方法もありますが、createFormFactory を使用するとフォームの作成・管理に便利なユーティリティ関数を含むオブジェクトを作成してくれて再利用が可能となります。また、サーバーサイドで実行されるバリデーションを設定するためのonServerValidateプロパティを指定できるようになっています。// exampleFormFactory.tsimport { createFormFactory } from "@tanstack/react-form";import { zodValidator } from "@tanstack/zod-form-adapter";export const exampleFormFactory = createFormFactory({  validatorAdapter: zodValidator,  defaultValues: {    name: "",    email: "",  },  onServerValidate({ value }) {    let errors = [];    if (value.name == "test") {      errors.push("Server validation: すでに登録されている名前です");    }    if (value.email == "test@example.com") {      errors.push("Server validation: すでに登録されているメールアドレスです");    }    return errors.join(", ");  },});Server Action を定義// validateAction.ts"use server";import { exampleFormFactory } from "@/app/_components/exampleFormFactory";export default async function validateAction(  prev: unknown,  formData: FormData) {  return await exampleFormFactory.validateFormData(formData);}フォームコンポーネントを作成useFormStateへ定義した Server Action とフォームの初期状態を渡します。返された 値(action) を form の action 属性 に設定することで送信時にトリガーされ、サーバーでのみ実行されます。useForm の各プロパティについてtransform では、useTransformでフォームの状態とuseFormStateに返された Server Action の実行結果(state)をマージしています。validators では、onChange イベントに対して zod スキーマによるバリデーションを設定しています。onSubmitでは、有効なフォームデータが送信された場合に呼び出される処理を設定します。onSubmitInvalidでは、無効なフォームデータが送信された場合に呼び出される処理を設定します。// ExampleForm.tsx"use client";import { exampleFormFactory } from "@/app/_components/exampleFormFactory";import { FormApi, mergeForm, useTransform } from "@tanstack/react-form";import { useFormState } from "react-dom";import validateAction from "../_actions/validateAction";import { schema } from "@/lib/zod/schema";const ExampleForm = () => {  const [state, action] = useFormState(    validateAction,    exampleFormFactory.initialFormState  );  const { useStore, Subscribe, Field, handleSubmit } =    exampleFormFactory.useForm({      transform: useTransform(        (baseForm: FormApi<any, any>) => mergeForm(baseForm, state),        [state]      ),      validators: { onChange: schema },      onSubmit: async ({ value, formApi }) => {        console.log(value, formApi);      },      onSubmitInvalid: ({ value, formApi }) => {        console.error(value, formApi);      },    });  const formErrors = useStore((formState) => formState.errors);  return (    <>      <form action={action} onSubmit={() => handleSubmit()}>        {formErrors.map((error) => (          <p className="text-red-600" key={error as string}>            {error}          </p>        ))}        <Field name="name">          {(field) => (            <div className="flex flex-col">              <label htmlFor="email">名前</label>              <input                className="text-black border border-gray p-2 mb-4 w-1/3"                name="name"                type="text"                value={field.state.value}                onChange={(e) => field.handleChange(e.target.value)}              />            </div>          )}        </Field>        <Field name="email">          {(field) => (            <div className="flex flex-col">              <label htmlFor="email">メールアドレス</label>              <input                className="text-black border border-gray p-2 mb-4 w-1/3"                name="email"                type="email"                value={field.state.value}                onChange={(e) => field.handleChange(e.target.value)}              />            </div>          )}        </Field>        <Subscribe          selector={(formState) => [            formState.canSubmit,            formState.isSubmitting,          ]}        >          {([canSubmit, isSubmitting]) => (            <button              type="submit"              disabled={!canSubmit}              className="text-white bg-blue-700 hover:bg-blue-800 px-4 py-2 mt-2 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed"            >              {isSubmitting ? "..." : "送信"}            </button>          )}        </Subscribe>      </form>    </>  );};export default ExampleForm;ページでフォームコンポーネントを使用する// page.tsximport ExampleForm from "./_components/ExampleForm";export default function Home() {  return (    <main className="min-h-screen p-24">      <ExampleForm />    </main>  );}動作確認クライアントサイドのバリデーション入力や送信によってトリガーされ、zod スキーマで定義したバリデーションが機能します。クライアントサイドのバリデーション動作サーバーサイドのバリデーション名前にtest、メールアドレスにtest@example.comと入力して送信するとサーバーサイドのバリデーションが機能していることが確認できます。サーバーサイドのバリデーション動作TanStack Form を使ってみた感想確かに RHF の幅広い API と比べると、シンプルで迷わなくて良さそうでした。また、依存が 0 で他のフレームワークにも流用できる設計という点も開発規模によっては嬉しい点でしょうか。v1 がリリースされる頃には、さらに良いライブラリになっているのではないかと期待が高まりますね。実装していて気になったのは、フィールド単位ではなくフォームレベルでバリデーションを設定した場合に、どのフィールドがエラーになったのかを知る方法が現状ないことでした。この問題については、現在以下の PR で開発が進められているようなので、近いうちに解消されると思われます！https://github.com/TanStack/form/pull/656最後にここまで読んでくださり、ありがとうございました！

はじめにNext.js v14 から Stable になった Server Actions。それに対応した フォームライブラリとして TanStack Form を試してみます。TanStack Form は現時点で v0 の β 版ですが、以下の特徴を備えた フォームライブラリです。ファーストクラスの TypeScript サポートシンプルで簡潔な APIクライアントサイドとサーバーサイド両方のバリデーションに対応ヘッドレス任意の UI フレームと組み合わせて実装可能アグノスティックな設計React、Vue、Angular, Solid, Lit と複...

はじめにこの記事は「mofmof Advent Calendar 2023」22日目の記事です。wicked_pdfの代替案としてFerrumというgemを使ってみました。元々はPDF生成機能…

wicked_pdfの後継になる？FerrumでHTMLからPDFを生成する

はじめに!この記事は「mofmof Advent Calendar 2023」22 日目の記事です。wicked_pdfを使わない場合の代替案としてFerrumという gem を使ってみました。元々は PDF 生成機能を実装するためにwicked_pdfを使おうとしていましたが、依存しているwkhtmltopdfが今年に入ってアーカイブされていたことを知りました。内部的に利用しているQT Webkitレンダリングエンジンのメンテナンスが止まったことで、wkhtmltopdfもメンテナンスが継続できなくなってしまったようです。 wicked_pdf の現状wicke...

この記事は「mofmof Advent Calendar 2023」11日目の記事です。株式会社mofmofは受託開発会社ですが、メンバー自らがオーナーとなってプロダクト開発にチャレンジしていま…

nest generateコマンドからざっくりとNestJSを把握する

この記事は「mofmof Advent Calendar 2023」4日目の記事です。はじめに気になっていたHonoやCloudflareを触ってみたいと思い、Honoのcloudflare-…

HonoとCloudflare D1とDrizzle ORMを使ってWeb APIを作る

はじめにこの記事は、mofmof Advent Calendar 2022 15 日目の記事です。10 月から株式会社 mofmof に入社し、研修として Ruby on Rails × GraphQL × React × TypeScript を使ったタスク管理アプリを作りました。その中から GraphQL に関する実装内容を抜粋してまとめてみました。これから GraphQL を使っていこうとしている方のとっかかりとして、少しでも参考になれば幸いです。 導入 サーバーサイド(Rails)graphql を使うための gem をインストールします。Gemfile...

既存プロジェクトでPrettier・ESLintをBiomeに移行してみた

SVG→PNG→WebPに変換して画像を最適化する

TanStack FormでNext.jsのServer Actionsを使ってみた

TanStack FormでNext.jsのServer Actionsを使ってみた

TanStack FormでNext.jsのServer Actionsを使ってみた

wicked_pdfの後継になる？FerrumでHTMLからPDFを生成する

wicked_pdfの後継になる？FerrumでHTMLからPDFを生成する

nest generateコマンドからざっくりとNestJSを把握する

HonoとCloudflare D1とDrizzle ORMを使ってWeb APIを作る

Rails×ApolloClient×React×TypeScriptでGraphQLに入門しました