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

docker-composeでNuxt.js環境構築

Nuxt.jsはローカルにNode.jsを入れてあげれば動かすことができますが、
ローカルをできるだけ汚したくないので、***docker-compose***で動かします。

## 構成
– Vue.js v2.6.14
– Nuxtjs v2.15.7
– コンポーネント設計
– compositionApi
– Nuxt.js用のプラグイン(@nuxtjs/composition-api)を使用
– TypeScript
– Vuetify(UIフレームワーク)

## 環境構築手順
### コンテナでNode.jsのバージョン確認まで
– nodeのイメージを使用する
– 作成したnodeのイメージに、yarnを用いて使用するモジュールをインストールしていく

“`Dockerfile
FROM node:lts

EXPOSE 3000
ENV HOST 0.0.0.0

RUN apt-get update && \
apt-get upgrade -y && \
yarn global add @vue/cli && \
yarn

【個人開発】新旧漢字コンバートAPIを作成しました。

# 概要
* 旧漢字もしくは旧漢字がある漢字を受け取り、文字列を置換して返すAPI

例) 蛍柄の螢光灯

|No| 説明 | 返値 |
|:——————:|——————-|——————-|
|1|新漢字→旧漢字|螢柄の螢光灯|
|2|旧漢字→新漢字|蛍柄の蛍光灯|
|3|旧漢字が含まれるか|true|
|4|旧漢字存在する新漢字が含まれるか|true|
|5|存在した旧漢字数|1|

# きっかけ
業務上で旧漢字と新漢字を変換するプログラム開発があり、
API経由でコンバートしてくれる仕組みがあれば便利だと思い開発に至った。
※その時は一から実装しましたが、自分と同じ考えの人も少なからずいると思ったので…

またAPIを作成しても**周知しなければ使用してもらえない**と思い、初めてQiitaに投稿することにした。

# 環境
|環境 | 名前 | バージョン
|——————|——————-|———–

世界の偉人たちが残した名言と戯れる

##知らないことは恥ではない。知っているふりや「まあいいや」と知ろうとしないことが恥なのだ。（ホリエモン）
今の私に刺さる:cupid:名言です。堀江さん良いこと言いますね。
落ち込んだとき、人生の迷ったとき、暇なとき、偉人たちの名言を調べたりしますよね。

というわけで、人生を導いてくれる名言BOTを作成しました。

##LINE Bot 実演
名言を含む言葉を投げかけることでランダムで名言を返してくれます。
収録数はおよそ3000！
名言だけでは何なので、偉人たちの画像とプロフィールもつけています。
この名言が生まれた時の歴史的な背景に思いを馳せてはいかがでしょうか。

名言BOTできたよー#protoout#LINEBot #名言 pic.twitter.com/phuBiou91K

— tishiyama (@tishiyamaa) October 19, 2021

・・・動画が暗い＆地味すぎる。なぜ白黒写真の偉人を引いてしまうのか。

せっかくなのでお気に入りがみつかるまでリスエストし続けてみた結果、
イチロー（SSR）ゲット
レアリティは自分の心が決める。
![ichi_ssr.jpg](https://qiita-image-store.s3.ap-n

Ｎuxt ＋Firebase のメモ

# 内容

Nuxt + firebase で web アプリを作る方法についての内部向けメモです。基本、下記あたりの記事を見てそのままやっただけです。

– [Nuxt 公式](https://nuxtjs.org/ja/docs/get-started/installation)
– [Nuxt/Firebase 公式](https://firebase.nuxtjs.org/)
– [Nuxt.jsでfirebaseを使う方法](https://devsakaso.com/nuxt-firebase-installation/)
– [Nuxt.js + Firebase Authentication + FireStoreでwebアプリケーションハンズオン](https://qiita.com/ririli/items/d0d3a6ae78c1b6e827fc)

# 手順

## 準備

Ubuntu 20.04LTS でやります。

“`
$ npm -v
6.14.15
$ node -v
v14.18.1
$ yarn -v
1.22.11
$ firebase —

メモ：node.js＋Postgres＋Basic認証の例

