- 1. Node.jsを使ってサーバを起動する際に、React Iconsが原因のエラーが発生
- 2. NodeJS: V8エンジン編
- 3. typescript の型を正規表現っぽく書く ( 型に型を埋め込む / Union型でOR表現する )
- 4. Node.jsでAzureBLOBStorage内へリソースのアップロード、ダウンロードする
- 5. AlmaLinux + MySpeedで自宅回線の速度と安定度を計測しよう
- 6. Node.jsでのselectのデフォルト値
- 7. Node.jsでのloggerでWinstonを選択した
- 8. Discord.js v14 でステータスをモバイルにしたい！えっ、プロパティはなくなった…？
- 9. Node.jsからCloudflare R2に動画ファイルをアップロードしてみるメモ
- 10. Node.Jsのアップデート不備の解消
- 11. GCP Cloud Dataprep機能/実装
- 12. Qiita CLI を Node.js on Docker Compose 環境で動かしてみよう！
- 13. Firebase Authenticationを使った、認証の実装の様子
- 14. React ：npm ERR! cb.apply is not a function
- 15. ひよこエンジニアの学習日記
- 16. Node.jsインストール(anyenv)
- 17. 【備忘録】yarn berry (v2~v4)のリポジトリをcloneしたときに’MODULE_NOT_FOUND’エラー
- 18. msw+expressでGraphQL APIのモックサーバを建てる
- 19. package.jsonからversionを取得する
- 20. Node.jsの環境構築
Node.jsを使ってサーバを起動する際に、React Iconsが原因のエラーが発生
# はじめに
Viteを使って作成していたサイトをSSRに移行しようとしていた時に起きたエラーです。server.jsなどを使ってサーバを立ち上げようとすると
“`bash
SyntaxError: Named export ‘BsSoundwave’ not found. The requested module ‘react-icons/bs/index.esm.js’ is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:import pkg from ‘react-icons/bs/index.esm.js’;
const { BsSoundwave } = pkg;
“`というようなエラーが発生しました。
#### 開発時のバージョン
| 使用技術 | バージョン |
|:-:|:-:|
NodeJS: V8エンジン編
## NodeJSについて学ぶべき要素
この記事では、NodeJSに関してより具体的に学ぶ資料です。1. イベントループとlibuv
1. V8エンジンとメモリライフサイクル
1. コアモジュール# V8エンジン
NodeJSのJavaScript実行エンジンは、GoogleのV8 JavaScriptエンジンが採用されています。https://github.com/v8/v8
V8エンジンは、Chromeでも採用されている高速なJavaScript実行エンジンで、その名前の由来は燃焼機関のほうのV8エンジンに由来していると言われています。
## どのV8エンジンを利用しているか
NodeJSでは、それぞれのバージョンで利用しているV8エンジンのバージョンが異なります。
NodeJSのREPL環境で確認してみましょう。“`
> process.version
‘v16.14.2’
> process.versions
{
node: ‘16.14.2’,
v8: ‘9.4.146.24-node.20’,
uv: ‘1.43.0’,
zlib:
typescript の型を正規表現っぽく書く ( 型に型を埋め込む / Union型でOR表現する )
# コード例
以下のように、型指定の中に型を埋め込めるようだ
“`ts
type SomeType1 = `${number}px`“`
文字列を OR でつないで正規表現チックにすることも出来る
“`ts
type SomeType2 = `IT IS ${‘YES’ | ‘NO’}`
“`正規表現そのものを書けるわけではないようだが、これを組み合わせると正規表現チックに書けそうだ
## 090で始まる電話番号とか
“`ts
type PhoneNumber = `090${‘-‘ | ”}${number}${‘-‘ | ”}${number}`
“`## 全体をユニオン型でつないで OR 表現するとか
“`ts
type RGB = `rgb(${number}, ${number}, ${number})`;
type RGBA = `rgba(${number}, ${number}, ${number}, ${number})`;
type HEX = `#${string}`;type Color = RGB | RGBA
Node.jsでAzureBLOBStorage内へリソースのアップロード、ダウンロードする
Node.jsからazure blob storage内のリソースをアップロード、ダウンロードするためのコードを紹介します。
まずは、Azure SDKをインストールします。
~~~bash
npm install @azure/storage-blob
~~~次に、指定したファイルをblob storageにアップロードします。
~~~javascript:upload
// Azure Storage Blob SDKをインポート
const { BlobServiceClient } = require(‘@azure/storage-blob’);async function uploadBlob(containerName, blobName, content) {
// 環境変数から接続文字列を使ってBlobServiceClientインスタンスを作成
const blobServiceClient = BlobServiceClient.fromConnectionString(process.env.AZURE_STORAGE_CONNECTI
AlmaLinux + MySpeedで自宅回線の速度と安定度を計測しよう
# MySpeedとは
継続的に回線速度の計測を行い最大30日間記録することで、回線状況の分析ができるツール。https://github.com/gnmyt/myspeed
## 機能
* 速度、Pingなどの統計情報を生成できる
* cronを使ってスピードテストを自動化できる
* ひとつのインスタンスに複数のMySpeedサーバーを追加できる
* テスト時にエラーが発生したときに、メールなどでHealth Checkできる# セットアップ
## Node.js インストール
Nodejsが必要なのでインストールします。
“`
# インストール可能なバージョンの確認
$ sudo dnf module list nodejs
AlmaLinux 9 – AppStream
Name Stream Profiles Summary
Node.jsでのselectのデフォルト値
# 問題点
`# 結論
`ちなみに、`
# HTMLの仕様ではなく、JSXの仕様
でも下記のHTMLの仕様を読んでも、`defaultValue`というプロパティがなくて、とっても気持ち悪いのです。
– [<select>: HTML 選択要素 – HTML: ハイパーテキストマークアップ言語 | MDN](https://developer.mozilla.org/ja/docs/Web/HTML/Element/select)
– [HTML
Node.jsでのloggerでWinstonを選択した
Node.jsの開発において、適切なロギングツールを選ぶために調査したことをまとめたいと思います。。
この記事では、Node.jsのロギングにWinstonを選んだ理由と、他の人気のあるロギングライブラリとの比較を紹介します。## なぜWinstonを選ぶのか？
WinstonはNode.jsの中で最も人気のあるロギングライブラリの一つです。
私は以下の理由でWinstonを選択しました。
1. **アクセス毎のロググルーピング**
Winstonを使うと、アクセス毎にログをグループ化し、整理しやすくすることができます。
2. **ログの構造化**
ログの内容を構造化し、後で分析や管理がしやすくなります。
3. **将来の拡張性**
Winstonには、将来的にAmazon S3などのストレージサービスへログを転送するためのモジュールが用意されています。さらに、Winstonは多くのリファレンスや記事があり、実績も豊富です。
そのため、多くの場合でWinston以外を選ぶ理由は少ないと言えます。## 他のロギングライブラリとの比較
No
Discord.js v14 でステータスをモバイルにしたい！えっ、プロパティはなくなった…？
# モバイルステータスって？
こういうやつ
実はこれ、スマホだとモバイルとして表示されないんですよね。なぜでしょう…？
## 技術的な内容
実はこれは、接続元デバイスから判定しており、その情報はDiscord Gatewayに接続する際[^2]、identifyに自己申告する形で含まれています[^3]。
そのため、identifyを変更すればよいわけです。要は User-Agent 書き換えのようなものですね。
# TL; DR
“`ts
const client = new Disc
Node.jsからCloudflare R2に動画ファイルをアップロードしてみるメモ
R2に動画ファイルをアップロードしてみます。
## 通常はCloudflare Workers上からアップロードするのが良い
ただ重たい処理などがあるとCloudflare workers上だと処理がキャンセルされてしまうことがあります。
– 重たいファイルを扱う場合
– その他単純にR2を外部から使いたいなどの時はNode.jsからアップロードするという選択肢も持っておくと良さそうでした。
## node-cloudflare-r2
パッと調べて出てきたこのライブラリが手軽でありがたかったです。
https://www.npmjs.com/package/node-cloudflare-r2
“`js
$ npm i node-cloudflare-r2
“``accountId`、`accessKeyId`、`secretAccessKey`の3つのキーはCloudflare R2のページから取得できます。
`https://xxxxxxxxxxxxxxxxxxxxxx.r2.dev`といった形のPublic URLも必要ですが、同じくページから確認で
Node.Jsのアップデート不備の解消
# Astroを使ったブログを作ろうとした
外に向けたアウトプット&備忘用に自分のブログを作ろうとし、[ShincodeさんのYouTube動画](https://www.youtube.com/watch?v=0zvxvmQqoZ0)を元にブログ作成にかかりました。
WordPressでやるよりJSなどを学びたいということでReactで編集できるAstroを使うことにしました。単に早くできそうだったというのも大きいです。# npm run devでつまづく(Node.jsのバージョンが古い)
[Astro](https://astro.build/themes/)から好みのテンプレートをgit cloneし、npm install、その後
“`
$npm run -dev
“`
したところで以下のエラー。“`
Node.js v14.21.3 is not supported by Astro!
Please upgrade Node.js to a supported version: “>=18.14.1”
“`
上記のエラー文と他の行にWARN lifec
GCP Cloud Dataprep機能/実装
# GCPのCloud Dataprepの概要と機能
## 目次
– [概要](#概要)
– [Cloud Dataprepとは](#Cloud-Dataprepとは)
– [主な特徴](#主な特徴)
– [機能/詳細](#機能/詳細)
– [データ準備と変換](#データ準備と変換)
– [視覚的なデータ探索とプロファイリング](#視覚的なデータ探索とプロファイリング)
– [データ品質の監視と洞察](#データ品質の監視と洞察)
– [簡単なデータのシェアとコラボレーション](#簡単なデータのシェアとコラボレーション)
– [まとめ](#まとめ)
– [サンプルコード](#サンプルコード)## 概要
### Cloud Dataprepとは
Cloud Dataprepは、Google Cloud Platform（GCP）のデータプレパレーション（データ準備）サービスです。データのクリーニング、変換、統合などを視覚的に行うことができます。クラウド上で簡単にデータの事前処理や前処理を行い、データ分析や機械学習モデルのトレーニングに使用することができます。
Qiita CLI を Node.js on Docker Compose 環境で動かしてみよう！
## はじめに
そもそも、ローカル（ ホスト ）に Node 環境があるなら、基本的には、あえて Docker で動かす必要もないわけですが、案外、同じことを考える人も多いもので、既に、いくつかの記事が存在していますね。
https://qiita.com/search?q=Qiita+CLI+Docker
個人的には、`node_modules` ディレクトリ等は Docker コンテナ内にだけあればよく、環境を丸ごと作り直したりするのが、非常に簡単だという点に、特に魅力を感じているのかもしれません。
というわけで、本記事では、Qiita CLI だけでなく、何かを Node で動かす際、Docker Compose を使って環境構築したい場合に、広く参考になりそうな手順を、備忘録も兼ねて、紹介していきます。
## 確認と準備
ともあれ、まずは、Qiita CLI を動かすために必要なファイルなどを生成してみて、確認するところから始めていきましょう。
https://github.com/increments/qiita-cli
ローカル（ ホスト ）環境に Qiit
Firebase Authenticationを使った、認証の実装の様子
前回、IDaaS認証の基礎的な仕組みをお伝えしましたが、今回は、Firebase Authenticationを使って、実装する時の様子をお伝えします。😀
FirebaseでWebアプリをデプロイする前提です。Firebaseには、Authenticationという仕組みがあるため、これを利用する登録手続きを行います。
ここではIdP（IDaaS Provider）としてGoogleを利用します。
次に、フロント（js）側で使用する設定情報を、管理コンソールから入手します。
ログイン用の画面
React ：npm ERR! cb.apply is not a function
# エラー発生：npm ERR! cb.apply is not a function
Reactの初期設定コマンド`npx create-react-app . –use-npm`を実行したところ、`npm ERR! cb.apply is not a function`というエラーが発生しました。
“`sh
twitter_react_frontend % npx create-react-app . –use-npm(node:67518) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node –trace-deprecation …` to show where the warning was created)
npm ERR! cb.apply is not a functionnpm ERR! A complete log of this run can be foun
ひよこエンジニアの学習日記
# 0.はじめに
地方の大学に通う情報科学部２年生です
個人でのwebアプリ開発に向けての備忘録を残していきます
前提情報は簡単にまとめますが，それ以降は基本的には自分用のメモなのでかなり雑に書いていきます簡単な経歴
– 情報科学部所属
– プログラミング歴 １年程度
– 開発経験ほぼなし
– progateや本などを使って独学こんな感じです
ずっとどのようにして勉強するのが正解なのかわからず迷走しています今まで大学や個人での学習で触ったことのある言語
– c++(競プロの学習をしたときに少々）
– Python（大学１年生の時に１年間学習していた）
– java（授業でアプリ開発）
– javascript（メイン）
– Kotlin（授業でアプリ開発）
– htmlcss(これは違うか)
– php（progate）# 1.どんなひとに読んでもらいたいか
– 初めてのプログラミング勉強はどのようにはじめたらよいのかわからない人へ
– 駆け出しエンジニアを高みの見物してみたい人向け
– 日記形式で投稿するのでどのくらいの期間でどのくらいのレベルになるのかわかるか
Node.jsインストール(anyenv)
## 前提
anyenvがインストールされていること
## nodenvをインストールする
“`zsh
anyenv install nodenv
“`“`
exec $SHELL -l
“`## anyenvを使ってNode.jsをインストールする
ここでは最新バージョンのNode.jsをインストールする
“`zsh
node_version=$(nodenv install –list | egrep ‘^[0-9]+\.[0-9]+\.[0-9]+$’ | tail -n 1)
“`“`zsh
nodenv install ${node_version}
“`“`zsh
nodenv global ${node_version}
“`“`zsh
nodenv rehash
“`“`zsh
node -v
“`“`:出力
v21.6.1
“`“`zsh
npm -v
“`“`:出力
10.2.4
“`
【備忘録】yarn berry (v2~v4)のリポジトリをcloneしたときに’MODULE_NOT_FOUND’エラー
# 発生した事象
yarn v1系を使用していて、グローバルはそのままに当該repoのみバージョンをyarn berry (v2〜v4)系に変更したのち設定ファイル(`.yarnrc.yml`、`package.json`)をcommit、push
それをpullしたコラボレーターから「yarnが使えない！」という申し出が出た“`bash:terminal
$ yarn installnode:internal/modules/cjs/loader:1051
throw err;
^Error: Cannot find module ‘/Users/OO/Documents/GitHub/reponame/.yarn/releases/yarn-4.0.2.cjs’
at Module._resolveFilename (node:internal/modules/cjs/loader:1048:15)
at Module._load (node:internal/modules/cjs/loader:901:27)
at Function
msw+expressでGraphQL APIのモックサーバを建てる
以下のGQLクエリに対してレスポンスするモックサーバを建てたい
“`graphql
query tasks {
tasks {
collection {
id
name
description
startAt
endAt
}
}
}
“`サーバの実装は以下。
faker, msw, @mswjs/http-middleware, express, corsは事前に全部npmでインストールしておく必要あり。
“`ts
import { faker } from “@faker-js/faker”;
import { createMiddleware } from “@mswjs/http-middleware”;
import cors from “cors”;
import express from “express”;
import { HttpResponse, graphql } from “msw”;const buildMockTask = () => {
// moc
package.jsonからversionを取得する
以下でできる
“`js
import { createRequire } from “module”;const require = createRequire(import.meta.url);
const { version } = require(“./package.json”);
“`なお `require` で指定するパスは実行時のパスになるので、もし `dist` ディレクトリ配下にJSファイルとして出力しているなどのケースでは `../package.json` とかになる。
Node.jsの環境構築
Node.jsの環境構築手順についてまとめました。
# **はじめに**
**Node.jsとは**
JavaScriptをブラウザ上以外でも動くようにしてくれる実行環境のことです。
Node.jsを使用することで、JavaScriptでOSの機能（ファイルの読み書きなど）を扱えるようになります。
要するに、Node.jsを使用することでバックエンドでもJavaScriptを使用することが出来ます。
# **手順**
### **１ apt-getをアップデートする**
初めにパッケージリストを最新に更新しておきます。
“`bash
sudo apt-get update“`
### **２ Node.jsをインストール**
apt-getコマンドを使用してNode.jsをインストールします。
“`bash
sudo apt-get install nodejs
“`Do you want to continue? [Y/n]が表示されたら、yを入力して続行します。
