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

Google DriveのAPIをサービスアカウント認証方式でNode.jsから利用するメモ

前回書いた記事で調べていて、サービスアカウントを利用する方式も試してみたので記録しておきます。

> [Google DriveのAPIをNode.jsで触る ~ @google-cloud/local-authのサンプル版](https://qiita.com/n0bisuke/items/fbf920cdd7ed99b2fc8c)

## 前提など

– https://console.cloud.google.com にアクセスできる
– Google DriveのAPIをONにしている。

> 

### 環境

– Node.js v17系
– google-api-nodejs-client(googleapis) v100
– https://github.com/googleapis/google-api-nodejs-client

## 1. サービスアカウント利用の準備

こちらの記事が分かりやすかったです。

> 参考: [NodeでGo

Google DriveのAPIをNode.jsで触る ~ @google-cloud/local-authのサンプル版

既存のメモ通りにうまく動かず試行錯誤しました。

## 認証方式が若干変わった模様……?

以前書いた[Google DriveのAPIをNode.jsから触るメモ](https://qiita.com/n0bisuke/items/4af8f17fb4fe3b9b4831)では、公式の[Node.js quickstart ](https://developers.google.com/drive/api/quickstart/nodejs)に掲載されているコードをもとに実行していましたが、`credentials.json`の作成までは同様で、`token.js`生成のタイミングでリダイレクトエラーが発生するようになりました。

> このサイトにアクセスできませんlocalhost で接続が拒否されました。
> ![スクリーンショット 2022-04-03 3.55.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/982f68aa-9ddc-ebe6-a18d-56d9c6

Node.js実行時間を測る

# 手軽に計測
“`javascript:node.js

// 開始
var start = performance.now();

for(var i = 0; i < 10000; i++){ for(var j = 0; j < 10000; j++); } // 終了 var end = performance.now(); console.log( `実行時間 = ${end - start} ミリ秒` ); ```

Node.js 16 on Ubuntu 20.04 セットアップ

Ubuntu 20.04 LTS の標準では Node.js バージョン 10 がインストールされるため、
公式のレポジトリから個別に最新安定版の 16 をインストールする方法

## 参考ページ
Node.js 公式サイト
https://nodejs.org/en/download/package-manager/#debian-and-ubuntu-based-linux-distributions

Binary for Debian/Ubuntu (公式からリンクあり)
https://github.com/nodesource/distributions/blob/master/README.md

## インストールバージョン
Ubuntu 20.04 LTS
Node.js 16.14.2 LTS

:::note info
動作確認は、Docker上のUbuntuで行なっています
:::

## Ubuntu インストール
(省略)

## Node.js インストール
レポジトリ追加コマンド(Using Debian, as root)を発行
“`shell:/

今朝のおススメの曲を届けてくれるLINE BOT

## はじめに
　朝は、一日のはじまりなので、良いスタートを切りたい。
　そんなとき、心地よい音楽を聴いて、気分を整えたいと思います。
　LINEは、起き掛けにメッセージが入っていないか見るので、
　おススメの音楽が届いていたら、うれしい気がします。

## 完成イメージ

## 環境
– Node.js
– LINE Messaging API
– Spotify SDK SpotifiApi
– VSCode
– Github Actions

## 作り方
1. LINE Messaging APIの利用登録とチャネル作成*
2. LINEログイン APIの利用登録とLIFFアプリ作成*
3. Spotify APIの利用登録とWebアプリ作成*
4. Github Actionsの設定*

*ほかのQiita

Node.js: Elastic Cloud の filters の使い方

こちらと同じことを Node.js で記述しました。
[Elastic Cloud の filters の使い方](https://qiita.com/ekzemplaro/items/1ab696e2d230a59b548d)

“`elastic_filter.js
// —————————————————————
// elastic_filter.js
//
// Apr/01/2022
//
// —————————————————————
‘use strict’

import * as https from “https”
import * as fs from ‘fs’

const host=”https://mar29-project.ent.asia-northeast1.gcp.cloud.es.io”
const search_key=”search-******”
const na

Boomによるエラーハンドリング NodeJS

[hapi/Boom](https://hapi.dev/module/boom/)

インストール
`npm install @hapi/boom`

# 実装
“`index.js
require(‘dotenv’).config()
const express = require(‘express’)
const errorHandler = require(‘./helpers/error’) // ←こちらを指定

// 省略
//

// エラー処理ミドルウェア
app.use(errorHandler)

const listener = app.listen(3000, function(){
logger.info(‘Listening on port ‘ + listener.address().port)
})
“`

ミドルウェア処理

“`helpers/error.js
const boom = require(‘boom’)
const config = require(‘../config/default’)
const log4js = r

BOM付きCSVファイルを読み込むときの注意点

## 環境
node.js v10.19.0
Ubuntu 20.4

## はじめに
UTF-8のCSVファイルには、BOM付きのCSVファイルととBOMなしのCSVファイルの２種類が存在しています。CSVファイルを読み込んで中身を取得する場合、BOM付きのときは、BOMを削除しないとデータが正しく取得されないことになります。（BOMが付いたままでデータを取得すると、処理に誤りが生じることになります）

CSVファイルを読み込んだら、まずは、BOMが付いているかどうか判断して、付いていれば、データを取得する前に削除する必要があります。

BOMが付いているかどうかを判断する方法は、CSVファイルをダブルクリックして、Excelで開いて、文字化けが起こればBOMが付いていない。文字化けが起こらなければ、BOMが付いていると判断することができます。

CSVファイルをエディタで開いて中身を確認しても、BOMは改行コードのように、目で見えるものではないため、エディタでは直接確認することはできません。

## コードの解説
test_bom.csvをBOM付きで作成します。test_bom.

fish shellでnvmが使えなくなったときにしたこと

# homebrewでinstallしたnvmが使えなくなった

## 状況
– zshからfish shellに変えた
– fish shellでbrewコマンドを使えるように設定
– zsh使用時にインストールしたnvmはこの時点で使用できていた
– ある日突然nvmが使えなくなった

## 環境
M1 MacBook Air

## 調査
– `nvm`はfish shellに対応していない
– fish shellに対応したサードパーティ製のものが存在する
– zshで使用していた`nvm`を使用するには[base](https://github.com/edc/bass)を使用する必要があるらしい
– [base](https://github.com/edc/bass)はshellでbashコマンドを使えるようにするユーティリティ
## やったこと
調査結果からすでに使用している`nvm`を使用するためにbassを導入することにした。
– 以下を実行してbassを導入する
“`
git clone https://github.com/edc/bass.git
c

誰でも簡単にブロックチェーンアプリを作る。マイ残高確認アプリを作ろう

こんにちは。営業をやっていたりエンジニアっぽい事をやっています。ブロックチェーンをアプリに組み込むのって難しそうに感じますか？実は各ブロックチェーンプロジェクトからは開発用のSDKが公開されている事があり、これを利用することで簡単に組み込む事が出来ます。

今回の記事は マイ残高確認アプリを作ろう です。前回の記事の続きになるので、まだ読んでいない、やっていない方は以下の記事の手順を踏んでからこの記事に来て下さい

誰でも簡単にブロックチェーンモバイルアプリを開発する – Qiita
https://qiita.com

本記事は連載の最後です（短期連載）

[誰でも簡単にブロックチェーンモバイルアプリを開発する](https://qiita.com/faunsu/items/8966ea9cd054214ee672)
[誰でも簡単にブロックチェーンアプリを作り、送金する](https://qiita.com/faunsu/items/01062a0a7132d3843035)
[誰でも簡単にブロックチェーンアプリを作り、マイ残高確認アプリを作る](https://qiita.com/

誰でも簡単にブロックチェーンアプリを作り、送金する

こんにちは。営業をやっていたりエンジニアっぽい事をやっています。ブロックチェーンをアプリに組み込むのって難しそうに感じますか？実は各ブロックチェーンプロジェクトからは開発用のSDKが公開されている事があり、これを利用することで簡単に組み込む事が出来ます。

今回の記事は `送金してみよう` です。前回の記事の続きになるので、まだ読んでいない、やっていない方は以下の記事の手順を踏んでからこの記事に来て下さい

https://qiita.com/faunsu/items/9670395a00e93c364151

本記事は少し連載します
[誰でも簡単にブロックチェーンモバイルアプリを開発する](https://qiita.com/faunsu/items/8966ea9cd054214ee672)
[誰でも簡単にブロックチェーンアプリを作り、送金する](https://qiita.com/faunsu/items/01062a0a7132d3843035)
[誰でも簡単にブロックチェーンアプリを作り、マイ残高確認アプリを作る](https://qiita.com/faunsu/items

Seleniumのセットアップから基本的な使用法のまとめ【Javascript, Node.js, chrome】

Javascriptを用いてSeleniumを動かしたいという方向けに記事をまとめました。
Node.jsにおけるSeleniumのセットアップからJavascripを用いた基本的な使い方をまとめています。

Seleniumがどういったツールなのかなどの説明はこの記事の対象ではありません。

ご参考になれば幸いです。

※私の理解でまとめていますので、間違っている箇所の修正や情報の追加などございましたらコメントください。

# Seleniumセットアップ(Node.js, chrome)

環境:windows10, Node.js
使用言語: Javascript
ブラウザ: chrome

※今回はブラウザはChromeのみを対象としています。

## 1.Selenium libraryのインストール
seleniumをインストールします。
`npm install selenium-webdriver`

## 2.chromedriverのインストール

Chromeブラウザを操作するにはchromeのweb driverが必要になります。

選択肢1 :chrome

Docker ComposeとGitHubを使用して、Node.js + Express + MySQLの環境構築を行う

# 初めに
Docker Composeを使用して、Node.jsとMySQLのコンテナを作成し、Sequelzieを使用してDBにアクセスするところまでを記載する。
また、Node.jsのコンテナ上でExpressのプロジェクトを1から作成する記事は多く見かけたが、既にあるGitHubのリポジトリ(ExpressとSequelizeを含む)をcloneしてそこから環境を構築していく記事はあまり見受けられなかったので、今回はそちらの手順で行う。(実際に現場で開発する際は、既にGitHubが作成されている場合もあると思われるため)

#### 今回やりたいことの図

# 環境
■ 使用PC
MacOS Big Sur：バージョン11.6

※既に使用PCにはgitを導入状態

簡単にDockerコンテナ上でVSCodeを起動

# はじめに

ローカル環境(自分のPC)を汚さずに開発したい…

そんな時、Visual Studio Code の拡張機能「 [Remote – Containers](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers) 」がおすすめです。

https://code.visualstudio.com/docs/remote/containers-tutorial

Dockerコンテナ環境内のフォルダーからVisual Studio Codeを起動し、プログラムの実行、デバッグ、コード補完、ターミナルからのコマンド実行など、通常と同じ操作ができます。

ローカル環境の代わりにDockerコンテナ環境を利用するため、ローカル環境を一切汚さずに開発ができます。複数プロジェクトの開発を同時に行う際に便利です。

今回は初めて「 [Remote – Containers](https://marketplace.visualstudio.com/items?it

express使うとqs周りで苦労しません？

express使ってる人たちから直近相談をうけて、「なるほどこりゃ難儀だな〜」となったことの紹介です。

## qsのデフォルトの挙動

今回の焦点はクエリパーサーの振る舞いにあるのですが、express generatorで適当に雛形をつけてアプリケーションをつくって以下のようなリクエストなげてみます。

クエリがどのようにパースされるのかを見てみましょう。

“`
/?q1[21]=21&q2[1]=1
“`

req.queryの中身
“`javascript
{ q1: { ’21’: ’21’ }, q2: [ ‘1’ ] }
“`

一方はハッシュで、一方は配列として得られました。
境界値を探すとちょうど20が配列になるかハッシュになるかの境目のようです。

同じように数値インデックスを指定された配列型式のクエリなわけですがなぜこんな解析の差がうまれるのでしょう。

ソースを追っていくとexpressがquery parserとしてデフォルトで採用してるqsのソースに到達します。

https://github.com/ljharb/qs/blob/main/li

[Angular] ng new で生成されるワークスペースの構成詳細をみる

## きっかけ
– Angularに触れる機会があり、チュートリアルを進めていく中で自動生成されるファイルを読み解くのが大変。
– あまり理解していなくとも、気付けばアプリが動いていた。（フレームワークのいいところでもある）

という経験から、アプリ構成ファイルをメモついでにまとめたくなったのでこの記事にまとめます。

公式ドキュメントのチュートリアル[「ツアーオブヒーローズ」](https://angular.jp/tutorial)で初めに叩くコマンド `ng new angular-tour-heroes` を参照の元、各生成ファイルの概要を解説します。公式ドキュメントのリンクも添えていますので、詳細はリンク先をご覧ください。

### 実行環境
– angular-cli: 13.3.0
– Node: 14.18.1
– Package Manager: npm 8.5.5

## 生成されるファイル、ディレクトリ構成
`ng new angular-tour-heroes` コマンドを実行すると、以下のような対話が始まりrouting設定と利用するStylesheetのフォ

誰でも簡単にブロックチェーンモバイルアプリを開発する

こんにちは。営業をやっていたりエンジニアっぽい事をやっています。ブロックチェーンをアプリに組み込むのって難しそうに感じますか？実は各ブロックチェーンプロジェクトからは開発用のSDKが公開されている事があり、これを利用することで簡単に組み込む事が出来ます。

今日はそのSDKとJavascriptによりアプリ開発が可能なExpoを活用して、アプリを動かす所までやってみたいと思います。

https://expo.dev/

本記事は少し連載します

[誰でも簡単にブロックチェーンモバイルアプリを開発する](https://qiita.com/faunsu/items/8966ea9cd054214ee672)
[誰でも簡単にブロックチェーンアプリを作り、送金する](https://qiita.com/faunsu/items/01062a0a7132d3843035)
[誰でも簡単にブロックチェーンアプリを作り、マイ残高確認アプリを作る](https://qiita.com/faunsu/items/8966ea9cd054214ee672)

# 環境準備
## 端末
パソコン ..

hygen のテンプレートで変数を使ってみる

## 始めに

hygen では変数を利用することで、柔軟にファイルの作成を行うことが可能です。
今回はそれを実際に使ってみようと思います。

以前の hygen 導入までの記事はこちら

https://qiita.com/fussy113/items/66ca5985bf974eba6835

## 変数の埋め込み方

hygen を導入した時に自動で生成される`hello.ejs.t` に実はすでに変数が使用されています。

““_templates/new_template/hello/hello.ejs.t
—
to: _templates/<%= name %>/<%= action || 'new' %>/hello.ejs.t
—
—
to: app/hello.js
—
const hello = “`
Hello!
This is your first hygen template.

Learn what it can do here:

https://github.com/jondot/hygen
“`

console.log(hel

LINE Bot&Youtube API／ヨガレッスンに行けなくても、皆でおうちレッスンできるBot

# 背景
大好きなヨガの先生のYoutube動画が送られてくるLINE Botを、ヨガクラスのみんなでシェアしたら、仕事でレッスン行けなくても家でレッスンしよう、送られてきたらそれぞれ家でやろう、って気になれそう！と思って作りました。
家だとだらけてやらないんですよね・・・でもクラスのみんなも同じBot見てると思うとモチベーション上がる。
# 環境
node version v17.6.0
npm 8.5.1
# まずはYoutubeでAPIキー取得
Googleのアカウントさえ持っていればすぐできる。
私が参考にしたのはこちらの方の記事↓
https://qiita.com/shinkai_/items/10a400c25de270cb02e4

無事取得できたので、今度はいよいよコード・・・・ふう・・・

# まず、YouTubeからAPI情報をちゃんと拾えるか確認

“`js

const axios = require(‘axios’);

const handleEvent = async (event) => {

let response;
try {

様々な英語の名言を配信するLINE Botを制作してみた！

## 英語の学習で、毎日名言に触れる！
英語を勉強されたことがある皆さんにお聞きしますが、**英語はどのように学習されていましたか？**　十人十色と思いますが、私のオススメは**英語の名言**に触れることです！

それでは、Twitterであげた今回制作した名言Botを早速ご覧ください！

世界中の偉人の名言を、毎日配信するLINEBotを実装しました。動画をアップします！LINE BotのプッシュメッセージとZenQuotes.APIを使用しました。#protoout #javascript #ZenQuotesAPI #Linebot pic.twitter.com/D7rb5DhRD4

— Nori (@NORI30363592) March 30, 2022

### 人生があなたにレモンを投げてきたら、レモネードを作ろう！
私が大好きな英語の名言の1つです。米国に住んで間もない時、英語が聞き取れず苦労していた時にこの言葉に出会い、せっかくだから辛酸を舐める経験すら楽しんじゃえばいいんだって前向きな気持ちになったことを思い出します。**英語の名言**に触れて、英語独特の言い回しを学びながら**シャドーイング**すると、**記憶も定着しやすくなります**:sunny:

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2554652/e1