f@ctor

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

Node.js関連のことを調べてみた2020年10月22日
目次

Nuxtjsでgenerate時に、公開しているページのtitleとurlのリストを作成する

**※力技での解決法です。絶対もっと良い方法があるはず。**

発端としては、
>フロントのNuxt側でデータを受け取るだけでなく、
>外部に渡せるページ情報を書き出せないか？

と思ったこと。

ググったけど、あまり情報が見当たらず、
「そもそもこの発想自体がズレてるのでは？」と思えてきたが、
とりあえず作ってみた。

内容としてはシンプルに、
“nuxt generate“で生成された
distの中のhtmlファイル群をスクレイピングすること。

まずはささっとモジュール作成。

“`generate-pages-info.js
const {resolve} = require(‘path’)
const {readFileSync, writeFileSync} = require(‘fs’)
const requireContext = require(‘require-context’);

module.exports = async function () {
const {rootDir, generate: {dir: generateDir}} = th

元記事を表示

Visual Studio CodeでChromeを起動してNode.jsをデバッグする設定

すぐ忘れるのでメモ

1. 拡張機能より「Debugger for Chrome」をインストール
https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome

2. .vscode/launch.jsonに以下を記述

“`json
{
“version”: “0.2.0”,
“configurations”: [
{
“name”: “Launch Chrome”,
“request”: “launch”,
“type”: “pwa-chrome”,
“url”: “http://localhost:3000”,
“webRoot”: “${workspaceFolder}”
},
{
“name”: “Run npm start”,
“command”

元記事を表示

Node.jsについて超ミニマムに解説してみる

#超ミニマムシリーズとは
様々な事柄に関して超短く解説するシリーズです。
これを読んであなたの興味が沸き、その飽くことのない知識欲を満たすことを願っています。

#Node.jsとは
「**サーバー側で実行されるJavaScript**」
プログラミング言語と言語処理系については➡[プログラミング言語と言語処理系について超ミニマムに解説してみる](https://qiita.com/jack1-2-3/items/541bc0c2c3106ac73d83)

#chromeの言語処理系とNode.jsの言語処理系は同じ！？
chromeの言語処理系であるJSエンジンは**V8**です。
ただ実は、Node.jsの言語処理系も**V8**なんです！あれ？じゃぁブラウザと同じじゃん！と思いますよね？
ただ、前述したように「**Node.jsはサーバー側で実行される**」というとこがポイントです！
ブラウザはユーザーが立ち上げないとコードが実行されませんが、Node.jsはサーバーに常に存在しているのでコードをいつでも実行できます。

#おまけ(ブラウザのJSエンジン(言語処理系)との違い)

元記事を表示

非同期のパターン(プロミスって？？)

# はじめに
非同期パターンのプロミスについて、自分なりにまとめてみることにしました。

## プロミスとは
プロミスを簡単に説明するなら、「**非同期処理の結果の値(失敗も含む)を表現するオブジェクト**」です。

## プロミスの動作
1. 非同期処理をする、ある関数(Function A)があった時、このFunction Aを呼び出すとPromiseを返します。
2. このPromiseは、非同期処理が完了(**fulfilled**) or 非同期処理が失敗(**rejected**)のどっちかが起きることは保証されています。
3. このPromiseがfulfilled/rejectedが起きていない場合は、非同期処理が完了していない(**pending**)の状態となります。

## プロミスの状態まとめ
つまり、プロミスは３つの状態があります。

1. 非同期処理が完了(**fulfilled**)
2. 非同期処理が失敗(**rejected**)
3. 非同期処理が完了していない(**pending**)

## プロミス使用パターン
**Promise.then([

元記事を表示

【React + TypeScript】プロジェクト開始時tsconfig.jsonに追記しておくべき設定2点

#はじめに
TypeScriptでReactアプリを作成する際、TypeScript設定ファイルの「tsconfig.json」に追記しておくと良い設定について記録しておきます。

アプリはnodeインストール済みの環境で以下コマンドを発行して作成したものとします。

“`cmd
npx create-react-app hello-world –template typescript
“`

#追記後のtsconfig.json
「**”baseUrl”: “src”**」と「**”downlevelIteration”: true**」を追記しています。

“`hello-world/tsconfig.json
{
“compilerOptions”: {
“target”: “es5”,
“lib”: [
“dom”,
“dom.iterable”,
“esnext”
],
“allowJs”: true,
“skipLibCheck”: true,
“esModuleInterop

元記事を表示

nginx + expressをfargate 4coreで動かす

– nginx + expressをfargateに詰め込む
– unix socket を使って繋ぐ
– expressは4プロセス立ち上げる
– node clusterは使わないパターン、socketが競合してしまったので。
– 共通ボリュームにapi1.sock – api4.sockを設定して、nginxからupstreamする

# api

## 共通ボリュームをVolumeにしておく
“` Dockerfile
VOLUME /usr/src/tmp
“`

## sockのパスを環境変数で指定させる
“`main.js

const sock = process.env.SOCK_PATH;
app.listen(sock, () => {
fs.chmodSync(sock, ‘666’);
console.log(`Server running on ${sock} with pid ` + process.pid);
});

“`

## nginx

api1.sock – api4.sockへupstreamする

“`nginx.c

元記事を表示

Terminal: npm install -g nodemon で Missing access となる問題について

> sudo chown -R $(whoami) /usr/local/bin /usr/local/lib /usr/local/include /usr/local/share

と入力することで解決した。

## reference

https://stackoverflow.com/questions/54802330/missing-write-access-in-mac-to-usr-local-lib-node-modules

元記事を表示

React開発時の汎用的なGitpod環境設定

– 開発時に、オンラインエディタである[Gitpod](https://www.gitpod.io/)を利用する機会があります。
– 同様の技術利用が多いため、環境テンプレートを作成する必要があります。
– 今回はReactを利用した開発においてのGitpod設定を記述します。
– **※Gitpodの概要や利用方法に関しては、[こちら](https://kobeucsenshu.github.io/ideinfo/gitpod/howto.html)**

## 前提
– Reactプロジェクトの準備
– **試用の場合、[create-react-app](https://ja.reactjs.org/docs/create-a-new-react-app.html)等で準備**
– **※npmプロジェクトであれば基本可**

## 結果
– 先にGitpod設定ファイルである、`.gifpod.yml`の記述を示します。

“`yaml
tasks:
– init: npm ci
command: npm start

ports:
– por

元記事を表示

[作り方] discord.js グローバルVC(グローバルボイスチャット)

**グローバルVCを作ってみた。**

[**NeoXBot**](https://discord.gg/zXH4x5F)というdiscordのbotを作ったときに、
[**グローバルボイスチャット**](https://neox-guild.glitch.me/true/)のリクエストがあったので、
先月ごろ作りました。

**準備**
・`”discord.js”` をnpmからインストール

“`
npm install discord.js
“`
・音声用に `”discordjs/opus”` を同じくnpmからインストール

“`
npm install @discordjs/opus
“`

“`js
/**
DiscordID:696600519283572766
©X / KOU00000
orichalcum.gom@gmail.com
*/
//グローバルボイスチャットの名前
const gvcName = “グローバルボイスチャット”;
const token = “あなたのbotのtoken”

const discord = require(“di

元記事を表示

吉報報告アプリをつくってみた！っていう話

コロナ渦の中、皆様いかがお過ごしですか？
少しでも元気になるシステム開発できないかな〜と思いまして、
吉報を全社で喜ぶためのアプリを開発しました。

プログラムの詳細は、書かないですが、どんな構成で作ったかを紹介します！
開発リミットが2日しかなかったので、作り込んではいないです。?
（そのうちの1日はどんな音楽がテンション上がるかで費やしました。）

## 吉報を報告するアプリってどんなの？
チャットワークに、メッセージを送るとMacをつないでいるモニターにテンションが上がる音楽とともに吉報が報告されます。

![fanfare.mov.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116236/e1a27776-299e-143f-8fd9-0f13bca42592.gif)
※本来であれば、テンションが上がる音楽が流れます。

## アーキテクチャ
この構成はなんとサーバー代もかからず、**「完全無料」**です！
![image.png](https://qiita-image-store.s3.

元記事を表示

node.js+ExpressでGETデータとPOSTデータを取得しよう

## はじめに
node.jsを触り始めて数週間経ちフォームからデータを受け取る方法がなんとなくわかってきたので
自分用の備忘録兼初心者向けの記事として書き留めておきます。

Qiitaの記事を書くのが久しぶりなので誤字や表記ミス等あるかもしれませんご了承ください（コメントで指摘してくださると助かります）

## 環境
– OS
– windows10
– node.js
– v12.18.4
– Express
– v4.17.1

### 前提条件
以下コードはすべて下記のコードが既に書かれている前提で説明していきます。

“`javascript:app.js
const express = require(“express”)
const app = express()
app.use(express.urlencoded({extended: true}));
app.set(‘view engine’, ‘ejs’);
// View engineにEJSを指定していますがなんでもいいです。
//自分が好きな奴使ってください

app.get(

元記事を表示

【npm】nodistによるNode.jsとnpmのバージョン管理

## 要約

AngularやExpressといったNode.jsをテーマとするweb教材では、Node.jsを[Node.jsの公式サイト](https://nodejs.org/ja/)からインストールすることが多いです。しかし、この方法ではNode.jsの管理ができず、以後の学習に困ってしまいます。そこで、まずはNode.jsのバージョン管理ツールであるnodistをインストール、次にNode.jsをインストール、最後に必要なnpmパッケージをインストールするという方法のほうが長期的にはベターだと思います。この記事ではこの方法について解説します。

～nodist, Node.js, npm angular/cliの関係イメージ～

※Angular CLIに関しては、ご自身の必要なnpmパッケージに置き換えて考えていただければと思います。

![image-20201019212955021.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/684644/5821d131-b159-bf4b-2d

元記事を表示

EC2でnode.jsサーバーを立てる時に最低限インストールするもの。

# 概要
EC2立てた後に、node.jsを入れる手順

# インストールするもの
・nvm(必須) これはgitが必要なのであとでやる。
・git(必須)

１、yumでgitをインストールする

“`sh

$ sudo yum install git
“`

2、nvmをインストールする。

“`sh
// git cloneする
$ git clone https://github.com/creationix/nvm.git ~/.nvm

// nvmへのパスを通す。
$ source ~/.nvm/nvm.sh

// ログアウト時にパスの設定が消えてしまうので.bash_profileに記述しておく
$ vi .bash_profile
→ファイルが開くので、下記を追加
# nvm
if [[ -s ~/.nvm/nvm.sh ]] ; then
source ~/.nvm/nvm.sh ;
fi
“`

3,node.jsをインストールする

“`
// インストール可能なバージョンを確認する。
nvm ls-remote

//インストール

元記事を表示

Node.js: require()は同期型ロード、importは非同期型ロード

この投稿では、Node.jsにおいてCommonJSとES Modulesのモジュールロードの仕組みの違いを、同期的か非同期的かの観点で説明します。

本稿では、CommonJSはCJS、ES ModulesはESMと略称で記載します。

:bow: 執筆にあたり、できるだけ努力して調査したつもりですが、もし用語の使い間違いや誤った説明などがございましたら、ご指摘や訂正の提案などを頂けると幸いです。

## 同期的なCJS、非同期的なESM

CJSはもともとサーバサイドJavaScriptにおけるモジュールの問題を解決するためにねられた仕様でした。サーバサイドではJSファイルがローカルディスク上にあることが普通です。そのため、JSファイルを探し、ファイルの内容を読み込む処理は**CJSでは同期的なロード方式**になっています。

一方の、ESMはサーバサイドだけでなく、ブラウザで使われることも考えて、同期的なロード方法に限定しないことになっています。もしも、同期的なロードに限定してしまうと、ブラウザでのユーザ体験が悪くなるからです。

ESMのロード方式を同期的な実装にするか、非同期

元記事を表示

振り向かずに「俺に何か用かい？さっきから尾けてきてるね」とシティーハンターっぽく言えるようになるプロダクト

#目的
　昨今ソーシャルディスタンスと言われ、人と人との距離があくようになりましたね。
　そんな中で後ろから近づいてくる人がいたら、怖いですよね。
　__早く気づいて__、先手を打ってシティーハンターっぽく話しかける準備をするためのツールを作りました。
　（セリフはお好みです。）
　そう、まずは気づくことが大事なのです！

　シティーハンターって何？と思った方は[こちら](https://ja.wikipedia.org/wiki/%E3%82%B7%E3%83%86%E3%82%A3%E3%83%BC%E3%83%8F%E3%83%B3%E3%82%BF%E3%83%BC “シティーハンター”)

#出来上がったもの（CHになれたか）
　こうしてみると？

元記事を表示

温度センサーとLEDで室温をぱっと見で分かるものを作ってみた

# 目的
温度センサーとLEDを使ってみたかったので、2つを同時に使って色で室温がぱっとわかるものを作ってみました。

# 実現方法
### 使用したもの
・obniz Board 1Y
・高精度IC温度センサー LM60BIZ
・マイコン内蔵RGB 8mmLED PL9823-F8

### ロジック
個人的には25℃をより下だと涼しい、25℃より上だと暖かいだと感じているので
　温度センサーで取得した温度が25℃より大きい場合、**オレンジ**
　それ以外の場合、**水色**
にしました。
obnizへは
　温度センサー　0、1、2　へ接続
　LED　9、10、11　へ接続
しています。

# 実際に動かしてみた
実際に動かした動画をTwitterにあげてます！
※温度センサーに指を近づけて、温度をわざとあげました。

スマホで写真撮る人は必読？スマホのフラッシュライト進化させます。

#目的
スマホのフラッシュライト活用してる人いますか？
落とし物探すときに隙間照らすぐらいしかないですよね。

でも、写真を撮るときに光って大切なんです。（知らんけど）
なので、被写体との距離でライトの明るさを自動で調整できるようにしました。

#この記事でできること
・node.jsでobnizを操作
・超音波測距センサ（HC-SR04 ）で物体との距離を測る
・LEDライト（WS2811）を光らせ、明るさを調節する
・スマホがガジェット感出てかっこよくなる（気がする）

#完成したらこんな感じ

スマホはこんな感じ
![スマホ写真.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/737363/50e11ed9-53c6-901d-e00a-d32d518310ec.jpeg)

動かしたらこんな感じ

Node.jsのインストール

# 概要
* MacにNode.jsをインストールする。
* ターミナルでHomebrewを使ってインストールする。

# 前提
* Homebrewをインストール済
* ログインシェルがzsh

# 手順
1. nodebrewをインストールする
2. Node.jsをインストールする
3. パスを通す

## 1. nodebrewをインストールする
下記を実行する

“`shell:terminal
brew install nodebrew
“`

※補足：nodebrewのバージョン確認

“`shell:terminal
nodebrew -v
“`

## 2. Node.jsをインストールする
### 2.1 nodebrewでNode.js（安定版）をインストールする
下記を実行する

“`shell:terminal
nodebrew install-binary stable
“`

※補足：下記のような結果が出て、インストールができなかった場合

“`shell:terminal（結果）
Fetching: https://nodejs.org/d

元記事を表示

M5StickCの書き換えが面倒だったので、Node.jsでArduinoっぽくしてみた

M5StickCのように、ESP32にGroveが付いているのが多いで、いろんな周辺デバイスをいじりたいのですが、そのたびに、リコンパイル＆書き込みをするのはすごく面倒で時間がかかるので、MQTTを使ってリモートから操作できるようにして、クライアント側はNode.jsでたたけるようにしました。

M5StickC側では、I2C、Serial、Lcd、Gpioを操作できるようにしましたので、一度バイナリを書き込んでしまえばあとは、クライアント側のNode.jsで周辺デバイスのドライバを書くことができます。
ですが、動作はそこまで速くない（特にLcd描画系）ので、お遊び程度に思ってください。

で、Node.jsになって開発しやすくなったので、手元にあったI2Cデバイスを一気に実装しました。

・M5Stack ENVユニット
　https://www.switch-science.com/catalog/5690/
・M5Stack TVOC/eCO2ユニット
　https://www.switch-science.com/catalog/6619/
・Grove OLED Disp

元記事を表示

OTHERカテゴリの最新記事