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

関口 厚の職歴情報

このページは、WEBエンジニア・コーダーの関口 厚の職歴についての情報を閲覧・ダウンロードするための記事です。

#履歴書と職務経歴書のダウンロードリンク
[履歴書(PDF)](https://www.yo2onweb.com/portfolio/resume_sekiguchi.pdf)
[職務経歴書(PDF)](https://www.yo2onweb.com/portfolio/work_experience_sekiguchi.pdf)

#リンクトインのプロフィール
[https://www.linkedin.com/in/sekiguchiatsushi/](https://www.linkedin.com/in/sekiguchiatsushi/)

#自作したWEBアプリの紹介記事
[WEBアプリ『ひとこと日記ver2』概要(Qiita)](https://qiita.com/Sekiguchi-Atsushi/items/4029966a13b0f5494b85)

#使用可能なソフトウェア・言語
(1)実務で長期間の使用経験あり
・**HTML5**、**CSS3

Google Cloud FunctionsからGoogle Cloud Translationを試してみる

前回、FirebaseでGoogle Cloud Functionsを使ってみました。

– [FirebaseのCloud FunctionsからGoogle Cloud Translationを試してみる](https://qiita.com/suzuki-navi/items/2600dc5c804daa4dc90c)

今回はFirebaseを使わずに、素のGoogle Cloud Functionsで同じ題材をやってみました。

# Cloud FunctionsのHello, World!

`function.js` という名前でJavaScriptのソースコードを書きます。

“`javascript
exports.helloWorld = function (req, res) {
console.log(“Hello, console.log!”);
res.send(‘Hello, World!’);
};
“`

`function.js` という名前である必要があるみたいです。デプロイは以下のコマンド。

“`console
$ gcl

コロナ禍で半年母親に会えないのでobnizとtwilioで見守りシステムを考えてみた。

#１．はじめに
　コロナによる緊急事態宣言により帰省が出来なくなり、一人住まいの母親とは電話では話しているものの全く顔を合わせる事もなく半年以上経ってしまいました。
　母親は高齢のためガラケーを使っておりしかもメールやSNSも全く使えない世代。今更メールやLINEの使い方を教えることもできない。
　一時期Apple Watchを持ってもらおうかとも考えたが、転倒検知がかなりの勢いで倒れないと検知しないみたいなので断念した。
　今回はobnizに超音波距離センサー（HC-SR04)を組み合わせ、一定時間距離に変化がなければ母親の具合が悪くなっているとみなして、twilioを使用しショートメッセージを自分のスマホに送信する様にした。

#２．環境
ハードウェア
　obniz 1Y
　HC-SR04
ソフトウェア
　node.js v16.0.0

![IMG_0037.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1270335/8bb4d59c-ad4e-f8ed-c8a7-a1edc78b523

平成生まれのエンジニアが初めてIoTに触れるのに丁度良い、生き残りゲーム～令和最新版～のプロトタイプをobnizで作る

先日、手軽にIoTに触れられると噂の「obniz」を入手しました。
ラズパイに比べて、圧倒的に早く、楽に電子デバイスを操れるのでうっかりスキルが向上したか？と錯覚するほどです。
この手軽さを活かす先は、プロトタイプでしょ？！ということで、さっそく行動してみました。
#生き残りゲームの令和最新版をプロトしよう
時代背景・コロナ感染予防・働き方・IoT・サーボモーターの動き、、、パッとピラめいたのが
　**生き残りゲーム**
レトロラブな私としては、これの令和最新版が作りたい！新しい形で対戦してみたい！　これです。　
**コレは絶対楽しいやつ**にしか思えないので、**プロトしてポテンシャルを測ってみたい**と思います。
ちなみに、この生き残りゲーム、平成生まれの方はあまり知らないらしいですね。そんな記事をネットで見ました。
ご存じない方は「生き残り

nvm-windowsでnode.jsのバージョン管理をする【Windows】

Node.jsのバージョン管理をwindowsPCでやりたくなったので入れ方を備忘録として。
どなたかの参考になれば幸いです:baby_tone2:

#手順

windowsはnodistが有名っぽいんですが、
以前なぜかめちゃくちゃ苦戦したのでnvmを入れてみます！

※正確にはnvm-windowsというMacで使うnvmのwindows版みたいなやつです。
nvm-windows：https://github.com/coreybutler/nvm-windows

##とりあえずアンインストール

現状普通に入っている場合はややこしくなるのでいったん削除します。
（“`$node -v“`でバージョン出てきたら入っていて、
　特にバージョン管理入れてなければベタだと思います）

スタート（左下のWindowsアイコン）
→ 設定（歯車アイコン）
→ アプリ
→ アプリと機能

出てくるリストにNode.jsがあるはずなのでそちらをアンインストールでOK！

## nvm-windowsのインストール
https://github.com/coreybutler/nvm-w

テレワーク中の旦那さんに「お昼だよ！」を間接的に伝えるためのしかけを作ってみた！

#作った目的
こんにちは。wataminoです。

旦那さんとテレワークがかぶるときは、いつも別々の部屋で仕事をしているのですが、お昼時は私から「お昼だよー！」と知らせに行きます。
なぜならお昼を忘れるほど彼は真剣(?)に仕事をしているからなのです。
でも真剣(?)すぎるあまり９割は声をかけても無視をされるか、嫌な顔されてしまいます。
せっかく、貴重なお昼時間を教えてあげているのに、、、

そこで、今、obnizでものづくりの勉強をしていることもあり、**「ならば行かずとも視覚と聴覚に訴えお昼時間を知らせるための仕掛けを作ってみよう！」**ということで、作成に取り掛かりました。
#使用したもの
・obniz Board 1Y
・サーボモーター
・抵抗内蔵LED（赤）
・スピーカー
#トリガーに関する試行錯誤
仕掛けを作ったところで、それを動かすためのトリガーをどうしようか、、、といろいろ考えました。
####Twitter
まずは、**Twitter**です。
obnizはTwitterとも連携できるようなので、Twitterで「旦那さん」とかつぶやいて動作させられたら、ステキだな、、

obnizでわが子と一緒に「オリジナル目覚ましBot」を作って、実際に起きられるかどうかを試した結果

##今回の目的　～わが子に”オリジナル目覚まし”を作りたい！～
来年の今頃は、わが家の息子は小学校１年生。
今後のために、朝は１人で起きられるようになって欲しい！！
そんな思いから、先日学習したobnizで「**オリジナル目覚ましBot**」を作ってみよう！と考えました。

そもそも、わが家の息子は、朝がとっても苦手。
毎日、必死に起こすのが日課となっていますが、寝起きがとっても不機嫌です?
本人いわく、「パパやママの声だと、ビックリするから嫌」なのだとか。
その後の支度もグダグダとなってしまうので、なんとか**笑顔で朝を迎えてくれたら**・・・と、模索しており、このあたりもBotで解消できればと思います。

##完成品（「わが子専用 目覚ましBot」）
完成品のご紹介です。
LINEBotからの合図とともに、obniz電圧スピーカーからメロディーが流れる仕様。
[前回の記事](https://qiita.com/kokano23/items/b34b7d0361b8aaa6ad1f)で作ったLINEBotを、一部アレンジしています。

zodを使ってJSON.parseしたオブジェクトをvalidationして型安全にしたい

# やりたいこと

`JSON.parse(json)`して得られたオブジェクトをTypescriptの型でバリデーションしたい

# なぜやりたいか

APIなどからjson文字列を受け取る際、`JSON.parse(json)`のようにして文字列を解析してjavascriptのオブジェクトを構築しますが、この`JSON.parse`の返り値の型が`any`なので、変数に代入する型をいくら指定してもしれっと代入可能になってしまいます。
そのため、↓のようなコードはコンパイルは通ってもランタイムでエラーになってしまいます。

“`typescript
type Post = {
id: number
title: string
content: string
}

const post: Post = JSON.parse(“{ id: 1, title: ‘title’ }”) // JSON.parseの返り値がanyなので普通に代入できてしまう。

post.content.length // => contentはundefinedなのでerror
“`
せっか

元記事を表示

超リアルなザクを目指して！obnizでぐぽーんと音がしてモノアイが光るプロトタイプを作成！！

##ぐぽーんと音がしてモノアイが光るのは男のロマン
ガンダムの色んな作品でよく見かける演出として、
**格納庫でスタンバってるMS（モビルスーツ）の目が「ぐぽーん」という音と共に光る**
というのがあります。（ザクやドムなどバリエーションも豊富）

この演出、個人的に大好物なんですが、いつかこれを**ガンプラで再現したい**なーと思っています。

今回は**100均で見かけたおもちゃとIoT基盤「obniz」を組み合わせてプロトタイプを作った**ので記事にしていきます。

##完成品（ぐぽーんとなってモノアイ光るぜ）
実際に作ったものはこんな感じで動きます。

できた！（スピーカーのノイズが凄いとかLEDの赤がカメラ通すとピンクに見えるとかあるけど気にしない)#obniz obnizで猫背になったら音が鳴る椅子を作って首コリ頭痛を防ぐ

前回の整体通院から1週間とたたずにこめかみが締め付けるような頭痛がしはじめ、整体師さんから「首の上の筋肉まで固まってますね。」と首と頭の付け根に鍼を6本も打たれたので、次の2週間後の整体までに頭痛を起こさないように猫背になったら音で注意してくれるシステムを作りました。

## 実際に動いているところの動画

椅子のヘッドレストの上にobnizを設置して、距離センサーで頭との距離を計測して、その値によってビープ音を鳴らします。（動画のビープ音は小さめかもしれません）

## いつもの姿勢がセン

元記事を表示

Vue.jsとReact.jsのプロジェクト作成から公開準備（※コーディングは含みません。）

# Vue.jsとReact.jsのプロジェクト作成から公開準備
Javascriptで使用できるフロントエンド側のフレームワーク、VueとReactのプロジェクト作成コマンドを忘れないためと、ビルドしてからの流れについての説明が見当たらず、せっかく個人開発でやってみても誰にもリリースすることがないように記す。
なお、今回はそれぞれポートフォリオをフロントエンド側でのみ、作成したという程で作成しました。

## 動作環境
– MacBook Air (Retina, 13-inch, 2018)
– BicSur 11.3.1
– 1.6 GHz Dual-Core Intel Core i5
– 6 GB 2133 MHz LPDDR3
– Node.js
– v13.8.0
– @vue/cli 4.5.13

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

### Vue.js
“`terminal
vue create vue-portfolio
“`

### React.js

“`terminal
npx create-react-app r

元記事を表示

LaravelにReactとTypeScriptを導入する

## 前提
Laravelでプロジェクトを作成していて、nodeはインストール済みの想定で進めていきます。

## TypeScriptをインストールする
webpack.mix.js（webpackのラッパーライブラリ）を下記のように編集する

“`
mix.ts(‘resources/ts/index.tsx’, ‘public/js’)
.sass(‘resources/sass/app.scss’, ‘public/css’);
“`

先ほどの編集内容を反映させる

“`
npm install
“`

プロジェクト内にnode_modulesディレクトリが作成されていればOK。
一旦下記コマンドでビルドする。

“`
npm run prod
“`

package.jsonにwebpack.mix.jsで編集した内容の不足分が記載される（typescriptとsass）

## Reactをインストールする

“`
npm i -D react react-dom @types/react @types/react-dom
npm install

NestJSでHMR(Hot-Module Replacement)でホットリロードする

NestJSは`nest new`したあとに`nest start:dev`するだけで、ホットリロードする開発環境を整えることができます。しかし、これはファイルの変更を監視し、変更が検知されたら再度ビルドしているだけなので、プロジェクトが大規模になるとTypeScriptのビルドの処理が重くなります。
そこで、WebpackのHMR(Hot-Module Replacement)を利用すると、変更のあったモジュールだけを入れ替えることができるので、大きなプロジェクトでもホットリロードの時間を大幅に短縮することができます。

> この記事は、ほとんど公式ドキュメントの意訳です。
> **ドキュメント** : https://docs.nestjs.com/recipes/hot-reload
> **ライセンス** : https://github.com/nestjs/docs.nestjs.com/blob/master/LICENSE

**注意**

* Yarn v2(berry)を使用している場合は、そのままでは動きません。上記リンクより公式ドキュメントをご確認ください。
*

gyp: No Xcode or CLT version detected!のエラー対処

## 事象
ReactにTypeScriptを導入しようと思い、npm install関連のコマンドで環境構築していた時に下記のようなエラーと遭遇しました。

“`
gyp: No Xcode or CLT version detected!
“`

## 解決策
Xcodeはインストール済みだったのでアップデートを促すエラーかなと思いアップデートを試しましたが変わりませんでした。
そのため、下記のように削除してからインストールし直しました。

“`
$ sudo rm -rf $(xcode-select -print-path)

# CommandLineToolsのディレクトリを削除
$ sudo rm -rf /Library/Developer/CommandLineTools

# Xcodeを設定とかをリセットする
sudo xcode-select –reset

# Xcodeを再インストール
$ Xcode-select –install

# 再度npmでインストールしてみる
npm install 【インストールしたいパッケージ】
“`

すると.

nodenvでインストール済みのバージョンリストを表示させる

## nodenvでインストール済みのバージョンリストを表示させる

検索してもなかなか出てこなかったので自分用にメモ
↓でいけました。現在利用しているバージョンについても教えてくれます。

“`
nodenv versions
system
14.4.0
* 15.10.0 (set by /Users/barabara/.anyenv/envs/nodenv/version)

“`

helpコマンドを使えば各コマンドについての説明がちゃんとありました。

“`
nodenv help
Usage: nodenv []

Some useful nodenv commands are:
commands List all available nodenv commands
local Set or show the local application-specific Node version
global Set or show the global Node version

MySQLで”Unknown column ‘xxx’ in ‘where clause'”が出たときの対処法

#MysqlでSELECTを使うときの注意点

##対象者
– これからSQLを学ぶ方
– 少し触ったことのある程度の方

##今回の気づき
例えばmysqlを使用してデータを抽出したいと考えます。

“`sql
SELECT * FROM users WHERE id=xxx
“`

その際、このようなSQL文を組み立てるとは思うのですが、idの部分に入ってくるものは変数で管理したいですよね？？

そしたら変数で管理してみましょう！
諸事情により、環境はNodeでExpressを使用します。随時自分が学習してる言語で応用してみてください！

“`node.js
const express = require(‘express’);
const app = express();

app.listen(3000, () => console.log(‘Server is listening on 3000’);
//このとき入ってくるindexは”a6f87ff4d4a04fa7a7a77acc1e3a6bd1″と定義します。
app.get(‘/users/:index’,

node.js + puppeteer + axios でポケモンカードの画像（漆黒のガイストのカードリスト）をスクレイピングしてみる

## はじめに
sveltekitでホームページつくりました。良かったら見てください。
[安全にインターネットを楽しもう](http://safetyinternet001.ddns.net/)
[Twitter](https://twitter.com/safetyinternetz)

## やりたいこと
・公式のカードページから画像をスクレイピングしたい
・最新弾である[[漆黒のガイストのカードリスト]](https://www.pokemon-card.com/card-search/index.php?mode=statuslist&pg=732)の画像を全部保存したい

## 必要なもの
・node.js
・puppetter
・axios

## 手順
まずは`npm init -y`でさくっと環境をつくる。

“`bash
npm init -y
npm i puppeteer
npm i axios
touch index.js
“`
で、今後 node index.jsで起動していきます。

## まずはページを表示するだけ
“`JavaScript
cons

Visual Studioでnpmを使う方法

マイクロソフトの公式ドキュメントを参考
[参考URL](https://docs.microsoft.com/ja-jp/visualstudio/javascript/npm-package-management?view=vs-2019)

## Node.jsプロジェクトの場合
### 1.「新しいnpmパッケージのインストール」をクリック


### 2.パッケージを検索し、「パッケージのインストール」をクリック

画像はjQueryをインストールしている。

## .Net Coreプロジェクト

WEBアプリ『ひとこと日記ver2』概要

この記事は、関口 厚がポートフォリオ用に開発したWEBアプリの紹介記事です。

#アプリの概要
アプリ名：**[ひとこと日記ver2](https://diary-app.sekiguchiportfolio.net/)**
日々の記録をテキスト形式で保存する、シンプルな**日記アプリ**です。
コードはGithubにてご覧いただけます。(**[フロントエンドのコード](https://github.com/Sekiguchi-Atsushi-WEB/vuecli-app)**・**[バックエンドのコード](https://github.com/Sekiguchi-Atsushi-WEB/express-app)**)

#作成環境
・インフラ：**AWS**
・バックエンド：**node.js** ＋ **Express**
・フロントエンド：**Vue.js**
・データベース：**MySQL**

**●各バージョン**
node.js v12.18.2, Express 4.17.1, Vue.js 2.6.12, Veu-CLI 4.4.6, MySQL 8.0

#アプリで

【Node.js】ダウンロードアプリ版のアンインストール、nvmでの再インストール（mac版）

#### Node.jsのインストールはどのように行いましたか？
[公式サイト](https://nodejs.org/ja/)からアプリをダウンロードしてインストールするのは簡単な方法ですが、あまりオススメしません
理由はバージョンコントロールが面倒になるからです。**nvm**または**nodebrew**を使ってインストールする方法がオススメです。

既にダウンロードアプリ版でNode.jsをインストールしてしまった方向けに、
既存のNode.jsのアンインストールから、nvmで再インストールする方法について紹介します。

## Node.jsのアンインストール

#### npmのアンインストール

npmのアンインストール

~~~bash
npm uninstall -g npm
~~~

ホームディレクトリに移動して`.npm`フォルダの削除

~~~bash
cd ~
rm -rf .npm
~~~

`node`コマンドのフルパスを探してこちらも消しておく

~~~bash
which node
rm -rf /usr/local/bin/node
~~~

消えて