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

HackTheBox Codify WriteUp

今回はHackTheBoxのEasyマシン「Codify」のWriteUpです！
名前からしてコードを書いて攻略していくような感じになるのでしょうか…


グラフはしっかりEasyマシンのようなグラフになっていますね。
評価も高いので楽しみです！攻略目指して頑張ります〜！

HackTheBoxって何？という方は下記の記事を見てみてください！一緒にハッキングしましょう〜！

https://qiita.com/WhizOwl/items/165783694cb4791cff34

また、HackTheBoxで学習する上で役にたつサイトやツールをまとめている記事もあるので、合わせてみてみてください！

https://qiita.com/Perplex/items/30f949fe261f56a

【Go / Protobuf / Node.js】gRPC の双方向ストリーミングを利用してチャットを実装する

※ この記事は 2022年10月 に作成したものを一部改稿したものです。

**gRPC** は RPC (Remote Procedure Call) の一種で、Google が自社サービス向けに開発したものをオープンソース化した技術です。
RPC はあるコンピュータ上で動作するプログラムから別の場所にあるプログラムの処理を実行する手法で、1970年代から存在する考え方です。

gRPC では、HTTP/2 の「ストリーム」を利用してサーバ – クライアント間で接続を確立することで、HTTP/1.1 のように1つのリクエストに対して1つのレスポンスを返すだけでなく、複数のリクエスト・レスポンスを並行して処理することができます。

そこで本記事では、gRPC の双方向ストリーミングを利用して CLI 上で動作する簡易的なチャットアプリケーションを実装してみようと思います。

## gRPC の特徴
実装に入る前に、APIの構築に最もよく使われる REST との対比を交えて gRPC の特徴について見ていきます。

まず通信方式については、REST は先述の通り HTTP/1.1 が主流

nodejsのAPIをGraphQLで実装してみた

## はじめに
GraphQLというものをなんとなく知っていたものの、ちゃんと理解できてなかったなと思い
今回簡単な実装を交えて勉強しました。

## GraphQLってなに？
GraphQLは、Web APIのためのクエリ言語であり、データ操作と取得のためのランタイムです。
Facebookによって2015年に開発され、以降、データを効率的に取得する方法として急速に普及しています。
GraphQLの主な特徴は、クライアントが必要とするデータの形をクエリで明確に指定できる点にあります。
これにより、過剰または不足なデータの取得を避け、アプリケーションのパフォーマンスを最適化できます。

### Restとの違いは？
下記の違いがあります。
| 特徴 | GraphQL | REST |
|————–|—————————————–|—————

WSL:Ubuntu環境でnodeのアップデートで詰まった

## 環境
osはwindows11でwsl2を用いて、Ubuntuを使用しています。

## 警告文が表示される
“`terminal
npm v10.5.1 does not support Node.js v18.16.0. This version of npm supports the following node versions: `^18.17.0 || >=20.5.0`. You can find the latest version at https://nodejs.org/.
“`
要約すると、
あなたのnpm v10.5.1はnode v18.16.0をサポートしてないよ。
だから、nodeのバージョンをv18.17.0かv20.5.0以上にアップグレードしてください。
って感じです。

## アップデートに詰まる
じゃあ、アップデートすれば終わりやんと思って
“`terminal
sudo apt update && sudo apt upgrade
node -v
sudo apt-get install nodejs
node -v
“`
で解

【aws-cdk-examples】API GatewayからLambda経由でDynamoDBを参照/更新する

