Node.js で型安全な環境変数を扱うスニペットを作りました。 next devのようなアプリケーションの起動、Playwright でのテストなどコマンドごとに渡したい環境変数のセットが異なるケースがあります。 この場合に環境変数をまとめたものを定義して、それをコマンドごとに読み込むセットを変えたいことがあります。 次のようにベタ書きしてもいいのですが、渡したい環境変数が増えると管理が大変になります。 NEXT_PUBLIC_LOCALHOST_URL=http://localhost:3000 NEXT_PUBLIC_API_URL=http://localhost:3001 NEXT_PUBLIC_IS_TEST_MODE=false FOO="bar" next dev そのため、.envのような環境変数をまとめたファイルを使いたくなります。 Node.js は--env-fil

Node.jsはいらない場合がある、むしろいらない場合の方が多いかもしれない、 そしてDenoとBunを使い分けて代替する方法を説明するという記事です。 Post Node.js ランタイムの登場 Node.js のあとにできたランタイムがいくつも登場しています。 Deno Bun WinterJS LLRT この中でも、人気であるDenoとBunを中心に考えていきます。 DenoやBunに変えるメリット これがなければNode.jsから変える必要はないと思います。 私は、以下の3つが、2ランタイムに共通して言える大きなメリットだと思います: ネイティブTypeScriptサポート 高速 Web標準 ネイティブTypeScriptサポート 現在、JavaScriptを記述するときは、TypeScriptを利用することが多いと思います。 Node.jsでTypeScriptを使うとき。tsc

Node.js で X（Twitter）、Bluesky、Mastodon に JSON データから同時投稿（クロスポスト）する JSON データから X（Twitter）、Bluesky、Mastodon などの SNS にクロスポストする JavaScript（Node.js）を書いてみたので GitHub で公開しました。 私事ながら、現状、SNS としては X （旧 Twitter）、Bluesky、Mastodon を日常的に使っていて （Threads と Nostr も使っていますが特に Threads は放置気味......）、全部じゃないにしても、一部の投稿については、これらすべてのサービスに同時投稿したいなと、なんとなく思っていました。 巷にはそういう Web サービスも探せばあるとは思うんですが、なるべく自前でやろうということで、週末に思い立って手を付けたら見事に週末

ライブラリやツールなどを作っているときに、特定の機能やパッケージを非推奨にする場合があります。 これらの非推奨はリポジトリ上のREADMEやIssueなどに書いても、利用者が気づかないことがあります。 そのため、利用者が気付けるように非推奨の機能やパッケージを使った場合に警告を出す方法を紹介します。 非推奨にはいくつかの段階があり、それに応じてやり方を変えられるので、それぞれの方法を紹介します。 パッケージの非推奨化: npm deprecate <package> <message> コードレベルの非推奨化: JSDocタグの@deprecated 実行時の非推奨化: process.emitWarning() パッケージの非推奨化: npm deprecate <package> <message> npmのパッケージレベルで、そのパッケージが非推奨であることを通知するにはnpm de

(Last Update: 2022/02/03) npm と yarn(v1) と pnpm （とyarn v2）の違いについて記述します。 Versions npm Yarn pnpm 各パッケージの特徴 npm npmはnpm社が提供する、JavaScriptパッケージマネージャーです。 npmというコマンドラインで動作するプログラムでパッケージを管理できます。いわばnpm公式のパッケージマネージャーとなります。 Windows等でインストールするとNode.jsに同梱されています。 Yarn Yarnはnpmより後発のJavaScriptパッケージマネージャーです。 元々、npmにはインストール時のパッケージバージョンの非再現性やパフォーマンス上の問題、セキュリティの問題が山積しており、それを解決するために開発がスタートしました。 いわば、サードパーティのnpmということになります

Corepackを使ってNode.jsをアップデートする ⬆️⬆️というタイトルで、Node.js 14からNode.js 18へのアップデートする方法について話した。 Node.js 14は4月末でEOLで、Node.js 18までアップデートする必要があるけど、npmの変更が混ざって大変です。 Corepackを使うことで、Node.jsとnpmのアップデートを同時にやらなくても良くなり、問題を分割して対応できます！ Corepackを使ってNode.jsをアップデートする ⬆️⬆️https://t.co/mRHsBcYbpn pic.twitter.com/HiiCe7c5YE — azu (@azu_re) April 28, 2023 スライド: Corepackを使ってNode.jsをアップデートする ⬆️⬆️ Note: Node.js 14は2023-04-30でEOLで

