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

【スーパー初心者向け】Dockerを使ってReact環境を構築&起動する方法をかなり詳しく解説してみた。

## はじめに
この記事では以下のことを約束します。

#### ・難しいカタカナ語は使わない！
カタカナ語ばかりの記事ダメ、絶対。

日本語で書くのがダサい？
インテリを気取ったわかりにくい記事を書く方がもっとダサいです。
ダメなコンサルと一緒です。

#### ・手順を端折らない！
細かい手順を端折っている記事ダメ、絶対。

初学者のためを思うならば「ターミナルでcdを使って作成したプロジェクトのフォルダまで移動する」くらいまで丁寧に書くべき。
初学者の自分も本来30分もあれば終わるこの作業を、端折られているが故に丸一日かかってしまいました。

#### ・要点をシンプルかつ明快に！
長ったらしい記事ダメ、絶対。

初学者がわかるようにするためには、丁寧かつシンプルに記述するのが大事。

## 今回使うツールや技術
###### １：ターミナル
###### ２：Docker
###### ３：Node
###### ４：React

## 事前準備

### Terminalのインストール（Windowsのみ）
・Windowsの場

BigQueryにデータを格納

## 前提

以前作成した下記記事の環境からスタートします。

https://qiita.com/sh19982580/items/d0e4fde11e734bee8c76

## サービスアカウントを作成

[スタートガイド](https://cloud.google.com/docs/authentication/getting-started
)でサービスアカウントを作成

1. サービスアカウント名を入力
1. 作成して続行をクリック
1. ロールを選択(今回は編集者にしました)
1. 続行をクリック
1. 完了

#### keyの作成

1. 上記手順で作成したアカウントがあることを確認
1. そのアカウントのリンクをクリック
1. 「キー」を選択
1. 鍵を追加、「新しい鍵を作成」をクリック
1. 「JSON」 で作成

#### JSON