# これは何をしたくて書いたもの？
私個人として、現在業務でアプリ開発に利用しているReact NativeをAWSと連携させたいと考えているため、そのための学習の一環としてReact Nativeの通信先のREST APIを提供できるAPI Gatewayを構築して、その挙動を確認してみることにしました。
CDKには[aws-cdk-examples](https://github.com/aws-samples/aws-cdk-examples/)というサンプルプロジェクトをまとめたリポジトリがあります。今回はその中の[api-cors-lambda-crud-dynamodb](https://github.com/aws-samples/aws-cdk-examples/tree/main/typescript/api-cors-lambda-crud-dynamodb/)というサンプルを実際にデプロイして動かしてみます。

# 構成
`cdk deploy`で構築できるリソースは、大まかには以下の画像の通りです。構築されるリソースの詳細は、[index.ts](https:/

nodenvでnodeのバージョンを管理する方法

今回はnode.jsのバージョンをnodenvで管理することで、node.jsのバージョンを簡単に切り替えることができるため紹介します。

:::note info
【前提知識】
– vim操作ができる
– .zshrcファイルが既に作られている
:::

# brewコマンドが使えるか確認する
以下のコマンドを実行しbrewコマンドが使用できるか確認を行う。
“`terminal
brew -v
“`

ここで、`command not found: brew`と表示された場合は以下のコマンドを実行してください。

【公式サイト】
https://brew.sh/
“`terminal
/bin/bash -c “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)”
“`

以下のコマンドを実行しバージョンが表示されるか確認する
“`terminal
brew -v
“`

:::note warn
MacOSを使用しておりAppleシリコン（M1など）の場合は以

ESモジュールとCommonモジュール：Node.jsにおける2つのモジュールシステム

## **はじめに**

Node.jsにおいて、モジュールシステムは重要な役割を果たしています。現在、Node.jsではCommonモジュールとESモジュールという2つのモジュールシステムが存在しています。本記事では、これらのモジュールシステムの概要と違いについて解説します。

## **Commonモジュール**

Commonモジュールは、Node.js誕生当時から使用されていたモジュールシステムです。モジュールをインポートする際には、`require`関数を使用し、エクスポートする際には`module.exports`を使用します。

“`javascript
// モジュールのインポート
const myModule = require(‘./myModule’);

// モジュールのエクスポート
module.exports = {
// エクスポートする内容
};
“`
## ESモジュール
ESモジュールは、現在のスタンダードなモジュールシステムであり、多くの開発現場で使用されています。ESモジュールは、ECMAScript標準のモジュールシステムです。

モ

npmとyarn：JavaScriptのパッケージ管理ツールの比較

# はじめに

Node.jsの開発において、外部のライブラリやパッケージを利用することは非常に一般的です。これらのパッケージを効率的に管理するために、パッケージ管理ツールが使用されます。Node.jsにおける代表的なパッケージ管理ツールとして、npmとyarnが挙げられます。本記事では、これらのツールの概要と違いについて解説します。

## パッケージ管理ツールとは

Node.jsは必要最低限な機能のみを提供し、ユーザーが必要なパッケージを各自でインストールする方式を採用しています。これにより、Node.jsの容量を抑えつつ、柔軟性を維持することができます。npmとyarnは、これらのパッケージを管理するために使用される代表的なツールであり、開発者はプロジェクトの要件に応じて適切なツールを選択することが重要です。

そして、パッケージ管理ツールとは、特定のシステムや言語環境において、パッケージを管理するためのツールです。パッケージとは、様々なシーンで活用するために作成されたプログラムの集合体のことを指します。パッケージ管理ツールは以下のような機能を提供します：

– パッケージの導

TypeScriptをVSCodeのデバッグ機能で動かす環境構築 + ESLint, Prettier

先人達の記事を参考にしながら､TypeScriptを手軽にVSCodeで動かすための個人的な最適解ができたので紹介する｡
ESLint, Prettierも入れて実用的な環境構築となっている｡

｢TypescriptとかESLintとかのセットアップは別にいいから､**VSCodeの設定**が知りたい!｣
という人は [👇🏽VSCodeのデバッグ設定](#vscodeのデバッグ設定) にジャンプ!

## 構築する環境

– VSCodeの **デバッグ機能**(F5押下) で **TypeScript** を動かせる｡
– 内部的にTSCコマンドでビルドされる｡
– **ESLint** と **Prettier** を入れる｡

下記は対象外とする｡

– ESBuildなどは入れない｡シンプルなTSCコマンドビルド環境｡
– Vue.jsなどブラウザ環境ではない｡TSからビルドされたJSを **Node.js** 上で動かす｡

:::note info
執筆時点(2024年3月)のバージョンで説明する｡
– typescript: `^5.4.2`
– eslint: `

[axios] APIのリクエストにインターバルを設ける

## はじめに
APIのリクエスト処理を作成した際に、ステータスコードが429(Too Many Requests)で返ってきてヒヤっとした経験はないでしょうか？
サードパーティのAPIを利用する場合には、プロバイダがAPIのリクエスト頻度を制限していることが一般的です（例えば、1秒間に10回までなど）
上記の理由で、リクエスト頻度を意識する必要があります

Node.js には、AxiosというHTTPクライアントライブラリがあります

https://axios-http.com/

本記事では、Axiosにリクエスト間隔を設定する方法の一例を紹介したいと思います！

## ゴール
axiosを使って、APIのリクエスト間隔を制御できる

## 環境情報
| 項目 | バージョン |
| :——–: | :——— |
| Node.js | 20.11.1 |
| TypeScript | 5.4.3 |
| Axios | 1.6.8 |

## 方針
以下の方針で実装をしていきます
– axi

redoclyで作成したAPI仕様書からモックを作る

# はじめに
API仕様書を作成する手段としてよく使われるものに、以下があると思います。

– API Blueprint + aglio
– Swagger
– redocly
– Excel
– PDF

昨年「API Blueprint + aglio」で作られたAPI仕様書をredoclyで作り直しました。

作り直した理由は以下です。

– 「API Blueprint + aglio」の仕様書の記法が好きではなかった
– YAMLを使ったAPI仕様書がイケイケな雰囲気になっている
– 「API Blueprint + aglio」の場合は、API仕様書を作成して終わり
– 「リクエストパラメタ一覧を書く + JSONのサンプルを書く」という手間が煩わしい

作り直す中で、便利だった機能なので紹介しようと思います。

この記事を見てredoclyを選択するきっかけになっていただけたらと思います。

# 注意
この記事では

– redoclyの使い方
– stoplight studioの使い方

などは説明しません。
ご注意ください。

# 完成品

### OK

リク

Playwright – FullPage指定のスクリーンショット撮影で意図しないマウスオーバー効果・ブラウザサイズ変更が起こってしまう

Playwrightの操作動画を記録してみて分かったのだが、Playwright は fullPage のスクリーンショット撮影の時、ブラウザサイズを変更することでスクリーンショット撮影を実現してそうな気がする

このため

– 意図しないブラウザサイズ変更がおこなわれる
– 副作用でカーソル位置が変わってしまう

という現象が起きていそうだった

カーソル位置の問題に関しては、スクリーンショット撮影前にカーソル位置を左上に移動させておくことで、問題を抑止しやすくなるかもしれない

“`js
await page.mouse.move(0, 0)

await page.screenshot({
path: `foo.png`,
fullPage: true,
})
“`

# チャットメンバー募集

何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ

# プロフィール・経歴

https://github.com/Yu

Node.js のサポート期間を８年に延ばせるひとつのやり方

先日、「[Javaエンジニアのための Nodejs/Nuxt3入門](https://speakerdeck.com/hidekatsu_izuno/nuxt3ru-men)」という資料を公開したのですが、Node.js がすでに業務システムを作るのに十分な環境が整っています。しかし、どう考えても導入を進めるためのネックになっている項目があります。それは LTS （長期サポート）の短さです。

Node.js のランタイムは偶数バージョンが LTS となっており、リリースの半年後に長期サポートが始まり 30 カ月後にはセキュリティ・パッチの提供が受けられなくなります。実はこの 30 カ月という期間は、PHP（3年） や Ruby（3 年 3カ月） といった他の言語ランタイムに比べて特別短いわけではないですし、JavaScript の言語としての安定性を考えれば、気軽にメジャーバージョンアップをすればいいと思うのですが、これがこと業務システムとなると大問題になります。

業務システムの開発に長く携わっていると、多くの日本企業が EOL（製品のライフタイム終了）を非常に気にしていることに気

Node.js 利用可能なメモリ量

–max-old-space-size で設定する
“`
NODE_OPTIONS=”–max-old-space-size=999″
“`
デフォルト値、1400MB らしい
デフォルトで、積んでるメモリの50%までらしい。

–max-old-space-sizeを設定しても、積んでるメモリによって制限されるっぽい。
384MBのコンテナに–max-old-space-size=300を設定したが、231BMしか使えないぽかった。

“`.ts
const v8 = require(‘v8’);

const heapStatistics = v8.getHeapStatistics();
const totalHeapSizeMB = (heapStatistics.total_available_size / 1024 / 1024).toFixed(2);

console.log(`Total available heap size: ${totalHeapSizeMB} MB`)
“`

【TypeScript】yarn4 + VSCodeでts2307が一生出続ける問題の解消法

執筆時点で最新版のモジュールをガチャガチャかき集めたVue.jsプロジェクトを作成しようとしたところ、一瞬つまずいたのでここに解決方法を書きしたためておきます。

# やること

– TypeScriptで記述し、Node.jsランタイムに突っ込み、Yarn v4で依存関係を管理しているようなプロジェクトで、表題の問題を解決する
– `tsconfig.json`を極力いじらず、解決したい
– 解決方法は下記2通りのどっちでもOK
1. `.yarnrc.yml`に1行書いて、Yarn v2以降特有のパッケージ依存解決方法をYarn v1と同じやり方に設定する
2. VSCode用のYarn Editor SDKを設定して、VSCodeがインストールされたモジュールを認識できるようにする

# 問題とその原因

## 問題

> TS2307: Cannot find module or its corresponding type declarations

このエラーがVSCodeだけで出現し続けてわずらわしいというのが問題です。画像を見ると「？？？」となる

Hubot Slack アダプターや RTM API から移行先について

こんにちは、Slack の[公式 SDK 開発](https://github.com/slackapi)と日本の Developer Relations を担当している瀬良 (@seratch) と申します :wave:

今週、Slack プラットフォームチームより以下のアナウンスメントが出ました。

https://api.slack.com/changelog/2024-04-discontinuing-new-creation-of-classic-slack-apps-and-custom-bots

要点をまとめると以下の三点となります。

* 2024 年 6 月 4 日以降、”classic app” と呼ばれる [RTM API](https://api.slack.com/legacy/rtm) や旧式の bot scope を持つアプリは新規で作成できなくなります
* これまでに作成されたアプリは引き続き動作しますが、RTM から [イベント API](https://api.slack.com/apis/connections/events-api) への早め

拡張子がmjsとjsのファイルの違いについて

Nodeのバージョン18以上のLambdaでは、デフォルトファイルの拡張子が`mjs`に変更されています。LambdaのNodeのバージョンを更新するにあたり、`mjs`ファイルと`js`ファイルとの違いについて調査しました。結論として、拡張子の違いはJavaScriptのモジュールシステムの違いに由来しています。以下、詳細を解説します。

## 拡張子が.mjsと.jsのファイルの違い
### 前提
JavaScriptには2つの主要なモジュールシステムが存在します。
– CommonJs
– ECMAScript(ES Module, ES2015)

### モジュールシステムと拡張子
– CommonJs: cjs（あまり一般的ではありません）
– ES Module: mjs

拡張子が`js`の場合は、`package.json`内の`type`フィールドで指定されたモジュールシステムに従います。`type`は`”commonjs”`または`”module”`のいずれかを指定できます。指定がない場合、デフォルトはCommonJSとなります。

## 実験
### 拡張子が.

ExpressにreCAPTCHAを埋め込む

BOT対策として、Expressで作成したフォームにGoogleのreCAPTCHA(v3)を埋め込みます。

## 1. GoogleのreCAPTCHAに登録する

Googleが提供するサービスなので、規約に同意して登録します。

https://www.google.com/recaptcha/about/

## 2. ドメインの設定

WebサイトのURLで使用しているドメインを追加します。
ローカルの開発環境でも動作させたいので、「localhost」も追加しておきます。

## 3. Viewの.ejsにHTMLタグを追記する

header部に.jsファイルのロードと送信関数を追記します。
次に、フォームの送信ボタンを置き換えます。
サイトキーはreCAPTCHAを登録するとGoogleから貰えます。

onSubmit関数でformタグのidを指定しているので、書き換えるのを忘れずに。

“` html

Node.jsのdb-migrateで環境変数を利用する

# 目的
Node.jsでdb-migrageパッケージを用いてMigrationをしたい。
その際、jsonファイル内で環境変数を用いてMySQLのパスワードを設定したい。

##### 参考
https://qiita.com/tiwu_dev/items/77b60ac9efa15142468d

# 解決策
公式のDocumentにしっかりと書かれていた。

https://db-migrate.readthedocs.io/en/latest/Getting%20Started/configuration/
> You can also specify environment variables in your config file by using a >special notation. Here is an example:
>
>“` json: database.json
>{
> “prod”: {
> “driver”: “mysql”,
> “user”: {“ENV”: “PRODUCTION_USERNAME”},
> “passw

Azure Static Web AppsのデプロイでGitHub ActionsのNode.jsのバージョンを指定する

# はじめに

今回は、AzureのStatic Web Appsにおいて、GitHub Actionsによるデプロイ時のNode.jsのバージョンを指定する方法について書いていきます。

とある依存ライブラリが、Node.jsがv18以上でないと動かないようになってましたが、これをGitHub Actionsでビルド＆デプロイしようとしたときに、v16が使われてしまい失敗するということが起きたので調査しました。

## Azure Static Web Appsとは

Azure Static Web Appsとは、GitHubとの連携が強力なWebホスティングサービスです。

https://learn.microsoft.com/ja-jp/azure/static-web-apps/overview

GitHub Actionsを利用して、プッシュしたら自動デプロイ、みたいなフローが簡単に構築できます。

また、Azure Functionsが組み込まれており、バックエンド処理を記述することも可能です。

# エラーが起きたポイント

これは、GitHub Actionsのロ