本記事は 2年目ウィーク 2日目の記事です。 📈 1日目 ▶▶ 本記事 ▶▶ 3日目 ✒️ はじめに 仮想スクロールの仕様 仮想スクロールのハマりポイント バグの原因 親コンポーネント 子コンポーネント 解決法 おわりに はじめに こんにちは、カロリーメイトがそれなりに好きな入社2年目の小宮山です。 重いページの読み込みを待つ時間って地味にストレスですよね。 フロントエンドエンジニアとしては、ユーザ体験を損ねないためにも画面表示の時間は短く抑えたいものです。 Angularで大量のデータを画面に表示する際

はじめに こんにちは、セーフィーに新卒で入社し、サーバーサイドエンジニアをしている古谷です。 入社後、同期の坂上さんと一緒に VApp(Vulnerable Application) という、意図的に脆弱性を仕込んだ学習用Webアプリケーションを作りました。社内のセキュリティ学習を目的に始めたプロジェクトでしたが、作ってみると 「Webフレームワークを使っていても、脆弱な実装をしないように気をつけなければならない」 という、当たり前のようで意外と実感しにくいことを実装ベースで確かめられました。 この記事で

こんにちは、駅メモ！開発チームエンジニアの id:hayayanai です！ 最近、 VoidZero から Vite+ がリリースされました。 Vite+ は Vite 8、Vitest、Oxlint、Oxfmt などを統合した「Web のための統合ツールチェーン」です。 駅メモ！は現在 Vue + Vite 7 + Vitest + ESLint（チーム独自ルール有り）+ Prettier + Stylelint で開発されており、Vite+ のツールはまだ導入していません。 AI で開発が高速化した

はじめに # ビジネスソリューション事業部の塚野です。 本記事は「Vitestと統合可能！StorybookでNext.js v16のコンポーネントテストを行う」の後編です。 前編では Storybook の導入や基本的な使い方についてご紹介しました。本記事では Next.js 固有の設定やモジュールモックなどについてまとめていきます。 next/router、next/navigationのモック # Next.js でページ遷移や URL の参照・更新に関わるパッケージとして next/router

2026 年 1 月 26 日週、私たちは ラバ祭り を祝いました。これは、旧正月まで残りわずかであることを告げる中国暦の伝統的な祝日です。ラバ祭りは、中国の多くの人々にとって振り返りと準備にまつわる祝日であり、今年の出来事をまとめ上げ、未来に目を向けます。 2026 年 2 月 9 日週は、春の始まりであり、二十四節気最初の節季である 立春 です。中国の伝統では、春は成長が始まり、新しい節目がやってくる季節として捉えられることがよくあります。「一年の計は春にあり」ということわざもあり、春が自分の方向を定

クロスイノベーション本部、新卒1年目の大岡叡です。 今回は、1月29日にプレビュー公開されたAWS Deployment SOPsを使ってみたので、その内容を報告します。 AWS Deployment SOPsを使ってみた結果、簡単なプロンプトを一度与えるだけで静的Webサイトをデプロイでき、CodePipelineのCI/CDについても簡単に構築することができました。この検証を通じて、非エンジニアがインフラ構築をして簡単なアプリケーションのデプロイを行う日も遠くないのではないかと思いました。 AWS M

みなさん、こんにちは。AWS ソリューションアーキテクトの野間です。新年を迎えたと思ったら、あっという間にもう2月。今回は特に、AWS ジャパンが開始した「 フィジカル AI 開発支援プログラム 」が注目です。ロボット基盤モデル開発を支援する貴重な機会となっています。応募締め切りが2026年2月13日までとなっているのでご興味のある方は、ぜひご確認ください。 それでは今週も、生成AIを活用した開発支援プログラムやソリューション事例、そしてAmazon Bedrockを中心とした注目のサービスアップデートを

これは 豆蔵デベロッパーサイトアドベントカレンダー2025 第24日目の記事です。 はじめに # AWSは2025年11月18日、AIエージェント型IDE Kiro(https://kiro.dev) の一般提供を発表しました。 筆者は以前プレビュー版を使っての レビュー記事 を執筆しました。 それ以来Kiroのファンとなり、現在は実業務でKiroを使用しています。 AIエージェント型IDE「Kiro」の登場により、個人開発やプロトタイピングの速度は劇的に向上しました。 しかし、開発規模が大きくなるにつれ

技術的負債は、今日のエンタープライズ開発チームが直面する最も根強い課題の一つです。調査によると、企業は本来であれば新たな機能拡張に充てられるはずの IT 予算の 20％を、技術的負債への対応に費やしています。レガシーフレームワークのアップグレード、新しいランタイムバージョンへの移行、古いコードパターンのリファクタリングなど、こうした不可欠ながら反復的な作業は、本来であればイノベーションに充てられる貴重な開発者の時間を消費してしまいます。 2025 年 12 月 1 日、組織が大規模なモダナイゼーションに取

はじめに RevComm Advent Calendar 2025 1日目の記事です。 qiita.com 昨今では AI コーディングエージェントが話題です。AI コーディングエージェントを活用することで、フロントエンド開発においても生産性の大きな改善が期待できます。 AI コーディングエージェントの活用を広めていくためには、信頼性の高いテストコードがあるとより積極的かつ安全に活用や導入を進めていきやすいのではないかと考えています。 そこで、この記事ではフロントエンド開発において信頼性の高いテストコード

はじめに ども！Claude Code を執筆に贅沢活用している龍ちゃんです。気づいたら3年でブログを200本書いていて、そろそろブログの本数をカウントするのを取りやめですね（笑）。 最近は週に5本くらいブログを書くことが習慣づいているんですが、これだけブログを書いてると、だんだん図を作るのが億劫になってしまうんですよね。Claude Code のおかげで Mermaid での図解作成はすごく短縮できました（参考： ClaudeでMermaid図作成を自動化！2時間→5分の劇的時短術【Live Edito

こんにちは。LINEヤフー株式会社の鈴木です。業務ではYahoo!オークションとYahoo!フリマの検索改善を担当しています。最近、Yahoo!フリマで「見た目が似ている商品を探せる機能」をリリースし...

前回 はフロントエンドの認証コンポーネントの作成まで行いました。 今回もフロントエンドの実装タスクを実行していきます。 その1はこちらから 17. Task12. メディアアップロードコンポーネントの実装 # 17.1. タスクの実行 # tasks.mdを開き、「12. メディアアップロードコンポーネントの実装」の上に表示されている「Start task」ボタンをクリックします。 Kiroの返答です。 Kiro Including Steering Documents project-context.m

前回 はバックエンドの実装タスクを完了しました。 今回はフロントエンドの実装タスクから実行していきます。 その1はこちらから 15. Task10. Angular フロントエンドプロジェクトの設定 # 15.1. フロントエンドのビルド・単体テストコマンドの修正 # まず、フロントエンドのビルド・単体テストをローカル環境ではなく、Dockerコンテナ(Podmanコンテナ)で行うように指示します。 筆者 フロントエンドのビルド・単体テストの実行に開発環境用のDockerイメージを使うように、.kiro/

このブログでは、 AWS Amplify 、 AWS AppSync 、 MongoDB Atlas を使用して、オフラインファーストのアプリケーションと楽観的な UI を作成する方法をご紹介します。開発者は、インターネット接続を必要としないオフラインファーストアプリケーションを設計します。楽観的な UI は、サーバーからのレスポンスに依存することなく、予想されるデータの変更で UI を更新することで、オフラインファーストのアプローチをさらに発展させます。このアプローチは通常、ローカルキャッシュの仕組みを