Node.js関連のことを調べてみた2021年12月13日

Node.js関連のことを調べてみた2021年12月13日
目次

【Node.js】Expressとexpress-validatorでサインアップ機能にバリデーションをかける

#はじめに
メインはフロントですが、趣味でExpressを触っているものです。サインアップ機能を実装するにあたってexpress-validatorを採用したので実装に至るまでのコードをメモします。後半にセキュリティ面も考慮したログイン画面も解説しているので最後までご覧いただけますと幸いです。

#express-validatorを使ってミドルウェアを作る
validateMiddleware.jsにバリデートをかけているコードをまとめています。単純にemailに対してメールアドレスとしての形式をとっているかのチェックととpasswerdに対して最低6文字以上のバリデートをかけています。たったこれだけの記述でバリデーションを実装できるので便利ですね。

“`javascript:validateMiddleware.js
const { check, validationResult } = require(“express-validator”);

const validateParam = (req, res, next) => {
return [check(“emai

元記事を表示

NestJSで入門するnpmライブラリ公開生活

今回、既存のJSライブラリをNestJS用にラッピングするライブラリを作成することにして、OSS活動アピ(大したことない)をやってみようと思いました。

以下、作ったライブラリとその概要

## 1. [nestjs-ip-middleware](https://www.npmjs.com/package/nestjs-ip-middleware)

– 動機:NestJSをいじってて、なにかライブラリっぽいものを作ってみたいという思いつき。
– 経緯
– 案件でIP取得する機能をやっていて、偶然[nestjs-real-ip](https://www.npmjs.com/package/nestjs-real-ip)というものを見つけた。
– これはただのラッパーライブラリーで、実装を見ると簡単だったから自分でもこういうの作れるのでは?という経緯。
– ちなみに、アクセス元のIPを取得する[request-ip](https://github.com/pbojinov/request-ip)のラッパー
– 実装
– 完全に真似て作りました。こちらのライブラリではデコレータと

元記事を表示

yarn start がまたできない件

# 再びyarn startができない
Reactにてアプリケーション作成中に、
「Error: error:0308010C:digital envelope routines::unsupported」
のようなエラーが出たため、googleで検索すると、解決のためには最低でもnodeのバージョンをv14.18.1まで下げる必要があるとのこと。

## nodebrewを使う
ターミナル上で、「nodebrew install-binary v14.18.1」を実行するが、「Can not fetch」となりインストールできない…

## nvmでバージョン管理
nodebrewでインストールできなかったため、nvmをインストールして、「nvm install v14.18.1」を実行。すると、無事にインストール完了しました。

## まとめ
再びyarn start を実行すると、無事にREACTが起動しました!もし、同じようなエラーがある場合には参考にしていただければと思います。ただ、なぜ問題が起きてなぜ解決したのかその裏側は分からずですね。エラーをきっかけに色々

元記事を表示

Expressでシンプルな掲示版を作る

# はじめに
Expressを使ってシンプルな掲示板を作る手順を説明します。

ソースコード
https://github.com/jeronimo34/SimpleBBS

# 初期設定
以下のコマンドを実行しアプリの雛形を作成します。
テンプレートエンジンに `pug` を選択します。

“`
npm install express-generator -g
express –view=pug SimpleBBS
cd SimpleBBS
npm install
“`

# 投稿一覧表示実装
## 投稿データの保存先
`app.locals.posts`に投稿データを保存します。`app.locals`に設定した値はアプリケーションの存続期間中、持続します。
アプリケーションを再起動すると投稿データが失われてしまうため、本来はDBにデータを保存すべきですが、今回は簡単のため`app.locals`を使用します。

“`javascript:app.js
// データベース
app.locals.posts = [
{
name:”test1″, text: “

元記事を表示

[Node.js] Nodemailerで2通以上同時にメールを送信する

この記事は、【 [可茂IT塾 Advent Calendar 2021](https://qiita.com/advent-calendar/2021/kamo-it) 】の17日目の記事です。

Webの作成で実装したことを記事にしました。
誰かのお役に立てれば、幸いです。

お問い合わせフォームに入力した内容を入力者と企業に2通同時に確認メールを送るAPIを作成しました。
そこで`nodemailer`を使用したので、まとめて記事にしました。

## Nodemailerでメールを送信する。

Nodemailerをインストールします。

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

“`
npm i nodemailer
“`

### フォーム側

“`typescript
const [fieldValues, setFieldValues] = useState({
// 各フォームの初期値
})

const onSubmit = async () => {
const ur

元記事を表示

【Node.js】Line Messaging APIでLine Botを作るまでに躓いた箇所をまとめる

#はじめに
普段はVue.jsやNuxt.jsを使っている者です。バックエンド側の知見も得ようと言うことでExpressを最近触りはじめたのですが、今回はLINE botを作るにあたって躓いた箇所をまとめていきたいと思います。

#LINE Messageing APIの導入①(ngrokでトンネリングさせる)

LINE Messageing APIのwebhookを使用する際はhttps通信でやりとりをしなくてはいけません。しかしhttpsでやりとりをローカルで行うことはできずherokuに一度アップして動作の確認をする記事が散見しました。

毎回デプロイする手間を省くためにngrokを使用することによってローカルでhttps通信でLINE Messageing APIを試すことができるのでこちらを採用した方が良いかと思います。不便な点としては1時間でsessionが切れてしまうので都度URLを登録し直すのがめんどくさいというところでしょうか。

###■ngrokで引っかかったポイント

ngrokを使用する際は、ターミナルを2つ開く必要があり、片方ではlocalhost3000

元記事を表示

【Nuxt.js】ボタンクリックで画面を表示させる方法(アプリ開発アウトプット)

#はじめに
こんにちは!
今回は【Nuxt.js】ボタンクリックで画面を表示させる方法についてアウトプットしていきます!

#前提
・Nuxtの新規プロジェクト作成が既に済んでいる
・vue.jsの基礎学習が済んでいる

#対象
・真偽値を使用しての開発を学びたい方
・診断アプリケーションを作りたい方

#実装
“`vuejs:template

SAP BTPのCloud Foundry EnvironmentにNode.jsアプリをデプロイする

この記事は[Node.js Advent Calendar 2021](https://qiita.com/advent-calendar/2021/nodejs)の12日分の記事です。

今回はNode.js+expressのアプリを作ってSAP BTPのCloud Foundry環境にデプロイする方法について説明します
#環境
OS:Windows10
Node.js:16.13.1
CF-CLI:V8

#Node.jsとは
サーバーサイドで動くJavaScriptの実行環境です。

#SAP BTPのCloud Foundry環境について
SAP BTPは、インテリジェントエンタープライズアプリケーションとデータベース、およびデータ管理機能、アナリティクス、統合機能、拡張機能が一つに統合された、クラウド環境とハイブリッド環境の両方に対応したプラットフォームです。
数百もの SAP アプリケーションとサードパーティアプリケーションの事前構築済み統合も含まれています。

https://www.sap.com/japan/products/business-technology-

元記事を表示

Reactのコンポーネントライブラリの開発では、ライブラリの依存関係の指定に気を付けなければいけないという話

## はじめに
Reactのコンポーネントライブラリを初めて開発しました。
今回はライブラリの依存関係で少し詰まった際に調べた内容を中心にお話しします。

## コンポーネントライブラリ開発で参考にした記事
以下の記事を参考に作成しました。大変分かりやすかったです。

– 公開方法の参考記事
– [3分でできるnpmモジュール](https://qiita.com/fnobi/items/f6b1574fb9f4518ed520)
– コンポーネントライブラリ開発の参考記事
– [React Component な npm のパッケージを作って TypeScript のプロジェクトで使う](https://qiita.com/pure-adachi/items/a9a39b3ffcb5af4c5b59)

## コンポーネントライブラリ開発プロジェクトの構成
– この後の説明をスムーズにするために、プロジェクトの構成を記載しておきます。

“`
root
├ sample-app (動作確認用プロジェクト)
│ ├ src
│ │ └ index.js
│ └

元記事を表示

react-nativeでMapにマーカーを動的に表示させる

(1)react-native-mapsで動的にマーカーを表示する

普段はソーシャルワーカー(PSW)として障がいをお持ちの方の支援をしています。ReactやReact Nativeでアプリ作成を楽しんでいます。以前作成したReactNativeアプリでreact-native-mapsを使用したので、まとめておこうと思います。

参考にした記事【ReactNative】react-native-mapsで地図の表示領域が描画される度に領域情報を取得する

React Native のアドベントカレンダーを作成してくれた@nekonikiさんの記事です、ありがとうございます:blush:

(2)およそ 25000 か所

こちらは日本全国にある障がい者向けの就労支援事業所の数です、近年とても増えてきておりIT技術を学ぶことができる事業所もあります。すべての事業所を一度マップにしてみたい

元記事を表示

[Prisma] チートシート

## 概要
Prismaを使ったプロジェクトを半年くらい担当していたが、そのプロジェクト離れることになったのでまた使う時のためのメモ

**公式ドキュメント**

[prisma-client](https://www.prisma.io/docs/concepts/components/prisma-client)
[Prisma Client API reference](https://www.prisma.io/docs/reference/api-reference/prisma-client-reference#model-queries)

https://www.prisma.io/

## CRUD

|メソッド | アクション |メモ |
|—|—|—|
| create |作成 | |
|createMany |一括作成 | bulk insert |
|findUnique |取得 | 一意の識別子またはIDを指定する必要がある |
|findFirst |取得 | 条件に一致する最初のレコードを取得 |
| findMan

元記事を表示

nodebrewのインストール方法

## 最初に打つコマンド
“`
$ curl -L git.io/nodebrew | perl – setup
“`

## .bash_profileにパスを通すために設定を記述する。
“`
$ echo ‘export PATH=$HOME/.nodebrew/current/bin:$PATH’ >> ~/.bash_profile
“`

## .bash_profileの変更を適用させる。
“`
$ source ~/.bash_profile
“`

## nodebrewがインストールされているのか確認する。
“`
$ nodebrew help
nodebrew 1.1.0

Usage:
nodebrew help Show this message
nodebrew install Download and install (from binary)
nodebrew compile

元記事を表示

複数のOpenID Connect認証を(Google/Azure/Yahoo)、ExpressとPassportによる実装クライアントで試してみる

# 概要

複数のサービス(Google/Azure/Yahoo)が提供する、OpenID Connect(以下、「OIDC」と略記)のIdentity Provider(以下、「IdP」と略記)に対して、次の2つを説明する。なお、ここでは対象サービスとして「無償で**試用が可能**なもの」を選んでいる。

1. 実際にIdP側に設定・登録する内容と、各サービスごとの操作手順
2. Relying Party(以下「RP」と略記)側への反映方法

その目的は、「OIDCのIdP提供元によってIdP側の設定手順や呼称が異なるが、それをOIDCのクライアントID、シークレットキーに注目して実際のIdp側の操作画面の紐づけること」である。

本記事ではRP側の実装は同一とし、認証要求先のIdPの設定に応じて「それぞれのOIDC認証が動作すること」を検証する。PR側は、Node.jsのExpressを使ったWebページ上にPassportを使って簡単に実装したサンプルを用いる。

本記事で用いるRP側のサンプルコードは、以下を参照。

https://github.com/hoshimado/

元記事を表示

nodist

# はじめに
開発するシステム毎に特定のNode.jsのバージョンが指定されている場合がある。
nodistを使うとバージョンを切り替えられるので便利でした。
しっかし、最新バージョンで動くようにメンテしておいて欲しいですわ!
ダウンロードサイトと基本的なコマンドを記録しておきます。

# ダウンロードサイト
https://github.com/nullivex/nodist/releases

# コマンド

“`bash
nodist
nodist -v
nodist install バージョン
nodist npm match
nodist rm バージョン
“`

元記事を表示

家計簿のデータをNode.jsでスプレッドシート連携してみた

この記事は[レコチョク Advent Calendar 2021](https://qiita.com/advent-calendar/2021/recochoku)の11日目の記事となります。

# はじめに
はじめまして、最近サウナにどハマりしている株式会社レコチョクの酒見です。
サ活こそ正義ですね。
私も音楽が好きで有名どころしか知らないかもですが、学生時代からいろんな名曲や
アーティストの音楽と共に過ごしてきました。
BUMP OF CHICKEN / ELLEGARDEN / ONE OK ROCK / UVERworldあたりが大好きで、泣かされたり背中を押されたりテンションを上げてもらったりと、思い入れが特に強いです。(世代がわかってしまうかもですね)

そんな私は、普段はサーバサイドエンジニアとしてPHPを触る機会が多いんですが
今回はNode.jsを使用して、Google スプレッドシートへのデータ連携を作ったことを書きたいと思います。

# 前提として
私はスプレッドシートを家計簿代わりに使っています。
PCから入力する分には気にならなかったのですが、スマホからの

元記事を表示

NodejsからArduino IoT Cloudを操作するためのメモ

# はじめに
Arduino IoT Cloudを課金プランにすることでNode-REDで操作できることを確認したので、今回はNode.jsからそのまま操作できるか確かめた。

# 結論
wrapperコードを使いつつもLチカで動作確認できた。

# 準備

**重要:APIキーを取得する都合から、今回はArduino IoT Cloudの課金プランを使用する。最低でも400円/月弱の課金が必要。**
**2021/12/11確認にて、Entryプランの月払いができなくなったようです。Entryプランであれば年払いで$24程度必要です。**
一応課金プランからFreeプランに戻すのは可能。

– Arduino IoT Cloudアカウント(Entryプラン以上)
– [Arduino MKR Wifi 1010](https://www.switch-science.com/catalog/7384/)
– ブレッドボード
– [抵抗付きLED(秋月電子通商)](https://akizukidenshi.com/catalog/g/gI-16687/)
– n

元記事を表示

AzureAppServiceにVueやReactのアプリがうまくデプロイできない問題

# はじめに

こんにちは。先日、[ハッカソンリーグ2021 -ルーキーリーグ](https://mashupawards.connpass.com/event/225670/)というハッカソンに参加してきました。
「azure製品を使いたおして、”ポストコロナの〇〇”をつくりだそう!」というハッカソンです!
シェアハウスの友達と4人でwebサービスを作成し、なんと、優秀賞をいただくことができました!!! ?????

今回は、サービスを作成するにあたって,デプロイ時に**どハマった**ことを記事にしました。
同じ問題で時間を食い潰される方がでないように祈りを込めて……

# 要約

– 表題の問題が出たときは、以下のコマンドを、スタートアップ コマンド に設定しよう

“`shell
pm2 serve /home/site/wwwroot –no-daemon –spa
# or
pm2 serve /home/site/wwwroot/build –no-daemon –spa
“`

# 何が起こったか

– いつも通りvueプロジェクトを作成、ローカ

元記事を表示

まいばすけっとのレシートをtesseract.jsでOCR読み込みしてみる #リテールテック

[リテールテックアドベントカレンダー](https://qiita.com/advent-calendar/2021/retailtech)の10日目の記事です。

スーパーといえばレシートが発行されると思いますが、このデータを上手く読み込んでテキスト情報にできないか試してみたいと思ったのでトライしてみます。

調べるとよく出てくるtesseract.jsを使ってみたいモチベもありつつ、アドベントカレンダー間に合わせよう的な勢いで執筆しています。

https://www.npmjs.com/package/tesseract.js

## レシートの写真はグーグル先生がいっぱい持っている

もう最寄りのまいばすけっとが閉まっている(現在23:30)のでグーグル先生に画像を貸してもらいます。

> ![スクリーンショット 2021-12-10 23.27.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/cd362447-b348-690d-224a-e3848d381606.png “

元記事を表示

ibm cloud functionsを使ってみた(決まった時間に、ローカルで動いているAPIをコール)

# はじめに
メールの定期送信を行いたいという要件があり、ibm cloud functionsを使ってみたのでその覚書を記しておきます。

今回はfunctionsを使って決まった時間に、ローカルで動いているAPIをコールする部分を作りたいと思います。

## ibm cloud functions

サービスからfunctionsを選択し、「作成の開始」を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227613/2396082e-3d54-b9b5-6bbc-37df3b4c2a5d.png)

おそらく初めて使う場合は、名前空間を作成することになりますが、ここでは割愛します。

この画面で、fuctionsのコンポーネントを作成していきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227613/8a43e956-559a-9018-41d9-ead1bb0ff

元記事を表示

Node.js + TypeScript からC++のライブラリを呼び出す

# 目的
– Node.jsからC++のライブラリをコールしたい
– node-gypを使えばできるっぽいが、どのサンプルも動かない・・・(当方intel Mac / Big Sur)
– v8のAPIが色々変更してるっぽい。最新環境で動作確認できるサンプルが欲しい

# 成果物
とりあえず作ってみたサンプル一式は以下です。
https://github.com/swmokyun/sample-node-gyp

# 環境
– intel Mac
– macOS Big Sur (11.6)
– Node.js 14

# Cまわりのセットアップ
以下を参考にCをビルドできる環境を作っておく
https://github.com/nodejs/node-gyp#installation

# nodeまわりのセットアップ
– Node.js 14 を動作できるようにする。自分はnodebrewを使って切り替えています。
– 以下をyarnで追加

 ”@types/node”: “^16.11.12″,
 ”node-gyp”: “^8.4.1″,
 ”ts-node-dev”: “

元記事を表示

OTHERカテゴリの最新記事