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

Nodeのパッケージ管理を管理したい話

## はじめに
Nodeのパッケージ管理ツールって複雑なのです。いわゆる”yarn”や”npm”とか。聞いたこと、実行したことあるのではないのでしょうか。
結局どっちで管理してるの？すべきなの？いやいや他にもパッケージ管理ツールってあるんだよ。というお話をします。

## パッケージ管理ツール
そもそもパッケージ管理ツール、ってなんなのよ。このパッケージ管理ってなんで必要なのという話からです。

ソフトウェア開発では複数のパッケージが必要になります。

例えばこんなコードを書きたいとします。ReactのHooksらを用いてルーティングし、MUIでコンポーネントを構成します。
すると書きたいコードの上にこのようなimport文を書きます

“`typescript
import { Box, Typography } from “@mui/material”;
import { useEffect, useState } from “react”;
import { useNavigate, useParams } from “react-router-dom”;
“`

これは

【Node.js】初心者必見！ゼロから学べる実践入門

Node.jsとは？
—
Node.jsは、GoogleのV8 JavaScriptエンジン上に構築された、イベント駆動、非同期I/Oを備えたJavaScriptランタイムです。
これにより、高いパフォーマンスを保ちながら非同期処理を行うことができます。

Node.jsインストール
—
https://nodejs.jp/

npm（Node Package Manager）
—
Node.jsのためのパッケージ管理ツールです。
これにより、JavaScriptのライブラリやツールを簡単にインストール、管理、共有することができます。
npmは、依存関係の管理やバージョン管理を行い、開発プロジェクトを効率的にサポートします。

基本的なnpmコマンド
—
`npm init`: 新しいNode.jsプロジェクトのためのpackage.jsonファイルを作成します。
`npm install `: 指定したパッケージをインストールします。
`npm uninstall `: 指定したパッケージをアンインストールします

ArrayQueryでオブジェクト配列をタイプセーフORMっぽく扱う

## ArrayQueryとは

