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

Node.js + Next.js でアプリを作成してみた【Express Backend + Next.js & React Frontend】

## プロジェクトを作成する

“`
mkdir <プロジェクト>
npx create-next-app client
npm init
“`

## Node.js + Next.js Sever Setup

“`
cd server
touch server.js
npm i express
npm i nodemon –save-dev
“`
“`server/package.json

“`

“`server/server.js

“`

## 参考サイト
[How to Create a Node.js + Next.js Project | Express Backend + Next.js & React Frontend](https://www.youtube.com/watch?v=5Vxx5UkjV4s)

問い合わせフォームの内容をシステム入れ替えをしないでAIでいい感じにしてAsanaに投入する

## なにをしたいか
– 日々来る問い合わせフォームで効率よく処理をしたい
– タスク管理ツールで管理をしたい

### できたもの
特定のメールアドレスに文章を投げるといい感じでAIがサマライズしてAsanaにタスクを作ってくれるサービス

### Asanaに作られたタスク例

何故かNode.jsがダウンロードできないMacユーザー。。。ターミナルの返答は「Make sure that /usr/local/bin is in your $PATH.」

Web制作者のためのsassの教科書改訂2版を購入したので、早速環境を設定！
していたのですが…Node.jsのインストーラーをダウンロードはOK
しかしターミナルから「Make sure that /usr/local/bin is in your $PATH.」
と表示されnodeはインストールできません。。。！

結果は、シェルつまりターミナルでなんとかしました💦

シェルやターミナル・バックエンドの知識がある方は
すぐ「usr」フォルダがないからじゃないのと読めると思います！
私は。。。分かりませんでした！
なので、まぁ久しぶりにターミナルで「ls」から対象を探して、
「usr」フォルダなんて存在しないからだと1時間格闘して原因判明。。。

railsの学習時もそうでしたが、ターミナルの使い方はWeb制作側でも多少は
知っておいくと困った時の対処の方法が広がって助かりますんね😆

nvmを使ったNode.jsのバージョン管理で詰まって時間を溶かした話

## はじめに
業務でTypeScriptとReactを使って新しくプロジェクトを作ることになりました。
その際、Node.jsのバージョンを普段使っているものと異なるものにする必要があったため、nvmを使用しました。
そこで悪戦苦闘し、時間を溶かしてしまったのでその経緯を記録として残します。

## 要はしょうもないミス
長くなるので先に結論から書いておくと、原因は以下の2点に集約されます。
* `nvm`を入れる前に、Node.jsをアンインストールするべきだった
* `volta`というバージョン管理をすでに導入していたのを忘れていた

どちらも初歩的なミスですが、これに気づかずかなりの時間うんうんうなっていました。
では、解決のために何をしたのかを書いておきます。

## やったこと
### viteの導入
“`bash
yarn create vite
“`
これは成功

### 依存関係のインストール
“`bash
yarn
“`
ここで以下のように失敗
![image.png](https://qiita-image-store.s3.ap-northeast-1

npm auditに毎回やられる。

# npm audit ってなに？

npm audit は、Node.js のパッケージマネージャーである npm のコマンドの一つで、プロジェクトの依存関係に含まれるセキュリティ脆弱性をスキャンし、レポートするためのものです。このコマンドは、依存関係に潜在的なセキュリティリスクがあるかどうかをチェックするために使用されます。

npm audit の基本的な使い方
スキャンの実行:
プロジェクトのルートディレクトリで npm audit を実行すると、現在インストールされているすべてのパッケージのセキュリティレポートが生成されます。

# 一回バックアップを取っておく

### 現在の依存関係のバックアップ
package.json と package-lock.json をバックアップして、問題が発生した場合に元に戻せるようにします。
“`sh
cp package.json package.json.backup
cp package-lock.json package-lock.json.backup
“`

### 依存関係の修正
npm audit fix –fo

[プラグイン]kyselyのマイグレーションを拡張した

## kysely とは

Typescript のクエリビルダーです。
手前味噌ですが去年紹介記事を書いています。

https://qiita.com/mont_blanc/items/0564a946b0d6919ad3a0

上の記事の時点では`PostgreSQL`, `MySQL`, `SQLite`が使えてましたが`SQLServer`も増えているみたいです。

本家のドキュメント(トップページ)はこちら

https://kysely.dev/docs/intro

## kysely におけるマイグレーション

マイグレーションファイルの書き方は knex とよく似ていますが、「マイグレーションの実行」部分を自分で書く必要があります。
その分、自由度が高いともいえますが、少し面倒です。

https://kysely.dev/docs/migrations

## マイグレーションでほしい機能を自作する

手前味噌その2ですが、 kysely 系 npm パッケージをつくっています。
主に PostgreSQL に特化した追加機能を実装しています。
現在の最新バージョ

Node.jsでのモジュールインポートと環境変数の取り扱いに関して

最近、モジュールのインポートに関連して次の二つの問題が発生した。

– フロントエンドで単純なヘルパー関数をインポートする際に、Webpackを使ってビルドすると多くのモジュールresolveエラーが発生
– `import “dotenv/config”`を使用しているにも関わらず、インポートしているライブラリ内で使用する環境変数がundefinedになってる

これらの問題をきっかけに、Node.jsのモジュールシステムについて再学習した。

# TL;DR

– Node.jsでは、1ファイルが1モジュールとして扱われる
– モジュールをインポートする際、Node.jsはそのモジュール内のすべてのコードを実行し、メモリにキャッシュする
– インポートするモジュールが他のモジュールをさらにインポートしている場合、インポート文の順序に従って上記の処理を繰り返す

そのため
– 単純なヘルパー関数をインポートする場合でも、その関数が属するモジュールの中身全体が読み込まれるため、フロントエンドのWebpack環境でサポートされていない関連モジュールがあるとModule not foun

WebSocket Serverで Uncaught SyntaxError: Unexpected token ‘o’, “[object Blob]” is not valid jsonが出たときの対処法

## はじめに
去年、私自身が[WebRTCハンズオン 本編](https://qiita.com/yusuke84/items/43a20e3b6c78ae9a8f6c)を使用して、WebRTCの勉強をしていた時につまずいた部分で、今年研究室に入ってきた後輩も困っていたので、改めてエラーの原因を調べました。

## 発生した現象
### エラーが発生した部分
ハンズオン資料の**STEP4 シグナリングサーバを使ってWebRTCをつなげよう**の部分で、送信用のクライアント端末からシグナリングサーバーにSDPを送信します。その後、シグナリングサーバーはSDPを受信用のクライアント端末に転送します。この転送されたSDPを受信用のクライアント端末が解析する際にエラーが発生します。

### 現象
受信用のクライアント端末で文字列をJSONとして解析する部分で、**Uncaught SyntaxError: Unexpected token ‘o’, “[object Blob]” is not valid json**というエラーが発生する。

このエラーは「**[object Bl

Node.jsでCLIツールを作ろう！〜Commanderを使ったコマンド実装パターン〜

# はじめに
Node.jsを使ってCLIツールを開発する際に便利なのが、“`Commander“`ライブラリです。Commanderを使うと、コマンドラインからの入力を簡単に解析し、適切なアクションを実行することができます。
今回は、Commanderを使ったコマンド実装のパターンを紹介します。このパターンに従うことで、CLIツールに新しいコマンドを追加するのが容易になります。

# プロジェクトの構成
プロジェクトのディレクトリ構成は以下のようになります。
“`
src/
├── commands/
│ ├── server.ts
│ └── ・・・
└── index.ts
“`
“`src/commands/“`: 各コマンドの実装を格納するディレクトリ
“`src/index.ts“`: コマンドを登録し、CLIツールのエントリーポイントとなるファイル

# コマンドの実装
まずは、“`src/commands/server.ts“`を作成し、serveコマンドを実装します。

“`ts:server.ts
import { Co

node.jsのバージョン管理ツールはどれを使うべきか？

## 結論
### 結論パターン0
バージョン管理などそもそも考えない（答えになっていないが・・・）

### 結論パターン1
自分の好きなのを使う（答えになっていないが・・・最終的にはここに収束するような気もする）

### 結論パターン2
node.js公式のインストール方法で説明されているパッケージマネージャーを使用する
* Windowsの場合:　fnm　または　chocolatey
* macOS/Linuxの場合:　nvm　または　fnm

上記からクロスプラットフォームを考慮する場合の選択肢はfnmとなる。node v20.0.0が出たころは、fnmは掲載されいなかったと記憶しているので、fnmは比較的新しいものと思われる。
注：chocolateyは、macOSでいうところのhomebrewに相当するもので、node.jsの専用ツールではない。

### 結論パターン3
マルチプラットフォームに対応しているvoltaという選択肢

## おまけ

### 有名どころのツール一覧
リンクはしてないので詳細はググってください
* nvm (Node Version Man

Node.jsでYouTube Data APIを叩いてみる

## この記事は
この記事は YouTube Data APIの `Video:list`, `Channel:list`, `Search:list` をNode.jsで叩いてみたメモ。

## (余談)記事制作の背景
余談だが、次のサービスを作るのにAPIを叩く必要があった。
特に生放送の開始時間、終了時間、配信継続時間(動画の再生長)が欲しかった。

https://hardcore-timetable.netlify.app/

…このサービスの内容を説明するのは記事の趣旨ではないので団長の思いで割愛する。

## 前提
Google Cloud Platform(GCP) でAPIキーを発行する必要があるが、このAPIキーは取得できているものとする。
いくつか記事を読んだが、 [こちら](https://qiita.com/koki_develop/items/4cd7de3898dae2c33f20)の記事がわかりやすかった。

## Videos:list
[Videos:list](https://developers.google.com/youtube/v3/

Node.js 〜Node.jsを何も知らない自分が最初に1時間調べて理解した概要〜

## Node.jsとは

Node.jsは、JavaScriptをブラウザ上ではなく、サーバ上で動かすためのプラットフォーム。
ウェブアプリケーションのサーバサイドロジックを構築するのに適している。

## Node.jsの基盤: V8エンジン
Node.jsはV8エンジンを使用している。
V8エンジンは、Googleが開発したJavaScriptエンジン。
主にChromeブラウザでJavaScriptを高速に実行するために使用されている。

このエンジンは、JavaScriptのコードをマシンコードにコンパイルして実行する。
Node.jsはこのV8エンジンをサーバサイドでも利用できるようにしている。

## セキュリティとファイルシステムアクセス

ブラウザで実行されるJavaScriptは、セキュリティの観点からローカルファイルシステムへのアクセスが制限されている。
Node.jsはV8エンジンにこれらの機能を追加し、サーバサイドでローカルファイルシステムにアクセスが可能。
これにより、ファイル操作やシステムコールが可能となり、サーバサイドアプリケーションの開発が容易になって

tailwindcss,reactで画像を背景として使用するための方法

# はじめに
どうも！フリーエンジニアKeiです
探してもなかなか使いたい内容が見つけられなかったのでまとめました。

# 問題
react+tailwindcssの環境で
背景（セクションごと）として画像を使いたいときの設定方法

# 解決方法
①tailwind.config.jsに追記
②App.jsxに追記

### ①tailwind.config.jsに追記
extend{}の中にbackgroundImage{}を追記する
・Bg1は関係者が分かりやすい名称
・url(‘“`中は参照したい画像のリンク“` ‘)
・“`my-img-name“`は参照する画像の名称
今回はsrcにimg(ディレクトリ)を作成して、ディレクトリ内に画像を入れています。

“`ruby:tailwind.config.js
theme: {
extend: {
backgroundImage: {
Bg1: “url(‘../src/img/my-img-name.jpg’)”,
},
},
},
“`

### ②A

【Azure OpenAI】gpt-4oのAPIが使えるようになったので試してみる

# はじめに
2024年5月22日にAzureOpenAIにてgpt-4oが正式にリリースされました。
APIの仕様等に大きな変化がないか検証するついでに記事を作成しています。
API検証のためのソースコードは前回の記事にて作成したものを流用しています。

https://qiita.com/kawai_k/items/729bcabc4c982feb18bf

# モデルをデプロイしよう
現在、gpt-4oは6つのリージョンで使用可能です。
今回はeast usにてgpt-4oのデプロイを行います。
引用:[Azure OpenAI Service models](https://learn.microsoft.com/en-us/azure/ai-services/openai/concepts/models)
はじめに、AzureOpen

Bedrockのストリーミングレスポンスをストリームのまま返却するLambdaの作り方（LangChainも対応）

Bedrockを使ったアプリをLambdaで動作させたい！
レスポンスはストリームで返したい！！

と思って調べたところ、結構条件があることがわかりました。

https://aws.amazon.com/jp/blogs/news/introducing-aws-lambda-response-streaming/

https://docs.aws.amazon.com/ja_jp/lambda/latest/dg/configuration-response-streaming.html

## ストリーミングレスポンスを返却するための条件

ストリーミングレスポンスを返却するためにはいくつか条件があります。

### Lambdaの実装方法の条件

Lambdaの実装方法が、以下の方法である必要があります。

* Node.jsのマネージドランタイム
* カスタムランタイム（[参考](https://docs.aws.amazon.com/ja_jp/lambda/latest/dg/runtimes-custom.html#runtimes-custom-response-s

Discord.js v14 botの作り方【基礎・埋め込み編】 (2024/5/22現在)

# Discord.js とは
Discord.js (以下d.js) とは、discordのbotを開発するときに使用するパッケージの1つです。
同様に、Discord.pyというものがあります。これはpythonで開発する場合のパッケージになります。
詳しくは[こちら](https://qiita.com/minoru_kinugasa/items/e1bdee4ca016b2a38e2c)をごらんください！

# 埋め込みとは
見たほうが早いです。
これです。
この埋込みはすべてのプロパティが入っていますが、タイトルだけ や 画像だけ という埋め込みを送信することもできます。

### 送信方法
`send()`関数の中にオブジェクトで`embed`を入れます。
これも見たほうが早いです。
“`js:index.js
const { C

外部トリガーからカメラを起動してTeachable Machineに繋げてみる

Node-REDからTeachable Machine（以下、TM）を使う時に[node-red-contrib-browser-utils](https://flows.nodered.org/node/node-red-contrib-browser-utils)のカメラで写真を撮影してを使うのが一般的？です。

## カメラボタン以外から起動させたい

このやり方だとカメラボタン以外からの起動ができず、外部のスイッチを押して起動、何かLINEが届いたらカメラ起動など外部トリガーからの起動ができません。

> 

[@sumit_shinde_84/node-red-dashboard-2-ui-webcam](https://flows.nodered.org/node/@sumit_shinde_84/node-red-dashboard-2-ui-webcam)というノードを使うことで外部トリガーからカメラ起動ができます。

> こちらのノードは入力の口

Discord.js v14 botの作り方【基礎・メッセージ編】 (2024/5/22現在)

# Discord.js とは
Discord.js (以下d.js) とは、discordのbotを開発するときに使用するパッケージの1つです。
同様に、Discord.pyというものがあります。これはpythonで開発する場合のパッケージになります。
詳しくは[こちら](https://qiita.com/minoru_kinugasa/items/e1bdee4ca016b2a38e2c)をごらんください！

# 今回の目標
メッセージの仕組みと、複数の送信方法を理解する。
いろんな種類があるので、できるだけわかりやすく簡単に説明します！

# メッセージについて
送信方法は大きく分けて3つあります。
1. チャンネルを探して、送信する
1. メッセージに対して、返信する
1. ユーザーを探して、ダイレクトメッセージ (DM) を送信する

それぞれ方法を簡単に説明します！

## チャンネルを探して、送信する
### チャンネルを探す とは
まず`探す`ってどういうことでしょうか？
Botは、複数のサーバーに導入されます。
また、チャンネルにはそれぞれ唯一無二のidが紐づけられ

Object.entries()の型をつよつよにしたいんだ！@typescript

## 環境

“`json:package.json
“typescript”: “5.0.4”
“`

## 困りごと

TypeScriptで教科ごとのテストの点数を扱うクラスを定義しました。

“`tsx:typescript
class ScoreClass {
constructor(
public english: number,
public math: number,
public science: number,
public history: number
) {}
}
“`

太郎くんのテスト点数を用いてインスタンスを生成し、英語が平均の79点以上であればそれを称えるスクリプトを書きました。

“`tsx:typescript
const taroScore = new ScoreClass(90, 80, 70, 60); // 英語は90点だ！

Object.entries(taroGrade).forEach(([key, value]) => {
if (key === ‘english’) {

package.jsonのバージョンを自動で更新！Node.jsアプリ開発者のための時短テクニック

## バージョンいちいち上げるの面倒
Node.js でアプリを作ったときに、いちいちバージョン上げたりするの面倒じゃないですか？
自動アップデートされる場合は、ユーザからしたらバージョンなんて意識しないでしょうしちょっと無駄がある気がして、これを何とかしたい

## リリース時に自動でバージョンを上げる

### バージョン表記
自動でバージョンを上げるなら、
“`
<西暦>.<月(一桁)>.<カウンタ>
“`
のような表記が良さそうですね。
(最後を <日> にしてしまうと、同日に複数回のリリースができなくなるため不採用)

### package.json>version を書き換えるスクリプト

`versionCounter.js` という名前で以下の内容のスクリプトを作成。
“`
const fs = require(‘fs’);
const path = require(‘path’);

const counterFilePath = path.resolve(__dirname, ‘build-counter.txt’);
const packageFileP