はじめに 時間が経つと、自分で作成したリソースを忘れがちになりますよね。リソース作成時にタグ付けをしたり、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

この記事は株式会社ゆめみの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プロトタイプ入門〜インタラクションイメージの