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

pnpm で使用するnodeバージョンを固定する&自動インストールする

“`package.json
{
“name”: “web”,
“version”: “1.0.0”,
“private”: true,
“engines”: {
“node”: “20.10.x”,
“npm”: “10.8.x”,
“pnpm”: “8.7.x”
},
…
}
“`

このように書くことで、開発に使うnodeのバージョンを指定することができます。
開発者毎でフロントのコードがビルドできる・できないを解消するためによくやるやつですね。

仮にバージョンが異なるnodeでビルドしようとすると、次のようなエラーが出てビルドが早期エラー終了します。

“`
$ v18.17.0
v18.17.0

$ pnpm dev

Your Node version is incompatible with “/Users/lapis/Projects/web”.

Expected version: 20.10.x
Got: v18.17.0

This is happening because the package

初心者によるReact,Node.js,MySQLの接続

## はじめに
React,Node.js,MySQLを使ってデータベースをフロントエンドを接続し、データを画面に表示する手順を説明します。⚠︎初心者なので不備があれば指摘してください！！
### 必要なツールのインストール
以下のツールをインストールします。
* Node.js
* MySQL
* Vite
#### ViteでReactプロジェクト作成
1. プロジェクトフォルダを作成し、clientとserverフォルダを作ります。
2. clientフォルダ内で以下のコマンドを実行し、ViteでReactプロジェクトを作成します。
“`
npm create vite@latest .
npm install
npm run dev
“`
## MySQLでデータベースとテーブル作成
次に、MySQLでデータベースとテーブルを作成し、サンプルデータを挿入します。
MySQLにログインし、以下のコマンドを実行してデータベースとテーブルを作成します。
“`ruby:sql
CREATE DATABASE my_project_db;
USE my_project_db;

C

IBM Cloud Object Storageを使ったWebアプリ開発

## はじめに

この記事では、IBM Cloud Object Storageを活用したファイルのアップロード、ダウンロード、削除機能を備えたWebアプリの開発方法について、デモアプリを通して紹介します。

IBM Cloud Object Storageは、高い可用性と耐久性を持ち、画像やドキュメントなどの非構造化データを効率的に管理できるクラウド・ストレージ・サービスで、複雑なインフラ構築をせずに手軽に利用できます。

この記事を通じて、以下の技術に関する知識を得ることができます。

– IBM Cloud Object Storageのリソース作成と接続方法
– Webアプリにおけるファイルのアップロード、ダウンロード、削除の実装方法

## デモアプリの概要

デモアプリのソースコードは[GitHub](https://github.com/mountln/icos-demo)にて公開しています。

このデモアプリには、次の機能があります。
– IBM Cloud Object Storageへのファイルアップロード
– ファイルの一覧表示
– ファイルのダウンロード
– フ

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.