Node.js関連のことを調べてみた2019年11月04日

サボテンでも分かる！SSR対応SPAアプリの作り方(React/TypeScript/Express)

Next.jsを使わないReactのSSR解説で分かりやすいやつが無かったので、書きます！

環境構築からとっても丁寧にやっていきます:cactus:

##最初に

### 読んで欲しい人

* 『**SSR**したいけど難しそう….:fearful:』

って人はもちろん

* 『何も分からないけど**SPA**が作ってみたい！:smiley:』

って人も実際に作って楽しめるように書いてます。

> **SPA** (Single Page Application) : ネイティブアプリ（AppStoreやGooglePlayからインストールできるやつ）っぽいWebサイトのこと。ReactやVueなどのJavaScriptフレームワークを使って作るのが一般的です。

初心者がReact+FirebaseでWebアプリを作成する④　～画像と入力値をまとめてアップロード～

③の続きです。
休日の間に連続投稿しておきます。
今回はFirebaseのStorageへ画像をアップロードします。

↓参考資料にした公式ガイド
https://firebase.google.com/docs/storage/web/upload-files?hl=ja

まずはfirebaseのStorageサービスを開始しましょう。
↑にアップロードしていきます。

↑初期値のセキュリティルールでは認証ができたユーザーのみアップロードできるようになっているので、ケースによってセキュリ

WEBでLINE風のチャットサイトを作る-その２

