Node.js関連のことを調べてみた2022年04月10日

[Typescript] オブジェクトの特定プロパティの型を上書きする型関数をつくる

# 成果物
“`
/**
* 特定のプロパティを上書きする型関数
* Overwrite
*/
export type Overwrite = Omit< T, keyof U > & U;
“`

# 何がしたいか
“`
type Person = {
firstName: string;
lastName: string;
age: string;
};
“`
例えば上記の様なオブジェクトがあとすると、 `age` プロパティだけ型を `string` から `number` へサクッと安全に変更できる型関数を作りたい。

**※ しかしプロパティの上書きは混乱を招くので、今回の例のような場合は設計を見直すべきです。**

私たちの場合、ORMにPrismaを使っているのですが、Jsonデータを取得するときに、 `any` 型になってしまう。そういった時に、jsonデータのみを自分たちで作った型に上書きしてあげたか

TypeScriptで手軽にCLIを実装する

GitHub Actions上で簡単なスクリプトを実行する機会があり、TypeScriptで書いてさくっと実行したいなと思いました。また、

– 開発時に毎回JavaScriptにトランスパイルするのはめんどくさい
– mainにマージする前はDry Runを実行したい

という背景から、TypeScriptのトランスパイルと実行を手軽にできる`ts-node`、 CLIのオプションなどを手軽に設定できる`commander`を使うことにしました。

記事で使っているコードはこちらのリポジトリに上げています。

https://github.com/kyntk/q-typescript-cli

## ts-nodeでTypeScriptの実行

https://github.com/TypeStrong/ts-node

typescript, ts-nodeをインストールします。

“`bash
yarn add -D typescript ts-node
yarn tsc –init
“`

まずはコンソールに出力するだけのスクリプトを実装します。

“`ts:main.

ExpressでJWT認証機能付きのAPIを作成する（その4. サインアップ時のメール認証・パスワードリセットの実装）

# はじめに
この記事は「その3. 認可機能とユーザ操作の実装」に続けて書いています。

## 目的
自社のFileMaker CloudデータベースにWebからアクセスするためのAPIを作成する必要があり，そのために勉強したことの備忘録として step by step で作成の過程を書いていきます。想定する読者はjavascriptを触ったことはあるけれども，本格的なバックエンド開発の経験は無い，というような方です。

この記事では不特定多数のユーザを対象とするサービスを構築する際に必須となるサインアップ時のメール認証やパスワードリセットの機能を，`Node.js`用のメーラーモジュールである`nodemailer`を用いて実装していきます。

## 開発環境
node v14.17.4
npm 6.14.14

ローカル開発環境には仮想SMTPサーバである[MailCatcher](https://mailcatcher.me/)がインストールされている前提です。

# Step 1. Nodemailerのセットアップ
“`zsh:zsh
$ npm install nodem

Node Version Management “fnm” 【WSL2 ubuntu 20.04】

# Library

https://github.com/Schniz/fnm

# Install

“`sh
$ curl -fsSL https://fnm.vercel.app/install | bash
“`

# Setting

“`
$ vim ~/.bashrc
“`

↓

“`
__fnm_use_if_file_found() {
if [[ -f .node-version || -f .nvmrc ]]; then
fnm use
fi
}

__fnmcd() {
\cd “$@” || return $?
__fnm_use_if_file_found
}

alias cd=__fnmcd
__fnm_use_if_file_found
“`

↓

“`
$ source ~/.bashrc
“`

# Usage

### Change your directory

“`
$ cd ~/＜Your project folder＞
“`

### Create `.node_v

OAuth2.0のAuthorization Code GrantでPKCE（認可コード横取り攻撃）対策について理解する　実際に実装もやってみた

## はじめに
https://qiita.com/yuta-katayama-23/items/b074e85504fc05ac76dc

https://qiita.com/yuta-katayama-23/items/4214114a21c11ec4f934

ではAuthorization Code Flowを体感するためにNode.jsのExpressでデモ用のWebアプリを作成して、実際にアクセストークンを取得しAPI実行までをやったみた。

その際には、

> ※今回はあえてCSRF対策やPKCE対策に必要になるパラメータを省略している。CSRF対策やPKCE対策については今後記事を執筆予定。

