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

Node.jsのインストールからReactNative+Expo＋Typescript環境を構築しようね(2020/08/13 LTS対応)

#初学者との開発プロジェクト始動！

初学者との開発プロジェクトを始めるにあたって
手順書をざっくり作成したのでここに書き留めます。

##概要
– Node.jsインスト―ル
– Expoインスト―ル
– ReactNative+Typescriptでプロジェクト作成

##バージョン(記事作成時LTS)

| – | Version |
|:———-|————:|
| Node.js | 12.18.3 |
| npm | 6.14.6 |
| expo | 3.24.0 |

##Node.js
①最新Nodeのインストーラをダウンロード
https://nodejs.org/ja/download/releases/

②実行
node.jsがインストールされているのでアプリ実行
→真っ黒の画面が出たらOK（以下でnodeと呼びます）

③確認
nodeにて「node –version」と入力してEnter
→v12.18.3と出力されたらOK

##次にExpo！！
#

JavaScriptのイベントループを理解する

## イベントループとは？

JavaScriptは**シングルスレッド**です。一度に実行できるタスクは1つだけです。つまり、

– 2つ以上の処理を並行して実行できない
– 2つ以上の関数を同時実行できない

ということになります。

例えば、10秒掛かるタスクを実行すると、他のタスクは10秒間待機しなければなりません。
JavaScriptはデフォルトでブラウザのメインスレッドで実行されるため、UI全体が動かなくなります。

では、**イベントループ**について解説していきます。
まず、V8などのJavaScriptエンジンやブラウザには、下記の画像の様に**コールスタック(Call Stack)**、**ヒープ(Heap)**、**タスクキュー(Task Queue)**、**Web API**と呼ばれる4つのメカニズムを備えています。


まずは、このメカニズムを簡単に説明していきます。

### Web A

【node.js】ルーティング設定ホーム画面表示させる。

##【ゴール】

###node.jsを使用して、対象のviewを表示させる。

##【メリット】
■node.jsの理解度向上
■JavaScriptの理解度向上

##【開発環境】
■ Mac OS catalina
■ Homebrew 2.4.9
■ mysql Ver 8.0.21

##【実装】

###作業環境作成
＊nodebrewをPC内にインストールしてください
＊npm をPC内にインストールしてください。

“`mac.terminal
$ mkdir js
$ cd js
$ npm init -y
$ npm install express
$ npm install ejs
$ touch server.js
$ touch app.ejs
“`

##ルーティング作成