2月21日にリリースされたNode.jsの最新バージョン「Node.js 19.7.0」で、Node.jsとJavaScriptアプリケーションを単一の実行ファイルにパッケージングする新機能「Single Executable Applications」が実験的機能として搭載されました。 一般にNode.jsのアプリケーションをデプロイするには、Node.jsのインストールや環境設定をするところから始めなければなりません。 今回新しく実験的に搭載されたSingle Executable Applications機能を使うと、そのまま実行可能な単一の実行ファイルを作ることができるため、それを配置するだけで簡単にデプロイができるようになる見通しです。 Single Executable Applicationsでは、postjectと呼ばれる新しいコマンドが用意されます。これを用いてNode.

Webブラウザ上にNode.jsを実装、Webブラウザ上のサーバサイドでNext.jsやVite、Astroなどが実行可能な「Sandpack 2.0」が登場 クラウド上でマイクロVMベースのオンライン開発環境などを提供するCodeSandboxは、Webブラウザ上で抽象化したNode.jsを実装しWebブラウザ上にJavaScriptのサーバサイド環境を作り出すことで、WebブラウザだけでNext.jsやAstroなどを実行可能にする新しいソフトウェア「Sandpack 2.0」を発表しました。 WindowsやMacなどのデスクトップPC用のWebブラウザだけでなく、iOS上のSafariでもNode.jsが実行可能。ただし現時点でのiOS版Safariへの対応は、メモリリークなどが発生するためβ版だと説明されています。 先週、StackBlitzからはWebブラウザ上で実行できるWe

find-node-modules-import: importsしてるパッケージ名やNode.jsのコアモジュールを検出するツール find-node-modules-importという、ソースコードからimportsしてるパッケージ名を検索するシンプルなCLIを書きました。 azu/find-node-modules-import: Find specific node modules import statement in your source code 特徴 インポートしてるパッケージ名を全て検出できる インポートしてる特定のパッケージ名を検出できる node:fsやassertのようなNode.jsのコアモジュールを検出できる 📝 このツールは、ESMのimportのみに対応しています。 JavaScriptとTypeScriptどちらも対応しています。 使い方 Usage

デザインとHTMLのズレを検出！ Node.jsとPuppeteer活用のビジュアル校正テストで実装時のケアレスミスを防ぐ ウェブ制作において、デザインとHTML実装の一致はエンジニアとして当然求められるものです。とはいえ、デザインツールとブラウザ画面をにらめっこしながら確認するのも大変です。本記事ではNode.jsで動くヘッドレスブラウザのPuppeteerパペティアーを使ってデザインとのズレを検知するビジュアル校正テストの方法を紹介します。 ウェブ業界ではデザイン制作とHTML制作が分業である場合がほとんどです。ビジュアル校正テストを導入することで、HTML制作の品質向上に役立てられます。デザインとHTML実装が別の会社のようなプロジェクトでは、HTML実装時の品質保証の担保になりますし、デザイナーとフロントエンドエンジニアが近い組織でもコミュニケーション円滑化に役立つでしょう。ICS

表題通りの記事です。 これからnode.jsを10->12に更新する方の助けになれば幸いです。 確認環境 Ubuntu: 18.04.3 LTS node.js: 10.16.0、12.14.1 ビルドツール: gulp (後述しますが4系へのアップデートが必須でした) やったこと(全体像) n をつかってローカル環境のnode.jsを10->12に更新　(参考: nodeとnpmのバージョン更新方法) npm ciして、出てきたエラーを潰す firebaseの更新 node-sassの更新 npm run buildして、出てきたエラーを潰す gulpを3系->4系へ移行 エラー1 (firebaseの更新により解消) 最初はイージーケースから。 事象 npm ciしたところ、大量(体感3分)のログが出力され、最後に以下のエラーが吐かれました。 # これ以前にも大量のエラーログが出る c

現在、Sassは node-sass から dart-sass への移行が推奨されています。@import が非推奨になり、 @use や @forward といった新しいモジュールシステムを使用することが推奨されるようになり、今まで運用していた Sass のコードを書き換えなければいけないという方も多いのではないでしょうか？ 今回は、node-sass を dart-sass へ書き換えるときに便利な sass-migrator というツールを紹介してみたいと思います。 sass-migrator とは sass-migrator とは node-sass などの古い記述で書かれた .scss ファイルを新しいバージョン（dart-sass）の記述に自動的に置換してくれるコマンドラインツールになります。 使い方 sass-migrator を実行するときは、どの記述の移行を行うかどうかと

グーグルが開発した画像圧縮ツールSquoosh。フロント開発向けにNode.jsで扱う方法まとめ 『Squooshスクーシュ』というGoogleが開発した画像圧縮ウェブアプリがあります。ブラウザで変換結果を見ながら圧縮設定ができるので、画像圧縮の難しい知識を持たない方でも使いやすいことが特徴です。圧縮だけでなく、WebPなどの各種フォーマットへの変換・リサイズといったこともできる便利ツールです。 このSquooshをNode.jsで扱える『libSquoosh』が存在します。libSquooshは大量の画像を一括で圧縮、WebPへの変換、リサイズなどの処理をこれ1つで完結できるのがポイントです。昨今のウェブはページの読み込み時間が重視される傾向があります。画像のファイルサイズは読み込み時間に大きく影響するため、画像圧縮は重要なテクニックです。libSquooshをwebpack・Viteと

