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

LINEBotをみんなで作ろう〜おうむ返しbotを作ろう編〜【GWアドベントカレンダー3日目】

この記事は下記の [#GWアドベントカレンダー](https://gw-advent.9wick.com/calendars/2020/72) の 2日目の記事になります。

楽しそうなのでやってみる　( @inoue2002 ） | GWアドベントカレンダー

# はじめに
こちらの内容は超初心者向けです。
[公式ドキュメント](https://developers.line.biz/ja/docs/messaging-api/overview/#messaging-api%E3%81%AE%E4%BB%95%E7%B5%84%E3%81%BF)を読める方はこちらをお読みいただく方が正確です。

[昨日の記事](https://qiita.com/drafts/3a5019c07801bcf5ff75)をご覧になってない方はぜひ。
こちらの記事はGWアドベントカレンダーを通してLINEBotをサーバレスで作れるようになろう！ということを目標に書いている記事です。

LINEBotはどんなもんか大体知ってるけど、作り方はわからんという方に読んでいただきたいです。

それではおうむ返し

Node.jsのバージョンアップ for Mac

Macで動いているNode開発環境を最新状態にするための方法です。
(いつも忘れちゃうので、書き留めておこうと思います。)

手順は以下のとおりです。
　1. 各種ツールの最新バージョンを確認する。
　2. 各種ツールを最新にする。

# 各種ツール最新（安定）バージョンを確認する。
私の環境は、`Homebrew`で作ったので、以下のものを確認します。
(2020/5/1時点の情報です。)

– Homebrew
– Nodebrew
– Node.js

## Homebrew:
`Homebrew`のバーション情報は、**[こちら](https://github.com/Homebrew/brew/releases)** から確認できます。
webpack超超入門(備忘)

# webpackとは
webpackはフロントエンド開発用のモジュールバンドラー、簡潔にはモジュールをまとめてくれるツール

## 用語
– モジュール
javascriptやcssなどのファイル。

– バンドル/バンドルファイル
モジュールが一つにまとめられたファイル。

– ビルド
バンドルを出力するまでの一連の処理

## 利点
– 機能ごとにファイルを分割(モジュール化することができる。)
– 可読性の向上
– 開発作業の分担やテストがし易くなる
– モジュールの再利用性を向上できる。
– 転送効率を向上させることができる。
– 最適化されたファイルを出力できる。

## install
何はともあれやってみないといまいちよくわからないので、早速nodeからwebpackをインストール。

– 適当なディレクトリを切って、package.jsonを初期化

“`shell
yarn init -y
“`

– webpackとwebpack-cliをインストール(webpack4からcliが別モジュールとして管理されるようになったため、別途インストールが必要らしい。

Let’s Encryptを使用しているウェブページをブロックするプロキシサーバー

**Let’s Encrypt**はドメイン認証証明書を無料で発行してくれるたいへん素晴らしいサービスです。ウェブサイトをHTTPSで提供するためには証明書が必要ですが、Let’s Encryptの登場以前は認証局から有料で証明書を発行してもらうのが主流でした。それを無料で発行してもらえるのは大変ありがたいことです。また、発行プロセスは自動化されておりとても簡単です。筆者も個人のウェブサイトは全てLet’s Encryptで証明書を取得しています。

ところが、**Let’s Encryptが発行する無料の証明書なんて信頼できない**という教義を信奉するタイプの人々も存在するようです。筆者は最近Twitterで見かけました。ということで、そのような思想を持つ方も安心してインターネットを利用できるように、**Let’s Encryptによって発行された証明書を使用しているウェブサイトのみブロックするプロキシサーバー**を作りました。

完成品はこちらです。→ https://github.com/uhyo/proxy-for-mammonists

ソースコードをクローンし、`npm i

Cognito+API Gateway+Lambdaでユーザ作成APIを作りたいんだー！

AWSの認定は保有していますが
実践できていない主なサービスがサーバレスまわり…

ということで勉強を兼ねて、簡単なAPIを作成してみます。

#やりたいこと
APIでユーザ作成
– username と passwordをリクエストボディに指定しAPIをコールするだけでユーザ作成する。
– メールアドレス/電話番号の認証は不要。

#参考
[LambdaでCognito認証(ユーザー作成)](https://qiita.com/minmax/items/8c2aa57b76e09b8192ed)

#やってみよう！
###ユーザプールの作成
こんな私でもCognitoでユーザ管理をするにはユーザプールを作成しなければならないことは知っている。

属性は必要最低限を指定

![image.png](https://qiita-image-st

Gulp3 => Gulp4 移行 エラー【 primordials is not defined 】

# Gulp3からGulp4へ:airplane:
今回Gulp3からGulp4へ(何回書くねん:imp:)移行したのですがその際に出たエラーについて共有
アップデートは[npm-check-updates](https://www.npmjs.com/package/npm-check-updates)というツールを使いnpmライブラリを総括アップデートを行いました。

### エラー内容:see_no_evil:
アップデート後gulpコマンドが叩けるかを確認するために

“`js:index.js
import gulp from ‘gulp’
import { compileStylus } from ‘./tasks/stylus’

exports.default = gulp.series(
compileStylus
)
//↑gulpと叩くとcompileStylusというタスクを実行するよ〜という処理
“`

“`js:./tasks/stylus.js
import gulp from ‘gulp’
import plumber from ‘gulp-p

@babel/plugin-transform-runtime を理解する(Babel 7)

# 概要

Babelの主要プラグインの一つである、[@babel/plugin-transform-runtime](https://babeljs.io/docs/en/babel-plugin-transform-runtime) に関して、雰囲気で使わずに理解を深めるためにまとめた内容です。

概ね上記公式ドキュメントに書いてある内容を要約しただけになります。(2020/05/01 閲覧)

# バージョン情報

以下で動作確認済み

– `Node` v12.16.3
– `@babel/core` v7.4.5
– `@babel/plugin-transform-runtime` v7.4.5
– `@babel/runtime@` v7.9.2
– `core-js` v3.x

# `@babel/plugin-transform-runtime` is 何

本来はBabelによって注入されるヘルパーコードを、再利用可能なヘルパーをインポートする形に変換するプラグインです。これによってグローバル汚染を避けながら、成果物のコードサイズを小さくすることができます。

>

React　メモ

#React.js
Reactの導入とメモ

## 環境構築
まずはNode.jsのインストール
次にnpmのインストール(yarnを使いたければインストール)

“`
npmの場合
//Reactのプロジェクト作成　
$ npx create-react-app 作成したいディレクトリ名
“`

“`
yarnの場合
//Reactインストール
$ yarn global add create-react-app
//Reactのプロジェクト作成
$ create-react-app 作成したいディレクトリ名
“`

“`
//yarnで起動
$yarn start
//npmで起動
$npm start
“`

## 1. React.jsとは
Facebook社が公開したUI構築のためのjsライブラリ
全てのReactコンポーネントは、自己のprops に対して純関数のように振る舞わねばならない

## 2.JSXとは
React.createElement関数
javaScriptの機能を全て備えた構文の拡張の為テンプレート言語とは異なる
ReactDOMはH

WSL+Ubuntuの初期設定（インストールからGit/Node.js設定まで）

## やりたいこと

WSLでUbuntuを動かす。

最低限の環境を構築する。

初期設定時に毎回調べるのは面倒なので、手順をまとめてメモしておく。

## 到達目標

* Ubuntuの初期設定ができている
* CUI/GUI環境ができている
* Gitの初期設定ができている
* GitHubにssh接続できる
* Python3が動かせる
* Node.jsが動かせる

## 環境

* Microsoft Windows 1909 (OS ビルド 18363.535)
* Ubuntu 20.04 LTS

## 手順

### 1. WSLの有効か

1. [Windows + i]で設定メニューを開く
1. [アプリ] → [アプリと機能] → [プログラムと機能] → [Windows の機能の有効化または無効化] の順にクリック
1. 機能の一覧から、[WSL(Windows Subsystem for Linux)]にチェックをいれ、[OK]ボタンをクリック
1. Windowsを再起動する

### 2. Ubuntuの入手

[Microsoft Stor

toio準備

機材
TOIOセット
スイッチサイエンス開発者用シート

———————————————-
あ）
[Node.js]
nodist 0.9.1 //nodist は Node.js のバージョンを管理するツール｡
npm -v 6.9.0

[noble] : Node.jsでBluetooth LEを扱うためのモジュールです。

a) Windows10にnobleをインストールする https://qiita.com/s_nkg/items/3f27328e108d7fa8d076
b) [Windowsでnpm installしてnode-gypでつまずいた時対処方法] https://qiita.com/AkihiroTakamura/items/25ba516f8ec624e66ee7

VCTargetsPath=C:\Program Files (x86)\MSBuild\Microsoft.Cpp\v4.0\V140
C:\Program Files (x86)\MSBuild\M

Node.jsでFetch APIで取得したShift_JISのテキストをTextDecoderではなくnpmのパッケージを使ってデコードする

#Overview

Node.jsでFetchでHTMLのデータを取得して`response.text()`でテキストを取得したら文字化けが:scream:
どうしてだろうと思ったらHTMLがShift-JIS、かつ`text()`はまさかのUTF-8専用とのこと。
https://developer.mozilla.org/ja/docs/Web/API/Body/text

> レスポンスは常に UTF-8 としてデコードします。

さすがモダンなAPIだな、この割り切り嫌いじゃない:wink:

それならばとブラウザ同様TextDecoderを使ってShift-JISに変換しようとしたらエラー[ERR_ENCODING_NOT_SUPPORTED]が:fearful:
Node.jsのドキュメントみてもShift-JISサポートあるやん！
https://nodejs.org/docs/latest/api/util.html#util_class_util_textdecoder

ググってみたらICUとかいうのが必要なようで…
マイナーなデータは別途提供するから自分で取り

Heroku で Node.js アプリを動かすときにつまづいた内容

###デプロイ方法などをとりあえず知る。
解決策：公式ドキュメントを読む。サンプルコードを手元にダウンロードして、実際にやってみると良いです。Procfileとか事前に知れるので。
参考：[Getting Started on Heroku with Node.js](https://devcenter.heroku.com/articles/getting-started-with-nodejs)

###ClearDBの接続情報がわからない
解決策：`heroku config`で、特定のフォーマットで教えてくれます。
参考：[heroku CLIでMySQL(clearDB)の設定をする](https://qiita.com/nobuhiroharada/items/3775e010517b8385f0f5)

###`heroku config`でエラーが出たとき
原因：コマンド実行するときのディレクトリが間違っていただけでした。
参考：[[Herokuエラー]Error: Missing required flagが出た](https://qiita.com/hirokik-

LINEBotをみんなで作ろう〜LINEBot is 何？編〜【GWアドベントカレンダー2日目】

この記事は下記の [#GWアドベントカレンダー](https://gw-advent.9wick.com/calendars/2020/72) の 2日目の記事になります。

楽しそうなのでやってみる　( @inoue2002 ） | GWアドベントカレンダー

# はじめに
こちらの内容は超初心者向けです。
[公式ドキュメント](https://developers.line.biz/ja/docs/messaging-api/overview/#messaging-api%E3%81%AE%E4%BB%95%E7%B5%84%E3%81%BF)を読める方はこちらをお読みいただく方が正確です。

[昨日の記事](https://qiita.com/drafts/a87df2b520f8b6e37f42/edit)をご覧になってない方はぜひ。
こちらの記事はGWアドベントカレンダーを通してLINEBotをサーバレスで作れるようになろう！ということを目標に書いている記事です。

LINEBotって何なん？って思われる方にまずお読みいただきたいです。
できるだけ専門用語を使わず、噛み砕

初心者がWordPressでタイピングのリアルタイム対戦ゲームを作ってみました

#はじめに
この記事は、WordPressでしかホームページを作れないプログラミング初心者が、無理やりWordPressを使って、タイピングのリアルタイム対戦ゲームを作ってみた記事です。
タイピング初心者用に、７０近くあるステージをクリアしていくモードもあります。

IT系の集まりで、「WordPressでこのサイト作ったよ」って言ったらどよめきが起こり、「Qiitaに書いてみれば？」と言われたので書いてみます。

ちなみに、[タイピンガーＺ](https://typingerz.com)というサイトです。

このサイトをWordPressでどうやって作ったのかを、ざっくり書いていこうと思います。

#テーマのテンプレート
はるか昔に購入した有料テンプレートを使ってみましたが、改造しすぎて原型をとどめていないので、なんでも良かったと思います。

#記事投稿と固定ページテンプレート
タイピンガーＺは、対人対戦を除いて、ステージをクリアしていく仕組

Node.jsを使ってサーバにアクセスログを出力してみた

#はじめに
この記事はなんとなくJSなどを勉強している学生がメモ代わりに書いている記事です。内容は期待しないでください。

#1.仮想環境を構築する。
今回はUbuntuで行うのでiTerm2で仮想環境を起動する。

起動したところで
1.Virtual Box(バーチャルボックス)
2.Vagrant（ベイグラント）
という2つのソフトウェアを使った仮想環境でUbuntuを使用します。
cd ~/vagrant/ubuntu
vagrant up
vagrant ssh

Ubuntuがインストールされたディレクトリに移動。vagrant upは仮想的なPCにインストールされたUbuntuを起動するコマンドで,vagrant sshはVagrantの仮想マシンがセットされている状態でSSHに接続します。

#2.作成したサーバにログを表示する
以下の内容をhttp.createServerのアロー関数内に記述します。
“`console.info(
‘[‘ + new Date() + ‘] Requested by ‘ + reqest.connection.remoteAd

さくらVPSにmaria db + nginx + headlessCMSのstrapiを入れる

# さくらインターネットでVPSを契約
# 基本環境はCentOS7を選択
# nginx インストール
“`
yum -y install nginx
“`
# marina dbをインストール
“`
yum install mariadb-server
systemctl enable mariadb
systemctl start mariadb
“`
# Node.js インストール
“`
curl -L git.io/nodebrew | perl – setup
echo ‘export PATH=$HOME/.nodebrew/current/bin:$PATH’ >> ~/.bash_profile
source ~/.bash_profile
nodebrew install-binary stable
nodebrew use stable
“`
# strapiのインストール
“`
npm install strapi@alpha -g
cd /usr/share/nginx/html
strapi new blog
“`

# nginxの設定の

Node.jsのrequest-promiseモジュールでresponseの内容が表示できずはまった件

##やりたかったこと
Node-REDでリビングのGoogle homeにメッセージを喋らせるREST APIを作り、Node.jsでそのREST APIを呼び出すプログラムを作りたかった。REST APIの呼び出しにはrequest-promiseモジュールを利用。

##はまったところ
REST APIを以下のコードで呼び出したが、responseの内容を表示しようとしてもコンソールに`undefined`と表示されてしまう。

“`
var options = {
url: ‘http://XXX.XXX.XXX.XXX:1880/sendtogh’,
method: ‘POST’,
form: {“message”: message}, //前段の処理でmessageにgoogle homeに喋らせたい内容をセット
}
request(options)
.then(function(response){
console.log(respo

Node – ES6 imports cannot find module

# Problem

“`javascript:index.js
import HttpConnect from ‘./src/Library/Connect/HttpConnect’;

…
…
…
“`

“`
node –experimental-modules index.js
“`

“`
$ node –experimental-modules index.js
internal/modules/run_main.js:54
internalBinding(‘errors’).triggerUncaughtException(
^

Error [ERR_MODULE_NOT_FOUND]: Cannot find module ‘\home\johnny\test\src\Library\Connect\HttpConnect’ imported from \home\johnny\test\index.js
at finalizeResolution (internal

Puppeteerでexampleコードsearch.jsを試すときにハマったこと（動的サイトのセレクタ確認、Headless解除でのデバッグ）

# はじめに
スクレイピングをnode.jsでできるPuppeteer(スペルミス多発)を初心者が使ってみたところ、
私的なハマりどころが複数あったので備忘録として残します。

## ハマりポイント（順番に）
1. search.jsは2018年に作成されたものなので、一部スクレイピング対象サイトのセレクタが変わっていた。
2. 検索窓に入力した際のポップアウトが動的で、developer toolでDOMをelementを見つけるのに苦労した。
3. レスポンシブデザインのbreakpointのサイズを考えずに組んでいたので、Headlessで立ち上がっているChromeと挙動の差異があったことに気付いていなかった（Navigation Drawerが出てきてしまっていた）。

## 解決策
1. ちゃんとdeveloper toolでelementを確認する。
2. JavaScriptのdebugと同じ要領でBreakpointを設定してポップアウトが出た瞬間に止めて、elementを確認する。
3. Headlessモードを解除し、実際にChromeが動いている様子を確認して

Node.jsを使ってHTTPサーバを作ってみる

#はじめに
この記事はなんとなくJSとかを勉強している学生がメモ代わりに書いているものです。内容は期待しないでください。

#1.仮想環境を構築する
今回はUbuntuで行うのでiTerm2で仮想環境を起動する。

起動したところで
1.Virtual Box(バーチャルボックス)
2.Vagrant（ベイグラント）
という2つのソフトウェアを使った仮想環境でUbuntuを使用します。
cd ~/vagrant/ubuntu
vagrant up
vagrant ssh

Ubuntuがインストールされたディレクトリに移動。vagrant upは仮想的なPCにインストールされたUbuntuを起動するコマンドで,vagrant sshはVagrantの仮想マシンがセットされている状態でSSHに接続します。

#2.プログラムのひな形(テンプレート)を用意する
ディレクトリ内に以下を記述します。
“`yarn init
echo “‘use strict’;” > ファイル名
“`

１行目はyarnで新しいプロジェクトを始める際に記述するものです。

#3.プログラムを書く
先ほど記