“`js:server.js

// for using express
const express = require(‘express’);
const app = express();

// for path of view
function views() {
a

npm token createの結果をjsonで取得する

# TL; DR

`npm token create –json`

# 経緯

記事のタイトルとは関係ないけど、Node.jsのプログラム中からnpmアカウントのAuth Tokenを生成する方法で困ってた。

https://docs.npmjs.com/creating-and-viewing-authentication-tokens

ここにある`npm token create`以外にAPIが見つからないけど、`npm token create`はCLI上でインタラクティブにパスワードの入力を求めてくる。

これについては下記の方法で可能だということがわかった。
意外とお手軽で良かった。

“`javascript:main.js
const child = require(‘child_process’)
child.spawn(“npm”, [“token”, “create”], { stdio: ‘inherit’ })
“`

ということで実行してみたところ、パスワードも問題なく親プロセスから対話的に入力でき、トークンが生成できた。（トークン部分は隠してあ

npmでローカルにインストールしたコマンドを実行する

コマンドは“`./node_modules/.bin“`に集められています。下記のようにパスを指定して実行してください。

“`
% ./node_modules/.bin/jest
“`

チュートリアルのサンプルコードを実行しようとして、コマンドが存在しないエラーになりました。

“`
% jest my-test –notify –config=config.json
zsh: command not found: jest
“`

息子の可愛さを普及するために、AWS + LINEでBotを作った話

2020年7月、我が家に長男が誕生。
もう天使。かわいい。CMのオファー来るんじゃないのか？（親バカ）

親族・友人に息子を会わせて、可愛さを自慢やりたかったが、このご時世それも叶わず。。。
我が息子の可愛さを普及したい。どうしよう。

そうだ。我が息子の可愛さを普及するLINE Botを作ろう。

# 1. デモ
最初にご紹介。（かわいい）

# 2. 全体構成

2-1. LINEBotからWebHookでAPIGateway→Lambda実行
2-2. メッセージを解析して、返信用のメッセージと画像を

nodenvを使ってnode環境を作る

# はじめに

ちょっと仕事で AWS Lamdbaを使うことになりそうなので、いまさらながらお勉強。
WSL2のUbuntuに開発環境を作って、試してみようと思います。

## 環境
Windows 10
WSL2
Ubuntu 20.04 LTS

## nodenvをインストールする

git clone で必要なファイルを取得します。

“`bash
git clone git://github.com/nodenv/nodenv.git ~/.nodenv
git clone git://github.com/nodenv/node-build.git ~/.nodenv/plugins/node-build
“`

nodenvにパスを通します。

“`bash
echo ‘export PATH=”$HOME/.nodenv/bin:$PATH”‘ >> ~/.profile
echo ‘eval “$(nodenv init -)”‘ >> ~/.profile
source ~/.profile
“`

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

インストール可

スクワットしないとジェイソン・ステイサムに撃たれるLINE bot　～SQUAT or DIE～

Qiitaで「ジェイソン・ステイサム」というタグを密かに育んでいるたわちゃんです。
もちろん、今回も愛しのステイサムたんがテーマ！
ぜひ、最後までご覧ください♪

#今回のステイサム作品
自粛により13キロも太ってしまった私。
空いた時間にスクワットしたいけどヤル気が出ないので、スクワットしないとステイサムに殺●れるLINE botを作りました。
その名も「SQUAT or DIE」です。

#出来たもの

※キャプチャ撮る時LINE botの名前変えるの忘れてた・・・「SQUAT or DIE」です。
[](https://gyazo.com/2bcf07dfa0cccbbac697f7564b9205a8)

基本、私からの問いかけには一切無視というドＳ設定ですが、スクワット表明をすると反応してくれます。

ステイサムたんの命令は絶対・・・！すぐにスクワット開始です。
__ちなみにTシャツに反応した方は、そっとコメントください。_

【Node.js】Expoプッシュ通知を一斉送信するWebAPI｜配列を任意の数に分割をする

# はじめに
現在Expo ReactNativeを使ってネイティブアプリ開発をしています。
Expoを使ってプッシュ通知を送るためにプッシュ通知のTokenを1つ、１つPOSTリクエストを飛ばしてもいいのですが、Expoの仕様では最大100個のTokenをまとめてPOSTできる。そこでN個ずつに配列を分割して二次元配列にして処理する方法を紹介します。

# 例
以下のような長さ75の配列があるとする、それを10分割して余った分は10個未満になっても分割をする。
今回は長さ75の配列を10個づつ分割して二次元配列にする。

## 処理前

## 処理後
TypeScript + Node.jsプロジェクトにESLint + Prettierを導入する手順2020

# TL;DR

https://github.com/notakaos/typescript-node-base-with-eslint-prettier

完成形のソースコードはこちら↑

# この記事の趣旨

[TypeScript + Node.js プロジェクトのはじめかた2020](https://qiita.com/notakaos/items/3bbd2293e2ff286d9f49) で作成したTypeScript + Node.jsのプロジェクトに `ESLint` / `Pretiter` / `husky & lint-staged` を導入する手順を紹介します。

今回導入するツールとバージョンは以下になります。

項目 | バージョン
————|———–
ESLint | 7.6.0
Prettier | 2.0.5
husky | 4.2.5
lint-staged | 10.2.11

# 動作環境

node と npm はインストール済みとします。

“`sh
$ node

【共有用】Windows10PCにNode.jsをインストールする手順

本記事では、Windows10PCにNode.jsをインストールする手順を紹介いたします。

##Node.jsとは
サーバーサイドで動かすことができるJavaScriptです。