と書いたように、推奨されているセキュリティ対策のための実装をしていなかったので、今回はCSRF対策の実装の続きでPKCE対策の実装をやってみたいと思う。CSRF対策については以下の記事を参照。

https://qiita.com/yuta-katayama-23/items/020169b66d1abe242b37

※本記事中で筆者の理解に誤りがあればご指摘頂けると幸いです。

nodeのバージョン切り替えを簡単に

# nodebrewを使ってサクッとnodeを切り替える
受託の案件でチケット毎にバージョンを切り替えることが1日に何度もある。しんどい！！
と思ってた時の備忘録を執筆。

## 今回やること
nodeの切り替えをサクッと15秒で終わらせる
#### 前提
nodeが入っていればアンインストールする。
#### Nodebrewをインストールする
“`sh
# インスコ
$ brew install nodebrew
# 確認
$ nodebrew -v
“`
## バージョン管理
“`sh
# 使用確認の一覧
nodebrew ls-remote

# インストール方法
nodebrew install-binary バージョン

# 例
nodebrew install-binary v8.16.0
nodebrew install-binary v10.0.0
“`

では早速、ささっと切り替えてみる
“`sh
# インスコ済み一覧
$ nodebrew ls

# 切り替え
$ nodebrew use v10.0.0

# 確認
$ node -v
“`
ま

obnizと友だちになりたい　①光センサーで貧者のテルミン

## 目的

obnizに慣れ、IoT初心者としてその楽しさを知ることを目的に、継続してobnizと触れ合っていきます。

## 実装目標
最初は、**距離センサーで人の動きを感知してライン経由で通知を送ってくれるプログラム**を作ろうとしていました。

というのも、私が管理しているオープンスペースがあるのですが、部屋を離れていても、人が来た時に教えてくれると便利だなと思ったからです。そうした生活に根付いた便利さがあると、継続してobnizに興味を持てるのではと思います。

ただ、いきなり距離センサーが不機嫌で、電圧が低いだの何だの連呼しだし、時間がないのもあり路線を変更することになりました。（ハーゲンダッツより高いくせに、まさかこのまま壊れる気じゃないだろうな。）


## 実装目標　（変更）
ということで

Docker+nodeでhtmlを表示したい!

## 目的
nodeのイメージを使って、ただのhtmlを表示したい！

## 開発

javascriptのパッケージexpressを用いるので、まずpackage.jsonを作成します。

“`
$ npm init
$ npm install express

“`

srcフォルダ以下にjsとhtmlを入れます

“`js:src/app.js
const express = require(“express”);

const app = express();

const PORT = “8000”;

app.get(“/”,(req,res)=>{
res.sendFile(__dirname+”index.html”);
}
)

app.listen(PORT);
“`

“`html:src/index.html

Hello World

“`

その上にDockerfileを作成します。

