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

JavaScript環境構築まわりの用語

## Node.js

**Node.jsは、JavaScriptの実行環境のこと。**

Node.jsはサーバーサイドのプログラミング言語だと誤解されることがあるが、
プログラミング言語であるJavaScriptを、サーバーサイドでも実行できるようにするのがNode.js。
また、現在ではフロントエンドの開発環境としても広く使われている。
詳しくは↓の記事様がわかりやすい。

https://qiita.com/non_cal/items/a8fee0b7ad96e67713eb

　

## npm

**npmは、Node.jsのパッケージ管理ツールのこと。**
phpで言うところのcomposer、Pythonで言うところのpip。

npmにおけるパッケージとは、JavaScript のライブラリやフレームワークのこと。
ReactやVue.jsもnpmを利用してインストールできる。
詳しくは↓の記事がわかりやすい

https://reffect.co.jp/html/npm-package-manager-basic-for-beginner

　

## nvm、

Dockerでfrourioを動かそうとしたら「System limit for number of file watchers reached」エラーの解決法について

こんにちは。
frourioいいぞ〜と聞いていたので今回の３連休で触ってみようと思ったら、環境構築時点でDocker周りのエラーに苦戦したので解決した方法を備忘録として残してみました。

# 環境
– MacBook Pro (13-inch, 2020, Four Thunderbolt 3 ports) / Intel Chip
– Docker version 20.10.12, build e91ed57
– Docker Compose version v2.2.3
– Rancher Desktop Version: 1.1.1
– Container image node:16.13.2
– frourio 0.27.1

# 実際に起きたエラー
Docker環境を立ち上げてからyarn runを実行した歳に発生したエラーです。エラーの内容は一部省略しています。

“`shell
Error: ENOSPC: System limit for number of file watchers reached
“`

調べてみるとNode.js系ではよく見かけるエラーのよ

[JavaScript/node/WSH/Bat] 特定フォルダ下位にある画像ファイルをランダムで開く

Windowsです。

BingWallPaperナントカってアプリをいれて、Bingの背景画像を壁紙にしてくれて日々、きれいな壁紙が切り替わるようにしています。

が、5,6枚くらいしか前画像をたどれなくて、ときどきBingが虫とか植物の拡大写真や動物の変な写真がアップされて気に食わなかったりするときがありまう。俺は生物系ではなく風景の写真が壁紙になってほしいのです。生物系はぎょっとしたりキモかったりするときもあるので、壁紙にしたくない。(今日とかカエルだし、人を選ぶだろ、カエル画像とかさあ)

で、壁紙ファイルは次の場所に保存されていることがわかり、昔みた壁紙ファイルも保持されているからよかったのです。

C:\Users\<ユーザー名>\AppData\Local\Microsoft\BingWallpaperApp\WPImages
C:\Users\<ユーザー>\OneDrive\画像\Bing Images

で、この中でお気に入りな画像を特定のフォルダに保存しています。

画像ファイラは、MassiGra使っているので、画像をみて気に入ったものがあれば壁紙に簡単にできるの

Discord.js+Expressでグローバル変数っぽい挙動をしたいメモ

Discord.js+expressでサーバーを立ててますが、ファイル分割をしている末端のファイル`hoge.js`などのなかでDiscord.jsのClientを呼び出したいというニッチな話

“`
main.js
|- actions
|- router
|- hoge.js
“`

main.jsで`client = new Client()`をしていますが、末端でhoge.jsではclientオブジェクトが定義されてなく、`client.channels.cache.get().send()`を使いたいけど使えない、みたいな状態でした。

https://qiita.com/n0bisuke/items/cc4deef076ecf86421f5

main.jsで定義したclient変数をhoge.jsに持っていきたいなというところでしたが、公式ドキュメントとすぎゃーんさんの記事が参考になりました。

