はじめにSHIFT DAAE の shinagawa です。表題の通りNode.jsで作成したコンテナのイメージサイズの軽量化に挑戦しました。 背景近年の多様化・高速化するビジネスに対応するITシステムの構築を実現する「クラウドネイティブ」の構成要素の一つとして 「コンテナ」という仮想化技術が存在し、当部門でも活用を進めております。 このコンテナイメージを作成するにはアプリケーションコードやライブラリ・モジュールなどの依存物、ランタイム等を1つのイメージとして組み立てて作成しますが、 この構成要素が増えるとイメージサイズが肥大化し保管時のストレージのコストの増加やイメージの転送、環境への展開に時間がかかることになります。 従ってイメージのサイズを削減することは、これらの点を改善することにつながります。 ここではネット上で紹介されている、あらゆる打ち手を組み合わせてコンテナイメージの軽量化に
TypeScript/Rollup/Vercelでサクッとブックマークレットを作ってみよう - Adwaysエンジニアブログ
こんにちは。エンジニアブログ運営の梅津です。 普段はエージェンシー事業部でリードアプリケーションエンジニアとして働いています。 エンジニアブログ運営としてブログの質を向上させるために、これまでのブログの情報を集めたりもするのですが、これを逐一手作業で行うのは大変です。 ある程度の作業は自動化したい。そういったときはブックマークレットを作ると便利ですよね。 今回はそんなブックマークレットの作り方をまとめてみました。 「ブックマークレット？よく知らないな」「聞いたことあるけど作り方とか気にしたことなかった」という人がいれば是非一緒に試してみてください！ 筆者の開発環境やこのブログで利用する主な技術のバージョンは次のとおりです。 macOS Node.js 18.12.1 TypeScript 5.0.4 Rollup 3.23.0 Vercel CLI 29.4.0 ブックマークレットとは T
npm package を作る度にイチから開発環境の構築をしていて大変だったので、自分専用のテンプレートリポジトリを作りました *1。 github.com せっかくなので、テンプレートの特徴とか、どういうこと考えながら作ったとか紹介してみます。 はじめに: 基本的な技術スタック npm TypeScript Node.js Native ESM Prettier ESLint Vitest Renovate GitHub Actions vscode 向けの各種設定ファイル (extensions.json, launch.json, settings.json) GitHub の「テンプレートリポジトリ」機能を使う GitHub にそれっぽい機能があったので使ってみました。 docs.github.com 「Use this template」というボタンが出て便利です。 「Use t
AWS Copilot CLI を使用した永続性を持つ AWS App Runner サービスの継続的ワークフローの実現 | Amazon Web Services
Amazon Web Services ブログ AWS Copilot CLI を使用した永続性を持つ AWS App Runner サービスの継続的ワークフローの実現 この記事は Enabling continuous workflows for AWS App Runner service with persistency using AWS Copilot CLI を翻訳したものです。 AWS は最近、AWS App Runner と呼ばれる新しいサービスを開始しました。これは、コンテナ化されたステートレスな Web アプリケーションを AWS でビルドして実行する最も簡単な方法です。App Runner は、ビルドパイプライン、ロードバランサー、スケールインとスケールアウト、そしてもちろんその基盤となるインフラストラクチャなど、コンテナを実行するために必要なすべてのリソースをプロビ
スタディサプリENGLISH の web フロントエンドプロジェクトで Renovate を半年運用して得た Tips 8選 +α | リクルート テックブログ
前置き スタディサプリENGLISH の web フロントエンドアプリは、実に多くの node モジュールライブラリ（以下、ライブラリ）に支えられています。 当初は開発メンバーが有志でそれらのライブラリを手動アップデートする運用で回していましたが、2021年3月頃より Renovate を本格導入することで依存ライブラリのアップロードを自動化する運びとなりました。 Renovate とは Whitesource Renovate: Automated Dependency Updates プロジェクトで依存しているライブラリ等のアップデートを自動化してくれるツール（≒ サービス）です。依存ライブラリのバージョニングを監視し、アップデート版が公開されるとそれに追従するためのプルリクエスト（以下、プルリク）を自動で作成してくれるという優れものです。かつては有償のサービスでしたが1)セルフホステ
SWCとRelease Pleaseで始めるReact TypeScriptライブラリ開発と公開 - BASEプロダクトチームブログ
こんにちは。Pay ID Devの大木 (@roothybrid7)です。 今回外部スクリプトとして読み込み利用する外部SDKを、Reactに組み込むためのラッパーライブラリを作ったので、その開発事例を紹介します。 今回、SWC(Speedy Web Compiler)やRelease Pleaseを利用して開発したので、主にそれらをどう使ったのかを紹介いたします。 背景 去年12/16に開催しましたオンラインイベント「BASE Tech Talk #1 〜Next.jsを使ったカート大規模リプレイスPJの裏側〜」の通り、BASEカートシステムのFrontendアプリケーションは、Next.jsで動作してます。 さて、アプリケーションでは、Amazon PayやPayPalなど様々な外部の決済サービスを利用しており、それらのJavaScript SDKをいくつか利用しています。 これらのS
はじめに# この記事は，HERP における Web フロントエンド開発の概観を，世間の開発者に——特に潜在的・顕在的な候補者の方に——知ってもらうことを目的として書かれた．HERP では現在 Web フロントエンドエンジニアを積極的に募集しているが，仮に入社したとしてどのような仕事をすることになるかのイメージが付いた方が，検討の候補に入れてもらいやすいのではないかという目論見による．また，採用している技術スタックにも珍しいものがあるため，単純に読み物として楽しめるかもしれない．なお，開発の実情について知ってもらうのが目的であり，実装の良し悪しについて議論することは目的としていない． HERP でのアプリケーション開発# B2B SaaS として，主に IT スタートアップ企業向けの，採用管理システムおよびタレントプールシステムを開発・提供している． そもそもプロダクトを通じて何を実現したい
Today we are happy to announce that Vue 2.7 "Naruto" has been released! Despite Vue 3 now being the default version, we understand that there are still many users who have to stay on Vue 2 due to dependency compatibility, browser support requirements, or simply not enough bandwidth to upgrade. In Vue 2.7, we have backported some of the most important features from Vue 3 so that Vue 2 users can ben
Announcing Parcel v2!
The Parcel team is beyond excited to announce that v2.0.0 stable is now available! 🎉 Parcel 2 brings the zero configuration experience you know and love from Parcel 1, and makes it scalable and extensible to projects of any size and complexity. It is already being used in production at some of the biggest companies in the industry including Atlassian, Adobe, and Microsoft. Check out our new websi
Join a VS Code Dev Days event near you to learn about AI-assisted development in VS Code. Update 1.70.1: The update addresses these issues. Update 1.70.2: The update addresses these issues. Update 1.70.3: This update is only available for Windows 7 users and is the last release supporting Windows 7. Downloads: Windows: x64 Arm64 | Mac: Universal Intel silicon | Linux: deb rpm tarball Arm snap Welc
Core Changes fix(types): allow nonpromise return types for static functions: #24685 Ensure history navigates correctly with dynamic routes + basePath: #25459 Fix external check for non-local next import: #25518 Ensure providing only query on dynamic route works as expected: #25469 Assume a recent react@experimental if reactRoot is set: #25496 Update to latest webpack 5 and webpack-sources: #25558
In August 2024 Node.js introduced a new experimental feature, Type Stripping, aimed at addressing a longstanding challenge in the Node.js ecosystem: running TypeScript with no configuration. Enabled by default in Node.js v23.6.0, this feature is on its way to becoming stable. This article explores the motivations behind this feature, the problems it solves, and its implications for the Node.js com
Building Panda CSS was one of the most inspiring moments of my career; it reminded me of the period before launching Chakra UI. I knew it would be very "Node" heavy, and I needed to learn more about Abstract Syntax Trees (ASTs). I was familiar with using basic modules like fs, path, and small bits of express to build APIs, but that was about it. Creating a CSS framework that delivers a similar DX
Today we're excited to announce the release of Vue 3.4 "🏀 Slam Dunk"! This release includes some substantial internal improvements - most notably a rewritten template parser that is 2x faster, and a refactored reactivity system that makes effect triggering more accurate and efficient. It also packs a number of quality-of-life API improvements, including the stabilization of defineModel and a new
Merpay Advent Calendar 2021 の 15 日目は 2 本立てで、1 本目の記事をメルペイ Growth Platform Team のバックエンドエンジニアの@naoinaがお送りします。 2本目は Growthのオペレーションツールの歩み 〜ダッシュボード編〜 で公開されているので、そちらもよろしくお願いします。 クーポンやキャンペーンなど、Growth に欠かせない機能を実現するシステムはマイクロサービスとして構築していますが、データの登録のような人が介在するオペレーションは定常的に発生します。 その内容を設計するのは、バックエンドエンジニアではなくマーケティング、BI、プロダクトマネージャーなどの職種、部署の方であり、理想的にはそれらの方々だけで作業を完結できるような使いやすいUIを備えたシステムがあることが望ましいでしょう。 しかし、他にも様々な開発が必要に
February 16, 2023 Hello! I’ve been writing some Javascript this week, and as always when I start a new frontend project, I was faced with the question: should I use a build system? I want to talk about what’s appealing to me about build systems, why I (usually) still don’t use them, and why I find it frustrating that some frontend Javascript libraries require that you use a build system. I’m writi
苦しんで覚えるwebpackerのバージョン更新
webpackerのバージョン更新作業 現代のWeb Applicationのviewを作成する場合はReact・Vue、Angular等のライブラリを利用する事例が増えたと思います。それらのライブラリを利用する場合はビルドツール、多くはデファクトスタンダードになっているwebpackを利用しているかと思います。 Railsも例外ではなく、Railsのversion 6からはRails用にwebpackをwrapしたwebpackerがデフォルトでinstallされるようになっています。 webpackerの導入事例はよく耳にしますが、その後の更新作業を耳にすることは少ないです。 Railsを利用するからにはRails Wayに乗ることが重要であり、そのためにはRailsアプリケーションを継続的に更新していく必要はあります。webpackerに関しても例外ではありません。 今回はv4.3.
JSer.info #609 - Next.js 12.3がリリースされました。 Blog - Next.js 12.3 | Next.js TypeScriptの自動インストールに対応、.envなどの変更にFast Refreshが対応、next/future/imageコンポーネントの改善が含まれています。 また実験的なオプションとしてunoptimizedの追加され、SWCでコードを圧縮するswcMinifyがStableとなりました。 npm v9.0.0-pre.0リリースされています。 Release v9.0.0-pre.0 · npm/cli Node.js 12のサポート終了されています。 workspacesでsemverのrangeを指定できるように、npm birthdayコマンド、npm binコマンドの削除されています。 また、npm pkgコマンドがあるため、
Webpack基本構成ファイルのセットアップ手順｜初心者向け基礎ガイド - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
Webpackとは entryとoutput Loaders ローダー babel-loader css-loader/style-loader Plugins(プラグイン) webpack-dev-server 最後に 以下のリンクを合わせてお読み下さい。 dev-k.hatenablog.com Webpackとは Webpackは、JavaScriptやその他のモジュールに依存するファイルを1つのファイルにまとめることができる便利なモジュールバンドラーです。 JavaScriptのモジュールバンドラーとしては最もよく知られており、HTMLやCSSなどのファイルに対してもバンドルすることができます。 Webpackを使用するには、Node.jsのパッケージマネージャーであるnpmを介してインストールする必要があります。 まず、"npm init"コマンドを使用してプロジェクトを初期化し
Rails 7: importmap-rails + tailwindcss-railsでnode.jsが不要な理由｜TechRacho by BPS株式会社
2022.02.17 Rails 7: importmap-rails + tailwindcss-railsでnode.jsが不要な理由 Rails 7 : rails newのフロントエンド関連オプションの組み合わせを調べてみた 上の記事に書いたように、Rails 7でimportmap-railsを使う場合、node.jsは不要になり、node_modules/ディレクトリも作成されません。 # デフォルトでimportmap-railsがインストールされる $ rails new . ちょっと不思議だったのは、importmap-railsとtailwindcss-railsを組み合わせた場合にもnode.jsが不要なことです。なお、このセットアップではconfig/importmap.rbにtailwindのエントリは入らず、app/assets/builds/の下にtailwi
WP REST API × NuxtJS で SSG するサイト作り｜TechRacho by BPS株式会社
ebi です。定期ネタの WordPress 芸をやっていきます。 今回は一度やってみたかった WP REST API を利用したサイトに少し手出してみます。 React より Vue.js の方がまだ触ったことあるので NuxtJS を使ってみます。 また、 SSR だとホスティングするサーバをどうするかの問題が出てくるので SSG 前提のサイト構成にしてみようと思います。 そんなわけで実験がてらこう言う構成のサイト作りをやってみることにしました。 GitHub にコードも晒しておくので最終的なコードの細かい詳細見たい方は後で確認してください。 CMS として WordPress を採用している理由 正直自分自身にとって馴染みがある以外の理由は特にないです。 近年、 ContentFul や microCMS などのヘッドレスCMSが台頭してきているので、好みでそう言う CMS を選
Random musings on React, Redux, and more, by Redux maintainer Mark "acemarke" Erikson Detailed thoughts on how React has been developed over time, and explanations for common community confusion and concerns Introduction 🔗︎ Today, the state of React and its ecosystem is complicated and fractured, with a mixture of successes, skepticism, and contention. On the positive side: React is the most wide
Vue Fes Japan 2025 登壇資料まとめ
2025 年 10 月 25 日に Vue Fes Japan 2025 が開催されました。 私は参加することはできなかったのですが、登壇資料を早く読みたいと思っていたので X のポストを中心に公開されている資料を探してまとめました。 AI による簡単な概要も記載しています。 随時更新予定なので、資料の情報提供、間違いの指摘など歓迎です。 キーノート 資料は現時点で見つけられず webpack 依存からの脱却！快適フロントエンド開発を Vite で実現する webpack 前提からの移行ポイントと、Vite 採用による体験・速度改善の実例を紹介。 Vue は AI に弱い？そんなの都市伝説です Vue × AI の実践事例を通じて、設計〜実装〜検証までの活用パターンを共有。 alien-signals と自作 OSS で実現するフレームワーク非依存なロジック共通化の探求 Signals を
Blogged Answers: My Experience Modernizing Packages to ESM
Random musings on React, Redux, and more, by Redux maintainer Mark "acemarke" Erikson This is a post in the Blogged Answers series. Details on the painful experiences and hard-earned lessons I've learned migrating the Redux packages to ESM Table of Contents 🔗︎ Introduction Redux Packages Background Packages and Configurations Issue History Early Attempts Migrating to Vitest Initial Alpha Testing
The Story of Heroku May 2022 – Lee Robinson Heroku made it easy for any developer to build and run applications in the cloud without managing their own infrastructure. Now 15 years later, it continues to inspire the next generation of developers. Why did Heroku become so popular? What can we learn from their incredible developer experience? How is Heroku shaping the next generation of serverless?
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
I have seen a couple threads on twitter where people complain about the difficulty with publishing NPM libraries or ask what starter kit they should use (or, people recommended starter packs anyways) Example threads https://twitter.com/cramforce/status/1513903035197526017 https://twitter.com/oleg008/status/1510006191296061441 https://twitter.com/iansu/status/1524860613943382017 https://twitter.com
フロントエンドの本番ビルドに SWC を導入して、ビルド時間とメモリ使用量を同時に削減する - Sansan Tech Blog
こんにちは。 Eight でエンジニアをしている鳥山（@pvcresin）です。 今年はいくつも BBQ の予定がたっていて、コロナ禍前の日常に戻りつつあることを実感しています。 BBQ ならラムチョップが好きです。 今回は、Web フロントエンドの本番ビルドに SWC を導入した話をしたいと思います。 目次 背景 esbuild と SWC 事前検証 ビルド処理の移行イメージ 移行作業 ハマったポイント 結果 まとめ 背景 Eight では Web フロントエンドの本番ビルドを AWS CodeBuild で行っていますが、長年の開発によりコードベースが膨らみ、それによってビルドに要求されるメモリ領域も日々増加していました。 そしてある日を境に、OOM Killer（Out Of Memory Killer） によるプロセス停止で時々ビルドが失敗するようになってしまいました。 これは C
Announcing AdonisJS v6
Alright, sit tight, as this will be a long article. The work for v6 started with the goal of moving to ESM and improving the IoC container to be simple and have fewer responsibilities. But we have touched almost every part of the framework, smoothing out many rough edges, fixing some long pending issues, and rewriting some packages from scratch. Are you looking to migrate your applications from v5
Enabling continuous workflows for AWS App Runner service with persistency using AWS Copilot CLI | Amazon Web Services
Containers Enabling continuous workflows for AWS App Runner service with persistency using AWS Copilot CLI We recently launched a new service called AWS App Runner, the simplest way to build and run your containerized stateless web application on AWS. App Runner provisions and manages all the required resources for you to run containers such as build pipelines, load balancers, scaling in and out,
これは何 今回モノレポ管理ツールを Nx から Turborepo へと移行したのですが、ポリレポからモノレポへの移行に関する記事はあっても管理ツールのリプレイスというのはあまり見当たらなかったため、その知見を共有したいと思います。 弊社サービスとフロントエンドの構成について identify株式会社で副業エンジニアとして主にフロントエンドをお手伝いしている @uekenu です。 弊社identify株式会社では動画素材サービスDeLMOの運営を行っています。DeLMOは動画をダウンロードする広告主様/代理店様と動画提供者のクリエイターに利用いただいており、そこに特権管理者である弊社のスタッフを加えるとユーザーの属性としては3種類に分けることができます。そして3種のユーザーにそれぞれ別々の環境の画面を用意しています。 アーキテクチャとしては、バックエンドに GraphQL サーバーがあり
Mozilla Hubs を VirtualBox でホストしてみた｜技術ブログ｜北海道札幌市・宮城県仙台市のVR・ゲーム・システム開発 インフィニットループ
Mozilla Hubs を VirtualBox でホストしてみた みなさんメタバース盛り上がってますか！インフラエンジニアの nobuh です Facebook も社名を Meta に変更するなど、メタバースが次世代のネットの主役になりえる？可能性があるということで、その動向には目を離せないところです。 すでに実現、実装されているメタバースや VR のプロダクトやサービスもいろいろありますが、今回は Mozilla 社がオープンソースで公開している Mozilla Hubs に注目し、そのサーバーを自分の手元の VirtualBox で動かすことに挑戦してみました！ Mozilla Hubs とは Mozilla 社の作ったブラウザでアクセス可能な VR の空間共有サービスで、簡単に要約すると３つの形態があります。 hubs.mozilla.com : Mozilla 社が運営してくれ
The Story of Heroku may 2022 – lee robinson Heroku made it easy for any developer to build and run applications in the cloud without managing their own infrastructure. Now 15 years later, it continues to inspire the next generation of developers. Why did Heroku become so popular? What can we learn from their incredible developer experience? How is Heroku shaping the next generation of serverless?
JSer.info #649 - Svelte 4がリリースされました。 Announcing Svelte 4 Release [email protected] · sveltejs/svelte Node.js 14のサポート終了、CJSの出力は廃止しESMのみをサポートするように、Custom Elementsの対応をtagオプションからcustomElementオプションに変更といった変更が含まれている。 また、生成するファイルサイズの削減、ウェブサイトのドキュメントを刷新なども行われています。 マイグレーションガイドとnpx svelte-migrate@latest svelte-4というマイグレーションツールが公開されています。 Svelte 4 migration guide • Docs • Svelte Ember 5.0リリースされました。 Ember 5.0 Re
April 22, 2026 #Announcing Rspack 2.0 Copy Markdown We are excited to announce the official release of Rspack 2.0! #Looking back at 1.x When we released Rspack 1.0 in August 2024, we set a clear goal: deliver a 10x performance improvement while staying compatible with the webpack API and ecosystem. Looking back at the 1.x cycle, we have largely achieved that goal. Rspack not only implemented webpa
Editor’s note: This post was reviewed for accuracy on 21 March 2024 by Oyinkansola Awosan to reflect the current versions of each framework — Next.js 14.1.4 and Nuxt.js 3.11.1 — as well as to specify use cases for each and summarize their similarities and differences in a comparison table. It was last updated on 11 April 2023. You can read more about Nuxt.js and Next.js in our archive. Next.js and
vue-tsc を使った TypeScript Strict Mode の漸進的導入 - VISASQ Dev Blog
こんにちは、ビザスクアドバイザー開発チーム、フロントエンドエンジニアの山元(@yamagen0915)です。 はじめに 弊社にはいくつかのフロントエンド環境があり、その中には TypeScript の strict mode が有効でない環境もあり、それらを strict mode が有効な環境へ移行を進めようとしています。 しかし移行と並行して新規開発も行われるため、strict mode でエラーとなるコードを増やさないようにする必要があることと、各チームのメンバーに strict mode な環境に慣れてもらう必要がありました。 そこで vue-tsc を使ってデプロイには影響を与えずに開発時のみ strict mode が有効な環境で開発ができるようにし始めたのでその方法を紹介したいと思います。 vue-tsc とは vue-tsc とは VSCode の Vue 向け Exten
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 の新しい方法論 今年のキーワ
The feature is still in development and not yet ready for general use. View the experimental features (@tag:experimental). Copilot Edits Agent mode improvements (Experimental) Last month, we introduced agent mode for Copilot Edits in VS Code Insiders. In agent mode, Copilot can automatically search your workspace for relevant context, edit files, check them for errors, and run terminal commands (w
はじめに 先日、CyberAgent主催のWeb Speed Hackathon 2025に出場しました。 Web Speed Hackathonはお題となるWebアプリケーションのパフォーマンス改善を行い、そのスコアで競い合うハッカソンです。似たようなものにISUCONがありますが、Web Speed Hackathonは主にフロントエンドの改善がメインとなっています。 ここでは参加記として改善の流れや感想などを書きます。 先にスコアの推移を載せます。途中でスコアが大きく伸びている部分がありますが、これは改善によってアプリがエラーで表示できなくなってしまった事によるものです。 また、リポジトリは以下のURLです。 環境構築・デプロイ・初期計測 以下のリポジトリをforkして始めます。アプリの内容は仮想の動画配信サービス「AREMA」だそうです。(なんか似た名前のサービスをCyberAge
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Node.jsコンテナイメージを極限まで軽量化! サイズを1/10以下に｜SHIFT Group 技術ブログ
npm package を実装するための自分専用テンプレートリポジトリを作った - mizdra's blog
HERP における Web フロントエンド開発概観 (2022年春編)
Vue 2.7 "Naruto" Released | The Vue Point
July 2022 (version 1.70)
Release v11.0.0 · vercel/next.js
Node.js Type Stripping Explained
Panda CSS - The Origin Story
Announcing Vue 3.4 | The Vue Point
Growthのオペレーションツールの歩み 〜クーポン編〜 | メルカリエンジニアリング
Writing Javascript without a build system
2022-09-13のJS: Next.js 12.3、npm 9 preリリース、Safari 16
The State of React and the Community in 2025
The Story of Heroku | Lee Robinson
Shai Hulud Strikes Again (v2) - Socket
You may not need a bundler for your NPM library
モノレポ管理ツールを Nx から Turborepo へ移行した話 - DeLMO（identify）エンジニアブログ
The Story of Heroku | Lee Robinson
2023-06-29のJS: Svelte 4、Ember 5.0、The Cost Of JavaScript in 2023
Announcing Rspack 2.0 - Rspack
Next.js vs. Nuxt.js: Ultimate guide - LogRocket Blog
ep167 Yearly Ecosystem 2024 | mozaic.fm
February 2025 (version 1.98)
【参加記】Web Speed Hackathon 2025で優勝した話