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

【DynamoDB】条件付き書き込み（ConditionExpression）を使ってupdateItemで新規項目を追加しないようにする

DynamoDBのupdate処理で、テーブルに存在しない項目を指定すると、新規項目としてテーブルに追加されてしまいます（[UpdateItem](https://docs.aws.amazon.com/ja_jp/amazondynamodb/latest/developerguide/WorkingWithItems.html#WorkingWithItems.WritingData.UpdateItem)）。
条件付き書き込み（ConditionExpression）を使用し、updateで存在しない項目を指定した時に、テーブルに追加されずに何も変化しない状態になるよう実装します。

# 環境
– macOS
– AWS Cloud9
– Node.js 12

# AWS.DynamoDB.DocumentClient
JavascriptでDynamoDBを操作するとき、**AWS.DynamoDB**を使う方法と**AWS.DynamoDB.DocumentClient**を使う方法の2パターンがあるのですが、**AWS.DynamoDB.DocumentClient**

Reactの人気を超えたASP.NET Coreとは？

## 2020 Web Developer Survey
StackOverflowの[2020 Web Developer Survey](https://insights.stackoverflow.com/survey/2020)の「最も愛されるWebフレームワーク」分野で、ASP.NETがReactを超えて１位になりました。なんとなく聞いたことはあるのですが、実際にどのようなものかを調べてみました。


**ASP.NETを普段から使ってるわけではないので、間違った内容があればご訂正して頂ければと思います。**

## Fullstack Web Framework
ASP.NETは、**Microsoftが開発した開発者プラットフォーム**で、C#、F#、Visual Basicを利用して様々なアプリケーションを開発できるようにしたも

ES moduleとして簡単に静的に検証できるテストを書けるようになって（個人的に）幸せが増した話

[この記事は自サイトとのクロスポストです](https://piro.sakura.ne.jp/latest/blosxom/webtech/javascript/2020-06-03_pure-esmodule-testing-framework.htm)。

# テストのtypoにテスト実行後に気付くのってあほくさいじゃないですか？

ES moduleのコードでは「関数名や変数名の誤記」をESLintなどで容易に静的に検出できます。なので、JSで書ける物は片っ端からなんでもES moduleにしたくなるのですが、いわゆる自動テストのコードでは、この性質がかえって邪魔になることがあります。

たとえばMochaのテストケースには、何の前触れもなく`describe()`や`it()`などの関数が登場します。これらが「未定義の関数呼び出し」としてエラーにならないようにするには、テストと実装でESLintのルールを切り替えて警告条件を緩和したり、テスティングフレームワークの関数やオブジェクトを警告の例外に明示したりといった対策が必要になります。

しかし、警告を甘くすればテストだけ静的

macOSをバージョンアップしたらrails s出来なくなった

#問題

①　macOS Catalina のバージョンを10.15.4にアップデートする

②　現在制作途中のアプリケーションのディレクトリにてrails sする

③　以下のようなエラーが出る

“`terminal
Could not find a JavaScript runtime. See https://github.com/rails/execjs for a list of available runtimes. (ExecJS::RuntimeUnavailable)
“`

#解決

https://nodejs.org/ja/download/current/

上記のサイトにて、最新版のNode.jsをインストールするか

ターミナルで、homebrewを用いてインストールを行う

“`terminal
% brew install nodejs　　　　　
“`

すると、無事rails sでローカルサーバーを起動できた。

PlayCanvasでTypeScriptを使うためのメモ(Webpack未使用編)

#概要

[前回の記事(準備編)](https://qiita.com/riafeed/items/d79615260c0cf3f47e92)でアセットをアップロードするための設定までやりましたが、今回はgulpを使ってトランスパイルからアップロードまで一括で行えるようにgulpタスクを作ります。

なぜgulpを使うのかというと、前回の記事にも書いた通り、[PlayCanvas用のgulpタスクが公開されている](https://qiita.com/yushimatenjin/items/5f0f178e8a4ba4a5ee57)からです。

#gulpfile.js

後述の問題のため、through2というgulp用のプラグインを使い、トランスパイル後のコードの先頭に2行ほどコードを書き加えるという泥臭い処理を行っています…(´・ω・`)

“`gulpfile.js
const gulp = require(“gulp”);
const playcanvas = require(“gulp-playcanvas”);
const pcOptions = require(“./

Node.jsアプリケーションをElastic Beanstalkにデプロイする

以下の記事を参考に進めます。

[Express アプリケーションを Elastic Beanstalk にデプロイする – AWS Elastic Beanstalk](https://docs.aws.amazon.com/ja_jp/elasticbeanstalk/latest/dg/create_deploy_nodejs_express.html)

## 検証環境

MacOS 10.15.4です。
`eb`コマンドさえ実行できれば、他のOSでも問題ありません。

## EB CLI のインストール

“`
brew update
brew install awsebcli
eb –version
> EB CLI 3.18.1 (Python 3.8.2)
“`

## eb init コマンドを使用してリポジトリを作成

“`
mkdir node-express
cd node-express
eb init –platform node.js –region ap-northeast-1
> You have not yet set up your c

IBM CloudでCloud Foundryアプリケーションをデプロイをする

こんにちは。Cloud IaaS超初心者です。
先日IBM Cloud のCloud Foundryを使用してアプリケーションをデプロイしようとした時に少し詰まったので備忘録として残しておきます。

まずはコンソール上でCloud Foundryアプリケーションを作る。
1. 「カタログ」->「Cloud Foundry」を検索
2. 「パブリックアプリケーション」を選択
3. リージョン「シドニー」（東京はない）、ランタイム「SDK for Node.js」、あとはドメイン名やホスト名などよしなに。

作成すると、コンソール上から「Cloud Foundryアプリケーション」として確認できる。

次にCLIからあらかじめ作成したプロジェクトをデプロイしてみる。
ログインとCLIコマンドインストール

“`
ibmcloud login
ibmcloud cf install
“`

targetを対話的に設定、、と思ったらここで問題発生。

“`
~/Desktop/cloudfoundry/test $ ibmcloud target –cf
失敗
Cloud Fo

[LINE BOT]FizzBuzz体験BOT

#目次
* はじめに
* サンプルコード
* サンプル画像と使用例
* おわりに
* 参考にしたサイト

#はじめに
今回は、LINE BOTでFizzBuzzをやってみた。
なお、当LINE BOTを作成する際に、[この記事](https://qiita.com/n0bisuke/items/ceaa09ef8898bee8369d)をベースにした。

#サンプルコード

“`javascript
‘use strict’;

// 使用パッケージ群
const express = require(‘express’); // Node.jsで利用できるWebアプリケーションフレームワーク
const line = require(‘@line/bot-sdk’); // ボットサーバへのリクエストが当LineBOTからきたものかどうかを検証してくれる(要は署名検証)
const PORT = process.env.PORT || 3000; //Node.jsアプリケーションを使用するポートを設定
// LineBOT用定数群
const config = {
cha

Express.jsにPassport.jsで、任意のフォルダ配下のみをBasic認証する

# 概要

ExpressフレームワークにBasic認証を適用する方法について記載します。

任意のフォルダのみにBasic認証を適用するものとし、そのフォルダにVue-CLIによるSPA（＝Single Page Application）を置くことを目的とします。

# 方針

最小限のBasic認証を認証する場合はExpress.jsプロジェクトにて提供されるbasic-auth-connectライブラリでもよいのですが、他の認証への差し替えの容易性を考慮して、Passport.js を用いることとします。

* basic-auth-connect
* https://github.com/expressjs/basic-auth-connect
* Passport.js
* http://www.passportjs.org/

認証を要求する領域と、不要とする領域を共存させたいので、任意のフォルダ配下のみをBasic認証の対象とします。

ついでに、Vue CLIで作成したSPAを任意フォルダへ配置するものとします。

なお、ユーザー名は「user」でパスワ

anyenvでNodeやRubyやPythonのバージョン管理

# 概要
– github：https://github.com/anyenv/anyenv
– anyenvはnodenv, rbenv, pyenvなど*env系を管理するライブラリ
– nodenv, rbenv, pyenvは、Node, Ruby, Pythonのバージョンを管理してくれる。

anyevnでnodenvをインストールしてnodenvでほしいバージョンのNodeをインストールして管理しておくという感じ

# anyenv インストール

“`shell:
$ git clone https://github.com/riywo/anyenv ~/.anyenv
$ echo ‘export PATH=”~/.anyenv/bin:$PATH”‘ >> ~/.bash_profile
$ echo ‘eval “$(anyenv init -)”‘ >> ~/.bash_profile
$ exec $SHELL -l

# 確認
$ anyenv -v
anyenv 1.1.1

# 初期化しておく
$ anyenv install –init
“`

IMI住所変換コンポーネントでいろんな住所を正規化してみた

先日、経済産業省から「IMIコンポーネントツール」というものが公開されました。

IMIコンポーネントツール
https://info.gbiz.go.jp/tools/imi_tools/

今回、この中の「(1) 住所変換コンポーネント」をいろいろ使ってみたので、そのことについて投稿したいと思います。

住所変換コンポーネントについて、以下のブログで詳しく解説されています。

[経産省発の npm モジュール！住所や電話番号の正規化、ジオコーディングなどができる IMI コンポーネントツールを試した！](https://blog.geolonia.com/2020/05/29/imi-tools.html)

住所変換コンポーネントは、簡単に言うとあいまいな住所表記を正規化してくれるツールと理解しています。
私は個人で[Linked Open Addresses Japan](http://uedayou.net/loa/)(以下、住所LODと呼びます)という住所データを[Linked Open Data](https://ja.wikipedia.org/wiki/Linked

ラズベリーパイ4にNode.jsをインストールするまで

自宅簡易サーバを作ろうと思い、ラズベリーパイ4を購入しました。とりあえず、Node.jsをインストールするところまでの備忘録です。
# OSのインストール
OSを何にするか迷いましたが、結局ラズベリーパイ標準OSのRaspbianを入れることにしました。OSイメージは[こちら](https://www.raspberrypi.org/downloads/)からダウンロード。
RaspbianはDebianベースのOSなのでUbuntuとかに慣れ親しんだ人であればほとんど苦労することは無いと思います。パッケージ管理はaptです。
基本的には手元のMacからSSH接続にて使おうと思ったので、CUI(Raspberry Pi Lite)を選択しました。
まずは、SDカードにOSを入れるところから始めます。SDカードにOSを書き込む方法も色々あるようですが、私は[Rufus](https://rufus.ie/)というフリーソフトを使いました。詳しい使い方は[こちら](https://hashitaka.jp/raspberrypi4/centos7-install/)を参考にしました。
Ru

webpack はじめ方

## この内容について
この内容は、私が運営しているサイトに、より見やすく掲載しているので、よければそちらもご活用ください。
[【webpack】 導入手順 | コレワカ](https://korenarawakaru.com/webpack/webpack-start)

今回紹介する内容には、Sassのバンドルも含めていますので、Sassを使いたい人にもおすすめです。

## webpackとは
オープンソースのJavaScriptモジュールバンドルのこと。
CSSやJavaScriptなどの複数のファイルを1つのファイルにまとめることが可能。

## webpackのメリット
多くのCSSやJavaScriptなどのファイルを1ページで読み込むとリクエスト数が増加してしまうため、
ページの表示速度が遅くなるなどのデメリットがあります。
それをwebpackを使って、1つのファイルにすることでリクエスト数が減り、ページ表示速度が速くなるなど
のメリットを得られます。
同時に最終的に1つにすれば良いので、開発時はファイルを分割して管理することも可能なので、開発効率の
アップにもつなが

Node.jsでパスワードを暗号化 | mongoose , Express, MongoDB

`mongoose-bcrypt` をいれる

“`Js
npm install mongoose-bcrypt –save
“`

`mongoose.Promise` を読み込んだ

“`js
mongoose.Promise = global.Promise;
mongoose.connect(config.database);
“`

`.plugin(require(‘mongoose-bcrypt’),{ fields: [‘password’] })` するだけでいい。

“`js
// get mongoose.Schema
var mongoose = require(‘mongoose’);
var Schema = mongoose.Schema;

// make user model and export
module.exports = mongoose.model(‘User’,
new Schema({
firstName: String,
lastName: String,
password: String

GitHub Actions上でPuppeteerを動かす

GitHub ActionsでPuppeteerを動かしたいなと思い試してみたメモです。

**結果、特にそこまで気にせずに起動してくれました。**

## 準備

割と普通ですね。

“`
yarn add puppeteer
“`

## プログラム

[GitHubのPuppeteer Headful](https://github.com/marketplace/actions/puppeteer-headful)のページを見ると`process.env.PUPPETEER_EXEC_PATH`でバイナリを指定しろみたいな記載があるけど、特に指定せずに普通インストールして使えました。

“`app.js
const puppeteer = require(‘puppeteer’);

(async () => {
const URL = `https://twitter.com/n0bisuke`;

const browser = await puppeteer.launch({});
const page = await browser.ne

Vercel上でPuppeteerを動かす

試してみたら動かせました。調べてもそれっぽいの無さそうだったのでメモです。

## 参考にしてるコードとお断り

ググったらこちらのプルリクが当たったので、こちらをもとに書いてますが、現状の公式なやり方かはわかりません。

> https://github.com/vercel/now-examples/pull/207/files

その他参考: [VercelでLINE BOTを動かす 2020年5月版](https://qiita.com/n0bisuke/items/a5f49193fa68f28a7f25)

## 実装

### chrome-aws-lambda + puppeteer-coreを利用

vercelはAWS Lambda上で動いてる模様なので、動作するChromium Binaryも[chrome-aws-lambda](https://github.com/alixaxel/chrome-aws-lambda)を使うと良いっぽいです。

また、バイナリはchrome-aws-lambdaを利用するということで、バイナリが梱包されてない[puppete

ESLint簡単導入 × VSCode

## node.js をインストールする

### ざっくりコマンド

“`bash
$ brew install nodebrew # HomebrewでNodeBrewをインストール

$ nodebrew setup # Nodebrewのセットアップ

$ nodebrew install-binary latest # 最新版のnode.jsをインストール

$ nodebrew ls # インストールしたnode.jsのバージョンを確認

$ nodebrew use v12.4.0 # ls で確認したバージョンを指定

$ echo ‘export PATH=/usr/local/var/nodebrew/current/bin:$PATH’ >> ~/.bash_profile # パスを通す(bashの例)
“`

参考：[MacにNode.jsをインストール](https://qiita.com/kyosuke5_20/items/c5f68fc9d89b84c0df09)
参考：[【2018年版】macのhomebrewでnodebrew入れてからnode.

Expressを使ってみた ~ Expressに「ようこそ」と言われるまで ~

# そもそも Express とは
Node.jsのWebアプリケーションフレームワーク

# express-generator
アプリケーションジェネレータツール。これを使うと、アプリケーションの骨組みを素早く作成できる

## インストールしてみる
“`vim
$ npm install -g express-generator
“`

## 実際にアプリを作るためには
– まずはヘルプ機能を確認

“`vim
$ express -h
“`
– さっそくExpressアプリを作成
– アプリ名：myapp
– viewエンジン：pug

“`vim
$ express –view=pug myapp
“`

– 依存関係をインストール

“`vim
$ cd myapp
$ npm install
“`
– アプリの実行

“`vim
$ DEBUG=myapp:* npm PORT=XXXX start
“`

– ブラウザで http://localhost:XXXX/ をロードしてアプリにアクセス

…すると！
Expressがすでにいい感じ

Node.js インストールからREPL、ファイル実行まで(mac)

#インストール
[nodejs](https://nodejs.org/ja/)
nodejsのサイトでDLしちゃいましょう。
ターミナルでやる方法もありますが、別でググって下さい。

“`
% node -v
v13.8.0
“`

インストールできたらターミナルで確認。npmも一緒にインストールされます。
npmはpythonでいうpipです。

“`
npm -v
6.14.5
“`

—
#Nodejs REPL

“`
$ node
>
> 3 + 2
6
>
“`

nodeシェルをうまく使うと開発にも役立ちます。
##便利なREPLコマンド
“`
.break セッション内でブロックから抜け出す
.clear セッション内でブロックから抜け出す
.editor 複数行のコードを書ける
.exit セッション終了
.help ヒントの表示
.load ローカルなファイルにアクセスする
.save セッションのコードをファイルに保存する
“`

—
#Node.jsでファイルを実行する

nodeの後にファイル名を指定することでJavascrip

【初心者】Puppeteerでよく使うコードベスト3

# はじめに
毎月末になると、ルーティンで作業工数の入力をしています。
JavaScriptで半自動で入力していて、５分ほどで入力出来ています。
が、憂鬱すぎるので全自動化することにしました。
ググって最初に目に付いたPuppeteerを利用します。
実際に利用してみてベースとなるコード、更によく使うコードがわかったのでQiitaに残します。

# コード
### 基本のコード
“`javascript:kihon.js
const puppeteer = require(‘puppeteer’);
// ID・アカウント認証する時はここでID・アカウント情報を読み込む↓
// 後述
// ID・アカウント認証する時はここでID・アカウント情報を読み込む↑

(async () => {
const browser = await puppeteer.launch({
headless: false, // ブラウザの動きを表示
slowMo: 50 // puppeteerの操作を遅らせる
})
const page =