> [Express アプリケーションで使用するミドルウェアの作成](https://expressjs.com/ja/guide/writing-middlew

【3分】global install用のyarnをこ◯してnpmに統一した

# npm経由でしかglobalにinstallさせないようにする

“`
# global addされたnode packageの在処を特定
yarn global dir

# 上記で特定した場所に移動
cd ${LOCATION}

# node_modulesを削除
rm -rf node_modules

# 再度新しいnode_modulesを作成
(at the same location) yarn
“`

これで完了

任意のサイトURLからOGP Metadata を取得する npm package を作った話 – メタグロス(metagros)

こんにちは、普段は学校に通いながら、インターンや趣味でソフトウェア開発をしています。バックエンドやフロントエンド、インフラ領域を主に触っています。
Twitter: [@igsr5_](https://twitter.com/igsr5_/) GitHub: [@igsr5](https://github.com/igsr5)

先日自分が所属している Slack コミュニティで「weekly で記事あげていったら面白そうじゃない？」みたいな話があがったので自分が第一号として記事を書いていこうと思います。（既に一日遅れていますが、、）

この記事では個人的に作った Node.js + ESM の npm パッケージを紹介していきます。

## 作ったライブラリ – Metagros
https://github.com/igsr5/metagros

![](https://camo.githubusercontent.com/43d1fe4e9091290d5d30e1f2d7b143d554180061dfcece219eaf5a3cddda26eb/68747470733a2

Nuxt.jsでルーティング

# ルーティング

Nuxt.jsはpagesディレクトリ配下にフォルダ作ってそこにindex.vue設置して上げると自動的にルーティングしてくれます。
便利便利。

### ディレクトリ作成→中にindex.vue配置
こんなかんじで、プロジェクト生成時、デフォルトで生成される`[PROJECT]/.nuxt/pages`配下にnewPageをディレクトリを作成します。（.nuxtは隠しフォルダなので注意）
index.vueを作成します。

“`vuejs:./newPage/index.vue

“`
newPageに作ったindexの中身です。とりあえずタイトルだけ表示させやす。

### 動作確認
`$ npm run de

正規表現の /g フラグはサーバーで使うと怖いことがあるという話

まず、次のコードを見てください。

“`
const http = require(‘http’);
const url = require(‘url’);

const regex = /^hoge$/g;
const server = http.createServer((req, res) => {
if (regex.test(‘hoge’)) {
res.end(‘hoge’, ‘utf8’)
} else {
res.end(‘hogeじゃない’, ‘utf8’);
}
});
server.listen(8000);
“`
この Node.js 向けのコードを実行すると HTTP サーバーが起動します。
どんなレスポンスが返ってくるでしょうか？

“`
% curl localhost:8000
hoge
% curl localhost:8000
hogeじゃない
% curl localhost:8000
hoge
% curl localhost:8000
hogeじゃない
% curl localho

MacにNode.jsをインストールする方法(2022/03)

タイトルの部分、(2022/03)とか書くだけで少し悲しくなる。。。
「ああ、年取ったなって」

まあ今回はNode.jsのインストールです！
Mac初期化したのでね。。。
最初からです。
今回は早く終わりそうでよかった。

## Node.jsとは？
Node.jsが何かわからずに、必要だとわかったからインストールする人もいると思うので(AtCoder cliのために必要など)、駆る紹介します。
と思ったのですが、さすがはインターネットさん、めっさわかりやすい説明をしている記事を見つけたので載せておきます。

https://qiita.com/non_cal/items/a8fee0b7ad96e67713eb

## Node.jsのダウンロード
https://nodejs.org/ja/

[こちら](https://nodejs.org/ja/)のサイトからLST版(推奨版)をダウンロードして実行します。
最新版って書いてある奇数番号の方は約7ヶ月でどれもサポート終わるのでLST版の方がいいです。

全肯定していけばインストールできます。迷う部分は特に無いと思います。

Puppeteer + Node.js + Typescriptでサイトのデータを取得してみる

### 下記のようにサイトに存在する文字列をpuppeteerを用いて取得することを目的としたコードを書いたのでアウトプットします。
取得したかどうかはターミナルにlogとして出力しました。

:::note info
puppeteerのライブラリを使用すること事態は調べながら感覚を掴むことができました。
その中でも、メソッドの中でlogが出力できなかったため、なぜ出力できないのかを理解するのに時間がかかりました。evaluateメソッドで記述するコールバック関数は、ブラウザ内で実行されるため意図してターミナルにlogを出力することができないということが原因だったのかなと考えています。
そのため、取得したいデータの取得に時間がかかりましたが実装はできました。
Documentオブジェクトを用いてデータを取得する際はTypeScriptで型アサーションの方法をとらなくてはいけないので注意。
:::

サイトに存在する文字列

[Flutter] アプリからCloudFunctionsの関数に引数を渡す、返り値を受け取る

Flutterのアプリ作成で実装したことです。

何回も使いそうなので忘れないように記事にしておこうと思いました。

`onRequest` と `onCall` で引数の渡し方、返り値の受け取り方が少し違います。

一度まとめておくと、次から調べる時間が短縮できるので。

このやり方以外にもあると思いますが、少しでも誰かのお役に立てれば、幸いに思います。

## onRequestの場合

CloudFunctionsの関数

“`typescript
import * as functions from “firebase-functions”;

export const testFunction = functions
.region(“asia-northeast1”)
.https.onRequest(async (request, response) => {
const testVar = request.body.data.testVar; // requestに格納されている引数を受け取る

…省略

response.sta

初心者によるHTTP基礎概念勉強ノート＆Node.jsで簡単なサーバを作ってみた

## HTTP基礎概念
### なぜネットの世界にはプロトコル(Protocol)が必要ですか？
– 規模化をする前提に、内容の統一や標準化が必要。（standardization）

### 標準化した内容 Header & body
– Header
URL、メソッド（Method）、ステータスコード(Status Code)などの情報を伝える。
– body（HTMLのタグではない）
Response Bodyの内容、ソースコード。

### よく見られる状態コード一覧
– **200 OK**　リクエスト成功
– **204 No Content**　リクエスト受理しましたが、返すレスポンスはない。
→　DELETEメソッドであるリソースを削除したが、返す内容がない。
– **301 Moved Permanently**　リソースが恒久的に移動した。
→　GETメソッドで最初のヘッダから移動先のLocationを取得したら、そのあと同じウェブサイトにアクセスしても新しい移動先に移転される。
– **302 Found**　リソースが一時的に移動された（**Mo

JavaScriptのconstに関して

## 初めに
現在、JavaScriptでvarを使用している箇所をconst、letに置き換えているが、具体的にどのような場面で使用できるかが気になった。

constに関して参考文献から拝借した内容。

> 定数は、let キーワードを使って定義する変数と同様にブロックスコープを持ちます。定数の値は、再代入による変更ができず、再宣言もできません。

再代入、再定義は不可能であることが分かるが、配列へのプッシュやブロックがある場合の挙動が知りたかったのでアウトプットのため投稿する。

## 実行環境
■ Node.js
v11.1.0

### 配列でconstを使用

新しい要素のプッシュは成功する。

“`js
const a = [];
a.push(“a”);
console.log(a);

// 出力結果
[ ‘a’ ]
“`

新しい配列を代入するとエラーになる。

“`js
const a = [];
a = [];
console.log(a);

// 出力結果
TypeError: Assignment to constant variable.
“`

VoltaをinstallしたけどAngularが使えないんだけど

# Angularがインストールできない
Voltaをinstall時にAngualrがインストールできませんでした。
表示されたエラーは以下の通りです。
“`sh
C:\Users\○○>npm install –global @angular/cli

added 190 packages, and audited 191 packages in 30s

23 packages are looking for funding
run `npm fund` for details

found 0 vulnerabilities
Volta error: Could not create shared environment for package ‘@angular/cli’

Please ensure you have correct permissions to the Volta directory.
Error details written to C:\Users\○○\AppData\Local\Volta\log\volta-error-2022-03-1

デジタル初心者でも「3日でWeb APIから得たデータで分析までできるのか」やってみた！

初めまして。
今回はタイトル通り、「3日でWeb APIから得たデータで分析までできるのかやってみた」編です。
一応過去に楽天APIを使ったことはあります！
[過去の記事はこちらをクリック](https://qiita.com/NagaharaHitomi/items/d7897363a2332338192e)

ですが、自力じゃなかったんです。（バリバリ人の手借りました笑）
なので今回は「自力で作る！をテーマにやってみました」という記事です。
これからAPI初めて触るよ～という方はには是非参考にして頂ければと思います。

# 3日後はどんな状態？一応立てた目標達成計画
3日というなんの根拠もない制限をつけたので、自分なりにスケジュールを立ててみました。

1日目：APIを使用した真似したいQiita記事を見つける。
　　　 Visual Studio Codeを使ってデータを取得する。
　　　 真似したQiita記事（コード）を元に自分なりにアレンジする。
　　　（休みの日なので、6時間くらいは制作に費やせる日！！）　
　　　
2日目：得た情報を分析する。
　　　（仕事の日なので2時

Oppkey　DevRel 記事アーカイブ

https://dzone.com/articles/live-video-mobile-apps-with-flutter

https://dzone.com/articles/flutter-20-state-management-introduction-with-prov

https://dzone.com/articles/5-advantages-of-dart-over-javascript-python-and-ba

https://dzone.com/articles/open-networking-for-network-switches-how-the-open

https://dzone.com/articles/messageformat-is-working-hard-to-make-themselves-o

Node.js –>

https://dzone.com/articles/interview-with-bethany-griggs

https://dzone.com/articles/the-future-of-apis-and

あの夏Qiitaユーザーは何の夢を見たか。APIでエンジニアの脳内をワードクラウド化してみた！

# 人生初のAPIチャレンジ！

### 企画意図　「エンジニアがどんなことを考えている人たちなのか知りたい」

さて、私はプログラミングのプの字も知らないおじさんですが、プロトタイピングを学ぶことにしました。そして、はじめはAPIなるものに向き合うことにしたのですが、いろいろな疑問が湧いてきました。

「そもそも、QiitaAPIで何ができるの？」「エンジニアは、主に何を考えて生きているの？」と素朴な疑問が次々と。

そこで、まずは、投稿記事のタイトルをAPIで引っ張ってきて、ワードクラウドか何かに放り込んで、エンジニアの脳内を覗き込んでみることにしました。

ただ、あまりAPIでデータを引っ張ってくると、Qiitaに怒られるということなので、毎年のあの夏（8月）に投稿された記事タイトルを引っぱり分析することにしました。

そして、あの夏のワードクラウドを並べて、その時期にエンジニアを夢中にしていた事象を浮き彫りにできたらと考えています。いわばQiitaユーザの勝手流行語大賞（夏）を作るイメージです。

夏だから、きっと「サーフィン」とか「ナンパ」とか「花火」とか、そんなワードが上位

EC2にnode.jsをインストール

## 概要
デフォルト、EC2にnode.jsをインストールされてないですが、
今回ec2にノードバージョンマネージャー (nvm) でnode.jsのインストール方法を説明させて戴きます。

# 手順

## ec2にアクセスして、ユーザーを切り替え

“`
sudo su –login ec2-user
“`

## ノードバージョンマネージャー (nvm)をいンストール

“`
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash
“`

## nvm を有効にする

“`
. ~/.nvm/nvm.sh
“`

## nvm を使用して Node.js の最新バージョンをインストール

“`
nvm install node
“`

## nodeバージョン確認

“`
$ node -v
v17.7.1
“`

EC2に最新のnode.jsをインストールする事が確認できました。

nvmを使ってNode.jsをインストールする

## 環境
Ubuntu20.4

## はじめに
nvmはNode.jsのバージョン管理ツールです。Node.jsをインストールする前に、nvmのインストールを先に行います。

UbuntuにNode.jsをインストールするには、aptを使ってインストールすることになるが、バージョン管理を行いたい場合は、nvmを使ってインストールすることになります。Node.jsをお試し程度で使うのであれば、aptでインストールしてもいいのだが、長期的に使う予定があるのであれば、nvmを使ってインストールした方が、後々便利になるでしょう。

aptを使ってNode.jsをインストールするときのコマンドです。

“`
apt-get update
apt-get install nodeje
“`

Rubyにはrbenvというバージョン管理ツールが存在するが、どのような言語にも、似たようなツールは共通して存在しているものです。Rubyのrbenvに該当するのが、Node.jsのnvmということになります。

## nvmをインストールする

ググるとnvmのインストール手順はたくさんヒットされる

Node-REDのテンプレートノードでスケープしたくないメモ

## 通常に書くとエスケープされてしまいます。

– テンプレートノード側

“`
https://www.switch-science.com{{path}}
“`

> 

– 出力

“`
https://www.switch-science.com/catalog/7889/
“`

> ![スクリーンショット 2022-03-16 10.59.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/aef04524-b85b-a396-08ac-8fd2ed0a0bc9.png “スクリーンシ