- 1. WSL:Ubuntu環境でnodeのアップデートで詰まった
- 2. 【aws-cdk-examples】API GatewayからLambda経由でDynamoDBを参照/更新する
- 3. nodenvでnodeのバージョンを管理する方法
- 4. ESモジュールとCommonモジュール:Node.jsにおける2つのモジュールシステム
- 5. npmとyarn:JavaScriptのパッケージ管理ツールの比較
- 6. TypeScriptをVSCodeのデバッグ機能で動かす環境構築 + ESLint, Prettier
- 7. [axios] APIのリクエストにインターバルを設ける
- 8. redoclyで作成したAPI仕様書からモックを作る
- 9. Playwright – FullPage指定のスクリーンショット撮影で意図しないマウスオーバー効果・ブラウザサイズ変更が起こってしまう
- 10. Node.js のサポート期間を8年に延ばせるひとつのやり方
- 11. Node.js 利用可能なメモリ量
- 12. 【TypeScript】yarn4 + VSCodeでts2307が一生出続ける問題の解消法
- 13. Hubot Slack アダプターや RTM API から移行先について
- 14. 拡張子がmjsとjsのファイルの違いについて
- 15. ExpressにreCAPTCHAを埋め込む
- 16. Node.jsのdb-migrateで環境変数を利用する
- 17. Azure Static Web AppsのデプロイでGitHub ActionsのNode.jsのバージョンを指定する
- 18. Promise.allの魔法:複数の非同期操作を一度に処理
- 19. Node.jsで待望(?)のコンソールの色を変えられるようになった
- 20. node.jsでメモリの使用量を調べる方法
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昨年「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 のサポート期間を8年に延ばせるひとつのやり方
先日、「[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のロ
Promise.allの魔法:複数の非同期操作を一度に処理
# はじめに
Promise.allは、複数のPromiseオブジェクトを並行して処理するための非常に便利なJavaScriptの機能です。複数の非同期操作を完了する必要があり、これらの操作が相互に依存していない場合に、Promise.allは特に便利です。
# Promise.allを利用前
以下の関数を参考にしてください。この関数では、すべてのステップが前のステップが終了するのを待ってから実行されますが、実際にはご飯を炊くことと野菜を切ることは同時に行うことができます。そのため、かなりの時間が無駄になっています。
“`typescript:example.ts
// チャーハンを作る関数
const makeDish = async (): Promise=> {
await prepareIngredients(); //食材を用意する
await cookRice(); //ご飯を炊く
await chopVegetables(); //野菜を切る
await addIngredients(); //食材を入れる
await stirFry(
Node.jsで待望(?)のコンソールの色を変えられるようになった
Node.js 21.7.0のアップデートでText Stylingという項目がありました。
コンソールに表示させる **文字の色や装飾や背景色を変えられる**ようになります。
> ![スクリーンショット 2024-03-31 19.12.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/7a51a464-e65c-ad8e-b00c-f955b51fa002.png “スクリーンショット 2024-03-31 19.12.55.png”)
> https://github.com/nodejs/node/releases/tag/v21.7.0“`js
const { styleText } = require(‘node:util’);
const errorMessage = styleText(‘red’, ‘Error! Error!’);
console.log(errorMessage);
“`こんな感じでコンソールの文字色が外部モジュール無しで変えられま
node.jsでメモリの使用量を調べる方法
この記事では、Node.jsでメモリ使用量を調べるための方法を紹介します。
## process.memoryUsage()メソッドの使用
Node.jsには、現在のプロセスのメモリ使用状況を調べるための組み込みのメソッドがあります。process.memoryUsage()は、ヒープ使用量、ヒープの合計サイズ、RSS(Resident Set Size)など、様々なメモリ使用指標を含むオブジェクトを返します。
“`
/*
rss (Resident Set Size): 全てのメモリ使用量を含む、プロセスに割り当てられたメモリの量
heapTotal: ヒープに割り当てられた合計メモリの量
heapUsed: 実際に使用されているヒープのメモリの量
external: V8エンジン外部で確保されたメモリの量(例えば、ネイティブモジュールによって確保されたメモリ)
*/const used = process.memoryUsage();
const messages = [];
for (let key in used) {
const mb = Math.round