Node.js関連のことを調べてみた2021年02月09日

【Firebase】サイトを公開する方法

## 手順

1. [firebase](https://firebase.google.com)　←こちらからfirebaseのサイトに行ってGoogleアカウントでログインする。

2. firebaseのコンソールで、サイトを管理するプロジェクトを作成する。
3. 自身のパソコンのデスクトップなどに先ほど作成したプロジェクト名と同じ名前のフォルダ(管理しやすいため)を作成する。(例:MyPortforioなど)。
4. そのフォルダの中に、公開したいサイトのフォルダを移動、またはコピーする。(※firebaseにアップロードすると全てのファイルが公開されてしまうため、みられたくないファイルは入れないようにする。)
5. [node.js](https://nodejs.org/ja/) をインストール。
6. ターミナルにて`node -v`、`npm -v`を実行し、node.jsとnpmがインストールされているか確認する。
7. firebaseのコマンドラインツールを、npm(Node Package Manager)を使って導入していく。管理者権限で導入したいので、コマ

配列とオブジェクトの扱いについての考察

#配列とオブジェクトの出力についてまとめてみた
題材

“`javascript

①　data[[“a” , “b”]]
②　data[“a” , “b”]
③　data{“a”,”b”}
“`
上記の取り扱いについて

###①data[[“a” , “b”]]//配列の中に配列が入っている。

“`javascript

data[[“a” , “b”]]
//呼び出す時は
console.log(data) //[[“a” , “b”]]
console.log(data[0]) // [“a”,”b”]
console.log(data[1]) // undefined
“`
###②data[“a” , “b”] //基本の配列

“`javascript

data[“a” , “b”]
//呼び出す時は
console.log(data) //[“a” , “b”]
console.log(data[0]) //a
console.log(data[1]) //b
“`
上記①、②は変数名（data)か変数名にインデックスを使用して呼び出す（data[n]

Webstorm + WSLでnode.jsやyarnを使う

# まえがき

普段 **React** や **Vue** を触るなら、Windows上にnode.jsを入れて動かせば十分ですが、
実環境で動作テストしたいとか、Linux上にある何かしらのライブラリを叩きたいときには不便です。

Ubuntu内にIDEをインストールしてXServとかで飛ばすのもナシではないですが、
WSL上でGUIを動かすと重かったりなんとなくイマイチな感じです。

ということで、Windows上でのWebstormにWSLを繋いで環境構築を行ってみました。
基本的にはかなり簡単ですが、yarnだけコケがちなので注意です。

# 前提

以下の環境があることが前提です。

* WebStorm (Windows上)
* WSL2が動作する環境 (今回はUbuntu 20.04を使用)

# WSL環境へのnode.jsのインストール

とりあえずWSL上にnode.jsが入っていないことには始まりません。

[パッケージマネージャを利用した Node.js のインストール | Node.js](https://nodejs.org/ja/download/pac

Amplifyをシンプルなライブラリとして使うサンプル

# 対象
Amplifyを使ってAWSのサービスを簡単に叩きたい人

# 準備
任意のディレクトリで

“`
npm init
“`
からの

“`
npm i aws-amplify
“`
としておきます。

# Amplifyライブラリの仕組み

amplify addやらでサービスを構築していくと、amplifyのconfigが自動的に構成されて、気が付かないうちに便利なツールになっているのが特徴です。
逆に言えばこれらを自分で書いてちょっとした便利ツールとして使うことも可能です。
Cogmnitoの認証やAPIの呼び出しなど、Amplifyライブラリを使用したほうが断然楽です。

例えばサインインでは

“`javascript

const Amplify = require(‘aws-amplify’)

const config {
“aws_project_region”:”ap-northeast-1″,
“aws_cognito_identity_pool_id”:”ap-northeast-1:0000000….”,
“aws_cogn

【GCP】7 PERMISSION_DENIED: Missing or insufficient permissions

CloudFunctions for Firebaseでローカルエミュレーターではfires-tore へデータの登録ができるが、deployしてクラウドから実行すると下記のエラーが出ていた。

>7 PERMISSION_DENIED: Missing or insufficient permissions

ここを参考にFirebase Admin SDKのserviceAccountKeyを設定する
https://firebase.google.com/docs/admin/setup?hl=ja

Firebaseコンソール → （左上の）設定 → サービスアカウント
から、

新しい秘密鍵の生成
xxx.json
を任意の場所へ配置する。

“`
var admin = require

macOS 11.2 で M1 native な node を動かす

M1 Mac で macOS Big Sur 11.2 に更新したら M1 native な node が壊れたので、ソースを変更して動くようにしたメモです。

## 現象

homebrew で最新版の node v15.8.0 を入れて React での開発に使ってましたが、macOS を更新したら create-react-app で作ったプロジェクトで `yarn start` がクラッシュするようになりました。(create-react-app を使わずに `webpack serve` してれば大丈夫なようですが…。)

エラーを見る

“`
Starting the development server…

#
# Fatal error in , line 0
# Check failed: allocator->SetPermissions(reinterpret_cast(region.begin()), region.size(), PageAllocator::kNoAc

【Express】.envファイルとHerokuの環境変数を同期する方法

#プログラミング勉強日記
2021年2月8日

#前提条件

– すでにHerokuに環境変数が設定されている

まだ環境変数を設定していない場合は、[【Heroku】Herokuで環境変数を設定する方法](https://qiita.com/mzmz__02/items/64db94b8fc67ee0a9068) から環境変数を設定してみてください。

#Herokuの環境変数と.envファイルを同期する方法

##1. heroku-configをインストールする

“`
$ heroku plugins:install heroku-config
“`

##2. Herokuの環境変数を.envに同期する

“`
$ heroku config:pull
“`

“`:値を上書きしたい場合
$ heroku config:pull –overwrite
“`

“`:.envを編集して環境変数を上書きしたい場合
$ heroku config:push
“`

npmに公開する前に、パッケージの動作確認をする方法

## はじめに

`npm publish` で公開する前にパッケージを確認する方法として、以下の 2 つがありそうです。

– `npm link` で、開発中にパッケージの動作確認を行う
– `npm pack` で、`npm publish`で公開される内容を事前に確認する

それぞれ見ていきます。

## 環境

npm: 6.14.10

## 開発中にパッケージの動作確認を行う

npm-link を使うと、ローカルの別のパッケージから、確認したいパッケージを呼び出すことができます。

> npm link (in package dir)
> npm link [<@scope>/][@]
>
> alias: npm ln

引用: [npm-link](https://docs.npmjs.com/cli/v6/commands/npm-link)

npm-link は次の 2 ステップで行います。

### 1. 参照したいパッケージで、`npm link`を実行する

参照したいパッケージで`npm link`を実行すると、グローバル

【Mac】node_modulesを全削除するコマンド

自分はこれで30GBの容量確保に成功しました。

## コマンド

* カレントディレクトリ配下のnode_modulesが全て削除されます。適切なディレクトリで実行してください。
* コマンドを改変する際は自己責任でお願いします。

“`sh
find ./ -name “node_modules” | xargs rm -rf
“`

管理者権限はつけない方がいいですが、`permission denied` が出る場合は自己責任でお願いします。

Electron で ES Modules を使う。

# 概要

`Node.js`が`ES Modules`(以下`ESM`）をサポートするようになったので、`Electron`のメインプロセスでも`ESM`を使いたいというニーズが[当然のように出てきました。](https://github.com/electron/electron/issues/21457)
そこで[`Electron`のクイックスタートガイド](https://github.com/electron/electron-quick-start)を改変して、メインプロセス(`main.js`) で`ESM`をインポートできるようにやってみましたのでその方法を紹介します。ただし今のところ少し問題があるので、補足2を読んだ上で実際に使うかどうかは判定してください。

# 準備

[Electron Quick Start](https://github.com/electron/electron-quick-start)をクローンしてそのフォルダに入ります。

“`
$ git clonen https://github.com/electron/electron-qu

Nodeのバージョン管理ツールVOLTA⚡

## WindowsのNodeバージョン管理を探して三千里

みなさんWindowsのNodeのバージョン管理ってどうしてますか？

私はNodistを使っていたのですが、WSL環境と相性が悪い（npmのコンフィグが一部Windowsのパスと混在して壊れた）ので、ひとまずWinもLinuxも同じ管理ツールがないものか、と探していたところ、VOLTA⚡がRustで書かれていて早いしマルチプラットフォームだぞ、ということで使用してみました。

## VOLTA Install

新進気鋭なためか、MS開発の新進気鋭のパッケージ管理ツールWingetや毎度おなじみChocolateyには残念ながら対応していません。

そういうわけで[GitHubからインストールしよう](https://github.com/volta-cli/volta/releases)。.msiファイルで良いでしょう。

今回入れたバージョンは1.0.1。メジャー昇格おめでとう。みたいなタイミング。

## Node Install

他のNodeバージョン管理ツールに付いているような現在のNodeのリストをババーンと

【Slack/Bolt】Slackアプリで自分のステータスを設定する

#1 作ったもの

ソースコードは[こちら](https://github.com/syoppylife/slack-set-status-app)

#2 この記事で書くこと
**書くこと**
* Slackアプリのコンソール上の設定箇所と関連しているソースコードの説明
* ハマったところ①（Slash ‘/’ コマンドによるアプリの実行）
* ハマったところ②（アイコンを選択した人が自分のステータスを変更できる条件/方法）
* このアプリの問題点
* 作成に至った背景

**書かないこと**

* slackアプリの作り方
* Block Kit Builderの使い方
* Boltについてや使い方
* Herokuの使い方

書かないことばっかですが、それぞれ以下をみていただければ問題ないと思います。
[Slackアプリの作成]

Node.js: JWT のペイロード部をデコード

次の記事を参考にしました。
[JWTクレーム・セット部分のデコード方法](https://qiita.com/hoshimado/items/615173e1cdb37a597aa0)

“`js:decode_jwt.js
#! /usr/bin/node
// —————————————————————
// decode_jwt.js
//
// Feb/07/2021
//
// —————————————————————
‘use strict’

const fs = require(“fs”)

// —————————————————————
var atob = (base64) => {
const buffer = Buffer.from( base64, ‘base64’ )
const utf8 =

JavaScriprt(Node.js)でAzureのVMを起動/停止(割り当て解除)する

# はじめに

JavaScriptのAzureSDKを使用してAzureにアクセスを行う手順です。
Microsoftのドキュメントを参照すれば分かることですが、「ちょっと動かしてみる」ができる記事があればと思い投稿しました。

既にAzureを使用してVMを使ったりしている方を対象としています。

# 本記事の動作確認環境
本記事は以下の環境で動作確認を行っています。

* Windows10 Professional 20H2
* WSL2.0
* Node.js v14.15.4
* azure-cli 2.0.81
* Python (Linux) 3.8.2 (default, Jul 16 2020, 14:00:26)

# 必要なもの
* Azureアカウント
* 持っていなければ作りましょう。
* https://azure.microsoft.com/ja-jp/free/
* 本記事ではVMの起動を例にしているので、VMが作られていると良いかもしれません。
* Azure CLI 2.0

(node.js) esbuildの開発環境を作成してみた

## やったこと

1. esbuildを試すべく、開発用の環境を用意
2. esbuild watchモードが使い辛かったので改善

## ちゃんと使えたか？
個人開発でクオリティはさておき、ちゃんと動いてくれました。（React×esbuild）
[補助金検索してみようWeb](https://subsidy-support-site.web.app/#/search_page)

## esbuildで困った点
普段webpackでバンドルしていますが、webpackと比較してこんな点、困りました。

### esbuildのwatchモードのログ出力が見辛い
完全に個人の好みかもしれませんが、esbuildのwatchモードのログはJSONな形式で渡されるので、そのままログに出力すると見辛かったです。見易く修正しました。

### 型チェックがない
普段webpackでは型チェックもやってくれていたので、esbuildで使えなくて初めて恩恵を実感しました。いざ開発してデプロイすると案外凡ミスが隠れているものです。これも対処しました。

## 環境
以下の構成で作成しました。

MacBook Pro ARM版のHomeBrew関連インストール

# この記事について
この記事は、主に開発を行う上で毎回調べてしまっている初回セットアップ(主にHomeBrewとか)の整理をするために作成しています。
実施端末がタイトル通りARM版となっております。その為、時が経てば手法が大きく変わる可能性があります。この記事通りに実施できない手順に関しては、その都度調べていただけると幸いです。

# 実施端末
“`shell
uname -v # Darwin Kernel Version 20.2.0: Wed Dec 2 20:40:21 PST 2020; root:xnu-7195.60.75~1/RELEASE_ARM64_T8101
“`
# 手順
## 1.Command line Tool for Xcode

“`shell
xcode-select –install
“`

## 2.Homebrew
ARM版Homebrewのインストール

“`shell
/bin/bash -c “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install

カスタム投稿タイプのフィールドをNode.jsで取得

カスタム投稿タイプのカスタムフィールドのデータを外部から参照します。

## 必要なもの

– [node-wpapi](http://wp-api.org/node-wpapi/installation/)
– [CPTUI](https://wordpress.org/plugins/custom-post-type-ui/)
– [WP REST API Controller](https://wordpress.org/plugins/wp-rest-api-controller/)
– [Application Passwords](https://wordpress.org/plugins/application-passwords/)
– [Basic Authentication handler plugin](https://github.com/WP-API/Basic-Auth)

## 投稿タイプ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/856236/b

Nodejsでbase64エンコードされた画像を復元する

## 概要

↓のように、`img`タグの`src`がbase64エンコーディングされていた場合に、Nodejsでjpegなどの画像ファイルに変換する方法について記載してます。


## 解決したコード

* `data:image/jpeg;base64,`の部分を取り除く。
* `fs.writeFile`メソッドにエンコーディングを指定する。

“`ts
import fs from “fs”;

const base64Str = “data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiAdHx8kKDQsJCYxJx8fLT0tMTU3Ojo6Iys/RD84QzQ5OjcBCgoKDQwN

Node.js: Firebase Auth のトークンの作成

次の記事を参考にしました。
[firebase authのユーザー情報からトークン情報を取り出す簡単なスクリプトをnodeでつくる](https://qiita.com/TanakanoAnchan/items/ce548c637bffb3c16687)

必要なライブラリーのインストール

“`bash
sudo npm install -g firebase
“`

“`js:get_token.js
#! /usr/bin/node
// —————————————————————
// get_token.js
//
// Feb/06/2021
//
// —————————————————————
‘use strict’

var fs = require(“fs”)
const firebase = require(‘firebase/app’)
const firebaseAuth = r

【shopify】Polarisを使用すると「Cannot read property ‘tapAsync’ of undefined」と言われる問題

## 前提

– polaris: “6.0.1”
– react: “16.14.3”
– react-dom: “16.9.10”

以下のチュートリアルを進めていたところ、、、

https://shopify.dev/tutorials/build-a-shopify-app-with-node-and-react/build-your-user-interface-with-polaris

## エラー

このようなエラーが出て、どうにもこうにも解決できませぬ、、、

“`terminal
> Ready on http://localhost:3000
error – ./node_modules/@shopify/polaris/dist/styles.css
TypeError: Cannot read property ‘tapAsync’ of undefined
“`

以下の部分をコメントアウトすると正常に動作するので、`polaris`のstyles.cssが正常にimportできていないようです

“`_app.js
…

import ‘@sh