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

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)

# 使い方
画

GitHub Packagesで複数パッケージを1リポジトリに登録する

自分で作ったパッケージをnpmに登録するのは怖いのでどこか良い置き場ないかと思ったら、GitHubがnpmなどのパッケージの置き場として使えるようになっていたことを知った。

ここでは、npm向けのパッケージをGitHub Packagesを使って、GitHub上の1つのリポジトリに登録する手順をまとめる。(基本的には「[GitHub Packagesについて](https://docs.github.com/ja/packages/publishing-and-managing-packages/about-github-packages)」の手順に従えば良い)

# GitHubリポジトリのPAT作成
まず「[GitHub Packagesについて](https://docs.github.com/ja/packages/publishing-and-managing-packages/about-github-packages)」の「[トークンについて](https://docs.github.com/ja/packages/publishing-and-managing-pac

Vue.jsでBootStrapをつまみ食い的に使う

# 概要

Vue.jsのVue CLIからBootStrapを使う方法。

「BootStrapを使おう！さぁ先ずは基本を学ぼう」と構えて臨むのではなく、「このデータ構造の表現にちょうどよいUI無いかな？　お、BootStrapのxxのコンポーネントが良さ気じゃん」と**気軽**につまみ食いで使う、ことを目指すとする。

# サンプルに用いるデータ構造

次のような配列データを、Vue.jsを用いたUIで表現する場合を考える。
表示対象は「`datetime, type, notes`」の３つとする。

“`
activitylist = [
{
id: 5,
datetime: “1596229200”,
type: 1,
notes: ‘翌日の6時に起きたとする’
},{
id: 4,
datetime: “1596223800”,
type: 1,
notes: ‘翌日の4時半に目が覚めたとする’
},{
id

IBM Cloud Functions でLINEとSlack連携させてみた

# はじめに
この記事は、LINEとIBM Cloud Functionsを連携したSlackへの通知機能を作ったので、3回に分けて紹介したい記事の第3回になります。
　第1回：[IBM Cloud Functons 動かしてみた](https://qiita.com/katahiro/items/4b515c12e42e98e17eb7)
　第2回：[IBM Cloud FunctionsでNode.jsのパッケージを利用してみた](https://qiita.com/katahiro/items/1d483030527367338574)
　第3回：[IBM Cloud Functions でLINEとSlack連携させてみた](https://qiita.com/katahiro/items/298eac9c0fa875333d84) ← この記事

## なんでLINEとSlackを連携させようと？？
近年、自社の社内コミュニケーションツールがSlackに移行したのですが、それ以前からチームメンバーの他愛のないやり取りをLINEで行っていました。協業するベンダーさんも含まれてお

IBM Cloud FunctionsでNode.jsのパッケージを利用してみた

# はじめに
この記事は、LINEとIBM Cloud Functionsを連携したSlackへの通知機能を作ったので、3回に分けて紹介したい記事の第2回になります。
　第1回：[IBM Cloud Functons 動かしてみた](https://qiita.com/katahiro/items/4b515c12e42e98e17eb7)
　第2回：[IBM Cloud FunctionsでNode.jsのパッケージを利用してみた](https://qiita.com/katahiro/items/1d483030527367338574) ← この記事
　第3回：[IBM Cloud Functions でLINEとSlack連携させてみた](https://qiita.com/katahiro/items/298eac9c0fa875333d84)
今回は、アクションにNode.jsのパッケージを利用して、より自由な処理を作れることを紹介したいと思います。

# 用意するもの
– Node.js のプログラムの開発環境(筆者は `VSCode` を利用します)
– [IBM Cl

npx create-react-appで”Error: EPERM: operation not permitted, mkdir ‘C:\Users\〇〇 ‘ command not found: create-react-app”

## 概要
node.jsをインストーラーで入れ直して直後、`npx create-react-app hoge`をした時に、

“`
Error: EPERM: operation not permitted, mkdir ‘C:\Users\〇〇 ‘
command not found: create-react-app
“`

と出た時の対処法の覚書。

## 環境情報
Windows10
node.js v12.18.3

## 原因
create-react-appをすると、node.jsは自身のインストール場所に関わらず、デフォルトでC:ドライブのAppDataにcacheフォルダを作ろうとします。もしPCの名前に半角スペースが入っているとフォルダの作成に失敗するためエラーが生じます。

## 自分が行った対処法

“`
npm config set cache <任意のpath> –global
“`
としてcacheフォルダをパスに半角スペースを含まない場所に変えてやるといけました。
正直なところ **`–global`は必要なのかわかりませんが** ノリで

GLTFモデルをNode.js上のヘッドレスなthree.jsで読み込み3Dの計算を行う(レンダリングは行わない)

# 概要

* Node.jsで3Dの計算だけしたい
* 画のレンダリングは不要
* Raycasterによる当たり判定程度まではできることがわかった、それ以上は未検証

# 時間がない人向けの内容ざっくり(tl;dr)

* GLTFLoaderをNode.js上で動くように改変することが必要
* BufferをUint8Arrayに変換するメソッドの追加
* それに伴うparseメソッド内でのmagic周辺の改変
* 改造したGLTFLoader.parseにfs.readFileSyncしたBufferを食わせる
* callbackの引数にオブジェクトが返るので、通常のGLTFLoaderのときのように、THREE.Sceneにロードできる

# 動機

シンプルなWeb上で動くオンライン3Dゲームを作りたい。

オンラインなのでサーバが必要。

オンラインかつ3Dなので、3D位置情報が同期的である必要があるだろうと考えた。

またサーバ側でマスタ3D位置情報を持つ必要もあるだろうと考えた。

# 前提

Web上で動く3Dゲームである以上フロントはThree.

現場に残る Vuex の map ヘルパーのコードベースを消し去り、 Vue 3 時代の型に追従するための CLI ツールを TypeScript Compiler API で実現する

## はじめに

Vue.js 製アプリケーションのレガシーコードベースにおいて、頻繁に課題となるのが mapGetters のような map ヘルパーのメソッドです。
これらはショートハンド的に使えて過去には便利なケースもありましたが、現在ではほとんど利用されることもなくなりました。

それもそのはず。現在のフロントエンド開発の主流となる言語は JavaScript ではなく TypeScript となっています。しかし、 map 系ヘルパーはその構造から任意の文字列を受け取った上でオブジェクトに影響を及ぼす形となっており、根本的に型システムとの相性が悪い存在です。
これを利用している限り、 Vue Component において map ヘルパーから this に生えたものは、型もつかなければそもそも this に生えていることすら TypeScript 側で検知できず、コンパイルエラーとなってしまいます。

そのため、今では Vue.js + TypeScript でのプロジェクトでは利用されることがほとんどなくなった map ヘルパーですが、記述時点で TypeScript が導

dyld: Library not loaded: /usr/local/opt/icu4c/lib/libicui18n.64.dylibエラーの対処法

npmを久々に実行しようとしたら、以下のエラーで使えなくなっていましたので、使えるようにする備忘録です。

“`
$ npm -g install パッケージ名
dyld: Library not loaded: /usr/local/opt/icu4c/lib/libicui18n.64.dylib
Referenced from: /usr/local/bin/node
Reason: image not found
zsh: abort npm -g install パッケージ名
“`

## nodeを再インストール

“`shell
$ brew reinstall node
“`

僕はHomebrewでnodeをインストールしていましたので、`reinstall`でnodeを再インストールすると解決しました。

## 環境

– macOS Catalina 10.15.5
– Homebrew 2.4.9
– Node.js 14.7.0

## 参考

– [npmのエラー解決「dyld: Library not loaded: /usr

WiiリモコンとヌンチャクとバランスボードをMQTTするぞ(1/2)

前回の投稿で、WiiリモコンをNode.jsから触れるようにしました。( [WiiリモコンをNode.jsから操ってみよう](https://qiita.com/poruruba/items/4f0d916703061e6205e8) )

今度は、WiiリモコンをMQTTに接続して、ブラウザから操ってみます。さらに、ヌンチャクやバランスボードにも対応させました。
以下の2回に分けて説明していこうと思います。

１．ヌンチャクとバランスボードにも対応させ、WiiリモコンをMQTTに接続する(今回はこちら)
２．ブラウザからWiiリモコンたちに接続する


完成するとブラウザからこんな感じで見えますが、それは次回の投稿で。先に、Webページのリンクを張っておきます。
　https://poruruba.github.io/WiiRemocon/ht

node.js + GitHub + Travis CI + Code ClimateでCI入門

## はじめに

この記事は、JavaScript開発でCI環境を導入するためのガイドです。
もしCI環境の導入に興味を持ったら、この記事を土台にみなさまの環境にあったCI/CDへ発展させてください。

### 対象となる読者

– JavaScriptで開発をしている
– CIという言葉を聞いたことがある
– テスティングフレームワークを使ったことがない
– バグ修正をしたら別の箇所でバグが出た
– 依存パッケージの更新作業に負担を感じる

この記事は、テスト自動化やCIに興味はあるが、まだ導入したことがない開発者を対象としています。

### 対象とする環境

– node.js 12.18.3
– jest 26.0

## CIとは / テスト自動化とは

[CI (Continuous Integration / 継続的インテグレーション)](https://www.redhat.com/ja/topics/devops/what-is-ci-cd)とは、短期間で開発ブランチを統合し続ける開発手法です。グループ開発では、開発者がそれぞれ作業ブランチを抱えます。その作業ブランチ

AWSサーバレスで（SPAではなく）画面遷移型のWebアプリをつくる

# 経緯
AWSサーバレスを採用してWebアプリ（画面）を作ることになりました。コンシューマ（一般ユーザ）向けの画面ではなく、企業向けの管理画面です。

メンバーの皆さんにReactとかを学んでいただく時間的な余裕はなかったため、SPAではなく、メンバーの皆さんに経験のある「画面遷移型」の構成にしました。

ただ、AWSサーバレスで画面遷移型のWebアプリを作る、という事例を見つけることができず、実現方式をあれこれ考える必要がありました。構成が固まるまでに悩んだことや、自分なりの解を記事にすることで、同じようなことに悩まれている方のヒントになればと思ってます。

# アーキテクチャ

ポイントは以下のとおりです。

* Lambdaでは[aws-

【GCP】【Firebase】 「Could not load the default credentials.」と出た場合の対処

#概要
Google Cloud Functions(Node.js)を実行したときに、GoogleAuthで「Could not load the default credentials.」と出た場合の対処方法

#コード

こんな感じのコードで、

“`js
const { google } = require(‘googleapis’);
const auth = new google.auth.GoogleAuth({
scopes: [‘https://www.googleapis.com/auth/cloud-platform’],
});
const authClient = await auth.getClient();
google.options({ auth: authClient });
“`

こんな感じのエラーが出る場合、

“`
Error: Could not load the default credentials. Browse to https://cloud.google.com/docs/authentica