f@ctor

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

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

(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の基礎を理解している。

### 成果物のイメージ

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

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

## ボタンを作成する
まずはボタンを配置しましょう。
ボタンは\

元記事を表示

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

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

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

### 成果物のイメージ

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

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

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

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

元記事を表示

AlmaLinux+Reactの環境構築

# AlmaLinux+Reactの環境構築
1\. 事前準備
2\. 投稿主の実装環境
3\. 各ソフトウェア・ツールの説明(Node.js,npm,nvm,CreateReactApp,React)
4\. 構築手順

## 1\. 事前準備
今回この記事では、Reactに趣を置いて構築しています。

まず、インストールしたいReactのバージョンを確認しておいてください。
少しだけ説明すると、Reactのバージョンには安定版と安定版ではない最新版が存在するため、自分にあったバージョンをインストールするとよいです。
詳しくは、調べてみてください。
何でもいい場合はとりあえず、Reactの安定版の最新バージョンを調べておくと良い。
(2024/10/13 現在：Reactの安定版の最新バージョンは18.3.1です。)

## 2\. 投稿主の実装環境
・AlmaLinux(9.2)
・nvm(0.39.3)
　└node.js(20.18.0)
　　└npm(10.8.2)
　　└npx(10.8.2)
・create-react-app(5.0.1)
　└ react(18.

元記事を表示

React_Webアプリケーション開発入門① ～React開発環境構築〜

## 1. 本ページについて
Reactの導入および環境構築の手順書を示す。
また、基礎理解と動作確認を兼ねた簡単なHello World表示をゴールとする。

## 2. 前提
以下を満たしているとなお良いです。
・HTML/CSSの基本は理解している。
・プログラミングの基本を理解している。
　（ex.　変数宣言、代入、if,for,while,関数定義、呼び出し等)
・javascriptの基本文法を理解している。(アロー関数など)

また、敷居を下げるためにWindowsOS上での作業を想定しております。
Linux上で作業する方各種コマンドを置き換える等して対応して下さい。

## 3. 環境構築
## 3.1. 必要なパッケージインストール

### Node.jsとNodist
・Node.jsとは、サーバー側でJavaScriptを動かすための実行環境です。
Reactプロジェクトを作成・実行するための基盤と考えてください。

・Nodistは、Node.jsのバージョン管理ツールとなります。
Nodistを用いてNode.jsを使用することでNode.jsのバージ

元記事を表示

NestJSのルーティングでハマらないために：静的パスと動的パスの順序に気をつけよう

## はじめに
NestJS(express.js)のルーティングにおいて、静的パスと動的パスの定義順序がアプリケーションの動作に重大な影響を与えることがあります。この順序を理解して正しく設定することで、予期しないルーティングエラーを回避することが可能です。本記事では、NestJSにおけるルーティングの基本から、静的パスと動的パスの定義順序に関する具体的な問題点とその解決策までを紹介します。

## 1. NestJSのルーティングの基本
NestJSでは、コントローラとHTTPメソッドデコレータを使用してルーティングを定義します。`@Controller` デコレータはクラスをコントローラとして定義し、`@Get`、`@Post` などのHTTPメソッドデコレータが特定のルートに対応するメソッドを指定します。

### コード例
以下の例では、`/users` に関連するルーティングを設定しています。
“`typescript
import { Controller, Get } from ‘@nestjs/common’;

@Controller(‘users’

元記事を表示

インポート機能、エクスポート機能APIの作り方（Node.js、Springboot）

今回はインポート機能、エクスポート機能APIの作り方を記事にしました。

インポート機能とエクスポート機能を実装するAPIの作り方をステップバイステップで説明します。一般的には、CSVやExcel形式でデータをインポートしたりエクスポートしたりする機能がよく使われます。今回は、Node.jsのExpressとJavaのSpring Boot、データベースとしてMySQLを使った場合の例で解説します。

# 1. Node.js（Express）を使ったAPIの実装例
必要なライブラリのインストール
まず、必要なライブラリをインストールします。expressはサーバーを構築するために使用し、csv-parserはCSVファイルの読み込みに、json2csvはJSONデータをCSVに変換するために使います。

“`bash
npm install express csv-parser json2csv multer mysql2
express: APIサーバー
csv-parser: CSVファイルを読み込むためのライブラリ
json2csv: JSONデータをCSVに変換するための

元記事を表示

pnpmの “not found: node” エラーを解決する方法

### はじめに

pnpmを使用してプロジェクトの依存関係をインストールしようとした際に、以下のようなエラーに遭遇することがあります：

“`
ENOENT not found: node

pnpm: not found: node
“`

このエラーは、pnpmがNode.jsの実行ファイルを正しく認識できていないことを示しています。今回は、このエラーの原因と解決方法について詳しく説明します。

### エラーの原因

このエラーの主な原因は以下の点にあります：

1. Node.jsのパスがpnpmに正しく認識されていない
2. nvmを使用している環境での設定の不整合
3. pnpmの設定が適切でない

### 解決手順

以下の手順を順番に試すことで、エラーを解決できる可能性が高いです。

#### 1. Node.jsとpnpmのバージョン確認

まず、Node.jsとpnpmが正しくインストールされているか確認します。

“`bash
node –version
npm –version
pnpm –version
“`

#### 2. pnpmの設定

元記事を表示

Node.jsのunzipperで解凍したらファイルが少なかった件

## はじめに

初めてunzipperを使いました
unzipperの最も基本的な使い方ですが、初歩の初歩で躓いてしまいました
具体的にはZIPを解凍したら解凍先のディレクトリにあるはずのファイルがなかったという感じです
エラーが出ないので一瞬気付きにくいですけど同じ問題起きた人いますか？

## 問題のソース

“`js
fs.createReadStream(‘test.zip’)
.pipe(unzipper.Extract({ path: ‘output’ }));
“`

## 解決したソース

“`js
const directory = await unzipper.Open.file(‘test.zip’);
await directory.extract({ path: ‘output’ })
“`

## 再現

100個ファイルを作成してZIP化する

“`js
touch file_{1..100}.txt
zip test.zip file_*
“`

unzipperを使ってZIPを解凍する

“`js
fs.createRead

元記事を表示

LambdaからFargateへの切り替える際にNode.jsアプリのタスクスペックをどう決めたか？

最近、LambdaからFargateに移行して、Node.js(NestJS)アプリの動作を最適化するためにタスクスペック(CPUやメモリの割り当て)についていろいろ試行錯誤しました。この経験を踏まえて、最適な設定を見つけるまでの流れを共有します。

## Lambdaとの違い
最初はLambdaを使っていたんですが、リクエストごとに新しい環境が立ち上がり、リソースの競合がなくて快適でした。短い処理ならLambdaが効率的で、オートスケーリングも自動的に対応してくれていました。

でも、長時間稼働するバッチ処理や大量データの処理になると、Lambdaではコールドスタートやタイムアウト(30 s)が気になってきました。そこで、より柔軟なリソース管理ができるFargateに移行することに決めました。

## Fargateに移行してみて: タスクスペックの試行錯誤
Fargateの強みは、CPUやメモリなどのリソースを自分で細かく設定できるところですが、これが逆に難しくもあります。Node.jsはシングルスレッドで動くので、どのくらいのリソースが最適なのかを見極める必要がありました。

#

元記事を表示

NestJSでCloud Runのコンテナ自URLを正しく取得する方法

# はじめに
NestJS を使って Cloud Run 上にデプロイされたアプリケーション内で、自サービスの URL を取得する際に、req.protocol が http になってしまうことがあります。これは、リバースプロキシを介したリクエストで、内部的に http で処理されるためです。

Cloud Run では、外部リクエストは HTTPS で送信されますが、コンテナ内部に届く際には HTTP として認識される場合があります。この問題を解決するためには、Express の trust proxy 設定を行い、X-Forwarded-Proto ヘッダーを信頼することで正しいプロトコル（https）を取得する必要があります。

この記事では、NestJS での trust proxy 設定の方法と、自URLを正しく取得するための実装方法について解説します。

## NestJSでの解決方法

### trust proxy の設定
NestJS では、Express を使ったアプリケーションであれば、app.set(‘trust proxy’, true) を設定することで、リ

元記事を表示

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

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

# @mapbox/tilebeltモジュールとは
Mapboxが提供しているJavaScriptモジュールで、地図タイルを扱うための便利な関数が含まれています。

モジュールの主な機能には以下のものがあります。

1．タイル計算:
緯度経度からXYZタイル座標へ変換したり、逆にタイル座標から地理的な境界ボックスに変換したりできます。

2．親子関係の取得:
該当タイルの親タイルを取得したり、タイルを分割して子タイルを生成することができ、地図のズームインやズームアウトの操作に役立ちます。

# tileToBBOX()の使用方法
モジュールの中の一つのメソッドであるtileToBBOX()の使用方法の使用方法について解説します。これは、タイル座標から地理的なバウンディングボックス（BBOX）を取得する関数です。タイルは通常、ズームレベルz、x座標、y座標で指定され、地図の特定の領域を表します。tileToBBOX関

元記事を表示

コーディングもするデザイナーが知っておきたい SVG 最適化（svgo v3 対応）

Docker Desktop と SVGO プラグインでしている SVG 最適化について、覚書を残しておきます。

## 設定ファイル（imagemin.js）
“`js:imagemin.js
const keepfolder = require(‘imagemin-keep-folder’);
const path = require(‘path’);
const crypto = require(‘crypto’);
const { JSDOM } = require(‘jsdom’);
const fs = require(‘fs’);

(async () => {
const imageminSvgo = (await import(‘imagemin-svgo’)).default;

// Imageminで最初の圧縮・最適化
await keepfolder([‘src/**/*.svg’], {
plugins: [
imageminSvgo({
// コード整形用プラグイン
// js2svg: {

元記事を表示

pnpmを使ってNode.jsのバージョン管理から開放される

## はじめに

### この記事の目的

1. プロジェクト毎に異なるバージョンのNode.jsを使えるようにする
2. プロジェクトメンバーが使うNode.jsとパッケージマネージャーのバージョンを統一する
3. バージョンの切り替えを自動化する

### 対象読者

1. Node.jsを使ってHTMLやCSSのコーディングをしている人
2. Node.jsのバージョン管理を煩わしいと感じている人、もしくはこれからバージョン管理を始めようとしている人

### 背景

昨今、Node.jsはフロントエンドの開発環境としてその地位を獲得しています。SassのコンパイルやTypeScriptのビルドだけでなく、様々な用途で使用されています。

また、フロントエンドの開発を取り巻く環境は変化が早く、Node.jsのバージョンアップもそれに合わせるかのように半年ごとにメジャーアップデートが行われています。そのため、複数プロジェクトに参画している場合、プロジェクト毎に異なるバージョンのNode.jsが使われることも多くあります。

異なるバージョンのNode.jsで開発することで、特定メ

元記事を表示

Node.jsでVOICEROIDをしゃべらせてみる

# 概要
WebフレームワークでVOICEROIDを操作してみたいな～とふと考え付いたので、いずれReactなどで動かすためにまずはNode.jsでVOICEROIDを操作できるかという技術検証です。実際にReactでも動くかはまだ試せていないのでいずれやります。

# Node.jsで動かす方法
といってもVOICEROID製品はほとんどC#で作られていることが多くNode.jsから直接制御するのは大変そうということがわかりました。ただ、調べるとどうやら[AssistantSeika](https://wiki.hgotoh.jp/documents/tools/assistantseika/assistantseika-000)というアプリケーションを使えば行けそうだということがわかりそのラッパーである[Node-Seika](https://github.com/nusu-github/node-seika)というものがあることを知ったのでこれを使ってみようと思います。

# 使うライブラリなど
大前提として、喋らせるVOICEROIDの正規ライセンス、AssistantSeik

元記事を表示

mysql接続時にER_NOT_SUPPORTED_AUTH_MODEのエラー

# 事象
node.js, expressで動くAPサーバと、mysqlが乗ったDBサーバがあり、
APサーバ側で以下のコードを書き、mysqlへ接続したい。

“`js
const express = require(‘express’);
const router = express.Router();

let todos = [];

/* GET home page. */
router.get(‘/’, function(req, res, next) {
res.render(‘index’, {
title: ‘ToDo App’,
todos: todos,
});
});

router.post(‘/’, function(req, res, next) {
connection.connect((err) => {
if (err) {
console.log(‘error connecting: ‘ + err.stack);
return
}
console.log(‘succ

元記事を表示

効率を向上させるための Web 開発エンジニア向けの 100 以上の無料リソース

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3861208/359d72a5-1170-c084-5a93-16b721d8e827.png)

ウェブエンジニアにとって、急速に進化するウェブ技術についていくことは非常に重要であり、同時に挑戦でもあります。ウェブ開発者として、常に学び、適応し続ける必要があります。以下は、著者が開発と学習の過程で出会った貴重なツールとリソースのリストであり、皆さんと共有します。

## JavaScriptライブラリ
– [jQuery](https://jquery.com/): 最も有名なJavaScriptライブラリ。
– [Backbone.js](https://backbonejs.org/): 複雑なウェブアプリケーションのためのMVP構造を提供します。
– [D3.js](https://d3js.org/): 最も人気のあるJavaScriptビジュアライゼーションライブラリの一つ。
– [React](https://reactjs.

元記事を表示

OTHERカテゴリの最新記事