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

[javascript]初心者が関数・コールバック関数についてをまとめてみた

javascriptで関数の理解が難しいと感じたので、アウトプットします。
僕と同じようなプログラミング初心者の方にお役立ちできれば幸いです。
# 関数とは
関数とは、**「ある値を与えると、別の値を返す機能」**
ある値を「引数（ひきすう）」と呼び、別の値を「戻り値」と呼びます。

言い換えると、**関数は「引数を与えると、戻り値を返す機能」**をさします。
下記の図が参考になります。

> （参考：wikipedia）

実際にコードを書いてきます。
###関数
“`function.js
//関数
const 定数名 = function(){
//まとめたい処理や機能
};
“`
普通の関数式の形

###アロー関数
“`function.js
//アロー関数
const 定数名 = () => {
//まとめたい処理や機能

依存性を減らす～JavaScript界の事情

とあるプロジェクトで`yarn upgrade`を行ったところ、こんなメッセージが出てきました。

“`
warning （略） > chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
“`

## そもそも、Chokidarって何？

Node.jsには、ファイル更新を管理する手法がいくつかありますが、OSなど環境によって挙動が異なってしまいます。

[Chokidar](https://github.com/paulmillr/chokidar)は、それらの手法を一貫して管理できるようなラッパーです。

直接使っている人は多くないかも知れませんが、`sass`コンパイラや`webpack-dev-server`など、ビルドツール系のライブラリでは「ファイル監視」機能があると便利なので、よく使われています。

## 依存性の削減

「Chokidar 3にすると依存パッケージが15分の1になる」という話について、作者が[詳細を書

Next.jsでsessionとPassport.js(認証)を使う

# Next.jsでsessionとPassport.jsを使う

Next.jsでsessionとかPassport.js(認証)を使う方法を書いてみる

`next.js session` とか `next.js 認証` とかでググるとNextにexpressを入れる感じでのサンプルは結構あったけど、デフォルトで用意されているAPI Routeを利用したやつの実装のサンプルがあまり見つけれなかったので書いてみる

Next.js では [connect](https://nextjs.org/docs/api-routes/api-middlewares#connectexpress-middleware-support) というmiddlewareレイヤーに対応していて、これに対応しているライブラリなどであれば利用することが出来ます

サンプルは下記の配置で書いていきます

– middleweres
– index.ts
– connect.ts
– passport.ts
– session.ts
– page
– api

爆速！Vercelとfreenomで独自ドメインのサイトを無料で作成する

無料でWebアプリケーションのホスティングが出来るnow.shが名称変更してVercelになってましたね。

使い勝手などがどうなのか触って試してみました。

結果、ただ触るだけだと簡単すぎて記事にならないので、ついでにfreenomも使って無料で独自ドメイン（カスタムドメイン）も反映させてみます。

※タイトルの爆速！は処理速度ではなく手順の話

## 作るもの

こんな感じの独自ドメインのWebサイトを作成（デプロイ）します。

https://suikousaibai.gq

> 

ちゃんとSSLも対応してます。

## Vercel

読み方はバーセル？ですかね。

https://vercel.com

無料でWebアプリケーションのデプロイが出来ます。

**コマンド一発で出来ます**


### Vercelで爆速デプロイ

Expressでcssとjavascriptを読み込む方法

#1. ディレクトリ構成
Expressでプロジェクトを作成するとディレクトリは以下のような構成になります。

詳細は今後に書くとして、cssとjavascriptをテンプレートエンジンへ適用させたい時は以下の手順を行ってください。

#2. css作成
publicフォルダ直下のstylesheetsフォルダにcssファイルを作成してください。

#3. javascript作成
publicフォルダ直下のjavascriptsフォルダにjsファイルを作成してください。
javascriptの場合はAPIの作成だったりルーティングの兼ね合いがありますので、
その点を考慮した実装としておいてください。

#4.適用
viewsフォルダに作成した(

GitHubでindex.jsだけのライブラリーを使った学習法

## はじめに

ある程度プログラミングできるようになったけど、レベルを上げるためにどうやって勉強したらいいのかわからない人向けの勉強法です。

何か困った時、プログラマーならまずライブラリーを探すかと思います。

探したライブラリーのGitHubにコードを見に行った時に⭐️がゼロだったらスルーしてしまうかもしれないですが `それは非常にもったいないです。`

具体的にどういう風にもったいないか説明します。

## ある日のこと

`.svg`なファイルを`require`したらどうなるのかなって思ってreuqireしたらエラーになりました。

“`javascript

