前置き Next.js で server action を利用する際に、実行中の状態を判定したい機会があり、 useActionState を使いたくなったのですが、現時点では、Next.js v14 と React v18 を利用している環境では、まだ利用できないこともあり、それに変わる方法として代替の hooks を実装したのでご紹介します。 useActionState とは React 19 RC のリリース記事を見ると、React 19 で、React 18 Canary で追加された useFormState から改名したものであり、 React.useActionState は以前の Canary リリースでは ReactDOM.useFormState と呼ばれていましたが、名前を変更し、useFormState を非推奨にしました。 詳細は #28491 を参照してくださ

ReactでaddEventListenerするときにカスタムフックじゃなくて薄いコンポーネントにするデザインあって、これまではほぼ好みの問題だったけれど、RSCの登場で「“use client”をそこで閉じることができる」っていう明確な優位性が生まれた。 たとえば単に

name: Base Changes Check on: pull_request: types: - opened - edited # プルリクのbaseブランチを変更した際にもチェック - reopened - synchronize concurrency: # イベントの発行順どおりに実行(今回はeditのような画面操作もあるので) group: ${{ github.workflow }}-${{ github.head_ref }} cancel-in-progress: true jobs: check: name: Changes check runs-on: ubuntu-latest permissions: contents: read # for yumemi-inc/path-filter steps: - name: Compare pull request

貴方は誰ですか？[1] はじめに 本記事では、コミットに署名をすることにどういった効果があるのか掘り下げています。読者がどういった署名を採用するかの判断基準が得られることを目標にします。この記事の執筆にあたり GitHub 上でのコミットの見え方を検証するリポジトリを作成して公開しています。 扱わないこと 本記事では、コミットに署名する具体的な方法については触れません。具体的な方法が知りたい場合は、別の記事で触れているので、そちらを参考記事として紹介します。記事の中で紹介している GitHub のドキュメントが充実していて、わかりやすいです。 用語の整理 まずは署名に関する用語を整理してみます。 署名/記名/落款 「あなたの作品に署名すること」[2] この言葉を聞いて作品とはどんなものをイメージしますか。具体的なアプリケーションでしょうか。それとも、そのアプリを構成する一機能でしょうか。プ

概要 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

はじめに 時間が経つと、自分で作成したリソースを忘れがちになりますよね。リソース作成時にタグ付けをしたり、IaC でリソースを管理している場合は比較的簡単に追跡できますが、試しに作成したリソースは特に忘れやすいものです。特に複数人が利用する環境では、自分のリソースを識別しやすいように ID や名前などの識別子をリソース名として設定することがあります。今回は、そうしたリソースをタグエディタを使って検索し、不要なリソースを削除してみました。 タグエディタを使ったリソース検索 マネジメントコンソールでタグエディタを開く Resource Groups & Tag Editor というサービス名なので、サービス名で検索するか、サービス一覧から [管理とガバナンス] の中から Resource Groups & Tag Editor を開きます。 ナビゲーションの中に [タグ付け] - [タグエディ

「私はこれを記述した、そしてこの仕事の後ろには私が付いている」と。品質の証明として、あなたの署名が入っているべきなのです。[1] はじめに コミットに署名しましょう ゴール GitHub 上でコミットに Verified のバッジがついた状態を目指します。Verified をクリックすると、次のようにポップアップで署名の状態について確認できます。 前提 Git の初期設定ではコミットに署名はされません。それでもコミットは可能ですが、匿名のコミットになります。また署名には次のように段階があります。 名前とメールアドレスが設定されている コミットに署名されている ホスト上で有効な署名として認識されている ローカルで署名できるようにする作業と、ホスト側で署名を有効化する作業がそれぞれ必要になります。ローカルは macOS を、ホスト側は GitHub を例に説明します。GitHub はドキュメン

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

2024/02/15(木)、16(金)で開催されたデブサミ2024に関する、現時点で公開資料と X アカウントリンクをまとめました。 よろしければご活用ください。 はじめに 登壇者名は敬称略させていただいています。 スライドについては、ご本人がツイートで展開されていたり、スライドサービスにアップロードされているものを記載。 X アカウントについては、多くの方はデブサミ公式サイトの紹介ページに記載 or 資料記載がありましたので、そちらから引用させていただきました。 そちらに記載がなかった方については、別途分かった方のみ記載。 リンクの間違い等ありましたらコメントいただけると助かります🙏 2024/02/15(木) 15-A-1 エンジニアのための、生成AIとの付き合い方 登壇者：ところてん[NextInt]　@tokoroten 15-B-1 事業で成果を出すCTOたち モデレーター：蜂

はじめに GitHub Actions で Node 16 を利用していると次のような警告が表示されています。 Report dependency differences Node.js 16 actions are deprecated. Please update the following actions to use Node.js 20: actions/setup-java@v3. For more information see: https://github.blog/changelog/2023-09-22-github-actions-transitioning-from-node-16-to-node-20/. Node 16 のメンテナンスは 2023年9月11日に終了しています。以下は各バージョンの生存期間の一覧です。 対応状況

はじめに ゆめみiOS研修に APIのエラーハンドリング のセッションがあります。 このセッションでは次のような課題があります。 APIエラーが発生したらUIAlertControllerを表示する このセッションをレビューする過程で、アラートの表示はこれで良いのだっけと疑問に感じることが増えて、ヒューマンインターフェースガイドラインを読み直し、アラートに対する考えが深まりました。 ヒューマンインターフェースガイドライン ヒューマンインターフェースガイドラインのアラートのページを繰り返し読みました。 このページに書いてあることはガイドラインとしてとてもよくまとまっています。 特に重要な部分とガイドラインだけではわかりにくかった部分について書き出しています。 ベストプラクティス 一番重要な指針は次のメッセージであると感じました。 ユーザがアラートを軽視する 社内LTでのフィードバック この記

はじめに Web アプリケーションや API の負荷テストに使えるツール、k6 を試してみました。この記事では、k6 の基本的な使い方についてご紹介します。 環境構築 k6 を使い始めるにあたり、まずは環境構築が必要です。以下の環境で進めていきます。 macOS: Sonoma 14.2.1 Homebrew: 4.2.2 インストール

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

この記事は株式会社ゆめみの23卒 Advent Calendar 2023 16日目の記事です。 GitHub で PR を Approve する際に、LGTM 画像を貼る人は多いのではないでしょうか。 その時、任意の LGTM 画像系のサービスから画像をコピーして、PR のコメント欄に貼り付けていませんか？ 正直面倒ですよね。 それ、GitHub 上でできますよ。 Copy LGTM について Copy LGTM は、GitHub 上で LGTM 画像をペーストできる Chrome 拡張です。 拡張機能を入れると動画のように、Review Changes ボタンの横に Copy LGTM ボタンが追加されます。 このボタンを押すことで自動的に textarea にランダムに治安の良い LGTM 画像がペーストされます。 使用技術 plasmo というブラウザ拡張機能に特化したフレームワー

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

この記事は 株式会社ゆめみの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日目の記事です。 React Hook Formを使用すると、Reactでバリデーションのできるパフォーマンスが高いフォームを効率的に作成できます。React Hook Form自体の詳細な解説は他に公式ドキュメントや記事があるので割愛します。 この記事では、React Hook Formが提供するAPIをラップしたコンポーネントを作成し、フォームの管理をより効率的に行う方法を提案します。この記事では仮にToDoリストを考えます。 このToDoリストのコードは Codesandbox で参照、実行できます。 また、GitHubリポジトリ ygkn/react-hook-form-with-wrapper-component で参照できます。 この記事で紹介するコンポーネントは次の2つです。 register 関

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

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