はてなブックマーク

これは、株式会社ゆめみ Advent Calendar 2024 13日目の記事です。 Next.js (Pages Router) のAPI Routesのhandlerにおいて、ValibotやZodで値の検証をせずにリクエストボディの値を使用してしまう不具合を、型検査レベルで防ぐことを考えます。 例えば、次のようなコードで、処理の順番やロジックの誤りを型エラーを出して気づきたいといったものです。 import { NextApiHandler } from "next"; import * as v from "valibot"; const RequestBodySchema = v.object({ someValue: v.string(), }); const handler: NextApiHandler = async (req, res) => { // バリデーション

2024/11/23(土)で開催された JSConf JP 2024に関する、現時点での公開資料と X アカウントリンクをまとめました。 よろしければご活用ください。 はじめに 登壇社名および登壇者名は敬称略させていただいています。 x アカウントについては、以下のように確認できたものを記載しております。 JSConf JP 公式サイトに記載がある JSConf JP 公式サイトに記載のプロフィールと一致している 当イベントで登壇されることに言及されている スライドに記載されている リンクの間違い等ありましたらコメントいただけると助かります🙏 アーカイブ 本イベントは YouTube でライブ配信されていました。 ただ、執筆途中時点からトラック A の動画が非公開になっていました。 アーカイブとして残るのかがわからなかったため、一旦 JSConf JP の YouTube アカウントへの

数の世界は、自然数に始まって実数、複素数と広がっていきます。この先に、さらにクォータニオンという数があります。本記事では、このクォータニオンについて基本的な事柄を解説し、Rustによる計算のしかたを述べます。 なお、クォータニオンは日本語で「四元数」と呼びます。数学の世界では日本語で呼ぶことがほとんどです。ただ、コンピューターの世界では「クォータニオン」と呼ぶことが多いです。本記事もその慣習にあわせています。 クォータニオンとは クォータニオンとは、次の形で定義される数です。ここで、w、x、y、z は実数です。 \mathtt{i}、\mathtt{j}、\mathtt{k} は虚数単位と呼ばれるもので、次のルールに従います。 クォータニオンはたとえば、1 + 2\mathtt{i} + 3\mathtt{j} + 4\mathtt{k} のような数です。複素数は 1 + 2\mathtt

Announcing AWS Amplify integration with Amazon S3 for static website hosting というリリースが出ていたので、早速使ってみました。 タイトルの通りなのですが、S3には以前から、静的ウェブホスティングの機能がありました。これも簡単だったのですが、今回の発表により、Amplify Hosting を使ったサイト公開の手順をおすすめするボタンが追加されました。 実際にバケットを作って簡単なサイトを公開してみます。 new-amplify-hosting-site というバケットを用意しました。 簡単なHTMLを書いて、バケットにアップロードします。 プロパティのタブを開いて、ページの一番下までスクロールすると、静的ウェブサイトホスティング の項目があります。ここに【Amplifyアプリを作成】のボタンが追加されています。

はじめに Postgres には JSON/JSONB というデータ型がありますが，JSONB はデータをバイナリ形式で格納するためインサート時に変換のオーバーヘッドがあるものの，その後の処理が非常に高速である上に，インデックスを貼ることができるため，実用上は JSONB を使うのが一般的です． 一方で，そもそも RDB のようなスキーマの厳格な型付けをしているシステムで半構造化データである JSON を扱うこと自体がアンチパターンであるという指摘もあります． しかしながら，適切に設計，運用することで厳格な RDB で柔軟なデータを扱うことができ，アプリケーションの表現の幅を広げることができます． 本記事では，JSONB を可能な限り安全に扱うための実践的な工夫を紹介します． JSON Schema を使ったバリデーションを Check Constraint にする Postgres では

経験の浅い人にちょくちょくするアドバイスとして、「コードリーディングのときにはあんまコードを読まないほうがいいよ」がある。コード全体を詳細に読むのではなく、名前やインターフェイスからコードの意図を把握することで効率的にコードリーディングできる。完全に下記の受け売り。 「実装は極力見ないようにして、インターフェイスと構造を理解するようにするんです。ダイヤグラムや、関係のグラフを書いたりして。実装はちゃんと出来ていると信じて、読んでいるメソッドやクラスのインターフェイスの役割やパラメータをしっかり理解するようにするんです。そっちの方が、実装を見るよりずっと楽ですよね。」 牛尾 剛「コードリーディングのコツは極力読まないこと 」 自分なんかは、エディタの畳み込み機能と変数名ホバーを使って、名前とインターフェイスしか見えない状態で読む。中身を読みたいなーと思ったところは畳み込みを解除して徐々に読ん

自己紹介 すずきゆーだい(@szkyudi)です。株式会社ゆめみという会社でWebフロントエンドエンジニアをやっています。秋になると柿を200個食べます。 アクセシビリティは誰のためにあるか アクセシビリティは特定の人々だけでなく、あらゆる人のためにあるものです。 というような言葉はよく耳にすると思います。ただ、この言葉にピンときていない方々も多いと思いますし、私自身、まだまだ理解を深めていく必要があると感じています。 そこで、この記事では、エンジニア自身がアクセシビリティ向上の恩恵を受ける当事者であることを認識してもらうとともに、少しでもアクセシビリティに興味を持ってもらうために、テストから始めるアクセシビリティについて紹介したいと思います。 Webフロントエンドにおけるテスト Webフロントエンドにおけるテストには様々な種類がありますが、今回はその中でもUIコンポーネントのテストにおけ

dotenv の改良版である dotenvx が使ってみてめっちゃ良かったので紹介します。 特徴 特に大きいのは「環境変数の暗号化」と「複数 .env ファイルへの対応」の2つです。 環境変数の暗号化 dotenvx 経由で環境変数をセットすることで、環境変数が公開鍵暗号方式で暗号化されます。 #/-------------------[DOTENV_PUBLIC_KEY]--------------------/ #/ public-key encryption for .env files / #/ [how it works](https://dotenvx.com/encryption) / #/----------------------------------------------------------/ DOTENV_PUBLIC_KEY="03f8b376234c4f2

皆さん、フォーム作ってますか？ Webサイトやアプリを作るにあたって避けられないのがForm作成、多くの方が autocomplete を設定するなど、より使いやすいフォームを作成するために尽力されていることと思います。 一方で、悪気なく書いたコードでより使いにくいフォームになってしまっている例が世の中には多く見られます(特に銀行系) 今回は、よくあるフォームの実装を例に、(特に日本語話者にとって)より使いやすいフォームにするためのちょっとした仕様や私が考える対策を書いていこうと思います。 忙しい方のために最初に書いておくと、この記事に書いてあることの多くは autocomplete の仕様を意識した実装をしましょう の一言に集約されます。 多くの方にとっては「何を当たり前のことを」と思われる項目も多いかとは思いますが、当たり前のことがされていないフォームが世の中には多すぎるので、少しでも

概要 pnpm 9.6.0 からパッケージ内での npm-scripts の実行に利用する Node.js のバージョン指定が出来るようになっており、以下について調べたので紹介したいと思います。 package.json で指定可能なになった pnpm.executionEnv.nodeVersion について pnpm env を利用した pnpm 内で利用する Node.js の管理方法について pnpm.executionEnv.nodeVersion について 名前のとおり、実行環境における Node.js のバージョンを以下のように package.json で指定できます。

Storybook 8.3 のリリーつについて 先日 Storybook 8.3 がリリースされました。 このリリースでの目玉機能は、なんといっても、待望の Vitest 対応ではないでしょうか。 以下は、7月末に一部公開されていたスクリーンキャスト。 とはいえ、何故か大々的に告知されていなかったり、Changelog には以下のようにあるのですが ⚡️ First-class Vitest integration to run stories as component tests 🔼 Next.js-Vite framework for Vitest compatibility and better DX 🗜️ Further reduced bundle size for a smaller install footprint 🌐 Experimental Story globa

2024/08/24(土)で開催されたフロントエンドカンファレンス北海道 2024に関する、現時点での公開資料と X アカウントリンクをまとめました。 よろしければご活用ください。 はじめに 登壇者名は敬称略させていただいています。 スライドについては、ご本人がツイートで展開されていたり、スライドサービスにアップロードされているものを記載。 X アカウントについては、fortee や資料に記載されていたり、資料公開の投稿で分かった方のみ記載。 リンクの間違い等ありましたらコメントいただけると助かります🙏 タイムテーブル 本イベントでは2つの会場でそれぞれ講演がありました。 便宜上、以下のように A, B と表します。 カケハシ（8F）：A LINE ヤフー WOW ルーム（6F）：B 11:00 - A - Webの潮流から考える、フロントエンドの溢れんばかりの魅力とフロントエンドエンジ

ソート順の選択プルダウンがある一覧系ページを実装するとき、選択肢たちの管理方法に頭を悩ませることが多いと思います。 商品一覧ページの概要 ソート順プルダウンの選択肢たち 上の画像に示したような場合だと、 《クエリパラメータ》と《選択肢》の間の相互変換 ?sort=price&order=desc <--> 「価格が高い順」 《select の状態に使うための文字列》と《選択肢》の間の相互変換 <option value={id}>{label}</option> クエリパラメータが sort order の2つあり、それらをそのまま流用できないので 最低限でも、これらの変換ロジックを用意しておく必要がありますね。 この記事では、このような「選択肢と、それにまつわる変換ロジック群」を整理する方法を、高凝集・SSoT (Single Source of Truth; 信頼できる唯一の情報源)

はじめに 本記事は2023年11月に開催された技術書典 15と第九回技術書同人誌博覧会にて無料で配布した ゆめみ大技林 '23 (2) に寄稿している記事のウェブ版です。 SwiftData とは SwiftData は、WWDC 2023 で発表された新しいデータ永続化のフレームワークです。 iOS 17 から使用可能で、 Swift 5.9 からサポートされた Swift Macros を使用することでモデル定義の簡略化、SwiftUI とのシームレスな連携を実現しています。 また CoreData の .xcdatamodel ファイルのような外部ファイルフォーマットは必要なく、コードのみで実装可能なことも特徴の一つです。 本稿のカバー範囲 本稿は SwiftData のモデル定義とモデルの挿入、削除、更新、取得などの基本的な操作を解説した入門記事です。SwiftData の初心者向

概要 ESLint v9 への対応を進めていると、いくつか Flat Config に対応していない Plugin や Config に遭遇することがあります。その際に、Legacy Config のみ対応している Plugin と、Flat Config も対応している Plugin の両方の構造の違いを知っておくと、Flat Config に向けた対応をすすめる上で便利だったため、その違いを俯瞰するための資料としてまとめました。 前提 以下で例示する Plugin は、パッケージ名を eslint-plugin-example として、いくつかのカスタムルールと、カスタム Processor を持つものを想定しています。 Plugin の実装方法や API の解説はしない。 ESLint v9 では、v8 で廃止予定となった API が削除されているため、Plugin を作成したり、E

Storybook の play function や test-runner が登場し、Storybook をコンポーネントカタログの用途だけでなく、テストに活用するプロジェクトは増えていると思います。 今回は play function を使って next/navigation および next/router のテストをする方法を紹介します。 結論 .storybook/preview.tsx を以下のようにしてください。 import { action } from '@storybook/addon-actions' import { fn } from '@storybook/test'; const defaultNavigationContext = { push: fn((...args: any[]) => { action('nextNavigation.push')(

この記事は 2024 年 2 月 28 日に執筆されました．今後この問題が Cloud Run 側で修正された場合，再現しない可能性がありますのでご留意ください． TL; DR Cloud Run は執筆時現在 zstd による圧縮に対応していない ヘッダの Content-Encoding: zstd のみが削除され，ボディは圧縮されたまま応答される ブラウザはこの応答を正しく解釈できないため文字化けのような表示となる zstd による圧縮は，執筆時現在 Chrome に実装されているもののデフォルトでは無効だが近い将来に有効化される 悲劇は突然訪れる 弊社では，コーポレートエンジニアリングチーム [1] [2] において，社内向けにいくつかのサービスを提供しています． これらのサービスはもともと AWS でホストされていましたが，アクセス制限に Identity-Aware Proxy

eslint-plugin-import-accessで「そこからそれはimportしないでください！！」を防ぐ この記事は 株式会社ゆめみの23卒 Advent Calendar 2023 16日目の記事です。 3行で eslint-plugin-import-accessで「ディレクトリの他の階層からimportしてほしくないメンバ」を定義できるよ！ さらに defaultImportability: "package"を指定するとちょっと初見殺し感があるけどかなり強力になるよ！ re-exportを使う場合はビルドパフォーマンスやバンドルサイズに影響する可能性があるから気をつけよう！ eslint-plugin-import-accessとは アプリケーションなどを開発しているとき、あるモジュールの範囲内でのみ使用してほしい（=あるモジュールの中に隠蔽したい）変数や関数を定義したくな

この記事は株式会社ゆめみ Advent Calendar 2023 | Qiita の 2023-12-21 投稿分です。 React のコンポーネント間の結合度、特に「〇〇的結合」といった段階を使った評価について、私なりにその考え方・用語を React に翻訳してみました。 React のコンポーネント同士の結合のしかたの制約を考慮に入れてみると、結合度の各レベルにはこのような短い説明を付けられます。 レベル１: 内容結合 ―― 高水準言語なので起こらない レベル２: 共通結合 ―― グローバル or Context. 賢く使おう レベル３: 外部結合 ―― React では原則として禁止 レベル４: 制御結合 (ここからがマシな結合) ―― 論理的凝集におちいるので注意 レベル５: スタンプ結合 ―― 無駄なデータにだけは注意 レベル６: データ結合 ―― 理想的 番外編: 名前や型付

この記事は 株式会社ゆめみの23卒 Advent Calendar 2023 8日目の記事です。 現代のWebフロントエンド開発において、コンポーネントの効率的な管理と可視化が求められる中、Storybookは開発者にとって欠かせないツールとなっています。Storybookは、コンポーネントをアプリケーションから隔離して単体で表示できるツールです。 しかし、このように有用なStorybookが「腐ってしまう」ことがあります。この記事で「腐る」とは、コンポーネントをStorybookに表示するための設定であるStoryが最新の状態に更新されていない、またはプロジェクトにとって負債になっている状態を指します。例えば、以下のような状態が「腐っている」状態にあたります。 npm run storybook するとそもそもエラーがでて表示されない Storyの存在しないコンポーネントやコンポーネント

この記事は 株式会社ゆめみの23卒 Advent Calendar 2023 7日目の記事です。 今北産業 ファイル component.test.tsx を置くと、Storybook test runnerのように全部のStoryのスモークテストとインタラクションテストがVitestとjsdomでできるよ！ ヘッドレスブラウザを使わずにテストできるので、CIやGit hookなど実行時間を少なくしたいシチュエーションで使えるよ！ でもブラウザで実行していないから複雑なインタラクションテストやアクセシビリティテストなど、一部のテストが不安定になるかもね！　考えて使い分けよう Storybook をテストとして動かす Storybookでは、Storyファイルのplay 関数内にユーザのインタラクション（振る舞い）やアサーション（期待する結果）を記述することで、インタラクションテストを行うこ

株式会社ゆめみの 23 卒 Advent Calendar 2023の4日目の内容です。 2022年のはじめに自分の開発環境を紹介する記事を投稿したのですが、思いのほか読んでいただいているので2023年度版を作成しました。 今回は拡張機能編です。キーバインドなどは後日公開します。 今年1年間で JetBrains 製品や、neovim を使ってみたりしましたが、紆余曲折あり現在は VSCode に落ち着いたのでいつかその辺りも紹介出来ればと思います。 VSCode 関連記事 下記にキーバインドや設定周りの記事リンクを追加していきます 汎用的な拡張機能 BracketLens 右括弧の左側にスコープの情報が表示されるようになる。 ChangeCase 選択範囲のテキストの case を変更することが出来る CodeSpellChecker スペルチェッカー EditorConfig .edi

この記事は株式会社ゆめみの23卒 Advent Calendar 20233日目の記事です。 React × TypeScript 開発において、CSS フレームワーク選定する際に CSS Modules が候補に上がると思います。その際のネガティブな意見として開発者体験が他のフレームワークと比べて良くないというのがあるのではないでしょうか。 例えば存在しないクラス名の指定が可能であったり、クラス名の定義元を参照しようとしても global.d.ts に遷移してしまうといったことがあります。 そこで今回は CSS Modules での開発者体験をハッピーにする happy-css-modules の紹介と、その導入について紹介します。 happy-css-modules とは Typed, definition jumpable CSS Modules. Moreover, easy! を

この記事は 株式会社ゆめみ Advent Calendar 2023 2日目の記事です。 背景 普段Reactで開発していると、非表示にできるReactNode型のprop（以下オプショナルなReactNodeprop）を定義することがあります。 例1: Button コンポーネント Buttonはボタンのコンポーネントで、icon propを渡したときにスペースを開けてアイコンを表示し、渡さなければ表示しません。 <Button icon={<PlusIcon />}>追加する</Button> // ↓ // <button> // <span style={{marginRight: "0.5rem"}}> // <svg role="img" aria-label="" >...</svg> // </span> // 追加する // </button>

はじめに iOS/iPadOS アプリを visionOS 向けにビルドすることで、VisionPro 上でも動かすことができます。しかし、今までの OS と visionOS では違いがあり、アプリの再設計が必要です。勉強会に参加して、visionOS に備える上で、キーとなりそうな項目をチェックリストとしてまとめました。 参加した勉強会 visionOS Developer Community Vol.1 に参加しました。 勉強会についてのポストが以下にまとめられています。 勉強会では、書籍「visionOS デベロッパーへの道」を中心に行われました。この本は技術書典マーケットで購入できます。 visionOS に備えるチェックリスト Volume の概念を抽出する Landscape に対応する Day/Night に対応する ジェスチャーに対応する アイディアを形にする Volum

2023/11/19(日)で開催された JSConf JP 2023に関する、現時点での公開資料と X アカウントリンクをまとめました。 よろしければご活用ください。 はじめに 登壇者名は敬称略させていただいています。 x アカウントについては、以下のように確認できたものを記載しております。 JSConf JP 公式サイトに記載がある JSConf JP 公式サイトに記載のプロフィールと一致している 当イベントで登壇されることに言及されている スライドに記載されている リンクの間違い等ありましたらコメントいただけると助かります🙏 アーカイブ 本イベントは YouTube で配信されていましたが、執筆時点ではトラック A の動画が非公開になっていました。 アーカイブとして残るのかがわからなかったため、一旦 JSConf JP の YouTube アカウントへのリンクのみ記載にしておきます。

2023/11/18(土)で開催されたフロントエンドカンファレンス沖縄 2023に関する、現時点での公開資料と X アカウントリンクをまとめました。 よろしければご活用ください。 はじめに 登壇者名は敬称略させていただいています。 スライドについては、ご本人がツイートで展開されていたり、スライドサービスにアップロードされているものを記載。 Discord の方だけで公開されている方は、勝手に公開しない方がよいかと思いましたので、記載しておりません。 X アカウントについては、資料に記載されていたり、資料公開のツイートで分かった方のみ記載。 リンクの間違い等ありましたらコメントいただけると助かります🙏 アーカイブ 本イベントは YouTube で配信されていて、アーカイブが残るようです。 タイムテーブル 10:10 [ゲストセッション]Figmaプロトタイプ入門〜インタラクションイメージの

React の useEffect の実行タイミングについて、このように思っていませんか？ 依存配列（第2引数として渡す配列）を省略したら、マウント時に、そのあと再レンダーごとに実行される 依存配列に空配列を入れたら、マウント時に実行される 依存配列に値を入れると、マウント時と、値が変わるごとに実行される しかもクリーンアップ関数も絡んで来て、もっと複雑で覚えられない… …そのように考える必要はありません。 実は、useEffect の規則は至ってシンプルで、しかも UI ロジックの頻出の課題を洗練されたパターンに落とし込んで解決してくれます。 エフェクトとクリーンアップの実行タイミングは、以下のように論理的にシンプルな形で捉えることができます。 マウント時 に初回のエフェクトが発火され、アンマウント時 に最後のクリーンアップが実行される。 再レンダリング時 に、前回のエフェクトをクリーン