JavaScriptは近年多くのWebサイトで活用されており
例えばカーソルを当てるとメニューが飛び出したり

クリックすると画像が拡大するような
動きのあるWebサイトを作成するのに不可欠な言語です。

Node.jsはこのJavaScriptをサーバサイド（裏側の仕組み）で活用することができる仕組みになります。

**公式では以下のように書かれています**
Node.js はスケーラブルなネットワークアプリケーションを構築するために設計された非同期型のイベント駆動の JavaScript 環境です。 以下の「Hello World」の例では、たくさんの接続を同

【Node.js 超入門】Node.jsとExpessを使ってCRUD処理できるサーバサイドの実装をする！

# 【Node.js 超入門】Node.jsとExpessを使ってCRUD処理できるサーバサイドの実装をする！

【Node.js 超入門】という参考書を読んで、Node.jsで実装した内容を備忘として書きます。

今回は、データベースを使って画面からユーザ情報を登録、更新などCRUD処理できるアプリケーションを作成します。
メインとしてNode.jsとExpressを使い、サーバサイドの処理を作ります。
データベースはMySQLを使います。

大まかな流れとしては、
・環境構築
・コード実装
・動作確認

続きはこちらの記事にまとめています！
https://masa-enjoy.com/nodejs-learning1

Alibaba Cloud ECSへのNode.jsのインストールと設定

このチュートリアルでは、**Alibaba Cloud ECS**インスタンスに**Node.js**をインストールして設定します。

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