#はじめに
　[前回作成した](https://qiita.com/nstshirotays/items/cb06863dc7288c0fed25)基本的なインターフェースを拡充してチャットアプリとしての体裁を整えたいと思います。
　今回追加する機能は、ログイン機能とユーザー登録機能、簡易的なセキュリティ対策、スタンプ機能、画像アップロード機能です。
　　
#環境構築
前回に引き続きお手軽なクラウドサービスを使って環境構築を行います。

##Paiza Cloud
[Paiza Cloude](https://paiza.cloud/ja/)にアクセスしてメールアドレスを登録すると、すぐに環境構築ができるようになります。

リンク先
https://paiza.cloud/ja/

##サーバー作成
アカウントを作成したらサーバー作成ボタン

初心者がReact+FirebaseでWebアプリを作成する③　～Firebase Authenticationの認証機能を使ってみた～

②の続きです。

今回はfirebaseの認証機能を使って、ログインしたユーザーがだけが書き込みをできるようにします。

↓のGitHubのページを参考にしました。
https://github.com/firebase/firebaseui-web-react

その他参考。
https://firebase.google.com/docs/auth/web/manage-users?hl=ja
https://firebase.google.com/docs/auth/web/start?hl=ja

まずはfirebaseのAuthenticathionのログイン方法でGoogleとメール／パスワード認証を有効にしてみましょう。
TwitterなどはAPIを申請をしなければならないので無効にしています。

以下のnpmコマ

express-validator を使ってみたポイント

## はじめに
以前、 [Node.js](https://nodejs.org/en/) + [Express.js](http://expressjs.com/) で Web API を開発した際、 入力チェックに [express-validator](https://express-validator.github.io/docs/) を使いました。
express-validator は [validator.js](https://github.com/validatorjs/validator.js) がベースになっており、 validation や sanitize ができる便利なモジュールですが、提供されている API は文字列に対する検証になるため、 JSON パラメータの型を明確にチェックしたい場合には少し注意が必要でした。
今回は使用した際のポイントなんかを自分の整理がてらメモとして残します。

## 環境
OS: macOS Mojave 10.14.6
Node.js: 10.16.3
Express.js: 4.16.1
express-validator

【DynamoDB】LastEvaluatedKeyを使ってscanリクエストで全件取得

## はじめに

RDBMSを使っていると、allとかで全件取得出来て特に気にする必要がないのですが、DynamoDBでは1MBまでのデータ量の件数のみしか取得が出来ないので、知っていないとあれ全件取得出来ていない…みたいなことになり私のように痛い目にあってしまうので、自分への戒めの意味も込めて残しておきます。

情報ソース：[DynamoDB でのスキャンの使用](https://docs.aws.amazon.com/ja_jp/amazondynamodb/latest/developerguide/Scan.html)

## 環境

* Nodejs

## 実装

“`js
const AWS = require(‘aws-sdk’);
const DynamoDB = new AWS.DynamoDB.DocumentClient({region: “ap-northeast-1”});
const tableName = ‘hoges’;

module.exports.hello = async (event, context) => {
try {

初心者がReact+FirebaseでWebアプリを作成する②　～複数の入力を取得してデータベースに反映させる～

①の続きです。

①で作ったfirebaseのデータベースに、入力された値を登録するようにします。

ReactのstateとsetStateで入力値を受け取れるようにします。
例でstateでnameに空値’ ‘を入れておきます。

“`Javascript:App.js

class App extends React.Component{
constructor(props){
super(props);
this.state = {
name: ”,
}
}
“`

TextFieldを設けて、onChangeでgetNameメソッドを発動させsetStateを行うようにします。

“`Javascript:App.js
//メソッド定義
getName(event) {
this.setState({
name: event.target.value,
});
};
“`

“`Javascript:App.js
//returnの中

入門者のためのNode.js関連用語の意味と体系化（注意：間違い多し）

公式ドキュメントやQiitaの解説は入門者には意味不明だったので、翻訳するための知識が必要と思ってここにまとめておく。執筆者が勉強中により内容が頻繁に書き換えられます。

#個人的勉強中の関連記事
>**管理システム**
>　[Git](https://qiita.com/oekaki-hoho-ron/items/afa6786f2f845939a00e)
>　[npm](https://qiita.com/oekaki-hoho-ron/items/b815125dca07751b73e9)
>　[nvm](https://qiita.com/oekaki-hoho-ron/items/1d00183f96e64d817824)
>　yarn（勉強予定）
>　Homebrew（勉強予定）

>**データ定義**
>　JSON（勉強予定）
>　YAML（勉強予定）
>　XML（勉強予定）

>**フレームワーク**
>　[Node.js](https://qiita.com/oekaki-hoho-ron/items/ded73f301c7e749deb9f)
>　[React.js

Node.jsのパッケージマネージャの使い方(yarn)

##免責事項
この記事は初心者視点でザックリとした説明をしています。正確性に欠ける可能性がございますが、ご了承ください。「明らかに違うよ」ということがありましたら、ご指摘くださると幸いです。

##環境
OS：最新版ではないMacOS
VirtualBox：5.2.26
Vagrant：2.2.6
Ubuntu：ubuntu/bionic64 v20181129.0.0

##目次
1. yarnとは
2. yarnでパッケージのインストール
3. yarnでパッケージを作ってみる

#1. yarnとは
yarnとはNode.jsで使うパッケージを管理するものですが、
この説明をする前にパッケージについて説明します。

###パッケージ
パッケージはライブラリを包むもの。
パッケージマネージャはライブラリを包み、管理するものです。

###ライブラリ
ライブラリは先人が作った処理です。
汎用的な処理を実装する際に使います。
例えば、「複数の値の中で一番大きい数字がどれか判定したい！」という時があったとします。

ただ、この処理を1から作るのは、簡単そうにありません。

そこで、ライ

nodenvでinstall出来るnodeのバージョンを確認したら最新が出てこなかった時

nodenvでnodeのバージョンを管理していてnodeのバージョンを変える必要がある時

node 9.11.2 を node 12.12.0にしたいなど

“`
【インストール出来るnodeの一覧を表示】
nodenv install -l
“`

“`
【結果】
〜
12.12.0
chakracore-dev
chakracore-nightly
〜
“`

12.12.0がない

このようにnodeのバージョンが表示されない時は「node-build」が古いからだと思われ、ここにどうすればいいのか書いてあります
https://github.com/nodenv/node-build

“`
Upgrading
# Via Homebrew
$ brew update && brew upgrade node-build

# As a nodenv plugin
$ cd “$(nodenv root)”/plugins/node-build && git pull
“`

nodenvのプラグインとして使用しているのでcdを使ってnode-buildの階層ま

Node.jsでログにUser IDを自動出力

## 背景

ECサイトなどを運用する場合、ログにユーザの識別IDが付与されていると調査時に行動を把握することが容易なため便利です。
そこで今回はNode.js（Express）で実現してみたいとおもいます。

## 実装

### userId保持用の箱を準備
ログを出力する際、userIdを参照できるようにシングルトンなクラスを作成しておきます。

“`requestContext.js
class RequestContext {
init(userId) {
this.userId = userId
}

getUserId() {
return this.userId
}
}

export default new RequestContext()
“`

### Expressサーバ

下記の記述を、他のルーティングの上部に配置します。

“`express/app.js
import requestContext from ‘path/to/requestContext’

app.use((req, res, next) => {

Node.jsのCloud Tasksクライアントでタスク作成をリトライする

[Node.jsのCloud Tasksクライアント](https://github.com/googleapis/nodejs-tasks)を使っていると、たまにgRPCのエラーでタスクの作成に失敗することがありました。リトライのための設定がややわかりにくかったので、リトライする方法をまとめておきます。

## バージョン

– @google-cloud/tasks: 1.5.1
– google-gax: 1.7.5

## 設定方法

[ドキュメント](https://googleapis.dev/nodejs/tasks/latest/v2.CloudTasksClient.html#createTask)にあるように、 `CloudTasksClient.createTask()` の第2引数に [CallOptions](https://googleapis.github.io/gax-nodejs/interfaces/CallOptions.html) を渡すとリトライなどの設定を行えます。具体的な設定例は次の通りです。

“`js
const client = n

ant+をraspberry piで使う（node.js）

# ラズパイでant+を使います
参考
https://www.johannesbader.ch/2014/06/track-your-heartrate-on-raspberry-pi-with-ant/

#### 仕様物
– [AZ4U](https://www.amazon.co.jp/AZ4U-USB%E3%83%89%E3%83%B3%E3%82%B0%E3%83%AB-GARMIN%E4%BA%92%E6%8F%9B-ZWIFT-1%E5%B9%B4%E4%BF%9D%E8%A8%BC%E4%BB%98%E3%81%8D%E3%83%A1%E3%83%BC%E3%82%AB%E3%83%BC%E6%AD%A3%E8%A6%8F%E5%93%81/dp/B07FZHFLD6/ref=sr_1_1?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&dchild=1&keywords=az4u&psc=1&qid=1572531900&s=amazon-devices&sr=8-1)
– [ForeAthlete 235J](htt

Gulp環境構築にて「AssertionError [ERR_ASSERTION]: Task function must be specified」の原因はgulp v4にバージョンアップした事による仕様変更

始めての投稿です。
1. エラー内容、背景
2. 環境
3. 解決方法
4. 原因
の順に記載して行きます。

## 1. エラー内容、背景
gulpにてSassを自動コンパイルしたかったため、Homebrew、Node.js、gujpをインストール。
gulp自動監視を起動しようと、コマンド実行すると、

“`ruby:qiita.rb
‘AssertionError [ERR_ASSERTION]: Task function must be specified’
“`
と言うエラーが。

## 2. 環境
mac

– npm 6.7.0
– Node.js 12.13.0
– CLI 2.2.0
– gulp 4.0.3

## 3. 解決方法
**Node.js**と**gulp**のバージョンを下げる。

– Node.js 12.13.0
– gulp 4.0.3

　　↓

– **Node.js 11.15.0**
– **gulp 3.9.1**

Node.jsのバージョンの下げ方は、

“`ruby:qiita.rb
$ npm install -g n

さくっとデザインガイドを作成するための Fractal

突然ですが、デザイナーとエンジニアの間で一番多く共有されるものって何でしょう？
（おそらく）そうデザインテンプレートです。

[K.S.ロジャース](https://www.wantedly.com/companies/ks-rogers)の島袋です。

今回は、デザインガイドを作成するために [Fractal](https://fractal.build/) を使用してみた所感や使い方を書いていきたいと思います。なお、あくまでエンジニア主導と目線による使用感になるので、デザイナーから見た場合は少し違った感想になるかとは思いますのであしからず。

## デザインガイド作成のきっかけ
実は今回のデザインガイドはデザイナーとエンジニア向けではなく、HTMLほぼ初心者の方でもHTMLを構築できるようにするためでした。なので、導入部分のデザイナーとエンジニアの共有とは少し違いますが、分かりやすい指標を作る必要があったため、デザインガイドを作成しました。

簡潔に作成するためにいくつかのフレームワークを検討しましたが、一番導入が簡単そうな `Fractal` を使うことにしました。

## イ

Deno Style Guideを読み解く

## Deno – JavaScriptランタイムのネクストスタンダードか

Deno、いいですよねー。セキュアだし、TypeScript推しだし、標準モジュール志向だし。

## v1.0のリリースについて

未だv0.2ということで本番環境での利用は推奨されていません。
作者のライアン曰く2019年中にv1.0リリースすると公言しているそうですが、コミュニティの中では恐らく来年中頃くらいまではかかるのでは？という予想です。
まぁ正式リリース前のこのタイミングで各種情報をキャッチアップしておけばJS界隈で遅れを取ることはなさそうですね。

## Deno Style Guideとは

その名の通りDenoをコーディングする際の現時点でのベストプラクティスです。
リンクは[コチラ](https://deno.land/std/style_guide.md)。

Headless #GoogleChrome + #node puppeteer + #docker で Webページのスクリーンショットを作成する例

# Dockerfile

– ほとんど公式のtroubleshootingのまま https://github.com/GoogleChrome/puppeteer/blob/master/docs/troubleshooting.md
– `npm i puppeteer-core` がないと動かなかった気がするので追加している

docker で利用するには一筋縄でいくわけではないよー的なことが書かれている気がする

>Getting headless Chrome up and running in Docker can be tricky. The bundled Chromium that Puppeteer installs is missing the necessary shared library dependencies.

“`dockerfile
# https://github.com/GoogleChrome/puppeteer/blob/master/docs/troubleshooting.md

FROM node:10-slim

# Insta

n でバージョン管理

curl -L http://git.io/n-install | bash

n

n ls

再ログイン

$ npm cache clean
$ npm cache ls
$ rm -rf ~/.npm

echo “deb http://mirrors.kernel.org/ubuntu/ xenial main” | sudo tee -a /etc/apt/sources.list && sudo apt-get update && sudo apt install -y –allow-unauthenticated libpng12-0

cradle.js (0.7.1) が動かなかった話

cradle使おうとしたんです。
[node.jsから驚くほど簡単に使えるNoSQLサーバ Couchbase(CouchDB)を試す!](http://wise9.jp/archives/4291)

を参考に、expressのバージョンが上がってるからちょこちょこ修正しつつ、さてDB編集だと言った時にこんなエラーが。

“`
C:\home\minori\program\js\app4\node_modules\cradle\lib\cradle.js:316
if (! o.__lookupGetter__(attr)) {
^

TypeError: o.__lookupGetter__ is not a function
at C:\home\minori\program\js\app4\node_modules\cradle\lib\cradle.js:316:21
at Array.forEach ()
at C:\home\minori\program\js\

express がいつのまにかバージョンアップしてた

なので、今新しくexpress のシステム作ろうとして WEB に出回っているコードをコピペしても **全然** 動いてくれません。

https://expressjs.com/ja/guide/migrating-4.html

とりあえずこれを参照すればなんとかなると思います。