どうもfujiharaです。本日はgulpの便利プラグイン gulp-rename をご紹介します。 背景 gulpを使う場合src, dist でソース、出力先を指定するとかと思います。 gulpfile.js import gulp from 'gulp'; const { src, dest } = gulp; export default () => { return src('src/js/*.js') .pipe(processA()) // 処理A .pipe(processB()) // 処理B .pipe(dest('dist/js')); } tree (ディレクトリ抜粋) ├── dist │   └── js │   └── index.js ├── gulpfile.js └── src └── js └── index.js gulp-rename gulp-r

突然ですが、皆さんのgulp.js(gulp)タスク、依存関係が複雑になりすぎて、こんな風になってませんか？ “a gulpfile” #jsart pic.twitter.com/Uj3dXoDXQm — Victor Savkin (@victorsavkin) 2016年8月12日 gulpやGruntを使って開発していると、 やれ「Node.js(Node)のバージョンが違っていて動かない」、やれ「エラーログがぐちゃぐちゃで追えない」など、様々なトラブルに遭遇しますよね。 もちろん、Node や依存モジュールのバージョンを固定したり、ドキュメントをしっかり作るなどすればこれらのエラーに遭遇する可能性は下がりますが、できれば異常系の処理をするより、新機能の開発をしていたいのが人情ってものです。 今回はそんな方が gulp.js やGrunt に頼らずに、Sassのビルドを監視して自動

まとめのところでも触れましたが、google-home-notifierが不安定に感じることがあり、気がついたら動いてないこともあるのが気になっていました。 そこで、代替の方法を探してました。そんなとき、こちらの「Node-REDを使って簡単にGoogle Homeに喋らせよう」という記事を読ませていただき、Node-REDでもGoogle Homeを喋らせることができるということに気が付きました。 今回はその記事を参考にしつつ、Node-REDを使って、以前の記事の「天気の通知」についてブラッシュアップをしていこうと思います。 Node-REDでエンジニア的DIY！遊び感覚でアプリやAPIを作ってみようという記事も書いてますので、Node-REDについて興味が湧いた方はご一緒にどうぞ。 準備 Raspberry Pi Raspberry Pi OSをインストールしてください。作業自体はメ

サーバーサイドで動作するJavaScriptNode.jsはSassのコンパイル、webpackの使用等、今やフロントエンド開発に欠かせないものです。Node.jsを使う場合、バージョンを自動で切り替えられる nodenvというツールがお薦めです。本エントリーではnodenvのメリットと、基本的な使い方について解説します。 Node.jsのバージョン管理 プロジェクトによっては古いNode.jsのバージョンで動作が安定し、違うNode.jsにしてしまうと動作しなくなる、といったケースは現場でよくあります。しかし、プロジェクトを切り替える度、現在のNode.jsをアンイストールして目的のバージョンのNode.jsをインストールする、というのは時間がかかります。 このようなNode.jsのバージョン問題を解決するため、Node.jsのバージョン管理をするツールとしてmacOSの「Nodebre

この記事では、npm installやnpm ciを実行したときにどのようにパッケージがインストールされるのか、依存パッケージにバージョンのコンフリクトが発生した際にどのように処理されるのか、などを見ていく。必要に応じて Yarn での挙動にも触れる。 動作確認に使った npm のバージョンは6.14.5。Yarn は1.22.4。 特に npm はバージョンによって動作が大きく異なるので、注意する。 package-lock.json によるバージョンの固定 package.jsonだけではインストールするパッケージのバージョンを固定できず、package-lock.json（Yarn の場合はyarn.lock）によってバージョンを固定する。 多くの人が知っている話ではあるが、重要な機能なので改めて触れておく。 package.jsonのdependenciesやdevDependen

概要 2018年4月にnpm v6.0.0がリリースされ、セキュリティチェックができるコマンドnpm auditが追加されました。 さらに2018年5月にはnpm6.1.0がリリースされ、セキュリティチェックに追加して脆弱性のある箇所を自動修正してくれるサブコマンドnpm audit fixが追加されました。 この機能は非常に便利で、node_modulesに存在する大抵の脆弱性を自動修正してくれます。しかし、パッケージの依存関係によって自動で直しきれない脆弱性が残ってしまうことがあり、現時点ではこれを手動で解消しなくてはいけません。その方法を共有します。 実践 まずは$npm audit まずは任意のプロジェクトでnpm auditをポチッと実行します。 $ npm audit //中略。ここに脆弱性のあるパッケージ一覧が表示されます found 25 vulnerabilities (