Node.js関連のことを調べてみた2022年11月07日

Node.js関連のことを調べてみた2022年11月07日

node jest導入(チュートリアル)

## jestを使う前にやること
まず、npmとnodeはインストールすること。
npmインストール:https://docs.npmjs.com/cli/v7/commands/npm-install  (参考)
nodeインストール:https://qiita.com/kyosuke5_20/items/c5f68fc9d89b84c0df09 (mac参考)

“`
// プロジェクトのルートディレクトリで実行。空っぽのpackage-lock.jsonができる
npm install

// 指定したバージョン
nodebrew install-binary {version}
// 最新のバージョン
nodebrew install-binary latest
“`
## jestインストール
下記のコマンドでjestをインストールすると、package-lock.jsonにいろいろ設定が追加される。

“`
npm install –save-dev jest
“`

## ファイルの作成
■テストしたいファイル作成(sum.js)

“`
function

元記事を表示

Node.jsがアップデートできない問題を解決した Apple M1 Sillicon

## 背景
firebaseをインストールしたのですが、Node.jsのバージョンが古くて「Incompatibleだよ」と言われました。
しかし、Node.jsのアップデートにつまづいてしまい、この記事に書くことにしました。

## 症状
Firebaseコマンドを利用しようとしたらターミナルがこのように表示してきました。
“`
Firebase CLI v11.16.0 is incompatible with Node.js v12.19.0 Please upgrade Node.js to version ^14.18.0 || >=16.4.0
“`
どうやらNode.jsのバージョンを16.4.0以上にアップグレードしなければいけないようです。

HomebrewおよびNodebrewをインストールしており、Nodebrewを利用してNode.jsのアップデートを試行しました。

### “Darwin arm64 is not supported”
nodebrewでnode.jsをアップグレードを試しましたが、失敗し以下のエラーを吐きました。
“`
Darwin

元記事を表示

今日着るべき服を教えてくれるアプリを作る

# 動機
室内の快適な温度で生活していると、果たして外が暑いのか寒いのか分からないことが多い。
天気を調べるのも面倒だし、気温を見てもじゃあどの服を着ればよいのか分からない。
今日の天気を取得して、着ていくべき服を教えてくれるアプリを作成した。(いずれはIoTデバイスにして常に表示させておきたい)

# 要件

ユーザーに教えてほしい情報は以下
– 今日の気温
– 今日の天気
– 今日着るべき服

# 構成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/581044/04733946-62f0-1a13-b1ea-02dc5494fcc4.png)

Backendでは「OpenWether」というAPIで気温・天気情報を取得。気温を元にその日に着る服を算出する。Node.jsを使用。

FrontendではBackendから気温・天気・着るべき服の情報を受け取って表示する。Reactを使用。

# 実装
## Backend
OpenWetherAPIを使用して天気情報を取得して、気

元記事を表示

Node.jsでYahooの校正支援APIを叩いてみる

TextLintなどを調べていて、Yahooの校正支援のAPIがあったので試してみました。

> https://developer.yahoo.co.jp/webapi/jlp/kousei/v2/kousei.html

## Node.jsからアクセスする

Pythonのサンプルをもとに書いてみました。

> https://developer.yahoo.co.jp/webapi/jlp/sample/sample11.html

今回Fetch APIを使ってPOSTしてます。

“`js
const BASE_URL = `https://jlp.yahooapis.jp/KouseiService/V2`;
const YAHOO_APPID = `YAHOOディベロッパーの管理画面で取得したAPPID`;

