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

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

kintone プラグイン一覧取得

kintone REST API に、インストール済みプラグイン一覧取得が追加されたので、試してみました。

# 概要

既存のプラグインID を簡単に取得できます。

>[インストール済みのプラグインの一覧を取得する](https://cybozu.dev/ja/kintone/docs/rest-api/plugins/get-plugins/)

開発は、[kintone プラグインアップロード処理](https://qiita.com/rex0220/items/ea321d0573b83607ab2c)をもとにchatGPT で、API を変えてループ処理にしました。

# プラグイン一覧表示

プラグインのインストール順に、表示されます。

“`実行ログ.log
> node .\scripts\listPlugin-api.js
*** Plugin List ***
# pluginId, name, version, pluginStore
1 gbjnadbngbniopdeibcjihdkhkcinljf : 項目絞り込み, 24, false
2 jaclnk

元記事を表示

kintone プラグインアップロード処理

kintone REST API に、プラグインアップロードが追加されたので、試してみました。

# 概要

kintone にプラグイン関連の REST API が追加されました。
plugin-uploader は、ブラウザー経由でプラグインをアップロードするため、よく失敗する。
またそれなりに処理時間もかかるため、REST API を試してみました。
REST API 版アップロードは、処理時間が早く、アップロードの失敗も無くよさそうです。

> cybozu developer network>kintone>kintone APIドキュメント>kintone REST API>プラグイン
– [プラグインを読み込む](https://cybozu.dev/ja/kintone/docs/rest-api/plugins/add-plugin/)
– [プラグインを更新する](https://cybozu.dev/ja/kintone/docs/rest-api/plugins/update-plugin/)

開発は ChatGpt に、コードを生成してもらい、動作しない部

元記事を表示

GitHub Action で npm ci 高速化のために cache を使ってみる実験ノート

## 背景

GitHub Actions で、ユニットテストのフレームワークである Vitest を 動かそうとしていました。Vitest を動かすには、Node.js 環境を構築してパッケージインストールをして、という動作が必要になります。

パッケージのインストールは、あまり数が多くないうちは問題にならないにしても、増えてくるとパッケージインストールに時間を食われるようになってきます。

そのとき、インストールしたパッケージを丸々保存しておき、次使うときに復元してやることで、パッケージインストールにかかる時間を減らすことができ、ワークフローの実行時間を減らすことができます。GitHub Actions では、cache という機能があり、それを活用できます。

(今のところ、使っているパッケージは Vitest のみで実行時間は問題になっていないのですが、) 興味を持ったこの機会に cache 機能を使っての効果を確かめてみることにします。

## 下準備

適当に GitHub のリモートリポジトリを用意し、それをクローンしたローカルリポジトリ上で作業をします。

“`sh

元記事を表示

しくみを理解!VS CodeによるNode.js・TypeScriptのデバッグ設定方法

## はじめに
[以前の記事](https://qiita.com/course_k/items/eecf57aa1f5d7e9a55a4)で、ReactとTypeScriptのVS Codeでのデバッグ設定をまとめました。

今回はNode.jsとTypeScriptで開発する際のデバッグ方法をまとめます。

## 設定ファイルの生成
VS Codeの「実行とデバッグ」メニューから「launch.jsonファイルを作成します。」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251137/d7b36845-96f8-b1be-aea0-ced94fdcb967.png)

デバッガーの選択に移るので、「Node.js」を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251137/17de710f-29ee-fc02-53ff-5a7f559a2d86.pn

元記事を表示

【解説付き】Node.js + ExpressのAPIサーバをgraceful shutdownする【実装例付き】

## はじめに

こんにちは!Gopherくん大好きマンの[@o_ga09](https://x.com/o_ga09)です!

## TL;DR

– この記事を読むと
– Graceful Shutdownを理解できる
– Graceful Shutdownを実装しないと起き得るエラーを理解できる
– Graceful Shutdownを実装できるようになる

## 対象読者

– バックエンドエンジニア
– コンピュータにおけるプロセス・スレッドが理解している
– 何かしらの言語でAPIサーバの実装経験がある
– Dockerを使用したことがある

## 免責事項

本記事における実装はサンプルです。本記事を参考にして実装されたコードで起こる障害に関して筆者はいかなる責任も負いかねます。

## 目次

– [事象](#事象)
– [原因](#原因)
– [アーキテクチャ](#アーキテクチャ)
– [1. Graceful Shutdownとは](#1-graceful-shutdownとは)
– [2.OSのシグナルの種類](#2-osのシグナルの種類)

元記事を表示

【Dockerfile】Node.js / TypeScript のコンテナを作成

# はじめに
この記事では、Dockerfile からビルドしたイメージを元に Node.js / TypeScript のコンテナを作成する手順について記載します。

以下の記事の Node.js / TypeScript バージョンです。

https://qiita.com/Yasushi-Mo/items/0c6ed9be966f764ff7ca

# 開発環境
開発環境は以下の通りです。

– Windows11
– Docker Engine 26.1.1
– Node.js 20.15.1
– npm 10.8.2
– @types/node 20.14.10
– ts-node 10.9.2
– TypeScript 5.5.3

# Node.js / TypeScript アプリケーションの作成
まずは、Node.js / TypeScript アプリケーションを作成します。

## `package.json` の作成
`package.json` を作成します。

https://docs.npmjs.com/cli/v10/commands/npm-init

元記事を表示

【Node.js/TypeScript】比較して理解する ts-node

# はじめに
この記事では、TypeScript を JavaScript にコンパイルして実行する方法と ts-node を使って TypeScript を直接実行する方法について記載します。

https://typestrong.org/ts-node/

# 開発環境
開発環境は以下の通りです。

– Windows11
– Node.js
– npm 10.8.2
– @types/node 20.14.10
– ts-node 10.9.2
– TypeScript 5.5.3

# JavaScript にコンパイルして実行する方法
まずは JavaScript にコンパイルして実行する方法を記載します。

## 1. package.json の作成
`package.json` を作成します。

https://docs.npmjs.com/cli/v10/commands/npm-init

コマンド実行中の質問をスキップするため、`-y` をつけて実行します。

“`powershell
npm init -y
“`

`package.json` が作成され

元記事を表示

WSL2内にNode.jsが動作するDocker環境を用意した(Docker Compose)

# これはなに?

前回の続きになります

https://qiita.com/acronhub/items/49523a7edf79f18ae11d

Docker Compose のボリュームマウントを利用して、コンテナ内のフォルダーの内容を変更できるようにします

– マウントしない場合は、イメージにフォルダーの内容を保存しているため、変更するにはイメージの再作成が必要になります
– docker コマンドを直接使う場合であっても、コマンドラインオプションを付けることでボリュームマウントすることもできます

# 環境

– Windows11
– WSL2
– Ubuntu 20.04
– Docker Desktop
– VS Code
– Remote WSL

# 準備

必要なファイルを作成します

## .dockerignore

ボリュームマウントするので不要になったファイル・フォルダを管理外として設定します

“`.dockerignore
node_modules
“`

## docker-compose.yml

元記事を表示

何となく使っている”npm”ってなぁに?

# はじめに

多くの開発者が日常的に使用しているnpmですが、その仕組みや重要性を深く理解している人は意外と少ないのではないでしょうか。
私もそうです。

この記事では、調べて分かったnpmについてのいろいろを説明していきます。

# npmって?
npmはNode Package Managerの略称で、JavaScriptのパッケージ管理ツールです。
Node.jsのデフォルトパッケージマネージャーとして広く使用されています。

パッケージのインストールと管理、バージョン管理、そして依存関係の解決という割と重要めな役割を担っています。

# npmの歴史
npmは2010年にIsaac Z. Schlueterによって開発されました。

Node.jsの普及と共に急速に成長し、現在では世界最大のソフトウェアレジストリとなっています。
150万以上のパッケージが登録されており、その数は日々増加しています。

2020年にはMicrosoftがnpmを買収し、将来的にはGitHubとnpmの統合が進むと言われています。

# npmの基本的なところ
npmの基本機能は主に三つありま

元記事を表示

くわしく解説!VS CodeでのTypeScripとReact開発のデバッグ設定方法

## はじめに
VS Code上でデバッグを行う際、諸々の設定に手間取ったので、TypeScriptとReactで開発する場合のデバッグの設定について解説します。

:::note warn
デバッグ自体を実行する方法(ブレークポイントの設定や、ステップ実行など)については触れていません。
あくまでもデバッグを有効化するための設定についての解説となります。
:::

## 事前準備
JavaScript DebuggerというVS Codeの拡張機能が必要ですが、デフォルトでインストールされているはずなので、特に新たにインストールする必要はありません。

:::note warn
古いVS Codeを使用している場合には、別途インストールが必要です。
:::

## TypeScriptとReactでのデバッグ
### 設定ファイル生成
デバッグを行うためには「launch.json」というファイルに設定を記載する必要があります。

以下のようにVS Codeの「実行とデバッグ」メニューから「実行とデバッグ」ボタンを押下します。
![image.png](https://qiita-

元記事を表示

pnpm + Astroの構成で、GitHub Pagesにデプロイする自前のGitHub Actionsを設定する

:::note info
本記事では、GitHub Actionsの基本的な扱い方は知っているものとして進めています。GitHub Actionsの基本的な事項は他の記事などをご参照ください。
:::

## 要約
ルートディレクトリ直下の`/frontend`フォルダにソースがあるとして、以下のようなワークフローを設定しました。mainブランチにpushされた場合(マージされた場合)にデプロイが実行されます。

参考として、以下のリポジトリのサイトはこの記事の方法でデプロイしています。

https://github.com/mochi-yu/mochi-yu.com/tree/v1.0.0

ソースコード全文

“`yaml:deploy.yaml
name: Deploy to GitHub Pages

on:
push:
branches: [ main ]
workflow_dispatch:

permissions:
contents: read
pages: write
id-t

元記事を表示

Lambdaで使ってるNode.jsを18.xにアップデートした話 a.k.a 技術的負債の解消

# Node.js 14.xから18.xへのバージョンアップと周辺技術の更新

ソフトウェアの進化は早く、定期的なアップデートは避けて通れません。

https://qiita.com/autotaker1984/items/a3091772dbb0fb91473d

このたび、サービスで利用しているLambdaのランタイムにおいて、Node.jsをバージョン14.xから18.xへとアップデートしました。

このことに伴い、多くの周辺ライブラリやツールもアップデートまたは置き換えを行いました。
本記事では、その過程で直面した障壁とそれを乗り越えた経験を重点的に紹介します。

## アップデートの背景

大きな理由としてNode.jsの14.xバージョンがサポート終了を迎え、AWSのLambdaでも14.xがDeprecatedとなったことから、アップデートを決断しました。

Node.jsの16.xも検討しましたが、すでに対応した当時であってもサポート終了が2024年6月12日と間近に迫っていため、18.xにアップデートしました。

https://docs.aws.amazon.co

元記事を表示

ClaudeやChatGPTにリポジトリを丸ごと読み込ませるコマンドを作りました!

Claude を使ったコーディング体験が素晴らしかったので、より簡単に Claude と一緒にコーディングするための Node.js コマンドを作りました。

リポジトリの直下で以下を叩くと `repopack-output.txt` というファイルが出来上がります。
“`bash
$ npx repopack
“`

そのまま Claude に次のようなプロンプトと一緒に送ると、
“`txt
このファイルはリポジトリのファイルを1つにしたものです。コードのリファクタをしたいのでまずコードを確認してください。
“`

全体の内容を理解した上で、リファクタリングなどを進めることができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54810/2dabbd5d-53cd-4485-5d83-43acf3958120.png)

具体的な内容を提案すると、それに従って良い感じのコードを生成してくれます。Claude だと Artifacts 機能で複数のファイルが出力できるため、

元記事を表示

PM2でNuxt3をデプロイする

## ローカルの設定
pm2をグローバルにインストールします。

https://pm2.keymetrics.io/docs/usage/quick-start/
“`
yarn global add pm2
“`

ecosystem.config.jsという設定ファイルを作る。
これは、本番サーバーの設定情報を書くので、
基本、.gitignoreするべきかと思ったが、
そうすると、後のコマンドでecosystem.config.jsファイルがないって
怒られるので、環境変数化したい

“`:ecosystem.config.js
module.exports = {
apps : [
{
name: ‘my-nuxt-app’,
exec_mode: ‘cluster’,
instances: ‘max’, // またはアプリケーションを実行したいインスタンスの数
script: ‘./src/.output/server/index.mjs’,
args: ‘start’
}
],

元記事を表示

Dropbox APIを使ってファイル共有

Dropbox APIを使って、Dropboxにファイルをアップロードし、他の人とファイルを共有します。Dropboxを一時的な格納庫として利用します。
Dropbox APIで以下のことを実現します。

* ファイルをアップロードして、自身の複数の端末から共有できます。
* アップロードしたファイルを共有して、複数の人がダウンロードできます。
* 他の人からファイルのアップロードを受領します。

もろもろのソースコードはGithubに上げてあります。

https://github.com/poruruba/ClippingService

構成要素
* プライベートサーバ : ブラウザで動作するクライアントとDropboxを仲介するためのサーバです。クライアント向けのWebページの提供とWebAPIの処理を担っています。また、DropboxからのWebhook呼び出しも受け取ります。
* Dropboxサーバ : 共有するファイルを管理してもらうサーバです。
* 管理クライアント(ブラウザ): 共有するファイルを管理するためのクライアントです。PWAです。
* 一般クライアント(ブ

元記事を表示

WSL2内にNode.jsが動作するDocker環境を用意した

# これはなに?

WSL内に、Nodeが動作するDocker環境を作成してみました

# 環境

– Windows11
– WSL2
– Ubuntu 20.04
– Docker Desktop
– VS Code
– Remote WSL

# 準備

必要なファイルを作成します

![folder.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266407/8f566143-760a-aad9-ef75-120846987efe.png)

## package.json

ファイルがないので、以下のコマンドで作成しました

“`console
$ yarn init
“`

作成されたファイルを少し修正して以下のようにしました

“`json
{
“name”: “test”,
“version”: “1.0.0”,
“description”: “”,
“main”: “main.js”,
“scripts”: {

元記事を表示

TypeScripファイルをjsに変換してブラウザへ返すexpressミドルウェア

## はじめに

htmlでは、通常通りにjsを読み込んでいますが、
“`html



“`
実はサーバー側はTypeScriptのファイルしかおいていないので、Webサーバー(Express)が動的にjsにトランスパイルして返す、というミドルウェアを作りました

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276579/efc9c0ac-a160-58a6-d625-5ef658a9a25f.png)

利用方法:静的ファイルを返すexpress.static()の直前に読み込むと
* js/tsファイルのリクエストを受け取り、tsファイルを読み込む
* ファイルをトランスパイルしてブラウザに返す
“`js
app.us

元記事を表示

EACCES: permission deniedの解決方法

# 背景と問題
Reactの新しいプロジェクトを作り、`npm start`で実行したら以下のエラーメッセージが表示された。

“`bash:bash
[eslint] EACCES: permission denied, mkdir ‘/Users/username/Documents/dev/react-teset-app/node_modules/.cache’
“`

# 原因
上記のエラーメッセージは**ディレクトリの作成権限**がないため発生している。
(nodeの再インストールも試してみたがエラーはそのままだった。)

# 解決

ターミナルで以下のコマンドを実行することで解決できた。
下記のコマンドはプロジェクトディレクトリに適切な権限を設定している。

:::note warn
ディレクトリのパスは各自で適切に変更して実行してください。
:::

“`bash:bash
sudo chown -R $USER:$GROUP /Users/username/Documents/dev/react-teset-app
“`

### コマンドの解説

– `su

元記事を表示

Express.jsとPostgreSQLを使った基本的なサーバー構築

# Express.jsとPostgreSQLを使った基本的なサーバー構築
この記事では、Node.jsのフレームワークであるExpress.jsを使用して基本的なサーバーを構築し、PostgreSQLデータベースと連携する方法を紹介します。静的ファイルの提供、データの取得、データの送信方法について解説します。

必要なnpmパッケージ
“`terminal
npm install express pg
“`
使用するnpmパッケージ
express: Node.js用のウェブフレームワークで、サーバーの構築に使用します。
pg: Node.js用のPostgreSQLクライアントで、データベース接続に使用します。

PostgreSQLデータベースに接続するための設定を行います。

“`javascript
const { Pool } = require(“pg”);

const pool = new Pool({
user: “your_db_user”,
host: “localhost”,
database: “your_db_name”,
passw

元記事を表示

Mongooseの基本を簡潔に

# Mongooseを使ってみよう:MongoDBとのデータ操作を簡単に!

Mongooseは、Node.js環境でMongoDBを扱うためのオブジェクトデータモデリング(ODM)ライブラリです。Mongooseを使用することで、スキーマを定義してデータをバリデート、クエリ、保存、削除することが簡単にできます。本記事では、Mongooseの基本的な使い方を紹介します。

【公式ドキュメント】

https://mongoosejs.com/docs/api/mongoose.html

## インストール
まず、Mongooseをプロジェクトにインストールする必要があります。以下のコマンドを使用してインストールします。

“`bash
npm install mongoose
“`
基本的な使い方
### 1. MongoDBへの接続
Mongooseを使用する前に、MongoDBデータベースに接続する必要があります。以下は、Mongooseを使用してMongoDBに接続する基本的なコードです。

“`javascript
const mongoose = require(‘m

元記事を表示

OTHERカテゴリの最新記事