Nuxt.js の v2→v3 のバージョンアップにおいて、asyncData の書き換え方がわからなかったのでまとめます。当然 useAsyncData を使って書き換えられますし、時間があるならそっちの方がいいと思いますが、自分のチームでは書き換えコスト削減のため今回は見送る予定です。 Nuxt3 では defineNuxtComponent 内で asyncData を使うことができるNuxt3 の defineComponent では asyncData や head を使うことができませんが、defineNuxtComponent 内ではこれらを使うことができます。(...

Nuxt2 asyncData を Nuxt3 defineNuxtComponent で書き換え

WHAT認定スクラムマスター資格(PSM Ⅰ)を取ったので、勉強法などを記録として残す。https://www.scrum.org/assessments/professional-scrum-master-i-certification WHY なぜ認定スクラムマスター資格を取ったのか結論、「スクラムマスターとして自信をつけたかったから」である。前提として、筆者は在籍している開発チームで「開発者兼スクラムマスター」の立場にいる。筆者は以前からスクラム開発に関心を持っており、以下のような書籍を読んで知識を増やしていた。https://www.amazon.co.j...

君たちはどう認定スクラムマスターになるか

E2E テストを導入する上でハードルになるのが「テストデータ」と「環境のセットアップ」かと思います。MSW, OpenAPI を使って比較的スムーズに E2Eテスト(Playwright)を導入できたので、参考にした記事を中心にまとめます。 Playwright の導入公式に従いインストールしました。https://playwright.dev/docs/intro Playwright MSW の導入playwright-mswを入れることで、playwright が起動するブラウザで MSW によるインターセプトを有効にすることができます。以下を参考に設定しました。...

Playwright × MSW × OpenAPI で E2E 事始め

概要Nuxt3 で、何らかの情報を httpOnly 属性付きで cookie に保存する方法。!重要な情報を httpOnly 属性の cookie に保存することを推奨する記事ではありません。ウェブサイトによっては、cookieに保存することが必要な場合があるかもしれませんが、それぞれのケースに応じて、十分な検討が必要かと思います。参考）クロスサイトスクリプティング(XSS)対策としてCookieのHttpOnly属性でどこまで安全になるのかhttps://www.youtube.com/watch?v=4JREwhSC2dQ httpOnly 属性付き coo...

【Nuxt 3】httpOnly 属性付き cookie を保存 / 削除する

やったことswagger-parser を使って openapi.yaml を読み込み、exmaple をモックデータとして使って Jest を実行できるようにした 具体的な手順 @apidevtools/swagger-parser　をインストールnpm install -D @apidevtools/swagger-parser!$ref を解決できるツール、という基準で選定。他にも swagger-merger や swagger-cli で openapi の統合ができたが、統合　→　json読み込み という 2 ステップを踏まなければいけないっぽく、使用し...

OpenAPI からモックデータを生成して Jest する

やったことYAML で仕様を書いたら ActionMailer::Preview のプレビュー一覧で仕様が見れるようにした。 具体的なコードなど テスト環境で ActionMailer::Preview を enableActionMailer::Preview はデフォルトではローカルのみだが、ローカル以外でも動かすことができる。https://pocke.hatenablog.com/entry/2020/04/25/182306「IP 制限をかけたい」「個人情報を表示したくない」という 2 つの理由で、今回はステージング環境（テスト環境）で閲覧できるようにした...

ActionMailer::Preview をカスタマイズして YAML 管理のメール仕様書を作る

この記事の内容Nuxt.js × BugSnag で App Version を設定し、リリースごとに stability を確認できるようにします。（Next.js とかでも基本同じだとは思います）「そもそも Bugsnag の App Version ってなに？」という方は、こちらの記事が分かりやすかったのでご覧ください。 前提stability を表示するためには、BugSnag の standard plan が必要になります。無料プランだけど試したい場合は、（2023年1月時点では）14日間の無料トライアルがあるので、こちらを活用するのが良さそうで...

BugSnag の App Version を設定して、リリースごとの stability をモニタリングする（Nuxt.js）

🎁 この記事は Howtelevision Advent Calendar 2022 11日目の記事です 🎅ハウテレビジョンで Liiga という転職サービスの開発をしている 59k です。https://liiga.me2022 年 11 月でエンジニア歴 3年目に入り、業務では Ruby on Rails, Vue.js を使ってます。最近はスクラム開発に関心があり勉強中です。そのスクラム開発に関連して。Liiga 開発チームでは、1 年ほど前から YouTrack を使用しており、今年の夏頃からスクラム開発にチャレンジしています。https://www.jetbrains...