const yahooKosei = async () => {
const ENDPOINT = `${BASE_URL}/kousei`;

try {
const data = {
id: ‘123

元記事を表示

JavaScript(Node) でモジュールが直接実行されているかを判別する

# 概要

Python の `if __name__ == ‘main’` と同じことを JavaScript(Node) でも行いたい。

https://note.nkmk.me/python-if-name-main/

# 結論

“`javascript
if (require.main === module) {
}
“`

# 動作確認

“`js:foo.js
function doSomething() {
console.log(‘doSomething!!’)
}

module.exports = {
doSomething
}

// foo.js が直接実行された場合だけ、すぐに doSomething を実行する
if (require.main === module) {
doSomething()
}
“`

“`js:bar.js
const { doSomething } = require(‘./foo’)
“`

“`bash
$ node foo.js
doSomething!!
$ node bar.js
$

元記事を表示

DenoでHonoを試す 恐竜と炎[WIP]

DenoのWebフレームワークを調べていて色々なフレームワークが出てくるのですが、Deno Deploy向けという形でベンダーロックインされそうな雰囲気があったのでDenoだけでなく他の場所でも動くようなフレームワークが無いか探してたらHonoというフレームワークがありました。

Cloudflare WorkersやBunでも動くということでちょっと触ってみました。

触ってみた感覚としては、ルーティング周りなどExpressっぽい書き味でNode.js Expressを触ったことがある人なら直感的に書けるような印象です。

全然関係ないですが、スプラトゥーンのフェスでほのおを選んだタイミングだったので謎のシンパシーを感じて勢いで触ってみています。

>

## HonoをDenoで動かす

Honoのサイトにチュー

元記事を表示

TypeScriptでQiita記事のPV情報を取得してみるメモ

Denoでの利用で勉強中メモです。

Fetch APIを使うサンプルとして前に書いた記事をベースにTypeScript版にしてみました。

https://qiita.com/n0bisuke/items/40d0c7831d22c4f1868b

今回は`/items/:itemid`のAPIなので記事の情報取得ですね。

“`ts
const BASE_URL = `https://qiita.com/api/v2`;

const getQiita = async (url: string): Promise => {

const ITEM_ID = url.split(`/items/`)[1]; //ITEMIDを抽出
const ENDPOINT = `${BASE_URL}/items/${ITEM_ID}`;

try {
const options = {
headers:{
‘Authorization’: `Bearer <トー

元記事を表示

AndroidStudioでKotlin/JS(Node)を使う(WebPack不使用)

# 概要

[前回の記事](https://qiita.com/riafeed/items/ae45f8a0b0caf1892e1e)でWebPackを使ったKotlin/JS(Node用)のトランスパイルがAndroid Studioでできるようになりましたが、
可能であればわざわざWebPackを使わずに実現したいと考え色々探していたところ、ヒントになる記事を見つけたのでさらに発展させてみた記録です。

https://sakebook.hatenablog.com/entry/2020/04/25/185155?utm_source=pocket_mylist

# プロジェクトの作成

「New Flutter Project」からプロジェクトを作成します、できない人はFlutterプラグインをインストールする必要があります。

新規プロジェクトのGradleタブから、「Kotlin DSL ビルドスクリプト」「Kotlin/JS for Node.js」の2つにチェックを入れた状態にして「次へ」をクリックします。

「名前」に適当なプロジェクト名を入れて「完了」をクリックする

元記事を表示

分割代入で配列やオブジェクトを簡単に取得!

# 分割代入とは?
ES2015から使用できるようになった、配列からオブジェクトから値を取り出して変数に代入する方法です。

一回の宣言で配列・オブジェクトの複数の値を変数に代入することができる便利な機能になります。

本記事では使用方法などをサンプルコードを用いて整理していこうと思います。

## この記事でわかること
– 分割代入を用いて配列・オブジェクトから値を取得する
– 取得対象がundefinedの時にデフォルト値を設定する
– rest構文を使用して分割代入の残りを取得する

## 分割代入を使用して値を変数に代入する
配列・オブジェクトの分割代入の使用方法についてになります。
### 配列の分割代入
配列の各要素を任意の変数名で複数代入することができます。
“`js:array
const rgbColorArray = [‘red’,’green’,’blue’];

// 配列rgbColorArrayの先頭 ~ 2個目まで、任意の変数名で代入。
const [r,g] = rgbColorArray;
console.log(r); // red

元記事を表示

どれだけ悪口言っても大丈夫な部屋をCodePenで作りました。

私は知っている。生きているみんな、ストレスを抱えていることを。
そして、ストレスを吐き出す場所を探していることを。
今回は**悪口を吐き出してストレスを無くし、明日から笑顔で生きられるようにするべく**、「どれだけ悪口を言っても大丈夫な部屋」を実装したので紹介する。

# 「悪口言ってもいい部屋」
まずは、作った部屋を見ていただこう。

https://cheery-fairy-7b5133.netlify.app

スクリーンショット 2022-11-06 10.48.46.png

使い方は簡単。
この人は誰?の入力欄に「悪口を言いたい人」を設定する。例えば、締め切りギリギリに仕様変更してくるクライアント、とか(私の周りにそう言うクライアントがいるわけではない)

その後、悪口入力欄に悪口を書き込んで、悪口を

元記事を表示

自作のスマートディスプレイを作成する

普段使っているスマートディスプレイ「Google Nest Hub」ですが、結局のところお気に入り画像と時計表示にしか使っていない。。。
それぐらいのことであれば、自作もできるだろうと思い、CordovaとAndroidを使って、自分カスタムのスマートディスプレイを作成しました。以降、カスタムスマートディスプレイ(CSD)と呼びます。

まずは、簡単に構成を説明した後、その中で利用している要素技術を説明します。
機能としては、まずは以下の3つの機能を付けますが、今後拡張していければと思います。

・時刻表示
・お気に入り画像の背景表示
・音楽のバックグラウンド再生

# システム構成

以下のような構成になります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/4ae68ccc-c789-6ca3-4276-a15133eda944.png)

・Androidタブレット
 これが今回作成するCordovaアプリが動作するAndroidタブレットです。スマートディスプレイ

元記事を表示

Mac[M1] Node.js環境構築

# はじめに
この記事は、こちら動画を参考にしています。
動画の書き置きメモのような記事になります。

# 目次
1. Nodebrewインストール
1. パスを通す
1. 使い方

# 1. Nodebrewインストール
Node.jsのバージョンを管理するものです。
様々なバージョンを利用するらしいので、

https://github.com/hokaccha/nodebrew

上記のサイトから以下のような手順でインストールしていきます。
“`zsh:ターミナル(zsh)
curl -L git.io/nodebrew | perl – setup # インストール
#…
#========================================
#Export a path to nodebrew:
#
#export PATH=$HOME/.nodebrew/current/bin:$PATH
#========================================
export PATH=

元記事を表示

Socket.IO サーバーのパスをドメインのサブディレクトリにした場合の Socket.IO Admin UI の接続方法

## 前提
自分で建てたSocket.IOサーバーのURLが
`https://hoge.com/fuga/socket.io`
だったとする

## サーバー側設定
“`js
instrument(io, {
namespaceName: “/fuga/admin”,
auth: {
type: “basic”,
username: {任意},
password: {任意},
},
});
“`
※ `username` は完全任意だが、basic認証にした場合の `password` 設定方法は公式ドキュメントを参照
https://socket.io/docs/v4/admin-ui/#auth

## Socket.IO Admin UI の接続設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/265114/97ac9999-a6cf-6a9f-2bb9-c0d3f933bed3.png)
| 設定項目 | 値

元記事を表示

プロジェクトのフルパスに括弧が含まれていると、vscodeのnode.jsでソースマップが効かなくなる

windows&vscode&node.jsで確認。

https://github.com/microsoft/vscode/issues/165452
https://github.com/TypeStrong/ts-node/issues/1905
ts-nodeで発見して、ts-nodeにissueを立てたら「ts-node使わなくても再現した」って言われて、tscを使わずにvscodeだけで再現する事を確認してvscodeにissueを立てた。

|フォルダ名|可否|
|–|–|
|`[`|問題なし|
|`[a`|問題なし|
|`[a]`|問題なし|
|`[a]+`|sourcemap効かない|
|`[a-`|問題なし|
|`[a-b`|問題なし|
|`[a-b]`|sourcemap効かない|
|`(`|sourcemap効かない|
|`(a`|sourcemap効かない|
|`(a-`|sourcemap効かない|
|`(a)`|sourcemap効かない|
|`(a-b`|sourcemap効かない|
|`(a-b)`|sourcemap効かない|

他にも確認した

元記事を表示

Volta コマンド

Volta公式
https://docs.volta.sh/guide/getting-started

以下コマンドを必要に応じて使用

“`
# Node LTS版インストール
volta install node

# 最新バージョンをインストール
volta install node@latest

# 特定バージョンをインストール
volta install node@18.12.1

# 安定板インストール(数字のバージョン)
volta install node@18

# 各種バージョンの確認
volta list

# 管理しているものを一覧表示
volta list all
“`
プロジェクトのバージョン固定は` volta pin `を使う

“`
# nodeのバージョン固定
volta pin node@18.12.1

# npmのバージョン固定
volta pin npm@8.19.2
“`
バージョン固定した際はpackege.jsonを書き換える必要あり

“`ruby:package.json

“volta”: {
“node”:

元記事を表示

【初心者向け】Raspberry Pi のアップグレード(Raspberry Pi OS (10 から 11) とnodejs(16から18))とUSBメモリのマウント

# はじめに
久しぶりにRaspberry Piを使うためにRaspberry Pi OS(いわゆるRaspbian)とnodejsをアップグレードしたのでここにメモしておきます。

自分のためのメモですが、私のような初心者の方にも参考になるかもしれません。

# 私の環境
* Raspberry Pi 400
* メモリ 4GB
* SDカード 16GB
* もともとRaspberry Pi OS10と nodejs16が入っていた。
* LANケーブルでWindows 10パソコンにつないだ(PowerShellからsshで操作)

# 手順
## 0. ラズパイの起動、sshで接続
LANケーブルでパソコンとRaspberry Piをつないだ後、電源を入れました。そのあとWindowsのPowershellを使って、sshでRaspberry Piにログインしました。
“`
ssh pi@hostname
“`
## 1. Wifiにつなぐ
アップデートを行うので、Wifiネットワークの設定をしておきます。
いつもと違ったWifi環境でやったので、w

元記事を表示

DockerでExpress APIサーバを立ち上げる

DockerでExpressを使うことが多いので、設定方法などをメモします。
ソースコードは[GitHub?](https://github.com/hinahinako/docker-sample/tree/master/express)でも公開しています。

## ? 環境
– MacOS: macOS Monterey 12.4
– node: 16.17.0

## ? ディレクトリ構成

“`
.
└── express
├── Dockerfile
├── docker-compose.yaml
├── index.js
├── node_modules
├── package-lock.json
└── package.json
“`

## ? 手順

### ① Expressプロジェクト作成

以下のコマンドを叩きます
“`
mkdir express
cd express
npm init
npm i express
“`

index.jsを作成します

“`js:index.js
const express = requir

元記事を表示

[Node.js][Express]傾斜機能付き割り勘webアプリを作る!

# はじめに
### 制作物
[warican](https://warican.onrender.com/home)

:::note warn
現在スマホで操作するとイベント編集ボタンをクリックできないバグが発生しております。現在対応中です
:::

### github(一部抜粋)
[github](https://github.com/Mitachi-H/waricanOpen)
個人情報を含むファイルは削除しています。
### こだわりポイント
* 傾斜を設定できる
* 結果のテキストを保存できる
* グループ作成時にはメンバーを指定する必要がない
* 支払い者が複数のイベントも追加できる
Gitlab-runnerでnodeのRunnerを作る話

今回はVue3のプロジェクト用にGitlab-Runnerを作りましたのでそのメモを残しておきたいと思います

## Gitlab-runnerを作る
これは公式ドキュメント通りに作ればOKですね
コンテナ名はgitlab-runner-npmとしています。
“`sh
sudo docker run -d –name gitlab-runner-npm –restart always -v /var/run/docker.sock:/var/run/docker.sock gitlab/gitlab-runner:latest
“`

公式ドキュメント : https://docs.gitlab.com/runner/install/docker.html

## Gitlab-runnerに入る

Dockerの基本なので解説しているところはないですがw
以下のコマンドでDocker内にbashシェルで入れます

“`sh
sudo docker exec -it gitlab-runner-npm /bin/bash
“`

## nodeをインストールする…
はい、ここ

元記事を表示

mini_racerでNode.jsのURL APIを使うときに注意すること

## 結論

:::note
正確にはmini_racerを使う時に限ったことではないのですが、Node.jsのAPIのURLには、legacy APIとWHATWG準拠のAPIがあることに注意しましょう

(ブラウザのURL APIもWHATWG API準拠)
:::

https://nodejs.org/dist/latest-v19.x/docs/api/url.html#url-strings-and-url-objects

上記のAPIドキュメントから引用します。

下の図は`’https://user:pass@sub.example.com:8080/p/a/t/h?query=string#hash’`というURLを両方のAPIでパースしたときの違いを表しています。
上半分がlegacy APIの`url.parse()`を使ったときで、下半分がWHATWGのURLオブジェクトのプロパティを表しています。
originプロパティなど、いろいろ違いがあります。

“`
┌────────────────────────────────────────────────

元記事を表示

OTHERカテゴリの最新記事