[ArrayQuery](https://array-query.vercel.app/)は2024年7月18日にローンチされた、タイプセーフORMライクにオブジェクト配列を扱えるように設計された強力なTypeScriptライブラリです。

軽量でありながら機能豊富なライブラリで、オブジェクト配列に対して複雑な操作を簡単に実行できます。特に、メモリ内の大規模データセットを操作する際や、フロントエンドアプリケーションで高度なフィルタリング、並べ替え、ページネーションを実装する場合に便利です。

https://array-query.vercel.app/

## 主な特徴

– **ページネーション**: 大規模データセットを簡単にページ分割できます。
– **全文検索**: データ内の複数フィールドにわたる柔軟で強力な検索ができます。
– **高度なフィルタリング**: 複雑なフィルタを適用して正確なデータ取得ができます。
– **柔軟な並べ替え**: 昇順と降順の両方をサポートし、任意のフィールドでの並べ替えが可能です。
– **型安全な操作**:

Node.jsによるURLからのパラメータの受け取り

# Node.jsでのURLからのパラメータの受け取り

:::note info
URLでクエリパラメータ(?id=~)を使うか直接書くかによって、req.queryとするかreq.paramsとするかが異なります
:::

クエリパラメータを使って、article?id=4のように記載する場合、
getの後の第一引数にクエリパラメータを記載する必要はなく、勝手に取得してくれるのでreq.queryで使います。
“`js:queryを使う場合
const express = require(‘express’);
const app = express();

app.get(‘/article’, (req, res) => { // ‘/article?id=4’のようなURL
res.render(‘article.ejs’, {req.query.id});
});
“`

クエリパラメータではなく、article4のように直接記載する場合、
getの後の第一引数にパラメータをコロンで指定すると取得してくれるのでreq.paramsで使います。
“`js:query

axiosやfetchに替わるKyのススメ

### Kyとは

**Ky**は、Sindre Sorhusが開発したJavaScript向けの軽量かつ多機能なHTTPクライアントです。ネーミングの意図はよくわかりませんが、AxiosやネイティブのFetch APIに代わる、より効率的で使いやすい選択肢として設計されています。

https://github.com/sindresorhus/ky

## Kyの利点

1. **軽量で効率的**: Kyのコアは非常に小さく（約2 KB）、パフォーマンスが重要なアプリケーションにとっては特に大きなメリットとなります。
2. **Promiseベース**: Fetch APIと同様に、KyはPromiseを基盤としており、async/await構文との組み合わせが容易です。
3. **シンプルなAPI**: Kyが提供するAPIは非常にシンプルなので、学習コストが抑えられます。
4. **再試行機能**: Kyには、失敗したリクエストの再試行する機能が組み込まれており、エラーハンドリングの実装コストを減らします。
5. **JSON処理**: Kyは自動的にJSONリクエストとレスポ

Azure FunctionsでPrismaを使おうとしたらcli からのデプロイでドハマりしたメモ

## 概要
[前回](https://qiita.com/hibohiboo/items/a678e8af01b6fef21709)の続き。Azure Functionsは`func start`で動いても`func azure functionapp publish hoge`で何も言わずに死んでいくの本当によくないと思う。
設定ミスの箇所を探すのに苦労したのでメモ。

結論からいうと[Deploy to Azure Functions](https://www.prisma.io/docs/orm/prisma-client/deployment/serverless/deploy-to-azure-functions)に従って`binaryTargets = [“native”, “debian-openssl-1.1.x”]`をschema.prismaの`generator client`ブロックに追加してあげればよかった。

[ソースコード](https://github.com/hibohiboo/async-ttrpg/blob/c112b1b39bf1d3e147f0

🌟 エキサイティングなニュース: ServBay 1.3.9がリリースされました！

最新のServBayアップデートを発表できることを嬉しく思います。開発ワークフローを加速させる新機能が満載です！バージョン1.3.9で期待できることは次のとおりです

### 1.3.9の新機能
– **クイックサーチマジック:** 新しい検索機能でホストやDNS設定を素早く検索—必要なものを瞬時に見つけることができます！⚡
– **お気に入りを手元に:** よく使うホストやメニューバーアイテムにスターを付けて、すぐにアクセス。あなたのワークフロー、お気に入りに合わせて！🌟
– **メニューバーの刷新:** メニューバーを整理して、簡単にナビゲートできるようにしました。シンプルさと効率性が全てです。
– **UIアップグレード:**
– 新しい「フォルダを開く」ボタンでプロジェクトに直行。
– ダッシュボードのテキストがあなたの言語で表示され、よりローカルな感じに。
– アップデート後すぐに新機能を発見—最先端を簡単にキャッチアップ。
– 最適化されたUIディテールで滑らかな操作を体験。
![image.png](https://qiita-image-store.s3

Node.jsについて

自分の得た情報を整理した記事です。
間違った情報を載せていたらご指摘お願いします。

# Node.jsとは
### JavaScriptをサーバ側で動作させる開発環境のこと（実体はない。概念）

## package.json
### パッケージを管理するために使われるファイル
“scripts”にはシェルスクリプト（コマンド）のエイリアスを記述できる。
npm initでそのディレクトリ内にpackage.jsonを配置（初期化）できる。

## npm
### Node.jsで外部パッケージをローカルにインストールして実行するためのマネージャー

#### インストールコマンド→npm i (-g) （任意のパッケージ名）
#### 実行コマンド→npm run （package.jsonの”scripts”内に記述したシェルスクリプトのエイリアス）
（このコマンドで何かを実行するにはpackage.jsonの”scripts”内にシェルスクリプトのエイリアスとその定義を記述しなければならない）

## npx
### インストールされていないパッケージを実行（インストール→

【DevContainer入門①】チュートリアルをやってみた

気になっていたdevcontainerのチュートリアルをやってみた記録

## 実施するチュートリアル

:::note info
Dockerのインストールはスキップ
:::

https://code.visualstudio.com/docs/devcontainers/tutorial

## 1. devcontainer拡張機能をインストトール

– チュートリアルの内容に従ってインストール

## 2. MSが提供しているサンプルdevcontainer環境を開く

– VSCodeのウィンドウが開きなおされてコンテナの立ち上げが行われる

– しばらくまつ

## 3. ターミナルを立ち上げる

1. `ctrl + shift + @`を押すとターミナルが起動する

2. コンテナに接続された状態でターミナルが起動する

3. 以下バージョン確認コマンドを打つとコンテナ内にインストールされたnodeとnpmのバージョンが確認できる

“`bash
node –version; npm –version
“`

## 4. nodeアプリケーションを起動する

サポーターズ（Docker）イベントに参加 2024.07.23

本日もサポーターズのイベントに参加した。

内容は、初心者向けのDockerについての解説とアウトプットの実施であった。

## Dockerとは
コンテナ型の仮想環境を気軽に構築、実行できるプラットフォーム。
Dockerはチーム開発にとても向いている。なぜなら、全く同じ環境で作ることができ、削除も簡単なためである。

ゲストOSは必要なく、ホストOS上で作成できる。ホストOSは仮想環境を動かす土台となっているOSである。
自分のPCのOSはWindowsなので、ホストOSはWindowsである。

イベントの中で注目していた3つのワードについての解説もあった。

## イメージ
イメージとは、コンテナを作るための設計図で、プロジェクトの名前、使用する技術のバージョンの指定などが記されている。

## コンテナ
コンテナとは、アプリケーションの実行環境のことで、プロジェクトのようなものである。
コンテナを作成、起動、削除が可能である。

## ボリューム
データの永続化を担う場所であり、外部HDDのようなもの。ボリュームを使わずにコンテナを削除するとデータが消えてしまうので、コン

kintone スペース管理コマンド操作例

kintone スペース管理コマンドで、実際にスペース作成・照会・更新・削除操作を行なってみます。

# 概要

[chatGPT で kintone スペース管理コマンド作成](https://qiita.com/rex0220/items/2b0cbf91e07e20698515)で作成したコマンドを実際に使ってみます。
簡単にコマンドで、スペーステンプレートからアプリを含むスペースを作成できます。

– 環境
– kintone: 開発環境
– OS: mac
– 今回は、mac ですが windows でも同様にできます
– ターミナルで操作

# kintone 環境

kintoneシステム管理のアップデートオプションで開発中の新機能の下記を有効にする必要があります。

– 「スペースの情報を取得できるJavaScript API」を有効にする
– 「テンプレートを指定せずにスペースを作成できるREST API」を有効にする
ただゲストスペースについては、スペーステンプレート無しでは、スペース作成できませんでした。

# インストール

chatGPT で kintone スペース管理コマンド作成

chatGPT で kintone スペース管理コマンド作成してみました。

# 概要

kintone スペース管理コマンドを chatGPT で作成して、github に公開してみました。
簡単なコードからオプション機能を追加していくと、コードが長くなり生成を続けるか聞かれるようになるのが、面倒くさい。

kintone で開発中の新機能の下記を有効にする必要があります。
– 「スペースの情報を取得できるJavaScript API」を有効にする
– 「テンプレートを指定せずにスペースを作成できるREST API」を有効にする
ただゲストスペースについては、スペーステンプレート無しでは、スペース作成できませんでした。

あとスペース一覧、スペーステンプレート一覧の REST API が無いので、コマンドだけでスペース管理するのは、まだ無理です。

– chatGPT での作成手順
– node のコードを作成
– README のドキュメントも作成
– マークダウン形式で作成依頼すると途中まではマークダウン形式だが、コード部分の最後で、マークダウン形

HexoとButterflyテーマを使用してNetlifyにデプロイする方法

## はじめに

この記事では、HexoのButterflyテーマを使用して静的サイトを作成し、Netlifyにデプロイする手順を説明します。

### 使用環境
OS：Windows11
VS Code
node: v18.17.0
hexo: 7.3.0
hexo theme: [butterfly](https://github.com/jerryc127/hexo-theme-butterfly)

## 静的サイトジェネレーター（SSG）とは
ウェブサイトのページを事前に生成し、静的なHTMLファイルとして提供するツールです。これにより、サーバー側の処理が不要になり、表示速度が速く、セキュリティも向上します。Hexo以外にも代表的なSSGには、Next.js、Gatsby、Hugoなどがあります。

## 1. 環境の準備

まず、Node.jsと[Git](https://gitforwindows.org/)がインストールされていることを確認してください。これらはHexoの動作に必要です。

## 2. Hexoのインストールと初期設定

Hexo CLIをインストー

SNS作った「ニャ」 （nyapp.buzz）


↑ 外観

[https://nyapp.buzz/](https://nyapp.buzz/?qt)

と
り
急
ぎ
のシェアです。あしからず。

ユーザー作成すると、
フォロー・投稿・コメント・プロフィール編集・チャットなどができます。

技術：

nginx, mongo, next.js, react.js, etc.

免責：

ただいま完全無保証でのご提供になります。
アプリ内でも言及していますが、クローズドβテスト段階のため、現段階ではお友達等への拡散は控えていただけると助かります。

課題：

また、作り始めたはいいものの、どのようなSNSとするか考えかねている状況です。

全ての投稿に強制的に「にゃ。」が付いたら便利だと思ったのでこれ実装していこうかと考えているところなのですが、皆さまどう思われますか？にゃ。

mastodonやblueskyと迷ってたのですが、自由

[備忘録]Proxy環境下でNode.jsのFetchErrorを回避する方法

# はじめに

企業で開発する場合にはネットワークにつなぐためにはProxyを指定することがあります。
この環境下でNext.jsを実行すると外 部APIやダウンロードなどのfetchを行うと`FetchError`が出てしまい接続できません。
その対策に対しての記事となります。

どちらかという自身の備忘録です。

# 対策前

以下のコマンドで、Next.jsのプロジェクトを作成します。

“`sh
npx create-next-app@latest
“`

プロジェクトフォルダ配下で以下のコマンドを実行しNext.jsを起動させます。

“`sh
npm run dev
“`

[http://localhost:3000](http://localhost:3000)にアクセスすると以下のようなログが出ます。

“`sh
> my-app@0.1.0 dev
> next dev

▲ Next.js 14.2.5
– Local: http://localhost:3000

✓ Starting…
✓ Ready in 1495

【Docker Storage】バインドマウントでホストマシンのファイルを Node.js コンテナで実行する

# はじめに
この記事では、Docker のバインドマウント機能を利用して、ホストマシンのファイルを Node.js コンテナで実行する手順について記載します。

https://docs.docker.com/storage/bind-mounts/

以下の記事でも Node.js / TypeScript のコンテナを作成しましたが、このケースでは、ホストマシンのファイルに変更があった場合、都度イメージをビルドする必要があります。

https://qiita.com/Yasushi-Mo/items/789871a7f3eb86b01a62

バインドマウントを利用して、ホストマシンのファイルをコンテナで実行できるようにすることで、都度イメージをビルドする必要がなくなります。

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

– Windows 11
– Docker Engine 26.1.1
– Node.js 20.15.1
– npm 10.8.2
– @types/node 20.14.10
– nodemon 3.1.4
– ts-node 10.9.2
– Type

[Nuxt3]Node.jsとNitroの違いについて

# Node.jsとNitroの違いとサーバーレスプラットフォームについて

## はじめに
Node.jsとNitroは、どちらもサーバーサイドの技術として使用されるものですが、Nuxtの学習を進めるにあたって両者の違いがわからなくなってきたため、ここで記事として残したいと思います。
本記事では、Node.jsとNitroの違いを比較しながら、デブロイ時によく利用されるサーバーレスプラットフォームについても軽く触れたいと思います。

## Node.jsとNitroの比較

### Node.jsとは
Node.jsは、JavaScriptランタイム環境であり、サーバーサイドアプリケーションの開発に使用されます。
非同期I/O操作をサポートし、高いパフォーマンスとスケーラビリティを提供してくれることが特徴です。

### Nitroとは
NitroはNuxt 3の一部として開発された軽量サーバーエンジンであり、特にNuxt 3アプリケーションのビルドとデプロイを最適化してくれます。
サーバーレスプラットフォームやエッジ環境で動作します。
（余談ですが、ずっと「ニトロ」って呼んでいまし

kintone chatGPT によるスペース&アプリ作成

kintone アプリをchatGPT に聞いた node で作成してみました。

# 概要

kintone 顧客管理アプリを作成するコードを chatGPT に聞いて実行してみた。
いろいろエラーを解消しながら、コードを作成
スペース情報取得は、よくわからないエラーで試行錯誤した。

※API ラボで、開発中のAPI を利用しています。
・「スペースの情報を取得できるJavaScript API」を有効にする

アプリ項目を要件として、リクエストすると、アプリフォームまで定義してくれる。
これをたたき台にして、項目追加等を行うことも可能。
テストデータも生成してくれるので、簡単なテストも可能です。

– スペース(APP-TEST)作成
– スペース管理者設定
– スペース情報取得には、スペース管理者権限が必要
– スペース情報取得
– アプリを作成する defaultThread を取得
– ※ header 部に ‘Content-Type’: ‘application/json’を入れて、リクエストボディで指定するとエラー”不正なリクエ

Dify APIにNode.jsから接続する

作成日：2024年7月21日(日)
# Dify APIにNode.jsから接続する

## １．はじめに

Difyを使用するようになってから、チャットフロー機能やワークフロー機能がとても気に入っていて、これをLLM（Large Language Model）のように使いたいという欲求が高まってきました。
理由は、Difyの本番環境向けのチャットボットに２点ほど気に入らない点があるからです。
本番環境向けのチャットボットにはチャット履歴やマルチモーダルファイルの添付などの機能があり、十分ではありますが、生成されるユニークキーが含まれるFQDNアドレスは分かりやすいアドレスとは言えません。
また、生成AIを利用するユーザーとしては、プロンプトテンプレートを保存できる機能が非常に欲しいところです。
このページでは私が考える目論見を実現するための一

コンソールに地図を表示するnode.jsアプリ

下記のように緯度経度や、地名からコンソールに地図を表示する(node.js)アプリです


## はじめに

[ターミナル内で画像を表示する](https://qiita.com/murasuke/items/5957cd228d5209eea5f9)や、[緯度、経度をもとに国土地理院タイルを表示する方法](https://qiita.com/murasuke/items/ad81b7b726a3463fa3fe)を応用して、ターミナル内に地図を表示してみたいと思います

## 環境
(Window