フロントエンド開発では、UIの挙動を含めてアプリ全体を検証するE2E（End-to-End）テストが重要になっています。しかし、導入や運用の難しさから、実践に踏み出せていない方もいるのではないでしょうか。 本記事では、前後編に分けて、シンプルなウェブアプリを題材に、Playwrightプレイライトを用いたE2Eテストの導入から活用までの流れを解説します。 前編では、Playwrightの導入方法やテストコードの基本的な書き方、テスト実行の流れについて紹介しました。後編となる今回は、失敗したテストの原因を特定するのに役立つトレース機能について解説します。さらに、CI環境でテストを自動実行する方法も紹介します。 本記事の対象読者 Playwrightの基本的な使い方を理解し、次のステップに進みたい方 Playwrightをチーム開発やCI環境に組み込みたいと考えている方 本記事のゴール トレー
みなさんこんにちは、XI本部エンジニアリングオフィスの佐藤太一です。 このエントリでは、私がRustで実装したJava用バージョンマネージャであるKopiを紹介すると共に、実装の過程で得た生成AIを使ったソフトウェア開発に関する知見を共有します。 Kopiのソースコードとドキュメントは全てClaude Codeによるものです。私自身は開発環境の構築とメンテナンスをしながら、プロンプトによる指示のみで、約2か月弱の期間に約四万行のRustコードと約六千行のMarkdownを書き上げました。行数の計測においては、コメントや改行は除いています。 成果物は全てオープンソースソフトウェアとして公開していますので、興味を持ったら是非、公式サイトに来てください。 https://kopi-vm.github.io/ Kopiの紹介 ここでは簡単にKopiを紹介させてください。 Java用バージョンマネー
2026年3月19日、Aqua Security が提供するOSSセキュリティスキャナ Trivy のエコシステムが、3週間以内に2度目のサプライチェーン攻撃を受けました。攻撃者は aquasecurity/setup-trivy および aquasecurity/trivy-action の2つのGitHub Actionsに悪意あるコードを注入し、これらを利用するCI/CDパイプラインからクレデンシャルを大規模に窃取するペイロードを配布しました。 本記事では、GitHub Events APIおよびGitHub上に残存するcommitデータから取得したエビデンスをもとに、何が起こっているかを記録します。その上で、取りうる対応指針を示します。 免責 本記事の目的は事態の把握と対応の促進であり、違法行為への加担・助長を意図するものではありません。ペイロードの動作は手法の理解に必要な範囲で要
GitHub Actionsで「OpenAPI の自動バージョニング」から「API Clientのnpmパッケージ生成」までを完全自動化 〜bypass機能を利用してみました〜 - BASEプロダクトチームブログ
Platformグループでマネージャーをしている松田（ @tadamatu ） です。 この記事に書いてあること GitHub Actions を利用し 「OpenAPI の自動バージョニング」から「API Clientのnpmパッケージ生成」までを完全自動化 したのですが、その際に ハマったこと、工夫したこと が結構あったので、シェアしておきたいと思い書かせていただいた記事になります。 具体的には以下のような内容について書いてあります。 Branch protection rulesを維持した状態で、workflowからだけはcommitをさせたい（bypass機能を利用） → 文中の(3-2) 別ブランチの GitHub packages に npm publish したい（通常は何もしなければGitHub Actionsからは同じリポジトリのGitHub packagesにしか np
name: Update Cursor Rules on: push: paths: - 'rules/**' - 'scripts/build_mdc.js' jobs: update-rules: runs-on: ubuntu-latest permissions: contents: write pull-requests: write steps: - name: Checkout repository uses: actions/checkout@v4 - name: Setup Node.js uses: actions/setup-node@v4 with: node-version: '20' - name: Install dependencies run: npm install - name: Generate MDC files run: npm run buil
[パブリックプレビュー] GitHub Actions で軽量ランナー「ubuntu-slim」が追加されました | DevelopersIO
こんにちは、製造ビジネステクノロジー部の若槻です。 GitHub Actions に 1 vCPU Linux ランナー ubuntu-slim がパブリックプレビューで追加されました。 ubuntu-slim ランナーは 1 vCPU と 5 GB RAM と低スペックとなっており、また従来の VM インスタンスではなく、コンテナ内でジョブが実行されるため、軽量な処理に適しており、コスト効率の良い実行が可能となっています。一方で最大実行時間が 15 分に制限されているため、長時間実行されるワークフローには適していません。 試してみた 次のような典型的な Node プロジェクト向けワークフローで、今回追加された ubuntu-slim ランナーと従来の ubuntu-latest ランナーを比較しつつ試してみました。 name: CI on: pull_request jobs: Inte
![[パブリックプレビュー] GitHub Actions で軽量ランナー「ubuntu-slim」が追加されました | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/c1f2a8937578cc7375fe432a16bebdce6873ce42/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fimages.ctfassets.net%2Fct0aopd36mqt%2Fwp-thumbnail-03ce943cd4bfc41b089233e05eec7752%2F9f38e8658365dc10b420302c0635b518%2FGitHub-Actions.jpg)
こんにちは！学習動画・Webテストの開発を行っています エンジニアの daichi (id:da1chi24) です。 この記事では、最近チームで導入したライブラリアップデートを自動化した仕組みとその経緯について紹介します。 なぜ自動化しようと思ったか サービスを開発するだけではなく、日々の運用も必要です。 その運用業務の1つとして、ライブラリのアップデートがあります。 これはサービスを運用する上では大切なことではありますが、日々ライブラリアップデートのPRをさばき続けるのも大変です。 その時間をできるだけ減らし、その分空いた時間をユーザーへの価値提供や将来の投資に充てるために、今回の自動化の仕組みを作成しました。 この辺りの話は以前勉強会でLTしたことがありますので、興味があればご覧ください。 作ったもの 前置きは長くなりましたが、凝ったものを作ったわけではありません。 作成したものはラ
C#をLinuxやコンテナで動かせるようになって久しくC#をコンテナで実行している人も多いでしょう。 C#はlinuxのamd64(x86_64)とarm64の両方に対応しているので、ライブラリや実装コードに気を払えば「同一コードベースでマルチプラットフォーム動作」が可能です。 また、Visual StudioでDockerfileを自動生成できることも手伝いC#のコンテナイメージは簡単に作れます。 今回は、そんなC#のコンテナイメージをlinux/amd64・linux/arm64のマルチプラットフォームに対応させるやり方を紹介します。 構成 ベースとなるDockerfile デフォルトのDockerfileは何をしているのか 利用イメージがマルチプラットフォーム対応しているか確認する マルチプラットフォームビルドに対応する マルチプラットフォームビルドを実行する GitHub Acti
2025年のオープンソース活動の振り返りとGitHub Sponsorsでの収入をまとめた記事です。 今年はtextlintとJSer.infoにMCPサーバーを実装しました。 また、JavaScript PrimerをES2025に対応し、secretlintに新しい検出ルールを追加しました。 AI連携とECMAScript最新仕様への対応が中心の年でした。 TSKaigi 2025とYAPC::Fukuoka 2025では、継続的なメンテナンスについて発表しました。 サプライチェーン攻撃対策についてはZennに記事をまとめました。 npmパッケージ/GitHub Actionsを利用する側/公開する側でサプライチェーン攻撃を防ぐためにやることメモ 今までの振り返り 2014年: https://efcl.info/2014/12/31/oss-in-2014/ 2015年: https
GitLab CI から GitHub Actions への移行でハマった N 個のこと - エムスリーテックブログ
この記事はコンシューマーチームブログリレー5日目の記事です。 こんにちは。エムスリーのコンシューマーチームエンジニアの園田です。 以前のポストにもあるように、エムスリーでは GitLab から GitHub EE へ移行しています。 www.m3tech.blog コンシューマーチームで管理している GitLab リポジトリも、いくつか GitHub に移行しました。当然ですが、GitLab CI の CI/CD パイプラインは GitHub Actions に置き換える必要があります。移行前は「GitLab でできることは GitHub でもできるんでしょ？」と軽く考えていたのですが、実際に移行を進めてみると、想定外の制限や落とし穴に数多く遭遇しました。 本稿では、GitLab CI から GitHub Actions へ移行する際に直面したいくつかの課題と、それぞれの解決策を共有します
2025-05-06, Version 24.0.0 (Current), @RafaelGSS and @juanarbol We’re excited to announce the release of Node.js 24! This release brings several significant updates, including the upgrade of the V8 JavaScript engine to version 13.6 and npm to version 11. Starting with Node.js 24, support for MSVC has been removed, and ClangCL is now required to compile Node.js on Windows. The AsyncLocalStorage API
mise で .node-version と Makefile をひとつに - コドモン Product Team Blog
はじめに コドモンでエンジニアをしている羽馬です。 プロジェクトごとに、使用するツールや設定ファイルがバラバラな状態はよくあります。 「Node.jsはxx系、Javaはxx系。環境変数は .envrc で、タスク実行は Makefile で」といった具合です。 日頃から開発しているレポジトリであればまだしも、初見のプロジェクトでは異なります。nodenv などでバージョンを合わせて、.envrc を許可し、Makefile の内容を確認してタスクを実行するといった手順は、非常に手間がかかります。 こうした開発環境の「断片化」によるコストを解消するため、mise（ミーズ）を導入し、ツールのバージョン管理からタスクランナー機能までを一本化しました。 このブログでは、mise の概要と、導入によって開発フローがどう改善されるかを紹介します。 mise とは mise（「ミーズ（meez）」、ま
Mackerelのサービスメトリックを簡単に投稿するためのGitHub Actionsを作った - stefafafan の fa は3つです
このエントリは Mackerel Advent Calendar 2022 および GitHub Actions Advent Calendar 2022 の20日目の記事です。*1 今回はMackerelのサービスメトリックを投稿するためのGitHub Actionsを新規で作ったのでその紹介をします。 GitHub Actions経由でメトリクスを簡単にMackerelに投稿したい 既存のGitHub Actions yutailang0119/action-mackerel-api susisu/setup-mkr 自分のユースケースでの気になり stefafafan/post-mackerel-metrics の紹介 実際に活用している事例 テクニック紹介: 他のStepからMultiline Stringの受け渡し 初めて作ったGitHub Actionについての感想や困りなど
GitHub Actionsで実行するstorycap / reg-suit の高速化 - ROUTE06 Tech Blog
こんにちは！ROUTE06 プロダクトデベロップメント本部の @mh4gf です。 現在僕が関わっているプロジェクトでは、実装の変更に伴う UI のデグレードを検知するためにstorycapとreg-suitを利用した Visual Regression Test を GitHub Actions で実施しています。 運用を進める中で撮影対象のスクリーンショット数も増え、テスト実行時間の増加に悩まされてきました。テスト高速化に取り組みいくつかの改善に成功したため、この記事でその方法を紹介します。 3 行まとめ まず最初に取り組むべき並列実行の基本についてはこの記事を参照してください https://blog.wadackel.me/2022/vrt-performance-optimize/ turborepo を利用し storybook の差分ビルドを行う GitHub Actions
Shai Hulud Strikes Again (v2)Another wave of Shai-Hulud campaign has hit npm with more than 500 packages and 700+ versions affected. Update: November 26, 2025 PostHog has published a detailed post mortem describing how one of its GitHub Actions workflows was abused as an initial access vector for Shai Hulud v2. An attacker briefly opened a pull request that modified a script executed via pull_requ
GitHub Actions で amd64/arm64 両対応の Docker イメージをビルド - Shin x Blog
PHP 開発環境の Docker イメージとして公開している shin1x1/php-dev イメージの arm64 対応を行いました。従来の amd64 も必要なので、マルチアーキテクチャビルドでイメージを生成するようにしています。 shin1x1/php-dev については下記を参照で。 blog.shin1x1.com Docker Buildx による multi-arch ビルド Docker Buildx は Buildkit でビルド機能を拡張する Docker CLI プラグインです。Buildx にはマルチアーキテクチャビルド機能があるので、これを利用します。 docs.docker.com 実行の流れを掴むために M1 Mac の Docker Desktop で Buildx を利用してビルドしてみます。Docker Desktop 4.3.1 には Buildx が
Dependabot から Renovate へ移行した理由 〜Node.jsとライブラリバージョン管理の自動化〜 - ANDPAD Tech Blog
ANDPAD ボードと歩掛管理を開発しております soe-j です。 昨年、大量の npm パッケージに不正なコードが混入したり、Node.js のセキュリティアップデートが話題になったり、緊張感が高まってきています。 大量の人気パッケージにサプライチェーン攻撃が発生した件についての記事 https://www.aikido.dev/blog/npm-debug-and-chalk-packages-compromised Node.js セキュリティアップデート情報 https://nodejs.org/ja/blog/vulnerability/ これらの状況から、ちょっとセキュリティ意識が高くなったのを機に、ライブラリのアップデート管理を Dependabot から Renovate へ移行しました。 なぜ Renovate へ移行したのか、具体的にどのような設定をしたのかについてご
STORES 予約 の開発をしている菊池です。このブログでは Knip 導入について書きます。 Knip は JavaScript や TypeScript のプロジェクトのコードをお片付けするためのツールです。 Knip はオランダ語で「ハサミ」という意味のようで、コードを削減する意味ではわかりやすいネーミングです。 knip.dev ちなみに ts-prune というツールもあったのですが、メンテナンスモードとなり Knip を勧めている状況となっています。 ts-prune は README に書いてある通り、多くのユースケースをサポートする中、複雑性が増し、コアシステムの変更や機能追加が気軽にできなくなったのが背景としてあるようです。 GitHub - nadeesha/ts-prune: Find unused exports in a typescript project.
Theme 第 167 回のテーマは 2024 年の Yearly Ecosystem です。 Show Note 2024 年のチェックポイント Vite の覇権を Turbopack, RSPack が奪えるか? Storybook は覇権をとって、Chromatic もすごくなりそう Next App Router が本当に広がるか RSC 対応の Bundler が増えて Next 以外の解が見れそう アプリケーションの Rust 化くるか? React Forget Figma Config 2024 の Adobe の影響 State Management どうなってく? (Context, Jotai, SWR, Signal) ESLint to flat config or Biome AI driven FE Development CSS の新しい方法論 今年のキーワ
An AI-native software engineer is one who deeply integrates AI into their daily workflow, treating it as a partner to amplify their abilities. This requires a fundamental mindset shift. Instead of thinking “AI might replace me” an AI-native engineer asks for every task: “Could AI help me do this faster, better, or differently?”. The mindset is optimistic and proactive - you see AI as a multiplier
We're excited to announce @platformatic/php-node, a revolutionary new Node.js module designed to bridge the gap between PHP and Node.js. With php-node, you can now embed PHP directly within your Node.js applications, leveraging PHP as a robust request processor. This powerful combination allows you to harness the strengths of both languages in a single, cohesive environment. What is @platformatic/
Flipping Pages: An analysis of a new Linux vulnerability in nf_tables and hardened exploitation techniques
This blogpost is the next instalment of my series of hands-on no-boilerplate vulnerability research blogposts, intended for time-travellers in the future who want to do Linux kernel vulnerability research. Specifically, I hope beginners will learn from my VR workflow and the seasoned researchers will learn from my techniques. In this blogpost, I'm discussing a bug I found in nf_tables in the Linux
JSer.info #766 - TypeScript 6.0 RCがリリースされました。 Announcing TypeScript 6.0 RC - TypeScript TypeScript 7(Go言語ベース)への移行を見据えたリリースで、多くのデフォルト設定の変更や非推奨化が含まれています。 strictがデフォルトでtrueに変更、moduleのデフォルトがesnextに変更、targetのデフォルトがes2025に変更など、既存のプロジェクトへの影響が大きい変更が含まれています。 また、target: es5/--moduleResolution node10/--module amd|umd|system/--outFileなどが非推奨化されています。 Solid v2.0.0 Betaがリリースされました。 Release v2.0.0 Beta - The is Ove
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
PlaywrightではじめるE2Eテスト入門（後編） - ICS MEDIA
実用品を作って探る生成AIを使ったソフトウェア開発の現在 - 電通総研 テックブログ
2026年3月19日の Trivy 再侵害の概要と対応指針
「CursorのProject Rules運用のベストプラクティスを探る」を試してみる
ライブラリのアップデートを自動化した仕組みの紹介 - Classi開発者ブログ
.NETのコンテナイメージをマルチプラットフォーム対応する - tech.guitarrapc.cóm
オープンソース活動の振り返り/GitHub Sponsorsの収入まとめ @ 2025
Node.js — Node.js 24.0.0 (Current)
Shai Hulud Strikes Again (v2) - Socket
不要なコードをクリーンするために Knip 導入 - STORES Product Blog
ep167 Yearly Ecosystem 2024 | mozaic.fm
The AI-Native Software Engineer
Seamlessly Blend PHP with Node.js
2026-03-12のJS: TypeScript 6.0 RC、Solid v2.0.0 Beta、Node.jsリリーススケジュールの変更