- 0.1. React+Node.js(Express)でMySQL連携する
- 0.2. Vue.js+Node.jsで認証機能を実装する
- 0.3. Node.js – ES6のimportを使ったスクリプトサンプル
- 0.4. Node.js のパッケージをバージョンアップして公開
- 0.5. [Typescript] オブジェクトの特定プロパティの型を上書きする型関数をつくる
- 0.6. TypeScriptで手軽にCLIを実装する
- 0.7. ExpressでJWT認証機能付きのAPIを作成する(その4. サインアップ時のメール認証・パスワードリセットの実装)
- 0.8. Node Version Management “fnm” 【WSL2 ubuntu 20.04】
- 0.9. OAuth2.0のAuthorization Code GrantでPKCE(認可コード横取り攻撃)対策について理解する 実際に実装もやってみた
- 0.10. nodeのバージョン切り替えを簡単に
- 0.11. obnizと友だちになりたい ①光センサーで貧者のテルミン
- 0.12. Docker+nodeでhtmlを表示したい!
- 1. Hello World
- 1.1. シークレットキー作成
- 1.2. Stripe Checkoutを利用した決済で、ゲスト顧客の住所や氏名を取得する方法
- 1.3. nvm インストール
- 1.4. ExpressでJWT認証機能付きのAPIを作成する(その3. 認可機能とユーザ操作の実装)
- 1.5. Nuxtをインストール後にnpm run devでエラーを吐く時の解決方法
- 1.6. Google Cloud Functions: 加算
- 1.7. M1 MacにnvmでNode.jsをインストールする
- 1.8. NVM for Windows利用時にNode.jsバージョン変更後「npm ERR! Unexpected token ‘.’」が出るとき
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/b074e85504fc05ac76dchttps://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に興味を持てるのではと思います。
ただ、いきなり距離センサーが不機嫌で、電圧が高いだの何だの連呼しだし、時間がないのもあり路線を変更することになりました。(ハーゲンダッツより高いくせに、まさかこのまま壊れる気じゃないだろうな。)
![IMG_20220405_220547_2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2562329/09821e98-3204-6154-afc1-fd179996525b.jpeg)
## 実装目標 (変更)
ということで
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.3WORKDIR /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