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

webpackをかんたんに使う（Zero Configulation）

[5年前の記事](https://qiita.com/hashrock/items/15f4a4961183cfbb2658)のメンテを行っていたんですが、流石にBrowserifyは実務で使う可能性は低いよなあとは思います。
Browserifyの単純さも初心者にはとっつきやすいのですが、今の主流はwebpackです。
webpack入門記事はたくさんあるはずですが、設定ファイルの各パラメータの羅列だったり、BabelやReact, TypeScriptの設定まで一気に済ませてしまうような記事は初心者には難しいかもしれないですね。

というわけで、Node.jsは３日前にはじめました、みたいな人向けに書いてみようと思います。

# 初心者なのでwebpackだけを使ってみたいんだけど

今どきだと初心者はReactならcreate-react-app、VueならVue CLIを使って入門するんじゃないかと思います。これらはwebpackの設定を代わりに済ませてくれる便利なツールで、難しいことを知らなくて済みます。

ただ、何も理解しないままにWebアプリが作れてしまうので、一つ一つ理

Vue 3.0とgRPCを使ってTodoListを作ってみた

# gRPCとは？

gRPCはオープンソース、RPCフレームワークをベースとして、最初はGoogleが開発されました。
インターフェース記述言語としてProtocol Buffersを使用し、protobufは構造化データをシリアル化するためのメカニズムです。
protoファイルでサービスとそのデータ構造を定義するだけで、gRPCがさまざまな言語でプラットフォームのクライアントとサーバーのStubsを自動的に生成します。
profobufを使用すると、JSONではなくバイナリを使用して資料を転送しています。
これにより、gRPCがはるかに高速で信頼性の高いものになります。
gRPCの他の主要な機能のいくつかは、双方向ストリーミングとフロー制御、BlockingまたはNonBlockingバインディング、および認証機能です。
gRPCはHTTP/2を使用して、シングルTCPコネクションの中で複数のストリームを開始することができます。
gRPCの詳細については、こちらをご覧ください：https://grpc.io/

# gRPC V.S. REST

| Feature

Visual Studioのコードと同じDockerを使ってNode.jsアプリを開発する

このガイドでは、Ubuntu Linuxデスクトップ上でVisual Studio Codeを使って**Node.js**アプリを開発し、**Alibaba Cloud**上で**Docker**を使って同じアプリをデプロイしていきます。

*本ブログは英語版からの翻訳です。オリジナルは[こちら](https://www.alibabacloud.com/blog/developing-node-js-apps-using-visual-studio-code-with-docker-on-simple-application-server_595352)からご確認いただけます。一部機械翻訳を使用しております。翻訳の間違いがありましたら、ご指摘いただけると幸いです。*

#よくある質問
####Node.jsとは？
Node.jsはオープンソースでクロスプラットフォームなJavaScriptのランタイム環境で、サーバー上でJavaScriptを実行することができます。

####Express とは？
Expressは、最小限で柔軟性の高いNode.jsのWebアプリケーションフレーム

Azure Static Web AppsのAPI作成でLINE BOTを作る

前に書いた記事でAzure Static Web Appsを簡単に試してみましたが、後半の手順でAPIの作成も出来ました。

> 参考: [たぶん10分で試せる。Azure Static Web AppsにWebサイトをデプロイして独自ドメイン設定とFunctionsでAPI公開まで](https://qiita.com/n0bisuke/items/1e12d8abb76d40a83fea)

今回はこれを使ってLINE BOTを作ってみようと思います。

ちなみにStatic Web AppsのAPIの中身はAzure Functionsになる模様です。

> 参考: [Azure Functions による Azure Static Web Apps プレビューでの API のサポート](https://docs.microsoft.com/ja-jp/azure/static-web-apps/apis)

## 環境

* macOS Catalina
* Node.js v12系

現状だとローカル実行やAzure FunctionsがNode.js v12までしか対応し

【SRE/JS】Cloud Run 周りの基礎

### ローカル
イメージを作ってから、`docker run -p 8080:8080 {Image ID}`
[コンテナ イメージをローカルでテストする  \|  Cloud Run のドキュメント  |  Google Cloud](https://cloud.google.com/run/docs/testing/local?hl=ja)

### 実装(JS)
> コンテナ ランタイムの契約に記載されているように、コンテナは、Cloud Run によって定義され、PORT 環境変数で指定されているポートで受信リクエストをリッスンする必要があります。
[Cloud Run のトラブルシューティング（フルマネージド）  \|  Cloud Run のドキュメント  |  Google Cloud](https://cloud.google.com/run/docs/troubleshooting?hl=ja) より引用

リクエストをリッスンすることをお忘れなく。

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

息子の可愛さを普及するために、AWS + LINEでBotを作った話〜形態素解析導入編〜

我が家の息子が可愛すぎる。

可愛すぎるので、LINE Botを作成し布教したが、少し問題が・・・

# はじめに

[息子の可愛さを普及するために、AWS + LINEでBotを作った話](https://qiita.com/yamachita0109/items/04ecc29504391a332729)の続編となります。元ソースや環境はこちらに記載してあります。

# 問題
こちらをご覧ください。

「かわいい」と送信した際には、会話ができているが、「かわいいね」や「超！！かわいい！！！」など、「かわいい」という文字列にアドオンされた場合、該当するメッセージがないと判断され、「〜ってなんでちゅか？」と分からないフリをするかわいい。（親バカ）

# 原因

原因となる部分はこちら

“`.js
const body = JSON.parse(e

JavaScriptでJSONファイルを同ディレクトリ上に生成する

結論からいうとnodeを使って生成します。fsモジュールを使います。
「JavaScript JSONファイル 生成」とJavaScriptを使ったキーワードでググったところ某スクールの違う、そうじゃない、な記事やあまり関係のない記事が出てきてしまったため対抗馬としてJavaScriptを前面に押して記事にしました。（結局は他の記事と同じようにnodeを使いますが）

特に初学者は「ググっても出てこないじゃないか」、と困っているかと思います。記事の前提をクリアして手を動かしてみてください。

追記：もっと良い書き方あれば教えてもらえるとハッピーになります。

## 【この記事の前提】 nodeをインストールしよう
nodeとはサーバーサイドのJSです。ブラウザ以外のところでもJavaScriptを実行できるよ、という実行環境になります。
nodeとセットで語られるnpmは聞いたことがある人が多いと思いますがnodeで動く様々なモジュールを引っ張ってくるためのパッケージマネージャーです。

### nodeをインストール
初心者は以下を参考に導入すると良いかと思います。

Next.js × TypeScript × Firebaseでポートフォリオ

## はじめに
初投稿です。
Next.js / TypeScript / Firebaseを使ってポートフォリオサイトを作ってみました。
作ったあとでNextのルーティング機能とかいらなかったなと思ったのは秘密…

デプロイしたのでとりあえず公開。
作り方を初学者の方向けにまとめてみました！ご意見いただけると嬉しいです！

随時更新します！

## お前誰？
[こういう者です…（成果物）](https://portfolio-6b4b9.firebaseapp.com/)
最近は自作キーボードを作ったり、スタートアップ企業で2社ほどお手伝いさせていただいています！

## 誰向けの記事？
React, Next.jsのチュートリアルくらいはやったことある！という初学者の方向けです。

## 目次
1. Hello World
2. _app.tsx / _document.tsx
3. Material-UI
4. 画像
5. デプロイ

参考資料

## 1. Hello World
### Next.jsをインストール
“`sh:~/workspace/portfoli

【nodemailer】お前らのOAuth2は間違っている

#・はじめに

個人開発でGmailを使おうとしたのですが、「安全性の低いアプリをブロックしました（ドヤッ」って通知＆設定の自動変更がウザかったのでOAuth2を導入しました。その過程で**「gmailのOAuth2認証をnodemailerからちゃんと通したい」**だけなのに結構回り道をしたので忘備録です。

まあ実は[nodemailer公式ドキュメント](https://nodemailer.com/smtp/oauth2/)読めば秒で解決する~~けど公式ドキュメント読まない人もいるからね。仕方ないね。（ブーメラン~~

ちなみにGoogleさんからIDとかシークレットとかリフレッシュトークンを取得する方法については[node.js 上の nodemailer で OAuth 2.0 を使って gmail からメールを送る](https://gist.github.com/neguse11/bc09d86e7acbd6442cd4)が一番詳しいと思います。それ以前にOAuthって何ぞやって人は各自ググってください。要はTwitterのアレです。

【Alexa】hostedスキル起動中の変数を保存する

#はじめに
Alexaスキル起動中に使用する変数を保存、読み出しする方法を記載します。

#準備
新機能 hostedスキルで作成するの章を進めてスキルをテスト出来るところまで進めてください。
[参考](https://qiita.com/vram/items/381f44de71d45ce12202)

スキルを開いた後、「こんにちは」など挨拶をした回数をカウントするスキルを作ってみましょう。
なお筆者はこの時点でnode.jpの知識がほとんどありません。

まずはグローバル変数**count**を使って「こんにちは」と発音した回数を数えてみましょう。

“`index.js
// This sample demonstrates handling intents from an Alexa skill using the Alexa Skills Kit SDK (v2).
// Please visit https://alexa.design/cookbook for additional examples on implementing slots, dialog mana

javascriptの標準入力

##javascriptで標準入力からデータを受け取る

・標準入力からデータを受け取る

例）「hello」というデータが渡される

“`javascript
process.stdin.resume();
process.stdin.setEncoding(‘utf8’);

var lines = []; ; //標準入力から受け取ったデータを格納する配列
var reader = require(‘readline’).createInterface({　//readlineという機能を用いて標準入力からデータを受け取る
input: process.stdin,
output: process.stdout
});
reader.on(‘line’, (lines) => {　//line変数には標準入力から渡された一行のデータが格納されている
lines.push(lines);　//ここで、lines配列に、標準入力から渡されたデータが入る
});
reader.on(‘close’, () => {　//受け取ったデータを用いて処理を行う
conso

【第1回】「みんなのポートフォリオまとめサイト」を作ります~プロトタイプ作成編~ 【Cover】https://minna.itsumen.com

ワイ 「この記事のカバーです」
https://qiita.com/kiwatchi1991/items/58b53c5b4ddf8d6a7053

ワイ 「暇やし久々Webアプリつくるか」
ワイ 「ニートでカネないから**0円で運用できる構成**にするで」

ワイ 「**AWS**とか**GCP**とかは**クラウド破産**が怖いから手ださない」
ワイ 「なんでAWSとかは**課金に上限設定**できないんやろか」

## 成果物
https://minna.itsumen.com

ワイ 「3日でつくった」

## リポジトリ

### フロントエンド
https://github.com/yuzuru2/minna_frontend

###バックエンド
https://github.com/yuzuru2/minna_backend

## 構成

フロントエンド: **Netlify**(月間100GBまで転送量無料)
バックエンド: **Netlify Functions**(月間125000回まで無料 いわゆる**FaaS**)
データベース: **MongoDB Atla

Node.js で Google Cloud Storage に署名付きURLを使ってファイルアップロードする方法

# GCSにクライアントからアップロードする
画像、ドキュメント、映像、音声など様々な種類のファイルをクラウドストレージにアップロードするシーンは多々あります。そんなとき クライアント => バックエンド => クラウド の順番にアップロードしていると通信に時間がかかります。そこで、署名付きURLを使って クライアント => クラウド で直接アップロードするといい感じです。

AWSのS3は結構ドキュメントなり記事なりが充実していますが、GCS x Node.js のものがほとんどなく苦労したので残しておきます。

## 1.署名付きURLを発行（バックエンド）
署名付きURLはGCSのサービスクレデンシャルが必要なのでバックエンドで行います。フレームワークにexpressを使っています。

“`ts:signed_url.ts
import express from “express”;

export const post_signed_url = async (req: express.Request, res: express.Response) => {
const {

【Node.js】APIサーバでマイクラ鯖をコントロールしよう #2

# はじめに

前回の記事は[こちら](https://qiita.com/smpny7/items/55e69d330198433ea82e)から

`Node.js`+`TypeScript`+`Express`を使って、Minecraftサーバをコントロールしていきます！
今回は基本的な部分である 起動・停止・再起動の機能を追加したのと、問題があった際にプレイメンバー（友人たち）と一緒に入っているDiscordのグループにアラートを送る機能、またログをDBに保存させる機能の3点を追加しました。

このソースコードはGitHubに公開しているので、修正点やアドバイス等があれば是非プルリクをお願いします。またMITライセンスにしておりますので、どうぞご自由にお使いください！

[GitHub ー smpny7] (https://github.com/smpny7/minecraft-api)

# 仕様
基本的には以下のことができるAPIサーバを作成する。(予定)

– サーバ稼働状況やバージョンの取得
– オンラインメンバーの一覧取得
– Discordへのエラー通知　**←

【Node.js】package.jsonのscriptsをnpsとnps-utilsを利用して、綺麗に整理してマルチプラットフォーム対応

## はじめに
– npmやyarnを利用した開発の際に、以下の点が気になったため、良い方法があるか調査。
– package.jsonへ定義するscriptsの量や内容が多くなってしまい、管理が大変
– 柔軟性や拡張性が欲しいため、json以外のファイルで記述したい。
– マルチプラットフォームで利用できる環境にしたい。
– 調査の結果、[nps](https://github.com/sezna/nps)と[nps-utils](https://github.com/kentcdodds/nps-utils)の2つのライブラリを発見。
– 今回は、上記2つのライブラリの概要や手順、設定テンプレートを記述する。

## 手順

### プロジェクト準備
– npmやyarnを利用している既存Node.jsプロジェクトを利用する。
– **※新規の場合、package.jsonでscriptsを管理するものを各自作成**
– 今回は、下記の`package.json`の例を置き換える。

“`json:置き換え対象のpackage.json
{
“scripts”

Terraformを使ってAPI Gatewayとlambda(aws-serverless-express)でAPIを構築する

## はじめに
最近サーバーサイドやインフラを勉強中の新米エンジニアです。
勉強のためにnodejsとexpressでWebAPIを構築してローカルでモックとして利用することが結構あるのですが、お盆休みを使ってデプロイ方法を勉強しました。
AWSのAPI GatewayとLambdaを利用します。業務でALBとLambdaの組み合わせは使っているのですが、個人でやるならコスト的にAPI Gatewayかなと思い選定しました。

## 前提
– terraform&aws cliの環境構築済み
– nodejsの環境構築済み

## API Gateway
https://aws.amazon.com/jp/api-gateway/
>フルマネージド型サービスの Amazon API Gateway を利用すれば、開発者は規模にかかわらず簡単に API の作成、公開、保守、モニタリング、保護を行えます。API は、アプリケーションがバックエンドサービスからのデータ、ビジネスロジック、機能にアクセスするための「フロントドア」として機能します。API Gateway を使用すれば、リアルタ

ツンデレのGoogleアシスタントをLINEボットにする

何か「OK、Google」したいときに、Googleアシスタントを立ち上げるのも寂しいし、ロボットから味気ない応答をもらっても寂しい。。。

Googleアシスタントは、テキスト入力してテキストで応答をもらえるのでその機能を使うこととし、さらに応答をツンデレっぽく語尾変換してみました。
LINEアプリのフレンドから応答が来れば、より本物感が出てきます。

構成はこんな感じです。


毎度の通り、GitHubに上げておきます。

poruruba/Chatbot_Tsundere
　https://github.com/poruruba/Chatbot_Tsundere

#GoogleアシスタントAPIを有効にする

こちらを参考に進めます。

googlesamples/assistant-sdk-nodejs
　https://gith

【今日から始めるAWS】Serverless Frameworkを使ってLINEのbotをつくる

#はじめに
30代未経験からエンジニア転職をめざすコーディング初学者のYNと申します。お読みいただきありがとうございます。
[前に作ったLINEのオウム返しbot](https://qiita.com/theFirstPenguin/items/8168e8ba3d65e34c24e0)を少しだけ発展させた内容でbotを作りましたので学習ログとして投稿させていただきました。

#Bot内容
下記のように、ユーザーが送ったタンパク質摂取量を記録できるbotをつくりました。
↓一応友達登録もできます。（思いついたタイミングで勝手に消去する可能性があります。）

![スクリーンショット 2020-08-14 19.17.13.png](https://qiita-image-store.s3.ap-n

【Alexa】新機能 hostedスキルのコードを理解する

#はじめに
これまでβ版だったAlexa-hostedスキルが正式版？となったのでそれを使ってアレクサスキルを作って学習します。この時点で筆者が超初心者のため難しい説明はしません、というか出来ません。

#準備
こちらに準備方法を用意しています。
ここからテストが出来る段階まで進めておいてください。

[参考](https://qiita.com/vram/items/381f44de71d45ce12202)

#コード全体を理解する
テンプレートのHelloWorldのプログラム部分を省略してみました。

“`index.js
const Alexa = require(‘ask-sdk-core’);

const LaunchRequestHandler = {
// 省略
};
const HelloWorldIntentHandler = {
// 省略
};
const HelpIntentHandler = {
};
const CancelAndStopIntentHandler = {
// 省略
};
const SessionEnded

SwitchBotの温湿度計の値をNode.js（BLE）を使って取得する

## 環境構築
balenaを使ってしまっていますが、debian環境なので `install_packages` はそのまま `apt install` 等で置き換えてください。

またNode.jsでBLEを扱うためのnobleというライブラリを今回は使いますが、本家よりも `@abandonware/noble` の方がメンテされているので、今回はこちらを使います。

“`Dockerfile:Dockerfile
FROM balenalib/%%BALENA_MACHINE_NAME%%-node:12-buster-build as build
RUN install_packages bluetooth bluez libbluetooth-dev libudev-dev
RUN npm install @abandonware/noble rxjs

FROM balenalib/%%BALENA_MACHINE_NAME%%-node:12-buster-run
WORKDIR /work
COPY –from=build ./node_modules ./nod