f@ctor

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

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

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 作ったもの
![operation.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/74780/e02c5238-29da-8117-1f56-baf69bbcf13c.gif)

ソースコードは[こちら](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 =

元記事を表示

(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などの画像ファイルに変換する方法について記載してます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/203061/70d6b2e7-2573-89c4-171c-9350897be705.png)

## 解決したコード

* `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

元記事を表示

[混ぜるな危険] npmに関して

[症状] なぜかnext/Imageが動作しなかった
[原因] node_modules/sharpのバイナリが’win32-x64’になっていた為、’linux-x64’環境では動かなかった。
[解決] 手動でnode_modules/sharpを削除し、再度`npm install sharp`を実行
[教訓] デュアルブート環境でReactを使う際には、OS毎にディレクトリを分ける。

元記事を表示

Twitter API v2でユーザー名から最近のツイート”URL”(ここ重要)一覧を取得

アプリというより、ツイートを埋め込んだプレーンな文書を作りたい時のために書きました。**URLさえあればWordPress等が勝手に埋め込んでくれる**ので、別にURLだけでいいかなと。

## 結果(2021/02/05現在)
“`

Minecraftの先週のツイート一覧

https://twitter.com/Minecraft/

元記事を表示

pkgenというパッケージジェネレーターを作った

# 概要
https://github.com/overgrow-crops/pkgen
yamlで書かれたパッケージのツリー構造の設計図を元に
パッケージを生成します。

コマンドとしては下記の3種類だけですが非常にパワフルなツールかと思います。

– pkgen
– pkgen template
– pkgen lang

# 使ってみる

### インストール
“`shell
$ curl -O -L https://github.com/overgrow-crops/pkgen/releases/download/v0.2.0/pkgen
$ chmod +x ./pkgen
$ mv ./pkgen /usr/local/bin
“`

### 確認

“`shell
$ pkgen -v
$ pkgen/v0.2.0 darwin-x64 node-v14.4.0
“`

### プロジェクトルートで
初回の`pkgen`実行はプロジェクトディレクトリに`pkg`ディレクトリと`.pkgen.yml`を作成します。
ユーザのホームディレクトリに`.pkgen`ディレ

元記事を表示

Angular.jsでプロジェクトを作ってみた

## サクッとAngular.jsでプロジェクトを作るところまでやってみる

### 環境

“`
C:\>node -v
v12.13.1

C:\>yarn -v
1.22.5
“`

以前、Vue.jsのプロジェクト作る際に、
インストール方法に少し触れているので、
インストールしていない場合は、[そちら](https://qiita.com/orihara-private/items/f3db337cb752997ae1dc#yarn-nodejs%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB)を参照。

## angular-cliのインストール
angular.jsのプロジェクトを作るために、
angular-cliのインストールを始める。

コマンドプロンプトを開いて、任意のパスにて、以下コマンドを実行する。

“`cmd
$ yarn global add @angular/cli
“`

今回は、インストールしたら以下のversionだった。

“`
C:\>ng –versi

元記事を表示

package.jsonとpackage-lock.jsonの違い

#package.jsonとは
アプリが依存しているパッケージの種類やバージョンなどの情報を記録するJSON形式のファイル

npm initで生成できる
—yesオプションでデフォルト値のファイルをpackage.jsonできる
簡易的な学習用途であればデフォルトで問題ないと思います。

#package-lock.jsonファイルとは
npmがインストールしたパッケージの実際のバージョンを記録するためのファイル

なぜpackage-lock.jsonファイルは必要なのか?
再度npm installした時に異なるバージョンがインストールされるのを防ぎます。

ちなみに、
node_modulesは
npm install したパッケージが配置されているディレクトリです。

元記事を表示

Nodejs のためになる話、ORMライブラリを使わずにsqlの内部結合

どうもこんにちは、マッスルエンジニアの真です。

今回も有益なお話をさせてもらえたらと思います。

内容はORMライブラリを使わずに内部結合させて、データベースの従属関係もつくっちゃうって
やつです。

早速説明します。

app.get(‘/staff_shift’, wrap(async (req: Request, res: Response, next: NextFunction) => {

//データベースの構成は無視してください
const staffs: {
id: number,
name: string,
email: string,
date: number,
shift:string,
}[] = await pool.query(`
SELECT
user.id AS id,
user.name AS name,
user.email AS email,
staff.

元記事を表示

【Node.js】インストール済みNode.jsのバージョンを変更する

# はじめに
この記事では、gulpのプラグイン導入時に詰まった原因と、
npmパッケージの1つである「__n__」の導入方法や、
Node.jsのバージョン変更の方法についてメモ程度に記載しています。

# 対象読者
– Node.jsを既にインストールしている方
– Node.jsの旧バージョンを利用したい方
– Macを利用している方（Windowsはサポート外のため）

# 私の環境
– OS: macOS Catalina Version 10.15.7
– Node.js: v15.8.0
– npm: 6.14.10
– gulp: CLI version 2.3.0
– gulp: local version 4.0.2

# 今回の状況

学習でhomebrewを利用してNode.jsをインストール。(2021/02/03時点ではv15.8.0)
npmを利用して各種ライブラリのインストール方法等を学習中。
gulpとそのプラグインをインストール中にエラーがでた。
(具体的には下記プラグインの内、gulp-sassのみエラーが出てインストールできなかった)

– br

元記事を表示

Reactの環境構築してGitHubに連携させる

※作ったファイルはGitHubで公開しています(リンクは後半で)

#背景
ASP.NETの学習をしている際にvisual studioではReactでのテンプレートが組み込まれており、フロントエンド側の設定をReactにした場合の為にゼロから環境構築をしてみようと思った為。
ゼロから環境構築してみた際に、GitHubに連携した状態にも出来たので、そんな環境構築を考えている方は是非読んでみてください

##~始める前に~
この記事は [React環境構築【for mac】](https://qiita.com/EZ_Denta/items/9e6a47f330b5a01806ae “react”) を参考にして自身の環境構築をしていた後に、errorで詰まるところが幾つかあったので、それを解消できたよ。という内容になっています

##環境
– Mac (macOS Big Sur 11.2)

##0.1.0 始める前の現時点での環境確認
Node.jsとnpmのがセッティングされているのかどうかをバージョン確認からチェックしましょう

“`terminal:terminal
$

元記事を表示

OTHERカテゴリの最新記事