[前](https://qiita.com/DiveMasakazu/items/cecd5987023f7292665f)

前はテスト用に何も考えないRestサーバを立ててみたが、
認証とDBトランザクションを一応考えてもう少しまともなものにしておく。

## Postgresのプール
[ここ](https://qiita.com/sa9ra4ma/items/cea1abecf3434cbbc08c)を参考にpool.jsを作成してみた

“`node.js:pool.js
const { Pool } = require(“pg”);

const pool = new Pool({
user: ‘postgres’,
host: ‘localhost’,
database: ‘postgres’,
password: ‘password’,
port: 5432,
max: 2
});

pool.tx = async (cb) => {
const connection = await pool.connect()

メモ：node.jsでPostgreから簡単なデータをJSONで返す

手元で簡単にPostgres+Node.jsでRestAPI的なテストをしたい
という事もあるので自分用のメモ。
DB設計は別でやって、select文を発行してデータを受けたい。ORマッパー等は使わない。
（ORマッピングが嫌い、というのもある。SQLと実行計画は意識するべきだろ派）

環境はWindows
Node.jsとPostgresのインストールは省略。

## express

パッケージ管理のnpmを使う前にプロキシ設定が必要な場合は行う

“`
call npm -g config set proxy http://xxx:8080
call npm -g config set https-proxy http://xxx:8080
“`

プロジェクト用のディレクトリを作成し移動。
npm install express
でexpressをインストール。(新しいnpmではsaveオプション不要、らしい）

とりあえずexpressの動作見るだけならこんな感じ

“`
const express = require(‘express’);
const app = e

EdgeJsをC#側のソースコードからデバッグする

###EdgeJsをC#側のソースコードからデバッグする

####EdgeJs処理の流れ

| 場所　| 処理 | 処理2
|:———–|:————|:————|
| JS側 |require(‘edge-js’); を呼ぶ |edge-jsがC#側のbootstrapを呼ぶ|
| C#側 |bootstrapが呼ばれる ||
| C#側 |bootstrapが参照しているEdgeCompiler.Dllがbootstrap内にないなら | Edge.js.CSharp.csprojを呼びbootstrap内にEdgeCompiler.Dllがを生成する|
| C#側 |bootstrapが参照しているEdgeCompiler.Dllがbootstrap内にあるなら | bootstrap内のEdgeCompiler.Dllが参照される|

###node_modulesに入っているC#のプロジェクトをRiderに追加する

| プロジェクト名

dynamoDBのupdate時、配列やオブジェクトの値に対して条件をつけて書き込み(ConditionExpression)したい

dynamoDBの条件付き書き込みで、オブジェクト内の特定要素に対して制約を付ける方法をメモする

#dynamoDBのConditionExpressionについて

dynamoDBのあるレコードを更新する場合に下記のように条件をつけることができる

– レコードに特定キーが存在する場合のみput
– レコードの特定キー値がある値の場合のみput

例：productTable

“`js
{
name:”apple”, // hash key
price: 300,
isBought: false
}
“`

実行コード(lambda)

“`js

const AWS = require(‘aws-sdk’);
const dynamoDB = new AWS.DynamoDB.DocumentClient();

exports.handler = async(event, context) => {
const params = {
TableName: “productTable”,
Key:{

あなたの知らないディズニーキャラクターの世界

#君の名は
※今回、投稿主の重度のヲタクぶりによりDヲタ[^1]用語が頻出しています。注釈をつけていますのでご活用ください。

突然ですが、投稿主はこう見えて大のディズニー好きでございます。
アイコンも実はミニーちゃんカチューシャです。
現在のようにチケット入手が困難になる以前は月に1回はパーク[^2]に行っていました。
（ディズニー好きにしては少ない方です。）
そんなディズニー大好きな私ですが、パークでフリグリ[^3]に遭遇したとき
「あれ？あのキャラクターなんていう名前だっけ……？」となるときがあります。
パークを訪れているとき以外でも、イラストで見たとき、金曜ロードショーに登場したとき、などなど……。
なぜか思い出せないのです。こんなにディズニー愛に溢れているというのに……！

突然やってくる「あれ？なんだっけ？」のために、普段からディズニーキャラクターについて学んでおく必要があるのです。
そしていつの日か「なんでそんな脇役キャラクターの名前まで知ってるの？！」
と驚いてもらえるように、あなたも一日一回ディズニーキャラクターを覚え

LINE Botでお菓子好きによる お菓子好きのためのガチャを作成してみた

#お菓子好きですか？
私はお菓子が好きです。
クッキー、チョコレート、ケーキ、お団子・・・あぁ幸せ:two_hearts:
世の中には、期間限定や地域限定など様々なお菓子があり、普段の生活ではお目にかかるのが難しいお菓子もあり、お菓子ラバーとしては残念な状態:disappointed_relieved:
まだ見ぬお菓子に出会うため、無課金で遊べるお菓子ガチャを作成して妄想でのお菓子ライフを充実させましょう！

#お菓子ガチャ（LINE Bot）
LINE Botでお菓子の種類（チョコとか）を入力すると、ランダムで返答してくれるBotを作成しました。

お菓子好きには堪らないガチャが出来た#protoout pic.twitter.com/bcb

疑似彼氏、作りました。

# 彼氏を作ろう
何かと疲れている現代人。私もまたそのひとりである。
ちょっとしたときめきと癒しが欲しい。仕事帰りに誰かに「今日も一日頑張ったね」と優しく言われたい。私のどうでもいい話に「うんうん」と相槌を打ってくれるだけでいい。
そうだ、**LINE Botで彼氏を作ろう。**

# どんな彼氏？
**優しい言葉をかけてくれる**のは大前提で、**今日の天気**も教えてほしい。（よく傘を忘れてびしょ濡れになるので）
ついでに天気によって会話パターンもあるとよい。
ということで、やりたいことは以下の2点。

* 天気予報（天気によって返事のパターンあり）
* ある程度キャッチボールのある会話

# 環境
Visual Studio Code 1.61.0
Node.js 7.24.0
ngrok

# 彼氏、できました
実際に作って動かしてみたものがこちら。

ちゃんとそれっぽく会話をしている pic.twitter.com/d6PJeR85xm

— 7mst (@nnmshita) October 19, 2021

はじめまして、彼氏の**「タケシ(仮)」**（LINE Bot名）。
「タケシはきっとラーメン好き」という無駄な設

ジブリAPIでLINEBotを作ってみた

#ジブリ作品は好きですか？
最近、自分が好きだったアニメが〇〇周年を迎えた的なニュースをよく目にします:thinking:
あの頃のアニメは名作ばっかだなぁなんておっさんじみたことを思うわけですが、コアなものを話題に出すと「ナニソレ」って言われたりして、ちょっと寂しかったりするものです。

でも、**ジブリ作品のタイトルであれば、みなさんもいくつかご存じではないでしょうか。**
スタジオジブリは日本が誇るアニメ制作会社のひとつ。そこに異論はないかと思います。
**今回、ジブリAPIなるものを見つけたので、それを使ってLINEBotを作ってみました。**

[Studio Ghibli API (v1.0.1)](https://ghibliapi.herokuapp.com/)

なお、僕はジブリヲタではなく雑食系のアニヲタです。あしからず:raised_hand:

#用途
　
・ジブリヲタへ　　　　　監督・年代クイズなんかに使ってやってください。
　　　　　　　　　　　　画像を用いた

[Vue]d3.jsを用いてTSVデータをVue3で描画するまでの方法

– フロントエンド開発においてAPIではjson、コンテンツではmarkdownをfetchして加工したり描画することが多い。
– Vue2利用の際も当てはまるが、最近Nuxt3のBetaが発表されたことも相まって、そこで導入されているVue3やViteの注目率や利用率が日に日に上昇。
– そこで今回はデータ形式としてよく使うTSVのVue3での描画処理を記録していく。

## 環境
– Mac OS 11.2.3
– Node.js v14.16.0
– Vue 3.2.16

## 前提
– 利用するサンプルプロジェクトとして以下を満たしていることとする。
– Vue3の利用
– Vite2の利用
– 以下で上記を満たすサンプルを用意することが可能。

“`bash
npm init vite@latest sample — –template vue
“`

## 手順

### TSVデータの用意
– 描画対象のTSVデータとして以下を用意して任意のディレクトリに入れておく。

“`text:data/members.tsv
id name score
1 t

obnizでビールの飲み頃温度を教えてくれるIoTを完成させたい！

**させたい！**という願望含む、現状**未完成**の投稿で恐縮です。
絶賛**迷走中**ですので、**お力添えいただければ幸いです！**

プログラミングを習い始めて半月が経ち、obnizを使ってIoT入門しました。
天敵のプリン体を避けビールを絶っていますが、時には飲みたくなり、
そんな特別な時には**最高の状態のビールを飲みたい！**私利私欲のためのIoT製作です。

ビールの飲み頃温度は夏なら4～6℃、冬なら6～8℃とされています（喉越しはさておいて）。
冷蔵庫で長く缶ビールを冷やしておくと冷えすぎて、本来のビールの美味しさが半減されてしまいます。
出典：[サントリー](https://www.suntory.co.jp/customer/faq/001711.html)
そこで、**冷蔵庫から出して温度を測りながら、飲み頃と言われている4℃以上になったら
飲み頃サインをLEDが光って教えてくれるもの**を目指して作っています。

##現状

npm経由でfirebase cliをM1Macにインストールしてもエラーになる

# はじめに
なんかエラーになるんだけど、日本語で直接言及しているのが見当たらなかったのでメモ

# 解決方法
Node16にあげてからインストールしてください。
14系は駄目でした。

以上！

clasp login時エラー

clasp login時以下のエラー表示。

“`shell
node[3450]: ../src/api/callback.cc:125:void node::InternalCallbackScope::Close(): Assertion `(env_->execution_async_id()) == (0)’ failed.
“`

nodeのバージョンが
v.16.2.0だったのを
現在の安定版
v.14.18.1
にしたら解決。
https://nodejs.org/en/download/

### 参照

https://qiita.com/Hide-Zaemon/items/cbb4497237843a729994

TypeScript + Nexus + Prisma で GraphQL ( for MySQL ) 環境を構築したった

# はじめに

はじめまして。全然関係ないけど、最近は Vue を裏切って React 書いてます。

さて、前回、[TypeORM を使って Node.js の GraphQL 環境を構築しました](https://qiita.com/les-r-pan/items/8f11d90eb0538cac2812)が、ぶっちゃけ TypeORM と GraphQL との親和性があまり良くなくて、結局、その後の開発がそこまでドライブしませんでした。
そんな中、今のチームで Node.js で GraphQL の API サーバを新たに構築する必要があり、参考になる既存資産もあったので Nexus + Prisma でやってみました。

以下の記事を大いに参考にさせていただいております。

https://zenn.dev/queq1890/articles/2a7967cb679357

# 実際にやってみた

## Prisma

https://www.prisma.io/

> Next-generation Node.js and TypeScript ORM

と謳っています。
公

パスワードのセキュリティ（ハッシュ化）

##はじめに
セキュリティ関係気になったので調べてみた。

—

##簡単なパスワードのイメージはこんな感じ

—

##昔のセキュリティでは
とりあえずパスワードをハッシュ値にしておけ！
みたいな時代があったらしいが色んな攻撃方法が出来てこれだけでは不十分らしい。

—

####例えば

—

**レインボー攻撃**
レインボーテーブルと呼ばれる、ハッシュ値からパスワードを特定するための逆引き表を用いて、パスワードを高速に解読する手法。

こんな攻撃されたらハッシュ化してるだけやとリスクある。

—

##現状の対策

—

###saltの付与

—

ハッシュ値にするメッセージをm、ハッシュ値の関数をh(x)、saltをsとしたときに、ハッシュ値＝h(m||s)として、saltを追加したメッセージをハッシュ化す

angular.jsonを書き換えてassetsフォルダのようなビルドと関係ないフォルダを作りたい

自分なりに調べたので備忘として残しておきます。
# angular.jsonとは
一言でいうとAngularアプリの設定を行うファイルとのこと。
ビルドの設定やフォルダ構成、sourceMap等の有効化など色々な設定を行っている。

# ビルドのオプションをいじって任意のフォルダを作成する
[参考サイト](https://angular.jp/guide/workspace-config#asset-config)

デフォルトではAngular.jsonのassetsプロパティに定義されている通り、**assetsフォルダ**の中身がdist/appフォルダ下に展開される。

“`angular.json
“assets”: [
“src/assets”,
“src/favicon.ico”
]
“`
これを詳しく書くと以下のようになる

“`angular.json
“assets”: [
{
“glob”: “**/*”,
“input”: “src/assets/”,
“output”: “/assets/”
},
{

Instagramにアップロードした画像をランダムにESP32に表示する

Instagramにアップロードしてある画像を、手元に置いておくLCD付のESP32に表示させます。
ついでに、ランダムに表示画像を切り替えさせるのと、日時も表示するようにして、卓上時計 兼 写真立てに仕立てます。

ソースコードもろもろを以下のGitHubに上げておきました。

poruruba/InstagramGallery

https://github.com/poruruba/InstagramGallery

とはいっても、ほとんど以下で紹介されている通りに実行すれば実現できました。（非常に助かりました。ありがとうございました！）

APIを使って自分のInstagram投稿写真を取得する方法【Instagram Basic Display API】

APIを使って自分のInstagram投稿写真を取得する方法【Instagram Basic Display API】

#Facebookにアプリを登録する。

InstagramにAPIでアクセスするには、Facebookにアプリとして登録する必要があります。

##Facebookに開発者アカウントを作成する

Faceboo