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

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

EJS

Node.jsの学習の備忘録と振り返りの記事です。
何かの参考になれば幸いです。
付け足しや訂正などある場合ご教授いただけると
大変嬉しく思います!!

##EJSとは
HTMLとJavaScriptのコード両方を記述できるNode.jsのパッケージ

**インストール**
npmからインストール“npm install ejs“

**JavaScript利用**

<% %>または<%= %>でかこう

<% %>:ブラウザに何も表示されない(変数の定義などに使用)
<%= %>:ブラウザに表示される

“`ejs
<%const items = [ {id:1,name:'じゃがいも'}, {id:2,name:'にんじん'}, {id:3,name:'玉ねぎ'}, ];%>

    <% items.forEach((item) => {%>

  • <% = item.id %>
    <% = item.name %>
元記事を表示

node.js実践編(Markdown導入編)

# 準備
以下のコマンドで必要なパッケージをインストールします。

“`
npm install markdown-it
“`
1から作る場合は以下のパッケージをインストールします。

“`
npm install express-session
npm install express-validator
npm install sqlite3
npm install knex
npm install bookshelf
npm install markdown-it
“`

# モデル作成
以下のコマンドでモデルを作成します。

“`
npx sequelize-cli model:generate –name Markdata –attributes userId:integer,title:string,content:text
“`
モデルファイルを修正、追記します。

“`javascript:models/markdata.js
‘use strict’;
module.exports = (sequelize, DataTypes) => {
con

元記事を表示

Nest.jsでGraphQL + Passportを使って認証処理を作る。

Nest.jsで認証のライブラリであるPassportを使用する方法は[公式ドキュメント](https://docs.nestjs.com/security/authentication#implementing-passport-strategies)に載っており、GraphQLでの実装も参考程度に乗っています。
しかし、GraphQLでの実装はあくまでも参考程度なので、これだけでは動作せることができません。
今回は実際にGraphQLでusernameとpasswordでの認証ができるところまで実装してみます。

# 1. ベースプロジェクトの作成
下記コマンドでNest.jsのプロジェクトを作成します。

“`terminal
$ npm i -g @nestjs/cli
$ nest new passport-sample
$ cd passport-sample
“`

プロジェクト作成後、[Authentication requirements](https://docs.nestjs.com/security/authentication#authentication

元記事を表示

「Denoにはnpmがない」の誤解

Node.jsとDenoを比較する際の特徴として、「npmがない」というのがよく言及されています。
これ自体は正しいのですが、まるでパッケージ管理が貧弱かのように聞こえてしまい、誤解を生んでいるので、改めて整理していきたいと思います。

# Denoのパッケージ管理についての誤解

### 誤解①:npmのパッケージが使えない

DenoはランタイムとしてNode.jsとの互換性を切ったものの、Node.js向けのコードをブラウザ向けのコードに変換するツールは沢山あります。Denoはブラウザ向けのコードがそのまま動くので、npmパッケージをDenoで利用することが可能です。

現時点では以下のレジストリを経由して**Denoでnpmパッケージを使用できる**ことが知られています。

– https://esm.sh/
– https://unpkg.com/
– https://www.skypack.dev/
– https://jspm.org/

ただし注意点として、Node.jsの標準ライブラリは[Denoの標準ライブラリでポリフィルされている](https://deno.

元記事を表示

CodeceptJSとPuppeteerでE2Eテスト(データ駆動、並列実行)

#初めに
CodeceptJSとPuppeteerを使ってE2Eテストを書いてみました。
コードの書き方も独特ですが便利な機能が多いと思います。

途中詰まってしまった部分もあり、それらを含めて備忘録的にまとめていきます。
内容に間違いがあればご指摘ください。

#目次
– CodeceptJSとは
– 準備
– テストコードを書く
– コード詳細
– I.amOnPage
– I.fillField
– I.pressKey
– I.wait
– I.grabTextFrom
– I.see
– 躓きポイント
– スクリーンショットで記録
– データ駆動してみる
– 並列実行してみる
– テストレポートを見る
– 終わり
– 参考

##CodeceptJSとは
まずCodeceptJSとはなんなのか。
最後に記載しました参考サイトにわかりやすく書いてありました。

ざっくりいうとCodeceptJSはNode製のE2Eテストフレームワークで、
いろいろなブラウザ操作ライブ

元記事を表示

Node.js 使用流れ

Node.jsの学習の備忘録と振り返りの記事です。
何かの参考になれば幸いです。
付け足しや訂正などある場合ご教授いただけると
大変嬉しく思います!!

###Node.js 手順
1 npmインストール(パッケージ管理システム)
2 パッケージインストール“npm install パッケージ名“
3 パッケージ読み込み“const パッケージ名 = require(“パッケージ名”);“
    &
  使用準備“const app = パッケージ名();“
4 サーバー起動“app.listen(localhost);“
5 ファイル実行“ターミナルで『node ファイル名』“

**ルーティング作成(URLに対応する処理)**

“`node.js
app.get(‘/URL’,(req,res) => {
処理内容
});
“`

**見た目を表示する処理**

ルーティング処理の中で“res

元記事を表示

yarnの処理でEACCESエラーが出たときの対処法

## 参考

https://qiita.com/Gaddict/items/8c76d92bd0adec2bfb6a

## エラー内容

EACCESのpermission deniedエラーが出ました。

“`
FATAL EACCES: permission denied, mkdir ‘/home/xx/Documents/xxx-toC/frontend/node_modules/.cache/nuxt’

╭──────────────────────────────────────────────────────────────────────────────╮│ ││ ✖ Nuxt Fatal Error ││

元記事を表示

【TypeScript】jestでioredis-mockを正しくインポートする

# はじめに

[`ioredis`](https://github.com/luin/ioredis)はNode.jsにおける主要なRedisクライアントパッケージの一つです。
単体テスト等で、Redisサーバーに実際にアクセスすることなく実行するために`ioredis`をモック化したい場合には、[`ioredis-mock`](https://github.com/stipsan/ioredis-mock)を使うことができます。

TypeScriptでは単体テストフレームワークとして[`jest`](https://jestjs.io/ja/docs/getting-started)を使用することが多いと思いますが、`jest`で`ioredis-mock`を使用する際には、そのインポート方法を誤ると実行時にエラーが発生してしまします。

私はこれに引っかかってしまったので、本記事では、TypeScript+`jest`を使用している環境において、`ioredis`の型情報を利用できる形で`ioredis-mock`をインポートする際の、正しい方法と誤った方法、そのエラー内容に

元記事を表示

node.js実践編(メッセージボード編)

※node.js超入門ノートの続きになります。

https://qiita.com/Glider2355/items/cf368ba789f4f5200e22

# モデルの実装

以下のコマンドを実行します。

“`
npx sequelize-cli model:generate –name Board –attributes userId:integer, message:string
“`
## アソシエーションの設定
作成したファイルを修正します。

“`javascript:models/board.js
// 従モデル
‘use strict’;
module.exports = (sequelize, DataTypes) => {
const Board = sequelize.define(‘Board’, {
userId: {
type: DataTypes.INTEGER,
validate: {
notEmpty: {
msg: “利用者は必須です。”
}

元記事を表示

GMOあおぞらネット銀行のsunabarAPI実験場を使ってLINEのチャットボットを作ってみた

##作ったもの
GMOあおぞらネット銀行のAPIを利用して、Node.jsで銀行チャットボットを作ってみました。
残高照会、口座履歴紹介、振込依頼ができます。
(リアルデータではないです。GMOあおぞらネット銀行のサンドボックスsunabarAPI実験場での架空のデータです)

[![Image from Gyazo](https://i.gyazo.com/93b4fd97adce86ff38e3beebac932950.gif)](https://gyazo.com/93b4fd97adce86ff38e3beebac932950)

以前こちらのQiita記事[『三菱UFJ銀行のサンプルAPIを試してみた』](https://qiita.com/tatsuya1970/items/edf45780415169aa145a)で書いた三菱UFJ銀行のサンプルAPIは、固定された数字しか取り出せないですが、GMOあおぞらネット銀行は、sunabarというサンドボックス環境を用意しており、仮想的に入金・振込など試せます。

なお、sunabarを利用するためにはGMOあおぞらネット

元記事を表示

TypeScript NodeJS websocket client

# install
“`console
npm i websocket @types/websocket
“`

# usage
## 共通化
“`typescript
const websocket = (url: string, onmessage: (t: T) => void, onerror?: (e: any) => void, onclose?: () => void) => {
const webClient = require(“websocket”).client
const client: client = new webClient()
client.on(‘connect’, (con: connection) => {
console.log(`connected ${con.connected}`)
con.on(‘error’, (e: any) => console.error(e))
con.on(‘close’, () => console.log(“websock

元記事を表示

TURNサーバーの動作をパケットをモニタリングして確認

# 試したこと

![turn_overvirew3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1083912/33b0573b-807e-7a97-a39a-216f7f2174e1.png)

– AWSの異なるリージョンに `webRTC` のクライアントを設置
– tcpdumpでパケットを確認して、
– TURNサーバーが、パケットをリレーしていることを確認

# 環境

## オファー側

– AWS Region: Singapore
– Linux Ubuntu 20.04
– node-webrtc
– データチャンネルで通信するサンプルを作成 *1

## アンサー側

– AWS Region: Ohio
– Linux Ubuntu 20.04
– node-webrtc
– データチャンネルで通信するサンプルを作成 *1

## TURNサーバー

– AWS Region: Tokyo
– Linux Ubuntu 20.04
– Coturn-4.5.2

元記事を表示

プロジェクトの Yarn (v1.x) のバージョンを固定する(小ネタ)

## 結論

“`sh:zsh
% yarn policies set-version $(yarn -v)
“`

## 動機

[Yarn 1.x](https://github.com/yarnpkg/yarn) は速くて便利ですが、バージョンや環境の違いにより、`yarn install` が実行されると `yarn.lock` を書き換えてしまうことがあります。
`git pull` でコンフリクトが起きたりして地味に嫌です。

## 対策

### その1: `engines` の指定と強制

`.npmrc` へ次のように指定すると、**[`engines`](https://docs.npmjs.com/cli/v7/configuring-npm/package-json#engines)** の設定を強制することができます。

“`sh:.npmrc
engine-strict=true
“`

また、 **[`engines.npm`](https://docs.npmjs.com/cli/v7/configuring-npm/package-json#e

元記事を表示

Firebaseのホスティング-デプロイしたい。

#はじめに
制作したサイトをfirebaseで公開しようと利用したので、その手順や注意を忘れないよう自分なりにまとめた記事です。

##準備
・ Googleアカウント
・ デプロイするサイト
・ firebaseのプロジェクト作成(公開するサイト1つにつき1つ作る。)
・ node.jsをインストール(推奨版)

ターミナルでnode.jsがインストールされているか確かめる。

“`
$ node -v
“`

続いてnpmも一緒にインストールされているか確認してみる。

“`
$ npm -v
“`

##firebase-toolsのセットアップ

firebaseのコマンドラインツールのインストール

“`
$ sudo npm install -g firebase-tools
“`

インストールされているか確認する。

“`
$ firebase -V
“`

インストールが終わったら、firebaseにログイン

“`
$ firebase login
? Allow Firebase to collect anonymous CLI usag

元記事を表示

Node-RED 2.0の新機能: Flow Linter

## はじめに: Flow Linterとは

Node-REDは、ブラウザ画面上でノードをつなげていくことで簡単にフローが開発できます。しかし、グラフィカルなプログラミングは記述の自由度が高い反面、パッと見てわからないバグが潜んでいたり、複数の開発者で共同作業をする際のコーディング規約を守らせることがむずかしいという問題があります。

他のプログラミング言語では、Cに対するlint、Javascriptに対するESLint、Javaに対するCheckstyleなど、記述したコードを静的に解析してバグの発見やコーディング規約の遵守状況をチェックするツールがあります。これらのツールと同様に、Node-REDのフローに対して静的解析を行うツールが[Flow Linter](https://github.com/node-red/nrlint)です。私も微力ながら開発に携わっています。

Flow Linterは、Node-RED 2.0から利用可能となりました。ただし、Node-RED本体には同梱されず、Node-RED 1.3から導入された[プラグイン機能](https://qiita.

元記事を表示

node.js超入門ノート11(Sequelizeでのバリデーション編)

# バリデーション
## モデルのバリデーション
以下のように修正します。

“`javascript:models/user.js
‘use strict’;
module.exports = (sequelize, DataTypes) => {
const User = sequelize.define(‘User’, {
name: {
type:DataTypes.STRING,
validate: {
notEmpty: true
}
},
pass: {
type: DataTypes.STRING,
validate: {
notEmpty: true
}
},
mail: {
type: DataTypes.STRING,
validate: {
isEmail: true
}
},
age: {
type: DataTypes.STRING

元記事を表示

node.js超入門ノート10(SequelizeでのCRUD編)

# レコードの新規作成
以下のファイルを追加します。

“`html:views/users/add.ejs




<%= title %>

元記事を表示

Node.js: docxをhtmlにするMammoth

## Mammoth .docx to HTML converter

https://github.com/mwilliamson/mammoth.js

## 導入
`npm –save-dev install mammoth`

## お試し
`npx mammoth sample.docx output2.html`

### Before
*[テンプレート](https://template.k-solution.info/2017/05/18084425.html)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93824/f217e190-7973-bb3e-09c9-a6d61fe5471c.png)

### After
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93824/fe1f337a-90f3-17f4-6e76-42bd8ae13d04.png)

##

元記事を表示

リアルタイムなWebアプリを簡単に作れるOSSを作ったので、立ち上げからリリースまでを時系列に書いていく

# まえがき
ちょうど3年前に「[初心者3人でwebサービス(webアプリ)を作ったので、立ち上げからリリースまでを時系列に書いていく](https://qiita.com/yuno_miyako/items/d6595719ae7065927499)」なる記事を書いたことがあり、いまだにいいねをつけてもらえることがあります。そこで、**3年の時を経て**似たような記事を書いてみようと思いました。
Webアプリの開発経験はあるものの、**npmパッケージを公開したことはありません**でした。手探りからどのようにリリースまで、残したドキュメントをもとに振り返っていきたいと思います。
これを読んで「OSSを作ってみたいけどどう進めていけばいいか分からない」という人の一助になれば嬉しいです。誰か0から10までの流れを書いててくれないかな〜と思っていたので、きっと誰かには届く気がします。

# 作ったOSSについて

[Realtimely](https://kitaharamugiro.github.io/Realtimely/jp/)という、Reactアプリに楽しい**リアルタイム要

元記事を表示

Reactをexpressにホストする

やり方を聞かれて調べたのでメモ。
react-router-domでルーティングされているページをbuildしてexpressにホストしたい。

## Reactでの作業

とりあえず何でもいいのですが、react-router-domで最低限のルーティングを設定します。

### 簡易仕様

* / → Home.js
* /about → About.js
* それ以外だと、Page not found.を表示。

### プロジェクトの作成

とりあえずcreate-react-appでプロジェクトを作成。

“`bash
npx create-react-app react-test
cd react-test
“`

最低限のルーティングを設定したいのでreact-router-domのインストール。

“`bash
npm install react-router-dom
“`

Home.jsとAbout.jsを生成。

“`bash
touch src/Home.s src/About.js
“`

### Home.js

Home.jsの実装。Hom

元記事を表示

OTHERカテゴリの最新記事