$ node
Welcome to Node.js v12.7.0.
Type “.help” for more information.
> var sprites = require(‘./src/assets/svg-sprites.svg’)
Thrown:
/Users/yukihirop/JavaScriptProjects/sample/src/assets/svg-sprites.svg:1

初めての Azure Bot Service -multi-turn-prompt と Azure への Deploy –

# はじめに
この記事は[こちらの記事](https://qiita.com/MinoMinoMinoru/items/d02bcea1a7b681c40240)の続きとなってます。
（諸事情によりかなり時間が空きました）

## 流れ
– index.js の中身を見てみる
– 会話の分岐の実装（multi-turn-prompt の編集）
– sample のまま Deploy する場合は skip!
– Azure でのリソース作成
– Azure への Deploy
– Teams との連携

# index.js の中身を見てみる
まずは`index.js`を見てみます。今回関係する箇所だけを抜粋してます。

“`index.js
// Copyright (c) Microsoft Corporation. All rights reserved.
// Licensed under the MIT License.

const restify = require(‘restify’);
const path = require(‘path’);

— 中略

【AWS】Lambda+Amazon SNSでSMSを送信する

#やりたいこと
AWS LambdakからAmazon SNSを利用して、任意の電話番号あてにSMSを送信します。

#Amazon SNSって？
Amazon Simple Notification Service
任意の通知をいろんなプロトコルで送信できるよ。
事前にトピックっていう通知カテゴリみたいなの作って、そいつに紐づくサブスクリプションを作成しておくと、
トピックが叩かれたときに紐づいているサブスクリプションにメッセージが送信されるよ。
で認識合ってる？

| プロトコル/トランスポート |
|:-:|
| HTTP/HTTPS |
| Email |
| Email-JSON |
| Amazon SQS |
| AWS Lambda |
| Platform application endpoint |
| SMS |

[公式の概要](https://aws.amazon.com/jp/sns/?whats-new-cards.sort-by=item.additionalFields.postDateTime&whats-new-cards.sort

Box UI ElementsのContent OpenWithでG Suiteを開いてみた

## 概要

この記事は、[Box UI ElementsのContent OpenWithでBox Editをつかってみた](https://qiita.com/kobay/items/8f01353308141813881f) の続編です。

前の記事ではBoxEditを使うだけでしたが、GSuiteもつかってみました。

ここを参考にしています。
https://developer.box.com/guides/embed/ui-elements/open-with/

## 変えた部分

前回のコードをベースに、以下のsetup_update.jsをつくりました。
利用可能な統合をすべて登録しました。
G Suiteを利用するのに必要な`external_app_user_id`をApp Userにつけて更新しています。
以下のコードを実行すると、前回作成したAppUserでG Suiteのオンライン編集が利用できるようになります。

“`javascript:setup_update.js
const boxSDK = require(“box-node-sdk”);
c

Box UI ElementsのContent OpenWithでファイルの更新に反応してみた

この記事は、[Box UI ElementsのContent OpenWithでBox Editをつかってみた](https://qiita.com/kobay/items/8f01353308141813881f) の続編です。
ファイルの更新を検知して、画面をリフレッシュします。

## 前回の内容と課題

前回、[Box UI ElementsのContent OpenWithでBox Editをつかってみた](https://qiita.com/kobay/items/8f01353308141813881f) という記事の中で、Box UI ElementsのOpenWithを使って、カスタム画面から変更するというのを試したのですが、課題として変更した内容が標準のBOXのように検知できていませんでした。

@daichiiiiiii さんから、コメントをいただいて、BoxのLong Polling APIを利用すれば良いとおしえていただきました。ありがとうございます！

> 更新ボタン表示させるには、BoxのLong Polling APIを使用して更新情報を監視する必要が

Denoのマニュアルで気になった所を試してみる

## Deno

[公式ページ](https://deno.land/)

最近よく目にするので、何はともあれ触ってみようかという事で
[マニュアル](https://deno.land/manual/introduction)を元にザッと気になる所を試して見たいと思います。

### :computer:環境構築
Denoの公式Docker(?)を見つけたのでそちらで環境を構築して見たいと思います。
https://hub.docker.com/r/hayd/deno

ワンランナーでさくっと試してみます。

“`sh
$ docker run –rm -it hayd/alpine-deno run https://deno.land/std/examples/welcome.ts
Welcome to Deno ?
“`
:+1:

### :pencil: 色々試してみる

#### 簡単なサンプル
公式にも載っていた以下サンプルをローカルに `server.ts` として作成し、起動させてみます。

“`ts
import { serve } from “https

Firebase Local Emulator SuiteのFirestoreに外部のスクリプトからアクセスしてモックデータを突っ込む

※[こちら](https://qiita.com/Kesin11/items/43bbc06524aa31c1fd2c#firestore_emulator_host%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6)に非常に良い記事があります。まだ読んでおられない方は是非！

環境変数の`FIRESTORE_EMULATOR_HOST`に適切な値を設定することで外部のスクリプトからエミュレーターにアクセスできます。（他言語のSDKでも同様だそうです）

“`javascript
import { Firestore } from ‘@google-cloud/firestore’;

Object.assign(process.env, {
GCLOUD_PROJECT: ‘[プロジェクトID]’,
FIRESTORE_EMULATOR_HOST: ‘0.0.0.0:[Firestoreのポート番号]’
});

const firestore = new Firestore();

(async () => {
// admin権限が必要な操作

SQL（データの追加、更新、削除）とNode.js基本

###○データの追加
“`js:qiita.js
insert into テーブル名　カラム名
values (カラム名)
“`
↑テーブルにレコードを挿入したいときはinsertを使う。

###○データの更新
“`js:qiita.js
update テーブル名
set カラム名=’新しい値’, カラム名=’新しい値’
where 条件
“`
↑テーブルのレコードを更新したいときはupdateを使う。
※whereで更新するレコードを指定しないとカラム内の全データが更新される。
※update実行後はデータを戻すことができない

###○データの削除
“`js:qiita.js
delete from テーブル名
where 条件
“`
↑テーブルからレコードを削除したいときはupdateを使う。
※whereで削除するレコードを指定しないとテーブル内の全レコードが削除されてしまう。

###○Node.jsとは？
・Node.jsは本来クライアント側の言語であるJavaScriptをサーバーサイドで動かすための仕組み。

###expressとは？
・Express

Vuetfiy v-dialogのモーダル化が機能しない

# Vuetify v-dialogのモーダル化が機能しない

新規で作成もしくはソースコードの内容を大体把握してある個人の方・一人でプロジェクトを回している方には参考にならないかと思います。

Vuetifyの`v-dialog`にはオプションで色々指定できる
モーダル化させるために`persistent`を指定することでダイアログ外を押しても閉じないようにできる

それが機能しなかったので備忘録的にまとめる

Vuetify
https://vuetifyjs.com/ja/components/dialogs/

## 結論

`outside`というオプションが悪さしていました。
このオプションはダイアログ外を押した時に発火するイベントです。
そいつが諸悪の権化なので削除するなりよしなに修正することで回避しましょう。

こんなことで時間取られるの辛い…辛い…

ちなみに調べるとVuetify2.1以下だとバグで機能しないらしいですが、`orverlay`と合わせるとバグるみたいなので多分今回の場合は関係ないです。
https://github.com/vuetifyjs/vue

Kubernetes基礎(3)：Overview

#Kubernetes Overview

Kubernetes Cluster
サーバー1台はMasterとして使って、他の複数のサーバはNodeとしてMasterに接続します。
このような組み合わせで接続されているのをKubernetes Clusterと言います。
※Nodeは3つ以上を推薦しています。

Master
Clusterを管理します。

Node
リソースを提供します。
Cluster全体のリソースを増やしたい場合はNodeを追加します。
Nodeにはkubeletが存在し、Kubernetes Masterと通信（using kubernetes API）、Nodeを管理します。
（kubeletをagen

webpack 4系でwebpack.config.jsの自動生成ができないときの解決方法

[株式会社ONE WEDGE](https://www.onewedge.co.jp)でエンジニアをしている @YoukeyMurakami です。

プロジェクト開始時、今までwebpack.config.jsは手でシコシコ書いていたんですけど、「自動生成出来るよ」って聞いたので試してみたときの備忘録になります。

## 環境

結果的にOKだった環境は次の通り

|name|version|
|:–|–:|
|node.js|13.8.0|
|webpack|4.43.0|
|webpack-cli|3.31.0|
|@webpack-cli/init|0.2.2|

## 失敗したケース
“`shell:
# 各種ツール類のインストール
$ yarn add -D webpack webpack-cli @webpack-cli/init

# webpack.config.jsの自動生成
$ webpack init
/Users/YoukyMurakami/project_hoge/node_modules/@webpack-cli/utils/npm-packag

爆速構築！json-serverでMock API

# はじめに

フロントエンド開発のためにAPIのモックが必要になったので、**json-server**を利用してモックサーバを構築していきます。

# 基本的な環境構築

## 初期化

“`powershell:powershell
# プロジェクトディレクトリを作成し, 移動する
mkdir mock-api
cd ./mock-api

# 初期化処理
npm init -y
“`

## json-server

今回のメインとなる **json-server** を導入します。

“`powershell:powershell
npm i -D json-server
“`

## contents.json

エンドポイントとなる json ファイルを作成します。

“`powershell:powershell
mkdir api
new-item api/contents.json
“`

作成した **contents.json** を編集します。
ここで編集した内容がAPIのレスポンスとして返されるようになります。

“`json:conten

Bitriseのステータスをモニターに表示して物理的に監視するツールの紹介

# 背景
– Bitriseのワークフローが成功/失敗したらSlackに通知する仕組みはよくある
– 物理的にモニターにステータスを表示するツールの紹介はあまり見ない
– 複数のCIサービスのステータスを1画面でみたい

# ツール
https://github.com/marcells/node-build-monitor
こんな感じで表示される
https://builds.mspi.es/ にデモがあるので見てみてください。
表示形式の変更や、失敗したら音を鳴らすなどの設定も可能です。

# やってみる
GitHubのREADMEで詳細は記載されているので、ここではBitriseを使用したハッピーパスだけ紹介します。

– リポジトリを任意のディレクトリへClone
– https://github.com/mar

耳年齢判定ボットを改良（LINEで音声ファイルを再生）

##概要

普段は耳鼻科の開業医をしています。
以前obnizeのスピーカーからモスキート音を出し加齢性難聴をチェックするLINE Botを作成しました。
[耳年齢を判定するLINE Bot×Iotの作成](https://qiita.com/doikatsuyuki/items/1101ff4ba54cb4b471c0)

今回、モスキート音をファイルに入れ、LINEで音声ファイルを再生できるようにしました。

##作成方法
**1.モスキート音を用意する**

こちらを利用しました
[Sine Tone Generator](https://www.audiocheck.net/audiofrequencysignalgenerator_sinetone.php)

『File Generator』の
『Hz』をモスキート音の周波数に設定、『duration』は3秒とし『DOWNROAD.WAV FILE』をクリックするとダウンロードできます。
各周波数分用意します。

![image.png](https://qiita-image-store.s3.ap-northeast-1

Windows上でSQL Serverを使用してNode.jsアプリを作成する

# はじめに

この記事では、Microsoft 社が公開している [Build an app using SQL Server][Build-an-app-using-SQLServer] の内容に従い、SQL Server を使用した Node.js アプリを作成します。

[第30回 SQL Server 2019 勉強会@JSSUG][JSSUG] (2020/5/16) のセッション資料です。

## 環境

– **OS**: Windows 10 Pro 10.0.19041 N/A ビルド 19041
– **SQL Server**: SQL Server 2019
– **Node.js**: v12.16.1

# 環境のセットアップ

## SQL Server のインストール

ウェブ上では、**ホスト OS に SQL Server 2017 Developer 以上をインストール** とあります。
[こちら][SQLServerDownload] のサイトより、SQL Server 2019 Developer インストーラーをダウンロードし、インストー