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

Vue.js×FullCallendarでWEBカレンダー作成（花粉カレンダー作成①）

##はじめに
耳鼻咽喉科の開業医をしています。
花粉症の患者さんに使ってもらえるような花粉飛散情報が分かるカレンダーアプリを作りたいと思っています。
調べてみるとFullCallendarというオープンソースのJavaScriptライブラリがあり、カレンダーのUIと機能を簡単に実装できるようです。
今回カレンダーを表示して予定を入れるところまで挑戦してみました。

##完成図

##作成
こちらの記事を参考にさせていただきました。ありがとうございます。
[【忘却のJavaScript #3】Vue.jsでカレンダーを表示してみる](https://wing-degital.hatenablog.com/entry/2019/05/16/001013)

**１．vueプロジェクトの作成**

コマンドプロンプトから以下のコマンドを実行し、雛形

Node.js install for mac

何からNode.jsを入手したか忘れないためのメモ。

– [公式](https://nodejs.org/ja/download/)からLTS版mac用のinstallerをダンロードする
– installerを起動し、各設問をデフォルトのまま進めてinstallする
–
– nodeのバージョンを確認する

“`
$ node -v
v12.14.1
“`

– npm(パッケージマネージャ)のバージョンを確認する

“`
$ npm -v
6.13.4
“`

以上です。

参考:
https://jsprimer.net/use-case/setup-local-env/

Unity WebGL なゲームをNode.JS + jsdom + headless-glで動かしたかった

えっ このネタ続くの。。？

前回( [Unity WebGLで使われているシェーダを抜き出してARBアセンブリを眺める](https://qiita.com/okuoku/items/fe1840e88c93ec415e8b) )はWebGLビルドのUnityゲームをトレースして、使われているシェーダ命令があんまり多くないことを確認した。

ブラウザ上の動作では同期APIの実装に制約がありちょっと手を入れづらいため、Node.jsで動かしたかった。別案としてNW.jsを使うというのもあったが、今回の手法でもWebブラウザ側のDOMを使わないといけないところは一応クリアしている。

# 結果と手法

結局成功したんだか失敗したんだかよくわからないところまでは来たと思う。

## 結果

– Node.jsでもUnity WebGLは起動して描画コマンドも発行する
– でも描画がまっくらなので、まだ描画が正常かどうかは確認できていない

JSdomでWebAssemblyを使ったサイトがそのまま動くのは地味にすごい気はする。

## 手法

Node.jsにはWebAssemblyがあり

Express.jsコードリーディング

Express.jsのコードを読んでみたのでまとめることにしました。
普段の業務ではNode.jsもExpressも利用していないので、JavaScriptの基本的なコーディングやライブラリの内容なども合わせてまとめておこうと思います。
間違っている内容がありましたら編集リクエストをいただけますと幸いです。

## Expressコードリーディング
### 対象のコード
今回コードリーディングする対象のコードです。
ただHello Worldするだけのコードになります。

“`javascript:index.js
const express = require(‘express’)
const app = express()

app.get(‘/’, (req, res) => {
res.send(‘Hello World’);
})

app.listen(3000);
“`

nodeでindex.jsを起動します。
起動後curlでレスポンスを確認します。

“`console
$ node index.js
$ curl localhost:3000
He

Promiseとasync/awaitを使った同期処理

Node.jsを使ったプログラムを書いていて、同期的に処理してほしいところを全て非同期でやっちゃう可愛いnodeのおかげでいくつか勉強になったことをまとめる。

#同期処理を考える手順
###1.まずはコールバック関数を使う
まず最初に思いつくのはこれ。コールバックを使えば、処理1の値を使った処理2みたいなことができる。
が、簡単な処理に関してはこれで十分だが、処理が複雑になってくるといわゆる「コールバック地獄」と言われる見た目も処理も地獄のようなプログラムができてしまう。要はネストが深くなって何がなんだかよくわからなくなる。

“`sample.js
function 処理2{
callback(処理1)
}
“`

###2. Promiseを使う
そこで登場するのがPromise。こいつは結構優れもので、書き方を覚えてしまえばコールバック地獄を回避できる。
そもそもPromiseは何をしているかを簡単に説明すると、オブジェクト(引換券的なもの)を先に渡しておいて、resoleが返ってきた、つまり処理が終わればそのオブジェクトと結果を交換するよって感じ。
もっと砕いて言うと、

ejsの<%= >と<%- >の違い

htmlの要素として出力したいか、文字として出力したいかで使い分ける
→基本的には<%= %>で、子要素の出力を一緒に使いたいときには<%- %>を使用す

##そもそもEJSとは
ejsとはテンプレート機能を実現するNode.jsのパッケージです。

##1,<%= >
ejsに用意されている独自機能です。
このタグは、指定した変数の値を出力するものです。

“`
<%=変数 >
“`

##2,<%- >
ejsに用意されている独自機能です。
HTMLをエスケープ処理しないでそのまま出力する為のものです。

node.js製のlambdaアプリをコマンド一発でアップロードする方法

node.jsでlambdaのアプリを作っているのですが、コードやパッケージが増えてくるとインライン編集出来なくなったり、zipでアップロードする必要が出てきます。ちょっとした変更でもわざわざawsのサイトに行ってアップロードするのは面倒ですし、複数のlambdaアプリを作っていたら間違えて別の関数にアップロードしてしまった、といった事故も起きるかもしれません。そこで、コンソールからコマンドでアップロードできるようにする方法を書きます。

※動作確認環境: macOS 10.14.6

# aws CLIの設定

まずawsのCLIをインストールします。バージョンが出ればOKです。

“`
$ brew install python3
$ pip3 install aws
$ aws –version
“`

次にawsのユーザー情報を設定する必要がありますが、アクセスキーが必要になります。IAMでAdministratorAccessポリシーを持ったユーザーを作成しておきます。

[AWS]はじめてのIAMユーザ作成

アクセスキー、シーク

CentOS 8にNode.js 10をインストール（AppStream）

# はじめに

Application Stream(AppStream)を利用してCentOS8にNode.js 10をインストール
参考：[RHEL8のパッケージ構成 – BaseOSとApplication Stream – 赤帽エンジニアブログ]( https://rheb.hatenablog.com/entry/rhel8_baseos_and_appstream)

## サポート

本手法で導入した場合、[Red Hat Enterprise Linux 8 Application Streams Life Cycle – Red Hat Customer Portal](https://access.redhat.com/node/4079021)より、2021-04がEOLだと思われる。
それ以降に報告された脆弱性や不具合への対応は実施されない可能性がある。

## LOG

### インストール

“`shell-session
# cat /etc/redhat-release
CentOS Linux release 8.1.1911 (Core)

# y

CentOS 8にNode.js 12をインストール（AppStream）

# はじめに

Application Stream(AppStream)を利用してCentOS8にNode.js 12をインストール
参考：[RHEL8のパッケージ構成 – BaseOSとApplication Stream – 赤帽エンジニアブログ]( https://rheb.hatenablog.com/entry/rhel8_baseos_and_appstream)

## サポート

本手法で導入した場合、[Red Hat Enterprise Linux 8 Application Streams Life Cycle – Red Hat Customer Portal](https://access.redhat.com/node/4079021)より、2021-11がEOLだと思われる。
それ以降に報告された脆弱性や不具合への対応は実施されない可能性がある。

## LOG

### インストール

“`shell-session
# cat /etc/redhat-release
CentOS Linux release 8.1.1911 (Core)

# y

Express で簡単な WebAPI を作成

フォルダー構造

“`text
$ tree
.
├── app.js
└── routes
└── index.js
“`

“`js:app.js
//————————————————————————-
// app.js
//
// Jan/18/2020
//————————————————————————-
var express = require(‘express’)
var routes = require(‘./routes’)
var bodyParser = require(“body-parser”)
var cfenv = require(‘cfenv’)

var app = express()
app.use(bodyParser.urlencoded({ extended: true }))
app.use(bodyParser.json())

Nuxt を winser でサービス化する

Nuxt で作成したアプリケーションを WinSer でWindowsサービス化しようとしたらいろいろはまったので備忘録として対処を残しておく。

#背景
nodejs で作成したアプリケーションを Windows環境でサービス化するためのツールとして、 [WinSer](https://www.npmjs.com/package/winser) がある。
start コマンドとして「node index.js」のように node.exe を直接叩く場合は特に設定をする必要はないが、 NuxtJS のような専用の起動コマンドが存在するような場合に、npm や yarn からは起動できてもWindowsサービスとして起動できないということが発生する。

#対策
WinSer （で使用される nssm）は絶対パスか、パスが通ったコマンド出なければ実行できない（ように見える）。また「.cmd」拡張子のファイルは拡張子込みで記述する必要がある。
##1. WinSer をインストールする
npm に上がっている WinSer は[バグっている](https://github.com/jfrom

Node.js の基礎とそのフレームワーク Express

## Node.js とは何なのか

Node.js とは、簡単にいうと JavaScript をサーバーサイドで実行させてくれる存在です。フロントエンドも、バックエンドも1つの言語で実行でき、WEBサービス、スマートフォンアプリ、IoT関連の開発にも使用することができるみたいです。

## インストール

まず Node.jsをインストールしていない人は、[Node.js公式サイト]（https://nodejs.org/en/) から、LTS版をダウンロードしてインストール。

## 『node』 でJavaScriptを実行させる

コマンドラインでindex.jsが格納されているフォルダにpwdで移動し、そのフォルダ内のindex.jsを実行する。

“`
node index.js
“`

nodeだけでEnter押すと、JavaScriptコンソールで色々なコードを試せるようになるみたい。やめるときは .exit と入力するか、control + C を2回押すと終了します。

## Node.js のいろんなAPI

Node.jsには様々な機能があり、そ

初めての Azure Bot Service – Sample code と local test 編 –

# はじめに
今回は Azure Bot Service を使用して連続した対話に対応できる Bot を作成します．
Azure Bot Service を初めて使用する人を（できる限り）想定してます．
（熟練の方々からしたら退屈するかと思います．）

また，今回は Bot の sample を local test するところまでで
Azure への Deploy については次回行います．

（訂正や指摘などあれば，温かく教えていただけると助かります．）

# 私の開発環境
– PC : surface laptop2 (windows 10)
– Editor : VS Code

PC に関しては何でも大丈夫です．
Editor に関しては 本記事を参考にされる場合は VS Code をご使用ください．
（後程お話しますが， Azure への　deploy 時に VS Code の Extension を使用しています）

# Azure Bot Service の概要
Azure Bot Service とは，Microsoft 社のクラウドサービスである Azure のサー

nodenvを使ったNode.jsのインストール手順

#はじめに
これまではNode.jsのバージョン管理ツールとして、
nodebrewを使っていたのですが、
ディレクトリごとにNode.jsのバージョンを分けたくなったので、
nodenvのインストール手順を記録として残します。

[nodenv](https://github.com/nodenv/nodenv)はこちらから。
[今回参考にしたQiitaの記事](https://qiita.com/YuukiMiyoshi/items/080b6cde332d8d4e06f3)はこちらから(ありがとうございます)。

詳しくは調べてませんが、pyenvと同様の管理方法ができるらしいですね。

今回はHomebrewを使ってnodenvを入れていきます。

# 環境
– MacBook Air (Retina 13-inch 2018)
– OS
– macOS Mojave バージョン 10.14.6
– メモリ
– 16GB
– シェル
– bash

#手順
## 前提
`$`はターミナルでの入力を示しま

JSON Serverでオブジェクト以外を返す方法

# JSON Serverで文字列を返す方法

公式の[Getting started](https://github.com/typicode/json-server#getting-started)をもとに、
/profileにリクエストが来た場合、nameの値を文字列として返却する方法を紹介する。
文字列として返したい箇所には、**”type”: “string”**を記載している。

“`json:db.json
{
“posts”: [
{ “id”: 1, “title”: “json-server”, “author”: “typicode” }
],
“comments”: [
{ “id”: 1, “body”: “some comment”, “postId”: 1 }
],
“profile”: { “type”: “string”, “name”: “typicode” }
}
“`

以下のように、JSON Serverをモジュールとして使用することで、上記内容を返却する前に後処理を行え

VS CodeでDocker開発コンテナを便利に使おう

# はじめに

– ローカル環境で開発し、Linux環境にデプロイしてテストするのが面倒
– Dockerを使っていい感じに開発環境を作りたい
– しかし色々設定や構築が面倒

そんな方のためにDockerコンテナを用いた開発環境をVS Codeから便利に構築、運用できる拡張機能「Remote-Containers」の使い方のご紹介です。

# この拡張機能の素晴らしさ

VS Codeの拡張機能「Remote-Containers」はコンテナ内でVS Codeを立ち上げ、ホストマシンのVS Codeと通信させることであたかもローカル環境で開発しているような操作感でコンテナ内開発が行えるというものです。

詳しい構成は公式ドキュメントに図があります。

(https://code.visualstudio.com/assets/docs/remote/containers/)

また、複数の開発環境をV

JSON.Stringifyで循環オブジェクト参照構造体が処理できないのをcycle.jsで処理した

#概要
https://qiita.com/saitoeku3/items/9e9a608e53029d541a8f
と同じエラーにあったので、cycle.jsで処理したサンプルコードを紹介するよというお話

##cycle.js
https://github.com/douglascrockford/JSON-js/blob/master/cycle.js

##インストール
“`
npm install json-cyclic
“`

##サンプルコード
“`
//import
const decycle = require(‘json-decycle’).decycle;
const retrocycle = require(‘json-decycle’).retrocycle;
…

…
//文字列に変換
receiveNewAcString = JSON.stringify(receiveNewJson, decycle());

//JSONオブジェクトに変換
receiveNewAc = JSON.parse(receiveNewAcString, retr

toioとTwitterAPIを合わせて使ってみた！

# toio.jsとTwitter APIを合わせて使ってみた
久しぶりの記事投稿。今回は[toio](https://toio.io/#four-attracts)をJavascriptで制御するのとTwitterAPIを合わせて使っていく。

## toioとは
toioとはソニーインタラクティブエンタテインメントより発売されているロボットトイである。詳しくは公式サイトを見てほしいが、子供から大人まで楽しめるモノになっている。公式から[toio.js](https://github.com/toio/toio.js)というNode.js(サーバサイドで動くJavaScript環境)のライブラリが公開されているので今回をそちらを利用していく。

## 今回やること
toioの最大の特徴は主役であるデバイスのキューブ(下図)の光学センサーを用いて、付属のマットやシールに施されている特殊印刷を読み取り、キューブの絶対座標やIDを取得できる点だ。
Node.js で Redis のキーの一覧を取得

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

“`bash
sudo npm install -g redis
“`

“`js:redis_list.js
#! /usr/bin/node
// —————————————————————
// redis_list.js
//
// Jan/17/2020
//
// —————————————————————
console.error (“*** 開始 ***”)
//
const redis = require(“redis”)
const client = redis.createClient(6379,’localhost’)

client.on (“error”, function (err)
{
console.log (“Redis connection error to ”
+ client.host + “:” + clien

Windows 10へNode.jsをインストールする

# 概要
– Node.jsをNode.jsのサイトからダウンロードしてインストールします。
– Node.jsの利用方法を説明します。

# Node.jsのインストール

1. インストーラをNode.jsのダウンロードサイトを開きます。
1. [Node.js – ダウンロード](https://nodejs.org/ja/download/)

1. 「LTS版」の《Windows Installer》をクリックしてダウンロードします。

1. ダウンロードしたインストールファイルをクリックしてインストーラーを開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520689/898d4005-c802-4cfc-dda2-6