– 上記でダウンロードした「JSON」を`package.json`と同じ階層で`credentials.json`として保存
– envファイルでは、`GOOGLE_APPLICATION_CREDENTIALS=”./cred

Webの勉強はじめてみた その34 〜設計手順と認証のテスト〜

N予備校「プログラミング入門Webアプリ」を受講しています。
今回は第4章16,17節です。

## 設計手順

ユースケース

1. ユースケースの想定
2. サービス名とプロジェクト名
3. サービスの内容
4. 要件定義
5. 要件に上がった用語の定義。用語・変数などで利用する英単語や意味の定義
6. データモデリング。エンティティのリレーションを考える。
—
インターフェース

7. URL設計。ページの構成。
8. ページのURLを考える。メソッド(POSTやGET)とページの内容。
9. APIのURLを考える。メソッド、処理内容、利用方法(HTML,AJAX)。
—
モジュール

10. モジュールの設計。フレームワークを利用するか。
11. `router`モジュールを考える。`routes/`にどういうファイルが必要か。
12. データベースをどこでどう管理するか。

:::note
出来上がったデータモデルで基本要件を満たすか、
要件漏れや根本的な仕組みに問題がないかをチェックする。
:::

ある程度フワッとしててもいい？

### ユース

Lambda(Node.js)で別アカウントのECSサービス情報を取得する

# はじめに
Node.jsを使ってスイッチロールして別アカウントのECS情報を取得する際に実装方法が分からなかったので、備忘として残しておきます。
Lambda＋Node.jsの情報少なすぎひん…？

# 設定内容
## 権限設定
Lambdaを作成する前に以下の設定だけ先にやっておきます。
色々試しながらだったので、もしかしたら漏れがあるかもしれません。

* アクセス元のIAMロールにAssumeRole権限追加
* アクセス先のIAMロールにECSへのアクセス権限追加(ECSFullAccess)
* アクセス先のIAMロールの信頼関係にアクセス元のIAMロールを追加

## Lambda実装
初めてNode.js書くので不要な実装とか含まれているかもしれませんが、実際に実装したプログラムは以下です。
普段Pythonしか書かないのでcallbackとか全然頭に入ってこなかった。。

“`
const AWS = require(‘aws-sdk’);
const sts = new AWS.STS({apiVersion:’2011-06-15′,region:’ap-

node-sass導入、npm install時のエラー対処法

### 事象
node-sassを使用するためにモジュールをインストールしようと、npm installコマンドを入力したらエラーが起きた。

### 該当するソースコード
“`
$ npm install

〜省略〜

npm ERR! code 1
npm ERR! path /Users/horitakuya/curriculum-intermediate/work/03-sass/node_modules/node-sass
npm ERR! command failed
npm ERR! command sh -c node scripts/build.js
npm ERR! Building: /Users/horitakuya/.nodebrew/node/v16.14.0/bin/node /Users/horitakuya/curriculum-intermediate/work/03-sass/node_modules/node-gyp/bin/node-gyp.js rebuild –verbose –libsass_ext= –libsass_cfla

Node.js: fetch の使い方

こちらを参考にしました。
[node-fetch
/
node-fetch](https://github.com/node-fetch/node-fetch)

ライブラリーのインストール

“`bash
sudo npm install -g node-fetch
“`

“`js:fetch01.js
#! /usr/bin/node

import fetch from ‘node-fetch’

const url = ‘https://api.github.com/users/ekzemplaro’
const response = await fetch(url)
const body = await response.text()

console.log(body)
“`

実行結果

“`text
$ ./fetch01.js | jq
{
“login”: “ekzemplaro”,
“id”: 7269588,
“node_id”: “MDQ6VXNlcjcyNjk1ODg=”,
“avatar_url”: “https://avata

環境構築

# はじめに
最近Macの初期化をすることが多く、いちいち設定するのが面倒なのでまとめた。
以下を入れる
– Homebrew
– Chrome
– Slack
– Sourcetree
– VScode
– Zoom
– Nodejs
– angular cli

# M1チップを利用している場合
– Rosettaのインストール
– https://support.apple.com/ja-jp/HT211861
– Rosettaを有効化
– Finder > アプリケーション > ターミナル右クリック > 情報を見る

# Homebrewのインストール
homebrewの公式サイトからスクリプトをターミナルにコピペして実行。
以下のコマンドを実行しHomebrewのバージョンが表示されればOK
“`bash
brew –version
“`

# 各ツールのインストール
Chrome, Slack, Sourcetree, VScode, Zoom
“`bash
brew install –cask google-chrome slack sour

Anacondaにnodejs(v≧12)をインストールする方法

m1 mac miniを購入して色々環境構築をしている時にハマったこと。解決方法を殴り書きします。
homebrewとnodebrewをインストールして、nodebrewからnode（version=17.）をインストールした。
AnacondaのjupyterLabで拡張機能を使うにはversion$\geq 12$のnodejsが必要。そもそもnodebrewでインストールしたnodejsとAnacondaで要求されたnodejsは場所的に別物なので、Anaconda側でもインストールする必要がある。
baseではicu>65を満たさないためnodejsの古いバージョンしかインストールできない。

そこで、**baseとは別に仮想環境を作って**、そこで

“`
% conda install nodejs -c conda-forge –repodata-fn=repodata.json
“`

を実行すれば、

“`
% node -v
v12.4.0
“`
となって、成功。

初めての投稿で大分適当ですが、お許しください。

GitHub Actionsを使ったGitHub PackagesでのNode.jsのDockerイメージの管理

オープンソースの開発者に関わらず、githubを利用して開発をされているかたは多いと思います。

Repositoryという言葉は長いので、英語でもよく repoと書いたり、会話でも repoと言ったりします。

今回は、こちらからの翻訳です。

https://snyk.io/blog/managing-node-js-docker-images-in-github-packages-using-github-actions/

githubでの安全なNode.jsのDockerイメージの管理についてステップバイステップの説明となっています。

# GitHub Actionsを使用して、GitHub Packagesで Node.jsのDockerイメージの管理する

Liran Tal
July 13, 2021
現在、あなたがオープンソース開発をしているなら、GitHubコミュニティ内でアクティブに活動し、オープンソースプロジェクトやそのリポジトリに参加されていると思います。最近GitHubのエコシステムに加わったのが[GitHub Packages](https://

Electron 18 を使って200行以内でファイルの入出力ができるようなテキストエディタを作ってみる。

## 初めに

実用を目的とはしていません。`Electron`の構造を理解するために、どれだけ骨格を抜き出せるかを目的にしています。

というわけでスクラッチから書いてみます。

`html`中に`style`と`javascript`を直書きしているので、以下のワーニングが出ます。
`Electron Security Warning (Insecure Content-Security-Policy)`

以下のレポジトリにワーニングの出ない、他の機能も入ったバージョンを置いておきます。
ワーニングの消し方や結果だけを知りたい方はこちらで！
https://github.com/Satachito/electron-quick-start-MOD

`npm`,`npx`は入っている前提です。(`node`が入っていれば通常入っています)

## 準備

フォルダを作ってその中に`package.json`を作って`npm`で`Electron`をインストールします。

“`
$ mkdir TE
$ cd TE
“`
“`package.json
{ “main”:

Node.jsのバージョン管理 n でバージョンが切り替わらない

# 事象
Node.jsのローカル環境でのバージョン管理にはnというバージョン管理ツールがオススメという記事が多数あったので、インストールした。その際に、n　でインストールしたNodeバージョンに切り替わらなかった時の対応方法まとめ。　※ nのインストール方法は省略。

生じた現状は以下。

“`
usr@usrMacBook-Pro ~ % n stable
installed : v16.14.0 to /Users/ogasawarasatoru/.n/bin/node
active : v17.0.1 at /usr/local/opt/nvm/versions/node/v17.0.1/bin/node
usr@usrMacBook-Pro ~ % node -v
v17.0.1
“`
`n stable`でNodeのLTSをインストール後、`node -v`で確認すると、activeのバージョンが違う。

# 原因
どうやら、最初から入っていたnvmのNodeがactiveとして設定されていたようで、n でインストールしたnodeが適用されなかった。（

シークライズ

「Sequelize」の読み方を、私は「シークライズ」と表記、記述、呼称しています。
Sequelizeとは、データベースへ簡単にアクセスするためのNode.jsのライブラリです。
TypeScriptやJavaScriptで使用しています。

クラウド関数で音声プロキシを構築

音声プロキシ（マスクドコーリング）は、中継電話番号を提供することで、ユーザーの個人情報を保護するものです。この方法により、発信者にも着信者にもお互いの実際の電話番号を隠す事が可能です。Uberを代表にデリバリーサービスやライドシェアサービスでは一般的な方法ですが、中小企業のさまざまな場面でも重要視されています。

このチュートリアルでは、お気に入りのユースケースの1つであるバーチャルビジネスフォンを構築します。

2つの通話方向を取り上げます：
—————————————
1. Vonageのクラウドバーチャル番号でクライアントに電話をかける：DTMFで相手先番号へ接続
2. 他の誰かがあなたのVonageクラウドバーチャル番号に電話をかける：あなたの個人番号に接続

これを実現するために必要なのはバーチャルのVonage番号と、Webフックを処理するちょっとしたサーバレス関数になります！

ここで使用するGoogle Cloud Functionsは、Googleが提供するFunction-as-a-Service (FaaS：サ

VRChatがOSCに対応したので、まずはNode.jsでアバターをジャンプさせてみた

[](https://gyazo.com/63ea9219eb659bd581bac3b5c2920d03)

## 参考記事

– VRChat [https://hello.vrchat.com/](https://hello.vrchat.com/)
– 【VRChat】オープンベータ版で「OSC」に対応 オーディオ機器でアバターの一部操作が可能に | Mogura VR [https://www.moguravr.com/vrchat-29/](https://www.moguravr.com/vrchat-29/)
– VRChat OSC for Avatars — VRChat [https://hello.vrchat.com/blog/vrchat-osc-for-avatars](https://hello.vrchat.com/blog/vrchat-osc-for-avatars)
– VRChat OSCを使

【サーバサイド編】GraphQLを使うぞ

こんにちは！今回は自身の備忘録としてGrapuQLについてまとめたいと思います。
# 目次
[1.今回作るもの](#1-今回作るもの)
[2.使用技術](#2-使用技術)
[3.必要なインストール](#3-必要なインストール)
[4.今回登場する主なファイル](#4-今回登場する主なファイル)
[5.早速書いていこう](#5-早速書いていこう)
・app.jsを書く
・schema.jsを書く
・MongoDBと接続する
・modelsフォルダ内のファイルを書く
[6.メソッドの書き方](#6-メソッドの書き方)
[7.データの取得](#7-データの取得)
[8.データの追加、編集、削除](#8-データの追加編集削除)
・データの追加
・データの編集
・データの削除
[9.上手くいっているかテストしてみる](#9-上手くいっているかテストしてみる)
[10.まとめ](#10-まとめ)

:::note info
超ざっくりGraphQLとは：
・DBから情報を取得するのに使えるやつ。
・APIのURL(エンドポイント)が1つで済む！
・クライアントサイドでDBから自分で持ってきたいデー

node.js の require と import

node.js の require(CommonJS) と import(ESModule) について、理解が曖昧だったため、調べ直してみました。

※2022年2月の 最新バージョン [v17.6.0](https://nodejs.org/dist/latest-v17.x/docs/api/) のドキュメントをもとに記述しています。あらかじめご了承ください。

## require と import の違い

簡単にいうと、nodeモジュールの読み込み形式の違い。

require　は [「CommonJS」](https://nodejs.org/api/modules.html) 形式によるモジュールの読み込み方法。
import は [「ECMAScript」](https://nodejs.org/api/esm.html) 形式によるモジュールの読み込み方法。

requireを定めたCommonJSは [2009年に始まったプロジェクト](https://ja.wikipedia.org/wiki/CommonJS) で、歴史が長い。nodeの公式ドキュメントを見ると

Vite ＋ Vanilla な JavaScript を軽く試してみる（npm を利用）

この記事では、よく名前を見かけるようになったと思われる「[Vite](https://github.com/vitejs/vite)」を、Vanilla JS と組み合わせて試してみる、というものです。
自分が最初に名前を見かけたのは、以下の記事だったように思います（もしくは、Twitter のツイートで見かけていた、とかかも）。

●Viteで爆速なフロントエンド開発環境を作る
　https://zenn.dev/sykmhmh/articles/ff09bea2cf7026

この後は、以下に記載されているセットアップから、いくつか設定を追加してみる、といったあたりをやっていきます。

●はじめに | Vite
　https://ja.vitejs.dev/guide/#%E6%9C%80%E5%88%9D%E3%81%AE-vite-%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%82%92%E7%94%9F%E6%88%90%E3%81%99%E3%82%8B
![テンプレートについて](https://qii

dockerで構築したローカルサーバーをスマホなど外部機器でアクセスする方法

# 概要
dockerでローカルサーバーを立ち上げたときに、スマートフォンでの検証をする場合などがある。その際に、スマートフォンに対して`http://localhost:8000`などとアクセスしてもつながらないことがあった。ファイアウォールの設定が関係しており、外部機器でのつなぎ方の設定を記載する。

# 使用端末
– win10

# 方法
* 設定
1. 「セキュリティが強化されたWindows Defender ファイアフォール」を開く。
1. 左の項目から「受信の規則」を選択
1. Docker Desktop Backend(プロファイル　パブリック)を探す
1. 許可されていないとなっている場合があるため、右クリックでプロパティを開き、許可するを選択して、適用
1. また, パブリック以外になっていたら、パブリックにする
1. 2つあると思うので二つとも許可とパプリックに設定する(UDP, TCP)
1. 再起動(念のため)

* 実際に接続してみる
1. 外部機器（スマホなど）とパソコンを同じWi-Fiにつなぐ。
1. dockerにてローカルサーバーを立ち上げる。

nodenv で指定したバージョンのnodeがインストールできない

# 現象
nodenvを使用してnodeのバージョン管理をしている環境で、`nodenv install xx.x.x` コマンドで、指定したバージョンをインストールしようとすると、下記のエラーが出る。

“`
node-build: definition not found: xx.x.x
“`

`nodenv install –list` でインストールできるバージョンの一覧を表示させても、欲しいバージョンが表示されない。

# 対処法

下記コマンドを実行し、`node-build` を最新化する。

“`
git -C ~/.anyenv/envs/nodenv/plugins/node-build pull
“`

再度、`nodenv install –list`を実行して、バージョンの一覧が最新化されているのを確認し、`nodenv install xx.x.x` を実行する。

Node.jsのMySQLモジュールを使った値のエスケープでハマった話

## はじめに
こんにちは。ブログとQiitaの使い分けがいまいちできない鮎月(あゆつき)です。
Qiitaの投稿は2つ目になりますが、タイトル通りの話です。

一応確認ですが、このモジュールについてのお話です:

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

https://github.com/mysqljs/mysql

## 2つのエスケープ方法
Node.jsのMySQLモジュールには、2つのエスケープ処理の方法があります。

### connection.escape()
例としてこんな感じになります (公式Docより)
“`js
var userId = ‘some user provided value’;
var sql = ‘SELECT * FROM users WHERE id = ‘ + connection.escape(userId);
connection.query(sql, function (error, results, fields) {
if (error) throw error;
// …