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

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

【npm】キャッシュが壊れてnpm installに失敗する

# はじめに
久しぶりにcreate-react-appを叩いたら、失敗しました。
調べたことを簡単にメモメモ。
※認識間違っている所があれば、ご指摘お願いします。

# 現象
下記コマンド実行時にエラーが発生。
コマンド:
`npx create-react-app {プロジェクト名} –template typescript`

エラー:
`ERR! cb() never called!`

環境は以下の通り。
・OS :Docker上のUbuntu:20.04
・nvm :0.38.0
・node:14.17.4
・npm :6.14.14

# 原因
[まとめてくださっている記事](https://qiita.com/holdout0521/items/ebf836fc11e864177628)によると、どうやらnpmのキャッシュの不具合らしい。(キャッシュが壊れている?)
この現象は`create-react-app`に限ったものではなく、`npm install`でも発生するそうです。

#### npmのキャッシュとは?
[npmのDoc](https://docs.

元記事を表示

JavaScript: 画像から色を抽出してくれるColor Thief

[10 Trending projects on GitHub for web developers – 13th August 2021](https://dev.to/iainfreestone/10-trending-projects-on-github-for-web-developers-13th-august-2021-4bf2) で紹介されていた Color Thief というもの。

https://lokeshdhakar.com/projects/color-thief/#examples

https://github.com/lokesh/color-thief

「例」引用:
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93824/6e985eb5-208e-b8b0-7432-396c3d40d91f.png)

## 画像から色を抽出してくれる Color Thief

![image.png](https://qiita-image-store.s3

元記事を表示

Windowsでnodenvのインストールをするときに躓いたこと

「りあクト!」を読みながらWindowsで環境構築するときに初心者の私が躓いたことを紹介します。

## どのシェルを使えばいいのかわからない

これは Windows Terminal の Ubuntu を使えばよい。
この Ubuntu で anyenv のソースの取得と nodenv のインストールをする。
ちなみにユーザー名はエクスプローラから「//wsl$/Ubuntu/home/」を開けば確認できる。

## anyenv: command not found
nodeenvをインストールしようとしたらこのメッセージが出た。
解決策 → 再起動

##

元記事を表示

NodeJS+Parcelでjavascriptのタイムリーなデバッグを可能にする

# はじめに
 先日からTextAliveAppAPIの勉強をしており、APIの使い方まで分かるようになりました。しかし、実行環境がサンプルのままだったので、少し気持ち悪かったのです。そこで今回、自力で環境を構築しようと試み、苦戦し、理解したので記事にまとめたいと思います。

# この記事の対象者

* かなり初心者
* nodeJSのインストールが完了している人
* TextAliveAppAPIの開発環境を自前で作りたい人

 この記事は、nodeJSのインストールが完了しており、`npm`コマンドが使用できる方が対象です。また、ゼロからjavascriptの環境を構築する手順を書きます。かつ、TextAliveAppAPIのサンプルと同じ開発環境を整える手順で書きます。筆者の実行環境は、Windows10です。一応注意してください。

# この記事から得られる事

* javascriptのデバッグがタイムリー(保存→自動で反映)に行える

# 要約
 NodeJS上にparcelをインストールし、parcelからファイルを起動する。

# parcelの「? ホットモジュールリ

元記事を表示

Node.js fsモジュール a

まず最初に「fs」モジュールについて基本的な知識から身に付けていきましょう。
「fs」は、Node.jsでファイルを操作するための公式モジュールとして提供されています。

ファイルを新規作成したり、読み込み・書き込みから追記・削除まで、一般的に必要な機能はあらかじめ用意されています。そのため、Node.jsが使える環境さえあればすぐにでも実行することが可能です。

一般的なJavaScriptではあまりファイル操作を扱いませんが、Node.jsの場合はよく使う機能なので慣れておくようにしておきましょう!

基本的なファイルの読み書きについて
コードを書く前に、fsモジュールをrequireすることを明記する。
こうしないと使用できない。

“`
var fs = require(‘fs’);
“`

このように記述することで、以降は「fs」を使ってさまざまなファイル操作のメソッドを使うことができます。
そこで、ファイルを読み込むための「readFile」メソッドの書き方を見ておきましょう!

“`
fs.readFile(ファイルのパス, 文字コード, コールバック関数)
第1引

元記事を表示

文字コードを指定してハッシュ値を算出する(Node.js)

# Node.jsでハッシュ値を算出する
これは、私が業務でとあるAPIのリクエストを作成していた時のことです。

そのAPIは、ある文字列からハッシュ値を算出して、
そのハッシュ値が一致するかどうかで認証を行っていたんです。

だから以下のようなコードからハッシュ値を算出して、リクエストを投げて、
レスポンスを取得できていました。

“`js
const crypto = require(‘crypto’);

const data = ‘abcdefg’;
// ハッシュ値を算出(md5)
const hash = crypto.createHash(‘md5’).update(data).digest(‘hex’);

console.log(hash); // 7ac66c0f148de9519b8bd264312c4d64
“`
ビルトインモジュールの`crypto`を使うだけでハッシュ値を算出できるなんて、手軽でいいなあと思っていました。
何も問題は無かったんです。

ハッシュ値を算出する文字列に、**マルチバイト文字**が含まれるまでは…。

## hash.up

元記事を表示

Node.jsとは

参考サイト: **[Qiita: Node.jsとはなにか?なぜみんな使っているのか?](https://qiita.com/non_cal/items/a8fee0b7ad96e67713eb)**

## Node.jsとは、「サーバーサイドのJavaScript実行環境」のこと
Node.jsとは、「サーバーサイドのJavaScript実行環境」のことです。
WindowsにPythonをインストールすると「python.exe」ができるように、Node.jsをインストールすると「node.exe」ができます。
node.exeはJavaScriptコードを実行するアプリケーション(つまりJavaScript実行環境)です。

## Node.jsを使う3つの理由
あらゆる場面で最新のjacascriptで開発ができます。

### 理由1. 最新のjavascriptを古いブラウザでも動かせる
node.jsは、Babelというコンパイラを動かすための、環境を提供します。
Babelは、「最新のjavascript(ES6)」を「旧仕様のjavascript(ES5)

元記事を表示

現役、理学療法士が姿勢の画像を送るとその姿勢について教えてくれるLINE botを作った

#あなたの姿勢、本当に正しいですか?
どうもです。筆者は、都内の整形外科病院に勤務している、**現役、理学療法士**です。
理学療法士は、一言で言うと**「リハビリ」**の人って感じですが、**人の動きをみる専門家**でもあります。

日々、リハビリ業務を行う中で、首の痛みや、腰の痛みを訴えている患者さんに**姿勢指導**を行うことがあるのですが、その時に初めて自分の姿勢が誤っていることに気がつく方が多くいます。

 **「え、私これがいい姿勢だと思っていました。」**

** 「これだとなんか変に感じるんですが、これが正しい姿勢なんですね」**

一般の方の認識と、専門家からの評価が**乖離しているケース**が多くあるなーと日々感じていました。
テクノロジーを使って簡単にこの基準を整備できれば、姿勢から起こる疼痛を防ぐことが可能なのではないのかなーと感じ、開発しました。
このボットが正しい姿勢が気になる人への手助けとなればと思います。

注意)このボットはあくまで参考程度に作成したもので、正確な診断ツールではありません! 
   最終的な診断については、おかかりいただいた先生にお伺い

元記事を表示

自作のnpmパッケージをGitHub Packagesにworkflowで登録する(初心者)

Node.jsを利用して書いた自作のコマンドラインツールをnpm installして使えるようにしたくて、npmパッケージを作って[GitHub Packages](https://docs.github.com/en/packages)に登録することにしました。が、ドキュメント読んでもやり方が飲み込めず、試行錯誤。なんとか実現できたので、ここに手順のメモを残します。

npmパッケージを作るためのソースとして、”hello world”を出力するだけの小さなJavaScriptプログラムを使います。本記事で作成したリポジトリはこちら:
https://github.com/kazhashimoto/hello

**実行環境**

– macOS Big Sur 11.5
– Node.js 16.4.0
– npm 7.18.1
– git 2.30.1 (Apple Git-130)[^1]
– エディタ: Atom 1.58.0[^2]

[^1]: macOSプリインストール版のgitです。Atom内蔵のgitは別に存在します。
[^2]: v1.58.0現在、Atom内蔵の

元記事を表示

APIトークンなしでslackの絵文字(emoji)を一括エクスポート&インポートする

# はじめに
Slackの絵文字を一括エクスポートする方法で、SlackのAPIトークンを取得して行う方法があります。

ですが、APIトークンの取得面倒くさいよくわからないという方(私です)向けに、APIトークンなしで一括エクスポートする方法を紹介します。

Slackにログインさえしていればできます。

# やり方
## 1. ワークスペースの絵文字を一覧取得する
Slackの左上のワークスペース名をクリックし、ワークスペースのカスタマイズをクリックします。
![スクリーンショット 2021-08-14 0.27.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1050360/ee0c1fe3-23de-0db3-6dc3-e76b989831d0.png)

すると次のような絵文字管理画面がブラウザで開かれるので、ネットワークを開いて「emoji list」と検索してください。emoji.listへのPOSTリクエストがあり、その応答にJSON形式で全ての絵文字があります。この「emoji」の

元記事を表示

Windows 10 + Node.js + VSCode で React の開発環境を準備する

## はじめに

Javascript というかフロントエンドが苦手なので、UIフレームワークのひとつである React を触りながら、少しずつ仲良くなっていこうと思います。

まずは環境の準備から始めてみます。最終的には以前開発したホロジュールアプリのリニューアル版の開発に繋げていきたいです。

## 利用する環境

下記構成の環境を利用しました。

* Windows 10 Pro 21H1
* Visual Studio Code 1.59.0
* PowerShell 7.1
* Git for Windows 2.32.0.windows.2

## Reactとは

[React](https://ja.reactjs.org/) は、フロントエンドのユーザーインターフェイスを構築するためのオープンソースの JavaScript ライブラリ

完全なアプリケーションフレームワークを提供する他の JavaScript ライブラリとは異なり、React は、状態を維持し、UI 要素を生成する **コンポーネント** と呼ばれるカプセル化されたユニットを使用してアプリケーションビ

元記事を表示

node.js超入門ノート2(Express導入編)

# Expressとは
node.jsにおけるWebアプリ開発のフレームワークです。
今回はExpressのひな形と基本的なパッケージが用意されている、Express Generatorを使います。

# Express環境構築
前回のDockerでの環境構築で導入済みですが、まだの人は以下のコマンドでExpress Generatorをインストールしてください。

“`
npm install -g express-generator
“`

次にひな形を作成します。

“`
express –view=ejs [アプリ名]
“`
–view=ejsの指定でテンプレートエンジンの指定になります。
HTMLと似た言語であるので今回はEJSを使います。(デフォルトはJade)

次に必要なパッケージをインストールします。

“`
cd [アプリ名]
npm install
“`
先ほど作成したひな形の中のpackage.jsonをインストールします。

以下のコマンドでアプリケーションを起動します。

“`
npm start
“`

以下のURLにアクセス出来れば導

元記事を表示

Base64でエンコードされたバイナリデータをデコードしてバイナリデータとして別サーバーに中継する方法

# 概要
node.jsを使ってWebsocketクライアントから流れてきた、Base64形式のバイナリデータをバイナリ形式に直して別のサーバーに中継する実装をやった時のメモ

# 構成
クライアント → 中継サーバー(今回の実装) → 解析サーバー

# 実装
“`node.js
var WebSocketServer = require(‘websocket’).server;
var WebSocketClient = require(‘websocket’).client;
var http = require(‘http’);

var clientConnection;
var wsserver = http.createServer(handleRequest);

var server = new WebSocketServer({
httpServer: wsserver,
autoAcceptConnections: true,
});

client.connect(‘ws://localhost:8000′,’echo-protocol’);
cli

元記事を表示

CAPとEvent Meshでメッセージを送受信する

#はじめに
この記事は [chillSAP 夏の自由研究2021](https://note.com/chillsap/n/n08ef5ec73b4c) の記事として執筆しています。

[前回](https://qiita.com/tami/items/727fe127158eea39fd3e)の記事で、Event Meshの概要とAPIの使い方について紹介しました。今回はCAPを使ってメッセージを送受信してみたいと思います。
CAPを使うとEvent Meshとの統合が簡単にできます。今回は以下のようなシナリオを実装します。

– CAPからEvent Meshのトピックにメッセージを送信する
– 送信したメッセージをCAPのイベントハンドラで受け取る

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/5387b177-40d6-4031-38a9-48ac85eb0770.png)

自分で送信して自分で受信とは変な感じですが、簡単にするために1つのサービスにしています。

元記事を表示

スマレジのAPIを使うのに何度かハマった

## スマレジのハマりポイント
1. スマレジのアカウントの種類が二種類ある。
1. スマレジのAPIが二種類ある

## スマレジのアカウント
– スマレジショップアカウント (勝手に名前つけてる。普通のスマレジアカウント)
– スマレジデベロッパーズアカウント

### スマレジショップアカウント
ショップの方のアカウント、アイテムの追加とか行う飲食店のオーナーさんがいじってそうなイメージのもの。

https://smaregi.jp/

### スマレジデベロッパーズアカウント
Qiitaに記事を読みに来るような人が作るべきであろう開発者用アカウント。

https://developers.smaregi.jp/

## スマレジのAPI
まず最初のハマりポイントはAPIが二種類あることを知っていなければならない。
– スマレジAPI
– スマレジプラットフォームAPI

### スマレジAPI
こっちのAPIはEOLを迎えてこれからサポートされなくなっていくらしい。
そのためスマレジプラットフォームAPIに移行することを推奨されている。
今回はこちらは使わないので割愛。

元記事を表示

Sequelizeを使用してトランザクション処理を行う

# 初めに
今回は、Sequelizeのトランザクションを使用して、お金の送金を行う処理を実装します。
所持金1000円のたかしさんと所持金500円の花子さんがいると仮定します。
![SnapCrab_NoName_2021-8-12_14-50-23_No-00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1229062/86b93882-1184-813d-81f3-15e253398d24.png)
上図のように、たかしさんが花子さんに500円を送金したとします。
結果は、下図のように、たかしさんの所持金が500円、花子さんの所持金が1000円になります。
![SnapCrab_NoName_2021-8-12_16-31-51_No-00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1229062/c2c8fbdd-13bb-c800-4cd7-852274ad56f0.png)

処理の流れとしては
①たか

元記事を表示

Azure App Service(Node Stack) に Webサービス(NestJS)をデプロイする方法

## 最初に

趣味で作ったWebサービス(NestJS)を[Azure App Service](https://azure.microsoft.com/ja-jp/services/app-service/)に無料で公開する方法を記載します。
まず、Azure公式ドキュメント「[Azure で Node.js Web アプリを作成する](https://docs.microsoft.com/ja-jp/azure/app-service/quickstart-nodejs?pivots=platform-linux)」を参考に実施すると、素直に動作しました。
ですので、[NestJS](https://nestjs.com/) でも問題ないと思ってデプロイして、ブラウザで表示したら以下の **エラー** が表示されてしまいました。

![Azure Portal – create app service](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179413/ecc80812-e425-6aef-3af

元記事を表示

node.js超入門ノート1(Dockerでの環境構築編)

# 初めに
node.jsの勉強の備忘録のため投稿します。
間違い、アドバイス等ありましたらコメント頂けると幸いです。

# 目標
node.jsの基本を学びExprassを使いWeb開発の基本的な設計を学ぶ。

# 前提条件
自分のPCの環境を汚さずに勉強を進める為、Dockerコンテナ内で作業します。
ローカル環境で行う際はこの記事はスキップしてください。
※VScodeを使います。

# ファイル構造
node-app/
 ├ src/
 └ docker-compose.yml
 └ Dockerfile

# ソースコード
“`Dockerfile:Dockerfile
# ベースイメージを指定
FROM node:14.2.0-alpine

# node.js の環境変数を定義する
# 本番環境では production
ENV NODE_ENV=development

# 雛形を生成するのに必要なパッケージのインストール
RUN npm install -g express-generator@4.16.1

# ディレクトリを移動する
WORKDIR /src

元記事を表示

M1 Mac でRailsコマンドが使えなくなった時のメモ

M1 Mac で rbenv 経由で Ruby3.0.2 を入れたらrailsコマンドが以下のエラーで打てなくなった

“`terminal:terminal
$ rails s
-bash: /usr/local/bin/rails:/System/Library/Frameworks/Ruby.framework/Versions/2.3/usr/bin/ruby bad interpreter: No such file or directory

$ rails -v
-bash: /usr/local/bin/rails:/System/Library/Frameworks/Ruby.framework/Versions/2.3/usr/bin/ruby bad interpreter: No such file or directory
“`

“`
$ which rails
/usr/local/bin/rails

# 現状の環境確認
$ which ruby
/Users/takuya/.rbenv/shims/ruby
$ which gem
/Users/

元記事を表示

node.jsのバージョン設定[Homebrew, nodebrew, node.js]

### node.jsのインストールからバージョン設定まで
1. Homebrewを用いたnodebrewをインストール
1. nodebrewを用いて、該当のnode.jsのバージョンをインストール
1. 該当のnode.jsを使用可能にする(パスを通す・バージョンを選択

“`bash
– node.jsのパッケージ管理ツール”nodebrew”のインストール
$ brew install nodebrew
$ nodebrew setup
$ nodebrew -v
# nodebrew 1.1.0

– インストールできるnode.jsのバージョンを確認
$ nodebrew ls-remote

– 該当のバージョンのnode.jsをインストール
$ nodebrew install-binary v16.3.0

– 該当のバージョンがインストールされている確認
$ nodebrew list
# v16.3.0
#
# current: none

– 適用したいnode.jsのバージョンを指定
$ nodebrew use v16.3.0
# use v16.3.0

元記事を表示

OTHERカテゴリの最新記事