WSL2上でwebpackのホットリロードが効かない

# はじめに

上記の本を参考にTypeScriptの勉強をしていたところ、webpack serveによる自動ビルドがうまく働かず少し悩んだため、解決策を備忘録として残しておきます。

# 状況

webpack serveでサーバーを起動するこ

Node.jsで使えるExcelライブラリ調査

Excelファイルを扱うライブラリが多すぎてどれを使ったらよいかわからないので・・・

# 結論

データの読み込みだけなら __xlsx__
Excelのテンプレートに書き込むなら __ExcelJS__ or __xlsx-populate__
ただし、ExcelJSはかなり多くのバグが放置されているので注意

| | TypeScript | 読み込み | 書き込み | スタイル設定 | スタイル保持 | 画像挿入 | セルコメント |
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
| xlsx | ○ | ○ | ○ | | | | ○ |
| xlsx-js-style | ○ | ○ | ○ | ○ | | | ○ |
| node-xlsx | ○ | ○ | ○ | | | | |
| ExcelJS | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
| excel4node | | | ○ | ○ | | ○ | ○ |
| officegen | | | ○ | |

BoxにNode.jsからファイルアップロードメモ

[Box](https://www.box.com/ja-jp)のAPIを使ってファイルアップロードを試してみます。

## シンプルなサンプル

https://github.com/box/box-node-sdk

こちらのSDKを使って試してみましたが、割とシンプルに動きました。

ドキュメントを見つつasync/awaitに書き換えてます。

> https://github.com/box/box-node-sdk/blob/main/docs/files.md#upload-a-file

“`js
‘use strict’;

const BoxSDK = require(‘box-node-sdk’);
const fs = require(‘fs’);

// Initialize the SDK with your app credentials
const sdk = new BoxSDK({
clientID: ‘xxxxxxxxxxx’,
clientSecret: ‘xxxxxxxxxxxx’
});
const client = sdk.g

Webex APIを使って、メッセージを送る

React、node.js、Google Cloud Platform (App Enigine)で[SORTFUL](https://sinceretech.app/ “SORTFUL”)というチームビルディングゲームを作る際に出てきた疑問を、備忘録として記事にまとめています。

はじめに

今回SORTFULで、参加者それぞれにこっそりメッセージを送らなきゃいけない場面があり、そのためにwebex,slackのAPIを利用することにしました。

webex for Developersに登録する

まずは[webex for Developers](https://developer.webex.com/ “webex for Developers”)にSign Upします。
※Webexアカウントをお持ちの方は、そのアカウントでログインできます。

![Webex1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2388662/9f4caaad-59c5-8fd0-1790-ee

serverlessFWにこんにちは　serverlessでローカル上でAWS Lambdaを起動・呼び出してみる

## はじめに
[AWS SAMを使ってLambda(GO)のCICDをGitHub Actionsで構築](https://qiita.com/yuta-katayama-23/items/d5c786aaa2a439a3cb17)でサーバーレスアプリケーションを構築するフレームワークとして[AWS SAM](https://aws.amazon.com/jp/serverless/sam/)は触った事があったが、[serverless](https://www.serverless.com/)は触った事がなかったので、serverlessでHello World（Node.js）をやってみたので備忘録を残す。

やってみた事としては、以下の3つ。

– cli上で`severless`コマンドからHello World的なLambda関数を作成するseverless.ymlの作成
– ローカル環境でそのLambda関数を実行し、Lambdaを呼び出し
– 【おまけ】実際にAWS環境にDeploy

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

https://github.com/yuta-kata

MQTTブローカーの shiftr.io で HTTPリクエスト（内向き/外向き）を組み合わせる【2022年4月版】

MQTT を利用する際の仲介役となる MQTTブローカーを準備する際、外部サービスやライブラリ等を利用して準備するなどしますが、クラウド・デスクトップの両方で使える MQTTブローカーで shiftr.io というサービスがあります。
この shiftr.io は、MQTT だけでなく HTTP のインタフェースを持っており、HTTPリクエストと MQTT の Pub/Sub との間をつなぐ役割を担うこともできます。

その shiftr.io の HTTPインタフェースについては、過去に一部を試したことがあり、手順を以下の記事に書いていました。

●【NoCode 2020】 MQTTブローカーの shiftr.io と IFTTT の Webhook をつなぐ（shiftr.io の HTTP Interface） – Qiita
　https://qiita.com/youtoy/items/c690e2f1aa064e6dd289

しかし、その時に試せてなかった機能もあったり、試したものの記事にしてなかった部分もあったため、あらためて今回の記事で情報をまとめてみようと思います

GAEでAPIキーを隠したいとき

React、node.js、Google Cloud Platform (App Enigine)で[SORTFUL](https://sinceretech.app/ “SORTFUL”)というチームビルディングゲームを作る際に出てきた疑問を、備忘録として記事にまとめています。

はじめに

今回SORTFULを開発するにあたって、Webex APIとSlack APIを使いました。
ここで問題になってくるのが、APIキーの隠し場所です。

そこで私は、GAEにデプロイする際に使うyamlファイルに環境変数として登録する方法を選びました。
以下にその方法を記します。

環境変数を設定する方法

GAE(Google App Engine)では、app.yamlに環境変数を設定できます。(参考：[app.yaml構成ファイル](https://cloud.google.com/appengine/docs/standard/go/config/appref?hl=ja “app.yaml構成ファイル”))

“`app.yaml
env_variables:
MY

Stripeの料金データを通貨やmetadataなどで検索・取得する6つの方法

Stripeでは、一回切りの決済でも定期課金でも商品・料金データをDashboardで登録して利用します。

Checkoutのサンプルコードでも、料金IDを引数に設定していますね。

“`js
const sesssion = await stripe.checkout.sessions.create({
mode: ‘subscription’,
line_items: [{
price: ‘price_xx’,
quantity: 1
}]
…
})
“`

そのため、ECやSaaSなどで、複数の商品・料金をユーザーが選んで決済できるシステムを作りたい場合には、料金データのリストを取得して表示させる実装が便利です。

ただし、提供する製品やサービスによっては、「取得したい料金」と「除外したい料金」が発生します。

ここでは、料金データをStripeのAPIから取得する方法を6種類紹介します。

## 基本: Price APIのListメソッドを利用して取得する

まず基本の形として、Price APIでList

React+Node.js(Express)でMySQL連携する

##### はじめに
Reactの学習をはじめようと思った時に、DBとの連携はどのようにするのか不明だったので調査したところ、「Node.jsでAPIサーバーを立てて、Reactから実行、結果をごにょごにょする」という結論に至ったのでそれを実現するための備忘録です。

##### 開発環境
・OS: MacOS Big Sur
・Editor: Visual Studio Code
・DB: MySQL

##### 事前準備
Node.jsやReact、MySQL Serverのインストールは事前に済んでいるものとします。
DB、テーブルは事前に簡単なものを作成済みです。
***
VSCodeのターミナルで作業を行います。
clientディレクトリとserverディレクトリを作成
“`
$ mkdir client
$ mkdir server
“`
#### Reactの設定
client側にはReactをインストールする
“`
$ cd client/
$ create-react-app .
“`
![スクリーンショット 2022-04-10 1.01.37.png](

Vue.js+Node.jsで認証機能を実装する

# はじめに
サーバー側、RPA開発の経験が主なのですが、フロント側の経験も積みたく、勉強も兼ねてVue.jsを使った社内システムの開発を最近はじめました。
ほぼ初めて触るのでせっかくならば最新バージョンでと思いVue3で実装をしてみましたので、ここに備忘録として作業内容を残します。

> // 余談
> 現時点(2022/04/09)ではナレッジが少ないことと対応ライブラリが少ない事から、今後の開発が辛いことが分かりましたので、社内システムはVue2で作り直そうと思っています。

# 本記事で紹介すること
1. 構成図
1. 完成イメージ
1. VueCLIからVueプロジェクト作成
1. フロントエンド-認証画面の実装
1. Node.jsプロジェクト作成
1. バックエンド-認証処理の実装

※Node.jsとVue.jsのインストールは割愛しております。

# 構成図
ざっくりこんな感じです。
![構成図.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517685/a2ae7f5b-6d32-

Node.js – ES6のimportを使ったスクリプトサンプル

# 概要

* node.jsでの開発で、テキストエディタによって`require()`ではなく`import()`の利用を強制する。
* Googleの検索結果で、意外と`import()`を使ったコードサンプルが見つからなかった。
* なので、自分がわかった範囲で`import()`によるサンプルコードをまとめていく

# 注意
* ファイル名の拡張子は`.mjs`とする

# コードサンプル

## JSONファイルの入出力

### 事前準備
* fsモジュールのインストール
“`console
# npm install fs
“`

### コード
“`javascript
import fs from ‘fs’; // const fs = require(‘fs’) と同じ

const SRC_FILE = “./src.json”;
const RESULT_FILE = “./result.json”;

// ファイルの読込
const data = JSON.parse(fs.readFileSync(SRC_FILE, ‘utf8’));

// ファ

Node.js のパッケージをバージョンアップして公開

# 種類
“`sh
$ npm version patch # v0.0.0 -> v0.0.1

$ npm version minor # v0.0.0 -> v0.1.0

$ npm version major # v0.0.0 -> v1.0.0
“`

# 公開
“`sh
$ npm version patch
v0.0.1

$ git tag # gitにtagが反映されていることを確認
v0.0.0
v0.0.1 # 反映されてます

$ git push origin tags/v0.0.1 # gitにtagをpush

$ npm publish # npmに公開
“`

[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