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

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.プログラムを書く
先ほど記

LINEBotをみんなで作ろう〜環境構築編〜【GWアドベントカレンダー１日目】

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

すごくなりたい @inoue2002 ） | GWアドベントカレンダー

# はじめに
#####全く触った事がない人でも読み進められる記事を目指して、「実際に動くもの」を作ることを重視して解説をしていきます。
最初は環境構築から始め、最終的にはサーバレスで動くLINEBotを作成し、色々な物を作ってもらえたら嬉しいです。
僕の持っている知識を全部書いていこうと思いますのでよろしくお願いします！
もし誤表記やっ訂正すべき点がある場合、コメントいただけると幸いです。
あと、基本的にはMac環境で説明していきますのでよろしくお願いします。
では1週間よろしくお願いします！

#今日やる事
・[LINE Developerのサイト](https://developers.line.biz/console/)にログインできるようにする。
・[ngrok](https://ngrok.com/)をインストールする
・[no

Boxウェブアプリ統合を作ってみた

## 今回作るもの

Boxのウェブアプリ統合をnode.jsで作ってみます。

ウェブアプリ統合とは、標準のBoxの画面にボタンを表示し、そのボタンをクリックしたら外部で連携されたアプリケーションが何らかの処理を行うという仕掛けのことです。

Boxのテナントの設定にもよりますが、DocuSignなど、予めおすすめのボタンがいくつかついていたりします。あのボタンは自前で追加可能です。

今回は、任意のファイルを、3分間ロックしてダウンロードも禁止にするという使いみちのないウェブアプリ統合を作ってみます。Boxにはそもそも編集中に他人からファイルを変更されないように悲観ロックを行う機能がついているのですが、単純にこの機能を外部から利用してロックをかけるというものを作ってみます。

## 仕組み

基本的なしくみとしては以下のような流れです。

1. 外部に自前のカスタムアプリケーション・サーバーを用意する。
2. Boxの開発者コンソールからアプリの登録をし、ウェブアプリ統合を有効にする。
3. Boxの画面からウェブアプリ統合のボタンを押すと、カスタムアプリケーション・サーバーにH

都道府県名を都道府県コードに変換

都道府県名を次で定義されている都道府県コードに変換する方法です。
[都道府県コード](http://nlftp.mlit.go.jp/ksj/gml/codelist/PrefCd.html)

変換に使うJSONファイル

“`json:prefecture.json
{
“北海道”: 1,
“青森県”: 2,
“岩手県”: 3,
“宮城県”: 4,
“秋田県”: 5,
“山形県”: 6,
“福島県”: 7,
“茨城県”: 8,
“栃木県”: 9,
“群馬県”: 10,
“埼玉県”: 11,
“千葉県”: 12,
“東京都”: 13,
“神奈川県”: 14,
“新潟県”: 15,
“富山県”: 16,
“石川県”: 17,
“福井県”: 18,
“山梨県”: 19,
“長野県”: 20,
“岐阜県”: 21,
“静岡県”: 22,
“愛知県”: 23,
“三重県”: 24,
“滋賀県”: 25,
“京都府”: 26,
“大阪府”: 27,
“兵庫県”: 28,
“奈良

Expressでのエラーハンドリング　ベストプラクティス

[Express公式サイトのベストプラクティス](https://expressjs.com/ja/advanced/best-practice-performance.html)には、パフォーマンスと信頼性についてのベストプラクティスが解説されています。

その中で、適切なエラーハンドリングのベストプラクティスについて解説されています。

Express（Node.js）では発生したエラーがキャッチされないと、プロセスが異常終了したりハングしてしまいます。そうなると、Epxressアプリケーションの信頼性（可用性）が地に落ちてしまいます。このようにエラーハンドリングの適切さは信頼性に大きく影響するため、エラーハンドリングはとっても重要なのです。

今回の投稿では、Express公式サイト（と、そこからリンクされる参考ページ）で紹介されているエラーハンドリングのベストプラクティスを、できるだけ分かりやすく説明させていだこうと思います。

まずはアンチパターンいついて説明します。

# Expressにおけるエラーハンドリング【アンチパターン】

### その①：コールバック関数で、手動

Amplify CLIがamplify: command not foundで進まない件

#結論:PATHが通ってませんでした

この記事はamplify -vとかしても

amplify: command not found

と出てしまう人向けです。

まずは

“`
npm config get prefix
“`

でnpmモジュールのインストール先を確認します。
ここでは /Users/hogehoge/.global とします。
次に

“`
echo $PATH
“`

として、その中に先程のパスが含まれているか確認。多分含まれていないはず。

あとは

“`
export PATH=$HOME/.global:$PATH
“`

としてパスを追加。
これでnpmでインストールしたモジュールまでパスが通ったので
amplifyのコマンドが通るようになります。

Commit Message / Pull Request Titleを美しく保つ方法

初投稿なので変な点があったら気軽にご指摘ください。

# TL;DR

[commitlint](https://commitlint.js.org)と[Commitizen](https://github.com/commitizen/cz-cli)、[Semantic Pull Request](https://github.com/zeke/semantic-pull-requests)を用いて[Convential](https://www.conventionalcommits.org/ja/v1.0.0/)なメッセージを書こう。

# はじめに

皆さんはコミットメッセージを普段どのように書いているでしょうか？人には人それぞれのコミットメッセージの書き方があると思います。しかしコミットメッセージの書き方が人によってバラバラだと非常に見にくいものとなってしまいます。

そのための規約が[Conventional Commits](https://www.conventionalcommits.org/ja/v1.0.0/)です。

> Conventional Commits

herokuでnodeアプリをデプロイする

個人的な作業メモ。チュートリアルをなぞっただけです。

https://cli-assets.heroku.com/heroku.pkg からCLIのインストーラーをダウンロードして実行。

“`
$ heroku –version
› Warning: heroku update available from 7.35.0 to 7.39.5.
heroku/7.35.0 darwin-x64 node-v12.13.0
“`

アップデートできるようなのでしおく。

“`
$ heroku update
heroku: Updating CLI from 7.35.0 to 7.39.5… done
heroku: Updating CLI… done
“`

herokuにログインする。

“`
$ heroku login
heroku: Press any key to open up the browser to login or q to exit:
“`

何らかのキーを押すとブラウザが開く。

![スクリーンショット 2020-04-29

【Node.js】SequelizeのDB接続情報を環境変数で管理する

# 経緯
Sequelizeのデフォルトは `config.json` というファイル内でDBへの接続情報を管理しているので、 `.env` などの環境変数で管理したかった。

# 結論
`config/config.json` の中身を以下のようにモジュール化して、拡張子を `.js` に変更する。

`dotenv` で環境変数を読み込む。

“` config.js
require(‘dotenv’).config();

module.exports = {
‘development’: {
‘username’: process.env.DB_USERNAME,
‘password’: process.env.DB_PASS,
‘database’: process.env.DB_DATABASE,
‘host’: process.env.DB_HOST,
‘port’: ‘3306’,
‘dialect’: ‘mysql’,
‘operatorsAliases’: false,
},
};
“`

`mod

【Node.js】Dockerで作成したMySQLをDUMPする

# 経緯
Docker-composeで作成したMySQLのデータをAmazonRDSに移行する必要があった。

# 結論

## Dockerコンテナで作成したMySQLデータをRDSなどの外部サーバーに移行する

エクスポート時

“`
$ docker exec コンテナ名 mysqldump –default-character-set=文字コード（utfmb4など） -u　ユーザ名 -p パスワード データベース名 > backup.sql
“`

インポート時

“`
mysql –default-character-set=文字コード -h エンドポイント（AmazonRDSの場合） -P 3306 -u admin -p データベース名 < backup.sql ``` ## Sequelize（Node.jsのORM）を使ってスキーマを作成していた場合 エクスポート時 ``` $ docker exec コンテナ名 mysqldump --skip-lock-tables　--default-character-set=文字コード（utfmb4など）

Hubotを使ってみた

#はじめに
この記事はなんとなく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.botを作る上で必要なモジュールをインストールする

“`npm install -g hubot yo generator-hubot coffee-script
“`
yoとはYeomanという雛形作成ツールです。
generator-hubotはHubot のためのYeo