#前提条件
– Alibaba Cloud [Elastic Compute Service (ECS)](https://www.alibabacloud.com/product/ecs?spm=a2c65.11461447.0.0.3a412358EaeWFK)を有効にし、有効な支払い方法を確認する必要があります。新規ユーザーの場合は、新規アカウントで[300ドル～1200ドル相当のAlibaba Cloudクレジットを獲得](https://www.alibabacloud.com/referral?spm=a2c65.1146

【Deno】denonを利用してのscripts管理

## 背景
– Deno利用時に以下の点が気になったため、Node同様に可能なのか調査することに。
– `deno run –allow-net –allow-read server.ts`のような実行コマンドの長さを簡略化して、各種権限管理をしたい。
– **npm scripts**のように各環境や種類毎に管理できるようにしたい。
– Nodeでのnodemonのようなオートリロード環境の仕組みにしたい。

## 結果

### denon
– 調査の結果、上記3つの要望が可能である[denon](https://deno.land/x/denon@2.3.2)を導入することに。
– denonとは、[nodemon](https://github.com/remy/nodemon)のdeno代替であり、柔軟かつ高機能に設定が可能なツール。
– 設定ファイルは、以下の3つの形式で記述することが可能。
– json: `denon.json`
– typescript: `denon.config.ts`
– yaml: `denon.yml`

###

Nuxt + ExpressでDockerの状態を見てみる

## 自己紹介
[Ateam Lifestyle Advent Calendar 2019](https://qiita.com/advent-calendar/2019/ateam-lifestyle) の7日目は
株式会社エイチームライフスタイル 名古屋開発部でエンジニアとしてアルバイトをしている @takaHAL が担当します！

## 概要
Nuxt.js と ExpressでAPIを作ってDockerの状態を取得してみます。

利用したもの　

– Nuxt.js (v2.12.0)

– Vuetify.js

– Express

– Docker

## プロジェクト作成
“`
$ yarn create nuxt-app dockerstatus
“`

いくつか質問されますが下記を選択しました

? Choose custom server framework

– Express

? Choose UI framework

– Vuetify.js

ディレクトリ移動 します

“`
$ cd dockerstatus
“`
##

【初心者向け】Vue+API Gateway+LambdaでサーバレスWebアプリを作った際に遭遇した問題

#概要
「AWSを使って、サーバレスアプリを作りたい！」と思い実践したのですが、Lambda関連で結構な壁があったので備忘がてら残します。

ハマりポイントは以下3つ。

– LambdaのResponseは特定のJSON形式でないとNGな話
– API連携の際に、CROS Policyでエラーになった話
– APIに認証を噛ませる際は、accessTokenではなくidTokenを使用する話

##LambdaのResponseは特定のJSON形式でないとNGな話

今回はフロントサイドはvueで作成、そこからAPIGatewayを通してLambdaのFunctionを呼び出すという構成でした。
このFunctionの返却の仕方は何でもよい訳ではなくJSONの形式が決まっています。

参考：https://aws.amazon.com/jp/premiumsupport/knowledge-center/malformed-502-api-gateway/

以下は、Lambdaを通してTwitterに投稿する関数の例です

“`js

exports.handler = (e

Next.jsで静的HTMLエクスポートしたアプリをローカルで確認する方法

## 経緯
[Next.jsの静的HTMLエクスポート機能（Static HTML Export）](https://nextjs.org/docs/advanced-features/static-html-export)を使うと、サーバーにNode.jsを必要とせずに、クライントのみで実行できる静的HTMLにアプリを出力することできます。

ただし、`create-next-app`でスキャフォールディングしたプロジェクトに用意されている`dev`コマンドで起動したアプリはサーバーサイドレンダリング（以下SSR）が有効になっており、静的HTMLのみの確認ができません。

そこでNext.jsで静的HTMLエクスポートしたアプリをローカルで確認する方法を調べました。

## 確認環境

– Node.js – 12.4.1
– Next.js – 9.5.2

## 設定方法

サンプルプロジェクトを作成します。すでに作成済みの場合は飛ばします。

“`bash
$ npx create-next-app my-static-site
$ cd my-static-site
“

eject後のwebpack.config.jsを１から読み解いてみる①

## はじめに
最近ReactやGraphQL, TypeScriptの環境構築をやっているのですがWebpackがあまりに難しすぎて挫折しかけたのでWebpackに対する苦手意識をなくすためにもwebpack.configの内容を１から調べていこうと思います。僕と同じくWebpackの内容の多さに絶望した方の助けになれば幸いです

## 動作環境
– npm 6.14.5
– node.js 14.3.0
– create-react-app 3.4.1

## Ln1-Ln51
“`javascript
use strict
“`
strictモードの呼び出し
– 一部の問題が起こりやすいコードをエラーとして処理する
– javascriptの処理を高速化する

strictモードについて細かく書くとそれだけで１記事分になりそうなので細かい違いは[こちら](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Strict_mode)をご参照ください

“`javascript
const fs = re

Teachable Machineで学習したデータをNode.jsでシンプルに利用する

# いい感じのサンプルがなかった
[node-red](https://www.npmjs.com/package/node-red-contrib-teachable-machine)や[enebular](https://enebular.com/)とはTeachable Machineの連携が結構あったり、フロントエンド側ばかりたったので、Node.jsで画像ファイルを読み込んで判定するシンプルな実装をメモ

https://www.npmjs.com/package/@teachablemachine/image
ここもやはりフロントエンドのサンプルしかなくて…

https://www.tensorflow.org/js
tensorflowをそのまま利用しようとも考えたけど、もっとTeachableMachineに特化して使いやすくできるのでは…

# インストールしたもの

– @teachablemachine/image: 0.8.4
– @tensorflow/tfjs: 2.1.0
– canvas: 2.6.1
– jsdom: 16.4.0

“`sh
np

GithubのプロフィールにTwitterのツイートを表示する

# はじめに
今年になってからGithubのプロフィールに好きな文面を追加できる機能が追加されました。
既に色々なサービスが開発されていています。

# プロフィールに最新のつぶやきを載せたい！
唐突ですが、プロフィールページにつぶやきを載せることはできないかなと思い、調べてみました。

# どうやって載せる？
結論としては、以下のように実装しました。

1. Twitter APIを叩いて、ツイートを取得する
2. 取得したツイートをSVG形式に変換
3. これらのコードをVercelでホスティング
4. README.mdにSVGへの画像リンクを追加

# サンプル
## 出力画像（SVGからPNGに変換済み）

## 動作しているページ
[github.com/gazf](https://github.com/gazf)

# 使い方
画