Node.js関連のことを調べてみた2023年08月31日

Nextjsで.envが読み込まれない (undefinedになる)

# はじめに

Nextjsを使っていて調べてもなかなか解決までいかないことがあったので記事にしていきます

# 問題

Nextjsで`.env`から環境変数を読み込もうとしてルートディレクトリに`.env`ファイルを作り以下の内容を書きました

“`.env
API_PROXY=https://www.hoge.jp
“`

そして環境変数`API_PROXY`を読み込み表示します

“`index.tsx
cosole.log(process.env.API_PROXY)
“`

しかしなぜか`undefined`になり読み込みができませんでした

# 解決方法

ランタイムを`node`にしていたので環境変数の先頭に`NEXT_PUBLIC_`をつける必要がありました

“`.env
NEXT_PUBLIC_API_PROXY=https://www.hoge.jp
“`

“`ts
console.log(process.env.NEXT_PUBLIC_API_PROXY)
“`

これはクライアントでフロントを使うときには必要なので`use client`し

[備忘録]Blueskyのアプリを作る #1

JavaScriptとかAPIとかよくわからんけどBlueSkyのアプリを色々調べながら作ってみる。
BlueSkyがちょうどAT ProtocolでいろんなAPI出してるので調べながら徐々に組み上げていきたいと思います。
[AT Protocol](https://atproto.com/)

# どういう風に作るか
最初はPythonで作ろうかなって考えてたけど綺麗な見た目考えるのが面倒なのでReactのライブラリを使って組みたい。

Node.js上でBlueSkyに投稿する記事を見つけたのでそれを参考に作ろうかと。
[AT Protocol APIでBlueskyに投稿する | くらげになりたい。](https://www.memory-lovers.blog/entry/2023/07/09/152224)

見た目の部分は[Material UI](https://mui.com/)（以下MUI）を使用して、最終的には[Electron](https://www.electronjs.org/ja/)でデスクトップ・アプリーケーションにする予定。
※変更・追加するかも。

ExpressでWebサーバー構築

# はじめに
Webサーバーを構築する方法はたくさんありますが、私がインプットしたものを共有したいと思います。
Expressを用いることで、アクセス先のパスとアクセスの種類によって処理を柔軟に変更できるサイトを構築できます。

# 準備
この記事で紹介する方法を実現するために、いくつか準備をします。

:::note info
既に環境がある方は省略してください
:::

—

### 1. [Node.js](https://nodejs.org/ja “Node.js”)のダウンロード・インストール
### 2. [Git.Bash](https://gitforwindows.org/ “Git for Windows”)のダウンロード・インストール

説明

Git.BashとNode.jsについての細かい説明は割愛しますが、

– Git.BashはNode.jsを利用するため
– Node.jsはJavaScriptをパソコンで実行して、**Webサーバを建てるため**

と認識していただければと思います。

Node.js APMエージェントをどうしても試してみたいので、Node-Redにエージェント導入を試みる

:::note info
このアップデートの詳細はこちら
[New Relic アップデート](https://newrelic.com/jp/blog/nerdlog/new-relic-update “New Relic アップデート”)
:::

# はじめに
Node.jsが大好きだ。だけど、ガリガリとNode.jsを使ってアプリケーションを開発できるほどのスキルは持っていないので、いままで[Node.jsにAPMエージェント](https://docs.newrelic.com/jp/docs/apm/agents/nodejs-agent/getting-started/introduction-new-relic-nodejs/)を導入して遊んでみることができなかった。(**がんばれ自分!!**)

もしかしたら、Node.jsやっているエンジニアにとっては知っていて当たり前のことなのかもしれないけど、[Node-Red](https://nodered.org/)という**神**の様なNode.jsベースのソリューションがあることを知人に教えてもらいました。(**感謝感

NestJS 導入

# はじめに
この記事では、Node.js のフレームワークである NestJS のプロジェクトファイル作成手順について記載していきます。

https://nestjs.com/

# 開発環境
開発環境は以下の通りです。
– Windows11
– VSCode
– Node.js 20.5.0
– NestJS 10.0.0
– TypeScript 5.1.3

# プロジェクトの作成
まず、以下のコマンドで Nest CLI をインストールします。

“`
npm i -g @nestjs/cli
“`

https://github.com/nestjs/nest-cli

次に以下のコマンドでプロジェクトを作成します。
“`nest-crud-app“` はプロジェクト名です。また、“`–strict“` を追加することで、TypeScript の strict 系のコンパイラオプションが有効になります。

“`
nest new nest-crud-app –strict
“`
パッケージマネージャーを選択します。
![image.png](http

rails6でWebpacker::Manifest::MissingEntryErrorが発生した時の対処法

railsの環境構築時に詰まった箇所がありメモとして残します。
railsのバージョンを6系で固定して環境構築しようとしていました。
その時に`Webpacker::Manifest::MissingEntryError`というエラーが発生し何度か見たことがあるエラーだったため忘れないように記事に残します。

## 環境
`ruby 2.7.6`
`rails 6.1.6`

## エラー内容
railsプロジェクトを作成するときはこのコマンドです。

“`terminal
rails _6.1.6_ new myapp
“`

これでrailsのバージョンを指定してプロジェクトを作成できます。
この後ルートへのルーティングを整備してアクセスすると以下のようなエラーが発生しました。

“`
Webpacker::Manifest::MissingEntryError in Home#index
“`

## 対処方法
調べたところ`rails webpacker:install`, `rails webpacker:compile`を実行することで治ると書いてありました。
しか

2023年におけるアプリケーション開発向けの5つの主要なノードJS統合開発環境（IDE）

初めに
　Node.jsは、開発者にスケーラブルかつ効率的なサーバーサイドアプリケーションの構築を可能にする強力なJavaScriptランタイムです。この論文では、Node.jsアプリケーション開発における主要な統合開発環境（IDE）について検討します。適切なIDEを選択することで、生産性が大幅に向上し、開発プロセスが合理化されることが示されます。

　本記事は、開発者、新興企業、中堅企業、あるいは大企業の意思決定を支援し、最適なNode.js IDEの選択を通じて全体の開発生産性を向上させることを目的としています。

2023年におけるアプリケーション開発向けの5つの主要なノードJS統合開発環境（IDE）

1.　統合開発環境（IDE）とは何か？
　ソフトウェア開発は、経験豊富なソフトウェア開発者にとっても複雑な場合があります。アプリケーショ

GridDB、Node.js、Reactを使ってOpenAI APIトークン使用状況のダッシュボードを構築する

## はじめに

組織はアプリケーションを強化するためにOpenAI APIのような高度なAPIに依存しています。これらのAPIはAIや機械学習モデルとの対話を可能にします。しかし、API呼び出しのコストを決定するAPIトークンの管理は困難です。過剰使用は高コストにつながり、一方で過小使用ではリソースを無駄にしてしまいます。

この課題に対処するため、トークン使用状況を可視化するダッシュボードを提案します。データ管理にはGridDB、バックエンド開発にはNode.js、フロントエンドUIにはReactを活用します。このドキュメントは、問題を理解し、解決策を構想し、選択した技術で効果的に実装するためのガイドを提供することを目的としています。

## このブログの目的

このドキュメントの主な目的は、GridDB、Node.js、React を使用して OpenAI API トークンの使用状況ダッシュボードを構築するための徹底的かつ体系的なガイドを提供することです。

## セットアップと実行

[GitHub][1] リポジトリからソースコードをクローンします。

“`bash
git

mysql2/promise でGROUP BYが使えない

普通のSELECT文は取得できるけど、GROUP BYを使うと取得できなかったのでメモ。

# ×取得できないケース

“`javascript
const sql = ‘SELECT user_id, COUNT(*) AS cnt FROM table WHERE user_id IN (?) GROUP BY user_id;’;
const [rows] = await connection.execute(sql, [userIds]);

“`

# 〇取得できるケース

“`javascript
const sql = ‘SELECT user_id, COUNT(*) AS cnt FROM table WHERE user_id IN (?) GROUP BY user_id;’;
const [rows] = await connection.query(sql, [userIds]);

“`

connection.execute()だと複雑なSQLは取得できない

Next JSで画像を返すAPIを作る

Next JSで画像生成APIを作る時、調べてもなかなか出なかったので、ここに残しておきます

“`powershell
npm i canvas
“`
canvasのライブラリをインストールする

“`image.ts
import type { NextApiRequest, NextApiResponse } from ‘next’
import { createCanvas } from ‘canvas’;

export default async function handler(
req: NextApiRequest,
res: NextApiResponse
) {
const canvas = createCanvas(1920, 1080); //1920×1080の画像を作成
const ctx = canvas.getContext(‘2d’); //コンテキストを取得

res.setHeader(‘Content-Type’, ‘image/png’);
res.setHeader(‘Content-

【Node.js】簡易アプリ開発①～Node.jsインストール～

# Node.jsのインストール
### ① 以下URLにアクセス
　https://nodejs.org/ja
　※LTSを選択
### ② 最新LTS版のインストーラをダウンロード
### ③ インストールを進める
　(1) ①でダウンロードしたインストーラをクリック
　(2) セットアップ開始
　　　[Next] クリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2846445/fae02c

[Node.js] node.jsとnpmのアップデート

# 実行環境
– OS: macOS Ventura 13.0
# Node.jsのアップデート
nというnode.jsのバージョン管理ツール使う。nodebrewと同じ役割。

➀　nのグローバルインストール
“`
npm install -g n
“`
② インストールできるnode.jsのバージョン確認
“`
# 安定番
n –stable

# 最新版
n –latest
“`
③ Latestのインストール
“`
n latest

# 切り替わったか確認
node -v
“`

# Nodeのバージョン切り替え
nコマンドでインスローつされているバージョンの切り替えを行う。
nコマンドを実行して上下の矢印でバージョン選択。
“`
$ n

node/15.11.0
node/15.14.0
ο node/16.0.0
“`

#### インストールされているバージョンの確認
“`
n ls
“`

#### 不要になったバージョンの削除
“`
n rm 18.2.0
“`

# npmのアップデート

“`
npm update

express.js ( node.js ) – 公式チュートリアルが分かりづらいのが自力で進める

# 問題

Expressのチュートリアルは基礎的な説明が多く読みづらくてやってられない。
それよりも手軽に手を動かしながら動作させたい。

https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website

「分かりにくいものを噛み砕いて理解する。それがエンジニアの本分だ」
そう自分に言い聞かせながら。

# 環境

– express 4.16.1
– npm 9.6.7
– MacOS

# 準備

npm はインストール済みであることを前提とする

expressコマンドを使えるようにする

“`
npm install express-generator -g
“`

# プロジェクト作成

以下コマンドで指定ディレクトリ ( `express-locallibrary-tutorial` ) にexpressプロジェクトが作られる

“`
express express-locallibrary-tutorial –view=pu

LINEの公式アカウントからメッセージの自動送信

最近、LINEのMessaging APIとcloud funcionsを使って、公式ラインのメッセージ自動送信を実装してみたので、備忘録として残しておきます。

# Messaging APIの設定
以前にも設定についてまとめているので、今回は割愛します。
下記の記事から参照してください。

https://qiita.com/yappi-dev/items/21dd4a40f3e44672969a

# メッセージの送信方法とタイプ
メッセージタイプと送信方法は様々あるようで、送信方法は、よくある応答メッセージやプッシュメッセージ等があり、メッセージタイプはノーマルなテキストメッセージやスタンプメッセージなどがあるようです。

詳しくは、[公式ドキュメント](https://developers.line.biz/ja/docs/messaging-api/message-types/#template-messages)を参照してください！

今回は、テキストメッセージを公式アカウントを追加している人全員に対して送信するように実装します。
また、少しアレンジを加えて、funct

chatGPT(gpt3.5-turbo)のfine-tuningをnode.jsで触ってみた

`gpt-3.5-turbo` に `fine-tuning` ができるようになりました。
`node.js`を使って触った際に、[公式のAPI Reference](https://platform.openai.com/docs/api-reference/fine-tuning) だけだと少し分かりづらかったので、備忘メモ。

## 準備

– 適当な`node.js環境`を用意。
– `npm i dotenv openai` しておく。 （※ 最新バージョンの`openai`へ）
– `.env` に `OPENAI_API_KEY` として トークンを設置しておく。

## 学習データの用意

jsonオブジェクトを1行ごとに区切った `jsonl` 形式で用意。以下イメージ。

“`data.jsonl
{“messages”: [{“role”: “user”, “content”: “AAAAAAと何ですか？”}, {“role”: “assistant”, “content”: “AAAAAAとは〇〇〇〇〇〇〇〇〇〇のようなものです。”}]}
{“messag

DockerでQiitaCLIを構築する

# はじめに
皆さん、こんにちは。
普段はフロントエンドエンジニアとして働いているしがないエンジニアです。
今年の8月にQiitaCLIが正式にリリースされました。

今回はdockerコンテナを利用したQiitaCLIの環境構築方法を記載します。

自分のPCの環境は汚したくないという潔癖系エンジニアたち必見です。

ちなみに本記事もIDEより執筆しています。

# 簡単に使用環境
– macOS 13.4
– PHPStorm 2023.2
– Docker Desktop 4.22.0

※各自docker環境は構築してください。

# 今回のディレクトリ構造
“`
qiita-cli
├── Dockerfile
├── docker-compose.yml
└── qiita // ここに記事ファイルが入る

“`

## 1. Dockerfileの作成
それではdocker環境を作っていきます。
“`
% cd qiita-cli
% touch Dockerfile
“`

“`dockerfile:Dockerfile
FROM node:18-sl

npm エラー解決 Sorry, there’s a problem with nodist. Couldn’t resolve npm version spec match : Couldn’t find any matching version

# 経緯
Reactの開発環境を構築している最中に、npmコマンドをたたくと以下のようなエラーが発生した。
“`
Sorry, there’s a problem with nodist. Couldn’t resolve npm version spec match : Couldn’t find any matching version
“`
このエラーをググると、`nodist npm match`というコマンドが有用らしいのだが、こちらをたたいても以下のエラーとなり動けない状況だった。
“`
>nodist npm match
npm match
(node:11060) UnhandledPromiseRejectionWarning: Error: Version spec, “v0.12.2”, didn’t match any version
at Object.versions.find (C:\Program Files (x86)\Nodist\lib\versions.js:52:15)
at C:\Program Files (x86)\

LINE Botの自動返信メソッドをLambdaで作る

## 概要
– AWS LambdaとDynamoDBを使ってLINE Botを作ったので、その備忘録の1つです。
– この記事では、LINE Botの自動返信メソッドをLambdaで作る手順を説明します。

## 環境
macOS: 13.5.1
Homebrew: 4.1.4
Node.js: v18.14.1
aws-cli: aws-cli/2.13.7 Python/3.11.4 Darwin/22.6.0 source/arm64 prompt/off

## 前提条件
– [AWS CLI](https://aws.amazon.com/jp/cli/)のダウンロード・インストール済み
– CLI操作用のIAMユーザーを作成済み。
– IAMユーザーの作成方法は [以前書いた別の記事(CLI&コンソール作業用のAWS IAMユーザーを作成する)](https://qiita.com/zono345/items/d1934a812c88b655364a) を参照のこと。

## サマリー(全体の流れ)
1. DynamoDBの作成
1. Lambda用のIAMロール

[Node.js] Packeage.jsonにあるSemVerの表記まとめ

# Semantic Versioningとは
– パッケージ等ソフトウェアにバージョンを振るための手法
– SemVer(センバー)とも略される
– packeage.jsonなどパッケージを管理するファイルで使用されている
– Semantic　「意味論」

# 書き方
Semantic Versioningの例
“`
3.2.4
6.2.0
“`
左から「メジャーバージョン.マイナーバージョン.パッチバージョン」

#### メジャーバージョン(Major)
後方置換性がない変更の時に上がる数字
後方置換性とは旧製品に対して互換性を持っている新製品の性質。つまりメジャーバージョンが違うパッケージに変更すると、以前のように動かない可能性がある。

#### マイナーバージョン(Minor)
後方置換性がある変更の時に上がる数字

#### パッチバージョン(Patch)
バグ修正の時に上がる数字

# バージョン表記の記号
パッケージのバージョン名の前の記号の意味
#### ^(キャレット)
0でないメジャーバージョンを固定し、マイナー、パッチバージョンは指定されたバージョン以

(改)EC最安値を教えてくれるLINE Botを作ってみた

## LINE Bot初号機をTeachable MachineとNode-Redで進化

LINE Bot 2号機#protoout #linebot #ec #javascript #nodered pic.twitter.com/rIqvAGWXtf

— tnsato (@tnsato2000) August 24, 2023

日々の業務の中で店舗巡回時に、LINEへ商品コード（JAN）を打ち込むと3大ECモール(Amazon、Rakuten、Yahoo)それぞれの最安値がその場で分かるというLineBot初号機を前回作ってみました。MakeとSSSAPIを活用し事前に価格調査をまとめたスプレッドシートからデータを引張りLINEへ返すものでした。
【前回記事】

https://qiita.com/tnsato4000/items/ee6395df07a427573f22

実際運用してみて使い勝手に課題を感じました。店頭で通常13桁ある商品コード（JAN）の数値をLINEへ手打ちするのはかなり面倒だし、間違いやすいという点です。そこで今回は「Teachable Machine」と「Node-Red」を活用して、手打ち作業をなくし商品を撮影するだけで各モールの最安値がLINEに返ってくるという進化版に挑