“`Dockerfile:Dockerfile
FROM node:12.16.3

WORKDIR /code

COPY packag

シークレットキー作成

nodeのcryptoモジュールを使うと簡単にシークレットキーを作成できます。
“`
npm i crypto
node
> require(‘crypto’).randomBytes(64).toString(‘hex’)
‘032bb3825ed806cc184267557995068ea4eee83ec7559f0f38fbdba3527193d47854ba8836c8a78ac8f8e959ad6918a38be18c3d0fec332082d62f84a3e84198’
“`

↓こちらの動画の4:15:00ぐらいに出てたテクニックです。

Stripe Checkoutを利用した決済で、ゲスト顧客の住所や氏名を取得する方法

Stripe Checkoutでは、会員機能のない通販サイトなど向けにゲスト注文の機能が用意されています。

https://qiita.com/hideokamoto/items/783cd6fef5759aaf1505

ゲスト顧客として注文を処理した場合、Customer APIから顧客のデータを取得することができません。

そのため、注文時に入力された氏名や住所は、Checkoutのセッション情報から取得します。

## Checkoutのセッション情報を取得する

Checkoutのセッション情報は、Session IDを利用して取得します。

“`js
const session = await stripe.checkout.sessions.retrieve(‘cs_test_xxxx’);
“`

**2022/03/30以降の注文**では、取得したデータの中に`customer_details`が含まれています。

“`js
{
customer_details: {
address: {
city: null,

nvm インストール

#brew でインストール

“`
brew install nvm
“`

“`
source $(brew –prefix nvm)/nvm.sh
“`

“`
echo ‘source $(brew –prefix nvm)/nvm.sh’ >> ~/.bash_profile
“`

# バージョン確認
“`
nvm –version
“`

# 何があるか確認
“`
nvm ls-remote
“`

# インストールしたいバージョンを指定
“`
nvm install 12.16.0
“`

# 確認
“`
nvm ls
“`

# node確認
“`
node –version

“`

# リンク

[GitHub](https://github.com/nvm-sh/nvm)
https://github.com/nvm-sh/nvm

[参考本](https://qiita.com/ffggss/items/94f1c4c5d311db2ec71a)
https://qiita.com/ffggss/items/94f1c

ExpressでJWT認証機能付きのAPIを作成する（その3. 認可機能とユーザ操作の実装）

# はじめに
この記事は「その2. Access Token / Refresh Tokenによる認証機能の実装」に続けて書いています。

## 目的
自社のFileMaker CloudデータベースにWebからアクセスするためのAPIを作成する必要があり，そのために勉強したことの備忘録として step by step で作成の過程を書いていきます。想定する読者はjavascriptを触ったことはあるけれども，本格的なバックエンド開発の経験は無い，というような方です。

この記事では
* Access Tokenを用いた認証・認可ミドルウェアの実装
* ユーザ情報の読み出し・編集・削除といった基本的な機能の実装
までを行います。

## 開発環境
node v14.17.4
npm 6.14.14

# Step 1. 認証・認可ミドルウェアの実装
ユーザ情報の読み出しや編集，削除には当然ながら認証・認可処理が必要となる。例えば，

* ユーザ作成（サインアップ）は認証なしで可能
* 自分のユーザ情報の読み出し・編集・削除は認証された登録ユーザであれば可能
* 他人のユーザ情報の読み出

Nuxtをインストール後にnpm run devでエラーを吐く時の解決方法

**解決方法：NodeをLTSバージョンに変更**

Nuxtをインストールしてよし始めるぞとなった時に下記のエラー吐きました。
“`
node:internal/crypto/hash:67
this[kHandle] = new _Hash(algorithm, xofLen);
^

Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:67:19)
at Object.createHash (node:crypto:135:10)
at module.exports (/Users/tenopee/work/node_modules/webpack/lib/util/createHash.js:135:53)
at NormalModule._initBuildHash (/Users/tenopee/work/node_modules/webpack/lib/

Google Cloud Functions: 加算

“`js:index.js
/**
* Responds to any HTTP request.
*
* @param {!express:Request} req HTTP request context.
* @param {!express:Response} res HTTP response context.
*/
exports.sum_up = (req, res) => {
var str_out = “”
str_out += “これはテストです。\n”
str_out += “Good Evening\n”
str_out += “今晩は\n”
str_out += “Apr/04/2022 PM 18:02\n”
const aa = req.body[‘aa’]
const bb = req.body[‘bb’]
const sum = parseInt(aa) + parseInt(bb)
str_out += “aa = ” + aa + “\n”
str_out += “bb = ” + bb + “\

M1 MacにnvmでNode.jsをインストールする

最近M1チップ搭載のMacBook Airを購入しました。
M1以外のMacも同じ方法でインストールできますが、購入記念（？）で書き残しておきます。

# 紹介すること
– M1 Macでnvmを利用するときの注意点
– nvmのインストール
– nvmを利用したNode.jsのインストール

# 検証環境
– macOS Monterey 12.3.1
– MacBook Air(M1, 2020)

# nvmとは
[Node.js](https://nodejs.org/en/)のバージョン管理ツールです。
https://github.com/nvm-sh/nvm#about

## なぜnvmを使うの？
– Node.jsをバージョン管理したいから
– [EC2のチュートリアル](https://docs.aws.amazon.com/ja_jp/sdk-for-javascript/v2/developer-guide/setting-up-node-on-ec2-instance.html)に紹介されているので信頼性が高そうだから

Node.jsのバージョン管理ツールで

NVM for Windows利用時にNode.jsバージョン変更後「npm ERR! Unexpected token ‘.’」が出るとき

# 経緯

NVM for Windows 1.1.7を利用中、Node.jsのバージョンを14系から16系に上げた際、
>npm ERR! Unexpected token ‘.’

が出てビルドできなくなってしまう事象が発生。

# 対応

> NOTICE: If you downloaded this version before Dec 15, 2021 and are affected by issue #706, please re-download. This fix was not present in the initial binary and has since been corrected.
https://github.com/coreybutler/nvm-windows/releases/tag/1.1.9

や

https://github.com/npm/cli/issues/4234#issuecomment-1080927985
のコメントを参考に、
1. まず[NVM for Windows](https://github.com/core

個人で三菱UFJの口座情報をAPIで取得しようとしたけど…

# 結論から言うと
[API開発者ポータル](https://developer.portal.bk.mufg.jp/)でアカウント登録、シークレットKeyを発行してもあくまでその時点で登録できるのは体験コースプラン、できることはテストデータへAPI経由でアクセスだけで、本番環境へのアクセスは[三菱UFJダイレクト APIサービス・BizSTATION APIサービス](https://developer.portal.bk.mufg.jp/api_service_directbiz)に留意点に記載されている通りでハードル高い感じでした。
まぁそりゃそうか…

以上、採用系のプロダクトを提供している会社でもろもろ担当する予定のAkibinでした。

# やってみたかったこと
いちいち三菱U

【クライアントサイド編】GraphQLを使うぞ(TypeScript, Next.js使用)

※この記事は「【サーバサイド編】GraphQLを使うぞ」の続きになります。

こんにちは！今回はGraphQLを使ってTodoアプリを開発していきたいと思います。前回作成したサーバサイドと接続していく形です。(Next.jsの使い方には詳しく触れませんのでご了承ください。)

# 目次
[1.使用技術](#1-使用技術)
[2.使用する主なファイルの立位置](#2-使用する主なファイルの立位置)
[3.最初の準備](#3-最初の準備)
[4.データを全件取得](#4-データを全件取得)
[5.データの編集](#5-データの編集)
[6.データの1件取得](#6-データの1件取得)
[7.2つのメソッドを叩く](#7-2つのメソッドを叩く)
[8.型について](#8-型について)
[9.まとめ](#9-まとめ)

# 1. 使用技術
GraphQLではかなり細かく型が設定できるのでJavaScriptを使用しましたが、今回はTypeScriptを使用

node.js で Google Drive にアクセスする際に認証でハマった

# 症状

公式のクイックスタートに沿って進める。

https://developers.google.com/drive/api/quickstart/nodejs

しかしエラーが出てうまく行かない。

“`
Error: TypeError: Cannot destructure property ‘client_secret’ of ‘credentials.installed’ as it is undefined.
“`

# 原因

サンプルコードにある`credentials.json`をクイックスタートの手順で取得する際に、以下ページに誘導される。

https://developers.google.com/workspace/guides/create-credentials

ここで、以下3種類のキーの取得方法が紹介されている。

– API key
– OAuth client ID
– Service account

どうやらクイックスタートはこのうち、 **OAuth client ID の取得を前提としたサンプルコード**になっているようだった

Mac + Node.js + Google Sheets APIでGoogleスプレッドシートを参照

採用系のプロダクトを提供している会社でもろもろ担当する予定のAkibinです。
最近は岡村ちゃんにハマってます。めちゃくちゃいまさら感満載ですが、サイコー！
[岡村靖幸 – ビバナミダ](https://www.youtube.com/watch?v=6bH_SAZixqQ)

# やってみたこと
Node.jsとGoogle Sheets APIでGoogleスプレッドシートの内容をMacから参照してみました。
ここらへんの情報はWebに結構多いですが、古くていまいち手順に手間取ったのと[Node.js quickstart](https://developers.google.com/sheets/api/quickstart/nodejs)のアクセストークン取得部分が大まかなので、自分の備忘録の意味も込めて記事にしてみます。

### 環境
* MacOS `12.2.1`
* Node.js `v16.14.2`
* npm `8.5.0`
* Google Sheets API v4
* Visual Studio Code

### 作業概要
1. Google Sheet