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

openai-nodeを利用してChatGPTのAPIを実行してみるまで

## この記事は何
[openai](https://github.com/openai/openai-node)のnpmライブラリを使って、新規のプロジェクトからChatGPTのAPIを叩けるようになるまでを記事にしました。
これから触ってみたい！と言った人などの参考になればと思います。

## 環境
– Node.js v18.15.0
– TypeScript v5.0.3
– pnpm v8.1.0
– パッケージマネージャはお好みで

## APIキーの作成
OpenAIのアカウントを作成して[APIキー作成のページ](https://platform.openai.com/account/api-keys)より、API Keyを作成します。

モーダルで1度しかキーは表示されないため、注意してください。

## プロジェクトを作成
`package.json`と`tsconfig.json`の作成、必要パッケージのインストールを行います。
パッケージは下記をインストールしています。

– `openai`: OpenAI公式で提供している、OpenAI APIの利用をサ

nvmのインストール方法【Node Version Manager】

# nvmのインストール方法
1.Node Version Manager（nvm）をダウンロードする。
– https://github.com/coreybutler/nvm-windows/releases
2.`nvm-setup.exe` を起動する。
3.`I accept the agreement` を選択し、 `Next` を押下する。
![03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449867/

Node.js頻出の用語についてストックしていきたい

## 概要
職務上でNode.jsを使用する機会が増えてきたが、完全素人の何それ美味しいの状態なので、早い段階から整理していくことにする。

.
【参考資料】
・[Node.jsとはなにか？なぜみんな使っているのか？](https://qiita.com/non_cal/items/a8fee0b7ad96e67713eb)

### 1. モジュール
機能ごとに分割された小さなコードの単位で、JavaScriptファイルやファイルをまとめたフォルダを指す。

### 2. 内部モジュール
Node.jsのインストールに含まれている標準的なモジュールのこと
（例：fs、http）

### 3. 外部モジュール
npmなどのパッケージ管理ツールを使ってインストールすることができるモジュールのこと（例：gulp）

### 4. パッケージ
外部モジュールのこと。JQueryやGSAPとかのライブラリと似たようなニュアンス

### 5. npm
パッケージ管理（インストールなど）を実施するツールのこと。
（MacにおけるHomebrewと同類）

### 6. アセット
Webアプ

Node.js: ChatGPT Speech to text の使い方

こちらと同じことを Node.js で行いました。
[Curl: ChatGPT Speech to text の使い方](https://qiita.com/ekzemplaro/items/df9953f484f329ca11de)
音源も同じです。

## プログラム

“`js:node_text.js
#! /usr/bin/node
// —————————————————————
// node_text.js
//
// Apr/05/2023
// —————————————————————
‘use strict’
const axios = require(‘axios’)
const FormData = require(‘form-data’)
const fs = require(‘fs’)
const dotenv = require(‘dotenv’)

dotenv.conf

NodeJsで画像ファイルのダウンロードと保存(axios編)

# はじめに

前回の

https://qiita.com/SECUAL_masa/items/a90d44715cacbe7d472e

(↑)では、

> ※今時そんなコード？？？って驚かないで。色々理由があるのだ。

なこともあってrequestを利用した場合の話だった。
今回は axios を利用した際に同じ現象が発生したのでその対応方法をまとめる。

# 対応方法

前回の記事(request)ではoptionsに”encoding: null”を追加したが、今回は以下のように対応することで改善できた。

“`JavaScript:サンプルソース
var options = {
uri: “http://local_nginx_server_ip/globalipcam_resize_snap”,
responseType: “arraybuffer”
};
“`

# おわりに

この程度の内容だったら前回の記事のコメント辺りに書いたのでよかったのかもしれないが、記事にしたい理由がそこにはあるのだ。

Firebase Admin SDKを使用してFirebase Authenticationの匿名ユーザーを一括削除する方法

# 概要
Firebase Authentication の匿名認証を使っていると際限なく匿名ユーザーが増えていってしまう。
匿名ユーザーの上限は1億個なので通常は放置しても問題無いと思われるが、もしもの時を考えて一括で削除する方法を調べてみた。

# 環境
* ローカル環境
* Windows 10
* Node.js (v18.14.2)

# 事前準備
[firebase]>[プロジェクトの設定]>[サービスアカウント]>[Firebase Admin SDK] から新しい秘密鍵を生成。
分かりやすい名前に変更して(今回は`keyFile.json`とする)`my-app`フォルダに置く。
以降の作業は`my-app`フォルダ内で行うこととする。

# 作業
## 必要なものをインストール
“`
npm install firebase-admin –save
“`
“`
npm install readline-sync
“`
readline-syncは省略可。
削除の最終確認をしたいので追加している。

## コードを書く
“`JavaScript:index.

vscodeでcypressのintellisenseが見れない問題

# テスト環境
* node: 18.15.0
* yarn: 4.0.0-rc.42
* cypress: 12.9.0
* vscode: 1.77.0
* ubuntu: 20.04.6 LTS
* volta: 1.1.1

# 解決方法
* [IDE Integration (Cypress公式ドキュメント)](https://docs.cypress.io/guides/tooling/IDE-integration#Triple-slash-directives)
* この方法だとうまくいかなかったので、以下のようにする

* `/// `を一行目に入れる
* pathは適宜変更すること`node_modules/cypress/types/index.d.ts`があってればよい

# 原因
* `types=”Cypress”`は`nod

nginxのCORS問題を解決する

localhostでの制作tipsは山ほど出てきたけど
探し方が良くないのかlocalhost-サーバ間の情報って全然見つからない。

## 構成

| key | value |
|—|—|
| 用途 | APIサーバ |
| インスタンス | AWS EC2 |
| SSL | LetsEncrypt (Certbot) |
| Webサーバ | nginx |
| App実行環境 | node.js |
| フレームワーク | express (3000番ポートで稼働) |
| DB | MongoDB |

## nginxのリバースプロキシ,CORS設定
localhost⇔サーバ
サーバ⇔サーバ
におけるnginxの設定は以下で動くのを確認。

“`nginx
map $http_origin $cors{
“^http://localhost(:\d+)?” $http_origin;
“^https://chirimen-jako.com” $http_origin;
}

server {

Slackアプリへのメンションを契機にYes/Noボタンを返信して処理を分岐させる

## 概要
メンションを元に外部APIを叩き、取得した情報を元にDBを更新するSlackアプリを作成しました。
[](https://gyazo.com/c91da3569bb0ddadd7c40f768c0e4eea)

## Lambdaの準備
Node.jsでLambdaを作成しています。

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

const SLACK_BOT_TOKEN = process.env.SLACK_BOT_TOKEN;

exports.handler = async (event) => {
console.log(`Event: ${JSON.stringify(event)}`);
let body = “”;
if (event.isBase64Encoded) {
// ボタンを押された時のblock_actionsペイロードはb

Node.jsのバージョン切り替えに手こずった

普段案件でNode v10.12.0(古い上にLTSでもない)を使っているのですが、別件で最新版を使う必要がありv18.15.0にアップデート。

その結果、元のバージョンに戻せなくなり行き詰まったためその解決策を記録します。

結論から言うとなんてことのない、
**nodenvで管理していたことを忘れnodebrewで最新版をインストールしていたから**
でした。

## Nodeバージョン確認の流れ
まず現在のnodeバージョンとインストール済みのバージョンを確認
“`
現在
$ node -v
v18.15.0

インストール済み
$ nodebrew ls
v18.15.0
v16.20.0 (←いつインストールしたのかわからない)
“`

使いたいバージョンが出てこない…
仕方なくもう一度インストールを試みる。
“`
$ nodebrew install-binary v10.12.0

v10.12.0is not found
Can not fetch: https://nodejs.org/dist/v12.16.3/node-v12.16.

gRPCをTypeScriptで使う

gRPCは様々な言語に公式に対応しているが、残念ながらTypeScriptには対応していない。
PureなJavaScriptはIDEの恩恵が十分に得られないなど不満があったため、TypeScriptでgRPCを扱う方法を調査しここにまとめる。

## 環境構築手順
#### 前提
Node.jsがインストールされていること

### 1. プロジェクト作成とパッケージインストール
以下のコマンドを実行し、プロジェクトの作成と必要なパッケージをインストールする。

“`bash
npm init -y
npm install @grpc/grpc-js google-protobuf @types/google-protobuf typescript ts-node
npm install –save-dev grpc-tools grpc_tools_node_protoc_ts
“`
#### それぞれのパッケージの概要

– @grpc/grpc-js
– gRPCのJavaScript用パッケージ。以前はgrpcというパッケージで提供されていたらしく、古いサイト

Node.js + TypeScriptでexpressの入力支援、型推論を表示させるまで

## `typescript`、`express`をインストール

“` bash
npm init -y
npm install typescript
npx tsc –init
npm install express
“`

## `app.ts`を作成
“` js
touch app.ts
“`

## `app.ts`で`express`を`require`したところエラーが出た

“` js
const express = require(‘express’)
“`


“`
TS2580: Cannot find name ‘require’. Do you need to install type definitions for node? Try `npm i –save-dev @types/n

Apple silicon Macに移行したらdeasyncのnpm installでエラーになった話

# はじめに

Intel Macで開発していたWebアプリケーションの開発環境をApple silicon Macにも構築しようとしたところ、フロントエンドのコンテナ起動時に以下のようなエラーが表示されました。

“`shell:エラーログ(抜粋)
> deasync@0.1.24 install /app/node_modules/deasync
> node ./build.js

gyp ERR! find Python
gyp ERR! find Python Python is not set from command line or npm configuration
gyp ERR! find Python Python is not set from environment variable PYTHON
“`

どうやら Python が見つからなかったようですが、フロントエンドは TypeScript で開発しており Python は使っていません。

* フロントエンドで使っていないはずの Python がなぜ必要なのか？
* Intel Mac での実行

nodenv で Node.js のバージョンを切り替える

Node.js の version 切り替えをしたかったので [nodenv](https://github.com/nodenv/nodenv) を入れてみました。

## 準備

“`bash
$ brew install nodenv
“`

“`bash
$ vim ~/.zshrc

# vim に書き込む
export PATH=”/opt/homebrew/opt/nodenv/bin:$PATH”
eval “$(nodenv init -)”
“`

## コマンド一覧

“`bash
# インストール可能な Node.js のバージョン一覧
$ nodenv install -l

# install
$ nodenv install

# nodenvに認識させる
$ nodenv rehash

# install 済みの Node.js を確認
$ nodenv versions

# ローカルで利用する Node.js のバージョンを設定する
$ nodenv local

# グローバルで利用する Node

Node.jsを基本からまとめてみた【Express入門】

## Node.jsとは？
Node.jsは、Googleが開発したV8 JavaScriptエンジンを使用し、サーバーサイドのJavaScriptアプリケーションを実行するためのランタイム環境のこと。わかりやすくすると、本来ブラウザ上でのみ動作するJavaScriptを、パソコン上で実行できる環境を作れるということ。
これにより、ブラウザ上では実現できなかったサーバーサイド（OS機能等）へのアクセスを実現し、自由にファイルの読み書きやネットワーク通信を実現できる。
また、Node.jsでは、高速でスケーラブルなネットワークアプリケーションを開発するための豊富なツールとライブラリが提供されているのも特徴の一つで、ウェブサーバーやAPIサーバー、ストリーミングサーバー、リアルタイム通信アプリケーションなど、さまざまな種類のアプリケーションの開発に利用できる。

## Expressとは？
Expressは、複雑なWebアプリを効率よく開発できるようにさまざまなモジュールが統合されたフレームワークで、特に、独自のサーバー開発やGET/POST通信などを簡単な記述で実現できるフットワークの軽

Playwrightで楽天カードのCSVを自動で取得するクローラーを作った

## はじめに
クレジットカードの利用明細はPDFやCSVでダウンロードすることができますが、これらを手動で取得するのは手間がかかります。
うまく改造すればfreeeへの自動連携なども考えられます。
ビジネスカードのAPI非対応の履歴も取れますので、色々と利用できそうです。
そこで、Playwrightを使って自動化することで、手動での取得作業を自動化することができます。

以下は取得したcsvから月の支払金額をLine通知するサンプルです
https://github.com/natsumeaurlia/rakuten-csv

## 準備
適当な作業ディレクトリを作成。
必要なパッケージのインストール方法
以下のコマンドで、必要なパッケージをインストールします。

“`bash
npm init playwright@latest
npm install playwright dotenv
“`

### ドライバーのダウンロードと設定方法
Playwrightでは、実行するブラウザに応じたドライバーを必要とします。本クローラーでは、Chromiumを利用するため、以下のコマ

“Lambda API”と”Serverless Framework”を使ってLambda上にサーバーレスAPIを構築する

## 前置き

APIの構築というジャンルでは[AWS Lambda](https://aws.amazon.com/jp/lambda/) + [AWS API GateWay](https://aws.amazon.com/jp/api-gateway/)という組み合わせは鉄板ではないでしょうか。メンテナンスが不要でコストが低く、サーバ運用の悩みを抱えなくて済むので気に入っています。

ですがLambdaと出会った頃の私は「Lambdaにどんなソースコードを書いたらいいのかわからない」となっていました。
そして少しの時が経ち、最近の私はAPIの処理を[Lambda API](https://github.com/jeremydaly/lambda-api)で実装し、それを[Serverless Framework](https://www.serverless.com/)によって展開するのがかなりイケてるのではと思うようになりました。この記事ではこの構成について解説します。

名称がとてもわかりにくいのですが、Lambda APIもServerless Frameworkもフレーム

【Node.js】今更ながらSlackでChatGPTアプリを作ったよ

Slack公式のChatGPTのアプリがあるのにも関わらず、
今更ですが、SlackでChatGPTアプリを作りました。

### SLACKアプリ作成

こちらの記事を見て作成する。
https://qiita.com/tatsuya1970/items/e45af6b4b2131979b940

## OpenAI

OpenAIのページへ
https://openai.com/api/

[Get Started]
[](https://gyazo.com/6b2bc6c20e7467e0b392f6138076bcd5)

“Verify you are human”と表示されたら、ボタンをクリックする。

Log in
【Node.js】Slackアプリの作り方

## まず

Slack Api のサイトへ
https://api.slack.com/apps

「Create an App」をクリック
[](https://gyazo.com/9e1538d8be28ecadf13a25c7ebc4ae14)

「From Scratch」をクリック
[](https://gyazo.com/c56640fe0b9b38b8e5e1e48d1f2cddda)

「App Name」 を入力、
ワークスペースを選んで、
「Creare App」をクリック
[](https://gyaz

【React × TypeScript】ReduxのStateを更新時にリロードなしで画面描画する方法

# はじめに
先日Notionのクローンアプリを作成時に、記事タイトル更新とお気に入り機能を実装したのですが、リロードしないと画面に反映することができず、もどかしかさを感じましたため、本記事に解消方法を記載します。

# アプリ概要
:::note info
ルーティング設定
:::
以下が、`react-router-dom`のルーティングになっています。
“`App.tsx
import { BrowserRouter, Route, Routes } from “react-router-dom”;
import “./App.css”;
import AuthLayout from “./components/layout/AuthLayout”;
import Login from “./components/pages/Login”;
import Register from “./components/pages/Register”;
import { createTheme, CssBaseline, ThemeProvider } from “@mui/materi