Node.js関連のことを調べてみた

Exploring NPM Packages for Creative Name Generation, AI, and More

In the world of software development, leveraging packages from platforms like NPM can save time and effort, offering pre-built solutions for various functionalities. From creative tools like name generators to AI-powered features, the range of available packages is impressive. This article dives into some notable packages, providing insights on their use cases and relevance for developers.

## Franchise Name Generator

One interesting tool for those working in branding or game development is the

Lambdaのファイルディスクリプタ上限って、少なくない？

# 背景

最近組織内の全アカウントのリソース情報を収集するタスクをやっていますが、一日多くて一回走らせるくらいの処理なのでとりあえずAWS Lambdaを採用しました。結果ファイルディスクリプタ（ファイル記述子、本文ではFDと略称する）上限というものを知るようになりました。

引用[WikiPedia](https://ja.wikipedia.org/wiki/%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E8%A8%98%E8%BF%B0%E5%AD%90)：
>ファイル記述子（ファイルきじゅつし、英語: file descriptor）とは、コンピュータプログラミングにおいてファイルへの参照を抽象化したキーである。

Lambdaにおいては、tcpコネクト（ex. EC2のクライアント）を作ったり、S3からファイルを開いたりするとFDが消耗されますね。

本筋に戻ります。例えば、全組織には100個のAWSアカウントが存在するとしましょう。加えて15個のリージョンが使用可能です。
全アカウントの全リージョンにおいてEC2インスタンスの情報が欲しいという

workbox-webpack-plugin@6.6.1: The engine “node” is incompatible with this module. の対処法【windows】

エラー内容

yarn add react-router-domを実行した際に以下のエラーが発生しました。

“`terminal:yarn add react-router-dom
yarn add react-router-dom
yarn add v1.22.11
info No lockfile found.
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
[1/4] Resolving packages…
warning react-scripts > e

[Node.js]Satoriを用いて動的にOGPを生成する際のtips

## TL;DR

– SatoriによるSVG生成にはフォントファイルの読み込みが必要
– フォントファイルの読み込みはモジュールバンドラーとの相性が良くない
– `vite-plugin-arraybuffer`を利用してインラインでフォントファイルを読み込むことですっきりビルド

## 動的OGP生成の手法

筆者所属のMIERUNEにて最近[QGIS LAB](https://qgis.mierune.co.jp/)というWebサイトをリリースしました。

https://qgis.mierune.co.jp/

このサイトの記事ページでは、記事タイトルから動的にOGP画像を生成しています。

https://qgis.mierune.co.jp/posts/howto_1_download_ksj-data

動的OGPの生成は下記の手順がポピュラーのようです。

1. [vercel/satori](https://github.com/vercel/satori)で、SVGを生成する（JSXによる記述が可能）
2. SVGを画像化（Node.jsなら[lovell/sh

AWS LambdaをNew Relicで簡単にモニタリング！

New RelicのAWS Lambda 統合をLambda関数に導入することで、関数のパフォーマンスや、トレースを監視し、パフォーマンス劣化やエラーの原因を迅速に特定できるようになります。本記事で導入手順を紹介します！

# New Relic Lambda 統合 とは
New RelicのAWS Lambdaの統合は、Lambda レイヤーでエージェントが提供されており、関数のコードを変更することなく、関数の内部動作を詳細に可視化します。 関数にレイヤーでNew Relicのエージェントを追加すると、関数が呼び出されるたびにDuration、スループット、トレースなどの主要なパフォーマンス メトリックを取得できます。

レイヤーを使わない計装方法やコンテナ化されたLambda関数への計装方法もありますので、手順の詳細は以下公式ドキュメントをご確認ください。

https://docs.newrelic.com/jp/docs/serverless-function-monitoring/aws-lambda-monitoring/instrument-lambda-function

Node.js/Nest.jsのサーバーのメモリ使用量が知りたい時のコマンド

# 目的
表題の通りです。
開発を行っているとローカルでは問題なく動いていましたが、デプロイなど環境が変わると動かなくなることがよくあります。
環境と発生したエラーは以下です。
– Heroku
– Basicプラン
– Nest.js
“`
Memory quota exceeded
Error R14 Heroku
“`

容量が大きいデータを処理する際に発生し、エラーメッセージの内容からメモリの使用量について調査しました。
記事で紹介するコマンドはそのメモ書です。

# コマンド
以下のコマンドで取得できます。
“`
node -e ”
const os = require(‘os’);
const fs = require(‘fs’);
const v8 = require(‘v8’);

console.log(‘=== システム全体のメモリ情報 ===’);
console.log(\`全体メモリ: \${(os.totalmem() / 1024 / 1024).toFixed(2)} MB\`);
console.log(\`使用メモリ: \${((os

Lambda（Node.js）のDockerイメージをデプロイしてみた。（その１，EC2、Docker環境構築編）

# はじめに
LambdaをDockerイメージでデプロイする方法を、調査する機会があったので自分の備忘用にメモ書きを残します。

# EC2に環境セットアップ

Amazon Linux：Amazon Linux 2023 AMI
インスタンスタイプ：t2.micro
のクリーンな環境のセットアップしました。


鳥のアスキーアート？ですかね。

+ yumの最新化
+ dockerのインストール
+ 自動起動の有効化
+ 権限回りの設定

“`shell
sudo yum update -y
sudo yum install -y docker
sudo systemctl start docker
systemctl status docker
sudo systemctl enable docker
systemctl is-enabl

AWS Amplify sandbox で Segmentation fault (core dumped) が出たときの対処方法

表題の通りです、サクッと行きましょう。

# 実行コマンド
“`shell
npx ampx sandbox
“`

# エラー
“`shell
Segmentation fault (core dumped)
“`

# 原因
node のバージョンが 20 とかだと発生するようです、18 系に変更することでエラーを回避可能。
1. node のバージョン変更（nodenv 利用時の例）
“`shell
# 18 系のインストール
nodenv install 18.20.4

# ローカル環境で利用するバージョンに設定
nodenv local 18.20.4

# バージョン確認
node -v
“`

“v18.20.4“ と出力されればOK

無事デプロイが実行されるようになりました。
“`shell
$ npx ampx sandbox

Amplify Sandbox

Identifier: hoge
Stack: amplify-awsamplifygen2-hoge

To specify

知らないとやばいreadlineモジュール

`readline` モジュールは、Node.js の標準ライブラリの一部であり、コマンドラインインターフェース（CLI）を作成する際に非常に便利です。ユーザーからの入力を行ごとに読み取るための機能を提供します。以下に、`readline` モジュールでよく使われるメソッドやイベントを説明します。

—

### **1. `readline.createInterface(options)`**

– **説明**: 新しい `readline.Interface` インスタンスを作成します。
– **引数**:
– `input`: 読み取り用のストリーム（通常は `process.stdin`）。
– `output`（オプション）: 書き込み用のストリーム（通常は `process.stdout`）。
– **使用例**:

“`javascript
const readline = require(‘readline’);

const rl = readline.createInterface({
input: process.stdin,

Discord Activityのnested-messagesサンプルを動かす

# はじめに
Discord上でゲームなど遊べるDiscord Activityというサービスがあります。Discord Activityについては以下を参照してください。

https://discord.com/blog/server-activities-games-voice-watch-together

そのDiscord Activityは、開発環境や方法が公開されており、誰でもアプリを作成してDiscord上で動かすことが出来ます。

https://discord.com/developers/docs/activities/overview

今回Discord Activityのサンプルの1つのnested-messagesを動かしてみます。
最終的に改良を加えて、以下の動作するDiscordアプリを作成します。


OpenAI Realtime APIを動かしてみた


作成日：2024年10月20日(日)

## １．はじめに

私たちがこれまでに生成AIで使用してきた自然言語処理(NLP:Neuro Linguistic Programming)はChatGPTなどのチャットボットに代表されるように話者が交互にしか会話できませんでした。通信の世界ではこれを半二重通信と呼んでいます。
しかし一般的な会社の会議や人との会話では、会話に割り込んだり（カットイン）したり、同時に話したりすることが多くあります。
これは通信の世界では全二重通信と呼んでいます。
交互にしか会話できない事例としてトランシーバーなどを想像してもらうとイメージしやすいかもしれません。
同時に会話できる事例としては電話が分かりやすいですよね。
子供の頃、玩具のトランシーバーなどで遊んでいて交互にしか話せない仕組みがスパイ映画などみたいでかっこ

Node.jsを学ぶ #2

## 学習の内容説明

> ポケモンデータの詳細情報を非同期処理で取得し、表示する部分です。以下のように概要をまとめます

1. ローディング表示の追加
– ポケモンデータを取得する際に、非同期処理が完了するまで「ロード中」と表示させる処理を追加しました。
– **状態管理**としてuseStateを使い、ローディング状態を管理。
– 初期状態を`true`に設定し、データ取得完了後に`false`に変更。
– JSX内で三項演算子を使って、ローディング中とデータ表示を切り替えるようにしました。
“`
// ReactのuseStateフックを使用して、loadingという状態変数を初期値trueで定義
const [loading, setLoading] = useState(true);

useEffect(() => {
// コンポーネントがマウントされた時にfetchAllPokemonData関数を呼び出して
// データの取得が完了したら、setLoadingをfalseにしてローディングが完了したことを示す
fetchAllPokemonData()

Node.jsを学ぶ　＃１

## Node.jsに関する要点まとめ
1. Node.jsとは？
JavaScriptのサーバーサイド環境：
通常、JavaScriptはフロントエンド（HTML、CSSと組み合わせて動的なWebページを作る）に使われる。
Node.jsは、サーバーサイド（バックエンド）でもJavaScriptを使えるようにする環境。
2. Node.jsのインストール
公式サイトからダウンロード：
Node.js公式サイトで推奨版をダウンロード。
Windowsユーザーはそのままダウンロード。Macユーザーは「Node.js Mac」で検索して対応版をダウンロード。
推奨版の選択：
推奨版の方が安定しているため、こちらを選んでインストール。
3. インストール確認
ターミナルを開く：
インストール後にコマンドラインツール（ターミナル、コマンドプロンプト、Git Bashなど）を開く。
Node.jsのバージョン確認：
node -v コマンドでNode.jsが正常にインストールされたか確認。
npm（Node Package Manager）の確認：
npm -v コマンドでnpmがインストールさ

休憩時間をライフゲームに委ねるアプリをつくってみた


## こんなものをつくります


**デスクトップで動く休憩時間管理アプリです。**
開始してから黒いセルがなくなるまで休憩できる！というルールになっています。

– 休憩中

– 休憩終了
![image.png](https://qiita-image

(Node.js) @mapbox/geojson-areaモジュールを理解する

# はじめに
node.jsのコードの中で@mapbox/geojson-areaモジュールを使用する機会があったので、どのようなモジュールであるのか簡単にまとめたいと思います。

# @mapbox/geojson-areaモジュールとは
GeoJSON データから地理的な領域（面積）を計算するためのモジュールです。このモジュールは、GeoJSON オブジェクトに含まれるポリゴンやマルチポリゴンのジオメトリから面積を計算することができます。

# サンプルコード
“`javascript:geojson-area.js
const geojsonArea = require(‘@mapbox/geojson-area’);

const geojson = {
type: ‘Polygon’,
coordinates: [
[
[-73.981149, 40.768884],
[-73.961149, 40.768884],
[-73.961149, 40.748884],
[-73.981149, 40.748884

テスト環境を外部公開してみた(AlmaLinux+ngrok+react)

# Nginxの導入方法
1\. 事前準備
2\. 投稿主の実装環境
3\. ngrokとは
4\. 環境構築
5\. nginx便利コマンド

## 1\. 事前準備
・今回はngrokがメインのため、Reactの構築は省くものとする。Reactの構築については以下参照。
https://qiita.com/momotaroukunn/items/06a9cce5e90138e884aa
・Reactがローカルホスト3000番等で公開できること。

## 2\. 投稿主の実装環境
・AlmaLinux(9.2)
・ngrok(3.17.0)

## 3\. ngrok（エングロック）とは
ngrokとは、ローカルホストサーバーを外部からアクセスできるようにしたツールです。
例えば、ローカルホスト3000番などでサーバを立てている場合、外部からのアクセスはできないですが、ngrokツールを使用することでngrokサーバを経由してグローバルに公開してくれます。

この、ローカルホスト3000番などのポートから別のサーバのポートを経由することをトンネリングといいます。

これだけ聞くとサー

Storybookのストーリー数を取得する方法

## 背景

– 運用中のStorybookのストーリー数が知りたかった。
– でもGoogleで検索したりChatGPTに聞いたりしても、知る方法を見つけられなかった。
– (ChatGPTは近いことを教えてくれましたが、Storybook6系以前の方法となっていたため断念)
– 対象は100件以上が存在するため、自分で数えるのは難しい。そこで自作プログラムを書いてみることにした。

※ ここでの”ストーリー”とは`*.stories.js`に`export const Primary = {}`のように書いている記述のことです。
## 注意書き

– 正攻法ではありません。「役立ったらラッキー」くらいでお願いします。

## 動作確認した環境

記事を投稿した時点の最新バージョンです。

– Node: `22.9.0`
– storybook: `8.3.5` (恐らく7〜8系なら動きます)

## 手順

1. Storybookの静的ファイルを生成する
2. 生成された`index.json`に記述されている`”type”: “story”`を数える

### 1.

GitHub Actionsでスケジュールされたバッチ処理の自動実行

毎朝6時にsupabaseのテーブルを自動でリセットしたい！ということで
①毎朝6時にトリガーされる.ymlで
②supabaseの指定したテーブルを全部削除する.tsを実行することにしました

“`yml:①最終的に書いたコード
name: Delete Users Batch

on:
workflow_dispatch:’ # 手動でトリガーして動作を確認するため
schedule:
– cron: ‘0 6 * * *’ # 毎朝6時に実行

jobs:
delete-users:
runs-on: ubuntu-latest
steps:
– name: Checkout code
uses: actions/checkout@v3

– name: Set up Node.js
uses: actions/setup-node@v3
with:
node-version: ’18’

– name: Install dependenc

React_Webアプリケーション開発入門③ 〜ボタンとダイアログ(モーダルダイアログ)の実装〜

## 本ページについて
本ページではReactとNode.jsを用いた超簡潔な勤怠登録アプリケーションを開発します。
環境構築および動作確認は完了しているものとします。

### 前提
・React/Node.jsの環境構築および基礎の理解が完了している。
・プログラミングに関する基礎知識を備えている。（条件分岐、ループ処理、変数定義/代入、関数、クラスなど）
・javascriptの基礎文法を理解している。
・html/cssの基礎を理解している。

### 成果物のイメージ

・ボタンの数
ボタンは『勤務開始』『勤務終了』の２つを配置する。

・ボタンの挙動
クリック：モーダルウィンドウが開き、打刻完了のメッセージが表示される。

## ボタンを作成する
まずはボタンを配置しましょう。
ボタンは\要素で定義します。
“`PunchTimeClock.jsx
export const PunchTimeClock = () =>{
return (
<>

タイムレコーダー

React_Webアプリケーション開発入門② 〜画面遷移を学ぶ〜

## 本ページについて
本ページではReactとnode.jsを用いた超簡潔な勤怠登録アプリケーションを開発します。
環境構築および動作確認は完了しているものとします。

### 前提
・React/Node.jsの環境構築および基礎の理解が完了している。
・プログラミングに関する基礎知識を備えている。（条件分岐、ループ処理、変数定義/代入、関数、クラスなど）
・javascriptの基礎文法を理解している。
・html/cssの基礎を理解している。

### 成果物のイメージ

【画面の数】
画面の遷移を学習するため、トップページとタイムレコーダーの２画面を作成します。

【画面遷移方法】
・トップページ→タイムレコーダー画面
トップページの『タイムレコーダー』をクリックするとタイムレコーダー画面に移行する。

## 遷移先のページコンポーネントを作る。
当たり前の話ですが、まずは遷移させるための画面を作らなければいけません。

まずは、プロジェクト内のsrc直下に移動し、pagesフォルダを作成してください。
作成が完了したら、その中にHome.jsxとPunchTimeClock