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

ElasticBeanstalkのUnknown or duplicate parameter: NodeCommandの対処法

昨日、下に貼ったこちらの動画と公式のドキュメントを基にnode.jsのアプリケーションをAWS Beanstalkでデプロイすることを試みた。

https://docs.aws.amazon.com/ja_jp/elasticbeanstalk/latest/dg/create_deploy_nodejs_express.html

ということで上の資料ではエラーが起きてしまうところの対処法を先に記述する。
その後、全体の流れを記述する。

“`
C:\Users\yusuk\nodejs-project>eb deploy
Creating application version archive “app-c698-230118_133959827133”.
Uploading nodejs-project/app-c698-230118_133959827133.zip to S3. This may take a while.
Upload Complete.
2023-01-18 04

cpxが更新されないのでfsで置き換えてみる

npm script で一部の素材ファイルやディレクトリをまるごとコピーするのに便利な cpx だが、すでに6年も更新されておらず、最近になって npm audit に警告がでるようになった。

https://www.npmjs.com/package/cpx

流石に6年放置は修正が期待できないので代替案を考えた。

以下は私のプロジェクトで利用しているスクリプト例（webfont用のファイルをコピーしている）
これをベースに書き換えを行ってみる。

“`json
“font”: “cpx -C \”./dev/assets/fonts/*\” \”./public/assets/fonts\””,
“watch:font”: “cpx -C \”./dev/assets/fonts/*\” \”./public/assets/fonts\” -w”,
“`

### 1. cpコマンドを使う

“`json
{
“font”: “cp -r ./dev/assets/fonts ./public/assets/fonts”
}
“`

私がWindows派なのでな

SvelteKitでPostgresSQLへデータの登録・取得をしてみる

# はじめに
SvelteKitは公式ドキュメントが（体感）読みやすいですね！
しかし、公式ドキュメントではDBを利用するにはどうすればいいのかが、
ふんわりとしか書かれていないため、実際に理解のためにSvelteKitからDB接続を試してみたいと思います。
個人的に理解した内容になるため、誤りやもっと良い方法などがあればコメント頂けると嬉しいです。

# 前提
– 開発環境：Windwos10
– 主なバージョン
– SvelteKit：1.0.0
– Node.js：v16.16.0
– Postgresql：PostgreSQL 12.2, compiled by Visual C++ build 1914, 64-bit

# Postgresqlの準備
今回はDBに特にこだわりがなかったため、PostgreSQLを使用しました。
ローカル開発環境用にインストールする場合、次の記事が参考になると思われます。

https://qiita.com/tom-sato/items/037b8f8cb4b326710f71

# SvelteKitの準備
公式ド

Rails7 のフロントエンド関連の Gem を分類

## はじめに

最近の Rails にはフロントエンドに関係する `ooooo-rails` といった Gem がたくさんあります。
たくさんありすぎてよくわからなかったので、分類してみました。

## 結論

| 関心 | Gem |
| ———————————————— | ————————————————– |
| アセットパイプライン | sprockets-rails, propshaft |
| JavaScript, CSS の管理（Node.js を使う場合） | jsbundling-rails, cssbundling-rails

Puppeteerを使ってMoneytreeの口座情報をスクレイピングする

家計簿アプリのMoneytreeを使うと銀行口座や証券口座、カードの情報が一元化されてとても便利ですよね。

今回はMoneytreeに連携された口座情報をスクレイピングで引っ張ってくる方法を紹介します。
（引っ張ってきたデータはExcelに積み上げたり、差分をSlackに投稿したり出来ますね）

スクレイピングというと、Seleniumを思い浮かべる方も多いかと思いますが、今回はNode.jsのライブラリであるPuppeteer（パペティア）を使います。

理由としては以下の通りいくつか挙げられます。
– Puppeteerをインストール（`npm install puppeteer`）すると、ヘッドレスブラウザのChromiumがセットでインストールされ、手軽にスクレイピングができる。（Seleniumの場合はWebDriverのバージョンを合わせたりPathの設定が必要だったりハードルが若干高い）
– AWSやGCPに乗っける際に苦労が少ない。（こちらの利点がかなり大きいです。）

別記事で、PuppeteerをGCPのCloud Functionsで動かす方法を紹介します。

socket.ioを利用したアプリのデプロイをしたい(攻略編)

昨日、サーバーサイドがあるウェブのデプロイに苦戦したが振り返ると検索の仕方が悪かった。

サーバーサイドがあるウェブサイトの公開という部分がメインでsoket.ioを利用しているという点はメインではない。

ということで、Node.jsを含めての検索に変えてやり方を模索した。

https://yu-teck.com/programming/node-js/node-chat-app/

https://noauto-nolife.com/post/heroku-counter-plan/

上の2つの記事を読んでわかった重要な点が2つある。

・Netlifyはあくまでフロントサイドだけホスティングするサービスであり、サーバーサイドがあるウェブには向かないという点。
・Herokuの無料プランはなくなっており、Herokuでデプロイするにはお金がかかる点。

Herokuでデプロイするのが一番簡単そうだが、勉強のためにもAWSで公開したいなと思っている。
ブログの後半にはまた違うことを言っているかもしれない。

https://www.youtube.com/watch?v=0oIc

【Windows/Mac/Linux（Ubuntu）】Node.jsインストール方法

# Node.jsインストール方法【Windows】

1. 以下のURLにアクセスする。
– [インストーラー](https://nodejs.org/ja/)
2. 推奨版を押下する
3. フォルダを開く
4. `node-v16.14.0-x64`をダブルクリックする
![Node03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449867/89dd9db9-6563-6e3b-2b9f-43679d4

Next.jsもとい、Node.jsでprofilerを簡単に使う方法

現在、Chromeを使うことでGUIベースでProfilerを使用することが可能になっています。
その方法の紹介です。

# 手順

## Next.jsをProfilerを有効な状態で立ち上げる

Next.jsを立ち上げる際に次のようにNODE_OPTIONSをしてして起動してください。

“`
NODE_OPTIONS=’–inspect’ next dev
“`

## ChromeのInspect画面を表示

[chrome://inspect](chrome://inspect) にアクセスすると、inspectorが利用可能です。
Devices > Remote targetにinspectオプションを有効にしたプロセスがリストされているので、`inspect`リンクをクリックしてください

## Profilingする

以上
後は開いたウィンドウのProfilerタブからCPUのProfile、MemoryタブからMemoryのProfileを取得できます。

# 参考

https://medium.com/@paul_irish/debugging

Node.js でタイムスタンプリクエストを作成する

Node.jsの標準ライブラリにはタイムスタンプリクエストを生成するライブラリは存在しないので、今回は[jsrsasign](https://kjur.github.io/jsrsasign/)を使用してタイムスタンプリクエストを生成します。

## jsrsasign のダウンロード

NPMでダウンロードします。

“`
> npm install jsrsasign jsrsasign-util
“`

## サンプルプログラム
[KJUR.asn1.tsp.TimeStampReq](https://kjur.github.io/jsrsasign/api/symbols/KJUR.asn1.tsp.TimeStampReq.html), [KJUR.asn1.tsp.MessageImprint](https://kjur.github.io/jsrsasign/api/symbols/KJUR.asn1.tsp.MessageImprint.html) を使用して、タイムスタンプリクエストを作成します。

“`javascript
const {createHash

【JavaScript】Node.jsでのfs.readFileSync()の相対パス

# Node.jsでのfs.readFileSync()
以下のようなディレクトリ構成で作業をしているとしましょう。
“`
│ main.js
│
├─commands
│ callhere.js //fs.readFileSync()を呼ぶファイル
│ other1.js
│ other2.js
└─config
config.json // 読み込みたいjsonファイル
“`
さて、jsonファイルを読み込むためには、どのようにすればいいでしょうか。“callhere.js“で
“`javascript
const jsonData = JSON.parse(fs.readFileSync(“../config/config.json”));
“`
とすればパスが通っていそうですよね。しかし、“Node.js“をインストールしているディレクトリでは、この書き方ではエラーになってしまうのです。どうやら、この書き方では、現在のファイル(例では“callhere.js“)が存在する位置を最上位のディレ

GASでちゃんとしたHTMLパーサーが使いたかったのでライブラリにした

# HTMLパーサーが欲しい
GASでスクレイピングすると誰もが思うこと、「HTMLパーサーが…欲しい…!!」
正規表現でもなんとかなるといえばなるけど柔軟性に欠けるし保守性も低い。
よく紹介されるのはParserだけど個人的には「コレ使うなら正規表現でも変わらなくね？」と思ってしまうし、同一タグのネストを解決するのが大変。

ならnodejsから移植すれば良いじゃない。
というわけでライブラリを作りました。下記IDをライブラリ検索で利用できます。
スクリプトID: `1JTLPVXGW6Pq4zSAV5ED9XrWOPydVywumQZSOWN7l6KJ0UtWxtX3RbYO6`
GitHub: https://github.com/kairi003/gas-html-parser

# 使い方
本ライブラリはほぼ[node-html-parser](https://www.npmjs.com/package/node-html-parser)そのままです。作ったとか言えないレベル。
細かい利用方法は本家のドキュメントを確認していただくとして、以下のように使えます。
“`js
c

【Node.js / Vercel】おまえは今までにプログラミングしたbyte数を覚えているか

# 覚えていますか？[^1]

ということで、こんなものを作りました。
GitHubのレポジトリのプログラミング言語とそのbyte数を集計して、グラフをSVGとして表示するものです。

↓↓ こんな感じ（私のレポジトリ集計結果です）
[](https://github.com/yamaccu/Github-Repo-ByteCounter)

# 何に使うの？

独学において、自分の勉強量の見える化はモチベーションにつながります。
勉強時間でもいいのですが、GitHub APIでレポジトリのbyte数が取得できるので、プログラミングしたbyte数も良いモチベーションになるかもと思い、作ってみました。

GitHubのプロフィールに貼ると少しだけイケイケになります。

[![githubProfile-min.png](https://qiita-imag

【Express.JS×PostgreSQL】でテーブルのCRUD機能を実装する。

Javascriptフレームワーク「Express.js」を使ってテーブルのCRUD機能を作ってみよう！

【最終目標】の画面はこんな感じの画面です。↓


【開発環境】
OS:Windows11
【ミドルウェア】
PostgreSQL
【Node.jsフレームワーク】
Express.js

# 準備
■【Node.js】のインストール
Node.jsは以下からインストール↓
[Node.js](https://nodejs.org/ja/)

■PostgreSQLは以下からインストール↓
[PostgreSQL](https://www.postgresql.org/download/)

# Express Generatorをインストールする。
ExpressのWebアプリケーションを開発するにあたって便利なソフトウェア「Express G

npmとnpxの違い説明できますか？


# はじめに

記事をご覧いただきありがとうございます。
現在私は大学に通いながら日々プログラミングの勉強を進めています。
主に領域としましてはフロントエンドをメインに勉強をしてきました。そこでふと疑問に思った部分があります。

**それは「npm」と「npx」の違いについてです。**

主にlocalhostを立てる際に使用していましたが突然こんがらがってしまいこれは一度しっかりと理解し直すべきと感じこの記事を書くに至りました。

# 対象の読者
* 一度でも「npm」「npx」コマンドを使用したことがある方
* 日々開発でlocalhostを立てている方
* テンプレとして考えておりしっかりと理解し直したい方
* 一度でも私と同じように「npm」と「npx」でこんがらがったことがある方

# 目次
1.そも

【備忘録】Node.js×pnpm×TypeScript

# はじめに

Vue CLIやviteを利用すると設定ファイルを一通り用意してくれてしまうので、学習のためにイチから各種ライブラリを導入して作成してみた。
またpnpmも初めて使ってみた。

記事作成時点での最新情報を盛り込んだつもりだがNodeやTSまわりの技術は日進月歩なので古い（または古くなった）情報があったらすみません。

### 開発環境
– macOS Ventura 13.1
– Visual Studio Code 1.74.3
– Node.js 18.13.0

### 事前準備

#### pnpm有効化

https://pnpm.io/ja/installation#corepack%E3%81%AE%E4%BD%BF%E7%94%A8

最近のNode.jsにはpnpmがバンドルされているので有効化だけすればよい。
※ドキュメントにはないが自分の環境では`sudo`がないとPermission Deniedになった

“`
sudo corepack enable
“`

有効化確認＆バージョン確認

“`
pnpm -v
“`
>7.25.0

Debian11をVirtualBoxにインストールしたメモ（忘備録）

VirtualBoxにインストールした時の忘備録です。
ちょいと実験用に使いたくDebianの最新リリース11をVirtualBoxにインストールしました。わりと最近使っていたCentOSと比べると少し勝手が違ったので忘備録としてメモしておきました。インストール時オプションは何も考えずにデフォルトのままです。

# とりあえずやったこと（やっておきたいこと）
1. VirtualBoxのネットワーク設定
2. GUIにrootでログインしたい
3. IPアドレスを固定
4. TeraTermを使いたい
* rootでログインしちゃう？
5. sudoを使える様に
6. ランレベルの設定など
* CUIで起動させたい
7. コンパイラとかのインストール
* C、C++のコンパイラはいるでしょ
* makeもいるでしょ
* Pythonは標準で入ってるからそのままでいいかな
* node.jsを使いたい

## VirtualBoxのネットワーク設定
何も考えずにインストールしたらVirtualBoxのネットワーク設定がNATになっていて、D

【Node.js】Stripeライブラリの入出力がsnake_caseになっているのをどうにかしたい

## はじめに

Node.jsでStripeを操作する際には、[Stripe Node.js Library](https://github.com/stripe/stripe-node)を利用する事になる。ただ、このライブラリのインターフェースはsnake_caseであり、JavaScriptのcameCaseと乖離があり利用しにくいと感じていた。

そこで今回は、インターフェース（入出力）をcameCaseで行えるようにするために、ライブラリに対しカスタムの拡張を行う実装をやってみたいと思う。

ソースコード全体は以下。

https://github.com/yuta-katayama-23/node-express/commit/3f76584935654a0ca472a7d8f8f42fbfab9dca57

## 実際にやってみる

“`js
import Stripe from ‘stripe’;
import { strict as assert } from ‘assert’;
import snakecaseKeys from ‘snakecase-keys’;

WingetでNode.jsインストール

## Windows11のノートPCにNode.jsをインストールした時のメモ

超簡単な自分用の備忘録メモです。

## 環境

OS:Windows11 Pro

## パッケージマネージャ何使うか

Windowsのパッケージマネージャーは、scoopとかchocolateyとか有名だが、本家が一番良いのでは？ということで、後発ですが、wingetを利用。

* chocolatey うーん。以下２つに対してメリット感じられず。（個人的に触ったことがあったscoopかwin標準のwingetか）
* scoop 以前はこっちをつかっていたこともあるが、Powershellで実行していた
* winget コマンドプロンプトで実行できた

## 目的はnode.jsのインストールとnpmの利用

### 以下wingetコマンド実行してあるかなチェック

~~~
winget search nodejs
~~~

でこんな結果が返ってくる。（2023/01/16現在）
~~~
名前 ID バージョン

CognitoユーザープールにAWS SDK for JavaScript v3でアクセス その2 – ユーザ登録

https://qiita.com/pilot/items/df8f3091e5ed0e35b4b4

の続き

# Cognitoクライアントの設定確認
1. AWSコンソール→Cognito→MyUserPool→アプリケーションの統合タブ→MyAppClient
1. クライアントIDとクライアントシークレットをメモ ★1

# 登録メール受取用gmailアカウント
今回はCognitoから送られるメールについてなりすましとみなされる件(メールのFromのドメインと実際の送信元IPアドレスが異なる)の対応は行わない
そのため、例えばdocomoメアドだとメールを受け取れない
gmailだったら受け取れるのでgmailアカウントを用意する (新規でも既存でも良い) ★2

# ユーザ登録 (メール送るまで)
1. 作業フォルダに以下のファイルを作成 → 使用クラス https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/clients/client-cognito-identity-provider/classes/signup

TypeScriptでコマンドラインパラメーター解析

Node.jsのCLIなツールをいくつかTypeScriptで作っています。

毎回コマンドラインパラメーターの解析が似たような処理になるので、関数にして使い回していました。

せっかくなのでパッケージとして公開しています。

– [optionalist](https://www.npmjs.com/package/optionalist)

## 特徴

– コマンドラインパラメーターの解析として、当然指定されたパラメーターの情報に合わせて解析します。
TypeScript用なので解析結果は指定した名前と型のプロパティを持つオブジェクトとして返します。
このときのオブジェクトの型は可能な限り指定されたパラメーターの情報を反映したものにしてあります。
– 指定されたパラメーター情報からヘルプ用の文字列を生成します。
CLIに指定されたパラメーターにエラーがあれば自動的にヘルプ用文字列を表示するようにもできます。
– プロパティの型情報にはパラメーターのヘルプ用の文字列や制約などの情報を載せています。`VS Code`などの型を表示してくれるエディターであれば、プロパティに