Node.js関連のことを調べてみた

Node.js関連のことを調べてみた

【Node.js】Error: error:0308010C:digital envelope routines::unsupportedの解決法

# Reactのwebアプリをローカルサーバーで起動できなくなった
あるwebサイトを久しぶりにアップデートしようと手を加えて確認しようとした。

“`
$ npm start
“`

すると見たことも無いエラーが表示されたのである。。。:rolling_eyes:

“`console
Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:69:19)
at Object.createHash (node:crypto:138:10)
at module.exports (/home/yonas/git/server/ui/node_modules/webpack/lib/util/createHash.js:135:53)
at NormalModule._initBuildHash (/home/yonas/git/server/ui/node_modules/webpack/lib/NormalM

元記事を表示

Docker環境のNode.js + TypeScriptでDatadogAPMを検証する

前提として、ローカル環境にDockerインストール済み、Datadogのアカウント作成済みの方を対象としています。

# Datadogにて前準備

APM導入に必要なAPIキーとアプリケーションキーを作成します。

## APIキーの取得

Datadogにログインしたらメニューの一番上にある「Go to」を押下します。
検索窓にて”api”と入力して「API Keys」を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1671245/57d4cd87-0809-705d-6b47-1f5af3eec4ac.png)

遷移したら右の方にある「+ New Key」というボタンを押下します。

適当な名前を入力してAPIキーを作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1671245/88495ede-d4c8-e41b-b9cb-d9f819ea9c5e.pn

元記事を表示

Google Cloud Runでdeployできないエラー備忘録

# 場面
GCP Cloud Runの[公式tutorial](https://cloud.google.com/run/docs/quickstarts/build-and-deploy/deploy-nodejs-service?hl=ja)実行中

# 環境
WSL2 Ubuntu
Google Cloud SDK 463.0.0
node v21.5.0

# エラーメッセージの確認
[公式tutorial](https://cloud.google.com/run/docs/quickstarts/build-and-deploy/deploy-nodejs-service?hl=ja)の以下のコード実行時に発生
“`sh
gcloud run deploy
“`
コンソール画面にログ確認用のURLが表示されるので、ブラウザでチェック

# エラーメッセージ
“`
Step #1: ERROR: failed to build: executing lifecycle. This may be the result of using an untrusted

元記事を表示

[TypeScript] Expressをやってみる(10分で?)

# はじめに
typescriptでAPIを作ってみたいなぁと思い、expressを始めてみました。そこで、めっちゃ初期のところは簡単だったので、書いてみる

# Step1: フォルダの作成

最初に、プロジェクト用の新しいフォルダを作成します。任意の名前をつけてください。
今回は`express-ts-app` を使用します。

“`bash: bash
mkdir express-ts-app
cd express-ts-app
“`

# Step2: npmプロジェクトの初期化

プロジェクトフォルダ内で、以下のコマンドを実行してnpmプロジェクトを初期化します。
これにより、`package.json`ファイルが作成されます。

“`bash: bash
npm init -y
“`

ちなみにこのときの `-y`は、**yes**の略です。すべての質問に自動的に「はい」と回答します。`npm init`だけを実行した場合には、プロジェクト名、バージョン、説明、エントリポイント、テストコマンド、gitリポジトリ、キーワード、ライセンスなどについて、入力や回答を求めら

元記事を表示

Qiitaの記事をGithub で管理したくて、WSL にvolta でnode インストールしてQiita 記事をpull まで

# 今回の趣旨

Qiita の記事をQiita 内で管理してもよかったのですが、どうせならGithub で管理してみたいなという欲望があったので、設定をしてみることにしました。その時にWSL と普段は連携しているので、WSL 上にnode をインストールする必要が出てきました。

# 今回の記事の前提

– Github のアカウントをもっていること
– Qiita でpersonal access token を発行済みであること
(後にGithub action を使うため)

# volta install

curl でvolta をインストールします。

“`powershell
$ curl https://get.volta.sh | bash
“`

volta のインストールの確認をしていきます。

“`
volta -v
1.1.1
“`

(volta のバージョンを確認するコマンドでバージョンが表示されない時は、一度WSL などを閉じてから再度開いてみるとバージョン確認コマンドが通ると思います。)

# node install

今回 Qi

元記事を表示

NodejsでS3にファイルをアップロード・ダウンロード

### 概要

こちら記事では、NodeJSでローカルでS3アップロードとダウンロードの基本的な方法を書かせていただきます。

内容として5つあります

1.環境

2.前提

3.初期設定

4.アップロード

5.ダウンロード

6.最後

7.参考

### 1.環境

– Nodejs v21.6.0
– MacOS

### 2.前提

– デモ用のS3 バッケットが作成済み
– ローカルに認証情報ファイル設定ずみ (まだ設定しない場合は[こちら](https://docs.aws.amazon.com/ja_jp/cli/latest/userguide/cli-configure-files.html)をご参考してください)
– プロフィルにせめてS3アクセス権を付与
– デモ用画像を準備

### 3.初期設定

作業のフォルダを作成

“`bash
desktop/m

元記事を表示

npx コマンドでCLIを実行したら”could not determine executable to run”って言われた

# 動作環境について
デスクトップのWindows環境と、ラップトップのChromeOS(CrostiniでDebianが動作)環境の2種類で開発していた。Nodejsのバージョンはどちらもv20.22.0

# 経緯
理由は分からないが、あるプロジェクトではnpxコマンドでfirebaseエミュレーターを起動させる構成になっていた。そしてなぜかWSLではエミュレーターが動いたのにCrostini側でエラーが発生して起動しないという問題が発生。

“`bash
npx firebase emulators:start –export-on-exit=’./.emulator’ –import=’./.emulator’
npm ERR! could not determine executable to run
“`

雑に訳すと「お前が入力したコマンドは実行できるように見えない」みたいな感じだと思われる。

# 原因:パッケージ名とコマンドが揃っていない。
エラーメッセージで検索するとすぐに情報が見つかった。

https://kazuhira-r.hatenablog.co

元記事を表示

「Error: error:0308010C:digital envelope routines::unsupported」エラーでビルドができない

# 問題
「Error: error:0308010C:digital envelope routines::unsupported」というエラー発生してビルドができない。

# 環境
Mac OS

# 原因
Node.jsの新しいバージョンにしたことで、パッケージやライブラリとの互換性に問題が生じたため。

# 解決方法

nvmが入っていない場合はインストール
“`bash
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
nvm –version
“`

ここで
「-bash: nvm: command not found」というエラーが返ってきた場合は

“`bash
source ~/.nvm/nvm.sh
“`
上記のコマンドを実行。

その後、改めてお好きなバージョンのnvmをインストール

“`bash
nvm install 12.0.0
nvm use 12.0.0
“`

再度ビルドを行なって確認
“`bash
npm run bui

元記事を表示

デジタルお小遣い帳を作ってみたい!by初心者 第1回目

## はじめに
この記事は、初心者がWebアプリ制作を通して力をつけていこう!という趣旨の記事です。
途中で躓くかもしれません。その際はごめんなさい。
アドバイス等はとてもうれしいのですが、誹謗中傷はおやめください(泣きます)。

## なぜお小遣い帳なのか
・自分で使えるものが欲しかったから
・家族が家計簿を欲しがっていたから(それっぽいものをつくって褒められたい!!)

## 自分の技術力
JavaScriptを少し触ったことがある程度
なので実はハードル高め!

## 使いたい思っている技術
・React
・Node.js
・Express
・MongoDB
・vite

## 作りたいアプリに必要な機能(ページ)
・収入入力ページ
・支出入力ページ
↓ここからはいずれ挑戦
・ほしいものページ
・グラフビューページ
・サブスクページ
・目標ページ

## 今回作るもの
アプリのひな型!

### 1.開発用のフォルダを作る
・名前はそのまんま”money-book-mern”としました。
・フォルダをVScodeで開きます。
・viteを使ってプロジェクトを作成します
`

元記事を表示

Reactからffmpeg.wasmを使って動画にウォーターマークを埋め込んでみる

## 概要
Reactでffmpeg.wasmを使って、選択した動画ファイルに対してウォーターマーク(透かし)を埋め込むツールを作ります。

## ffmpeg.wasmとは
[ffmpeg.wasm](https://github.com/ffmpegwasm/ffmpeg.wasm)は、FFmpegの純粋なWebassembly/Javascript移植版です。ブラウザ上でビデオやオーディオの録画、変換、ストリーミングを行うことができます。Webassemblyなので従来はサーバサイドで行っていた動画リソースに対するいろいろな処理をクライアントで処理することが可能になります。

## Reactのプロジェクトを用意する
予めNode.jsのv16以上を使えるようにしてください。
“`bash
# バージョンをチェック
$ node -v
“`
### インストール
今回は[Vite](https://ja.vitejs.dev/)を使います。
“`bash
$ npm create vite@latest
“`
**Select a framework**で`React`を

元記事を表示

SvelteKitで稀にchunkファイルがNot foundエラーになる問題に遭遇した

## 発端

クライアントでページ A を表示したまま放置して、サーバに新しいバージョンをデプロイした後、放置していたクライアントでページ B へ遷移した際、下記のようなエラーが発生しました。

“`
Not found: /_app/immutable/chunks/HogeComponent.2b502a68.js
“`

## 原因

調査した結果、クライアント使用中に新しいバージョンをビルドしたことでチャンクファイルが存在しなくなってしまったことが原因のようでした。元々 SvelteKit にはスクリプトのバージョン確認機能が搭載されているみたいなのですが、ページのプリロードなどを使用していると先読みしたスクリプトでエラーが発生するケースも有るようです。

参考:[GitHub Not found /\_app/immutable/assets/xxx #9089](https://github.com/sveltejs/kit/issues/9089)

## 解決策

SvelteKit の公式ドキュメントに[バージョン管理に関する記述](https://kit.sve

元記事を表示

Astroのススメ

## Astroとは
Astroは[コンテンツ重視](https://docs.astro.build/ja/concepts/why-astro/#%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84%E9%87%8D%E8%A6%96)の高速なWebフレームワークです。サーバサイドの実装もできるので認証を組み込んだりヘッドレスCMSと連携することもできます。

Astroは比較的新しいフレームワークで、
[2022.stateofjs.com](https://2022.stateofjs.com/en-US/)ではDeveloper RetentionとDeveloper Interest部門で1位を獲得しました。
2023/8/30にv3.0がリリースされましたが、v2のリリースが2023/1/25なので比較的速いスピードで成長していることが伺えます。

https://astro.build/

[日本語のドキュメント](https://docs.astro.build/ja/getting-started/)が用意されているので学習

元記事を表示

sveltekit-view-transitionを使ってSvelteKitでView Transition APIを簡単に使う

## View Transition APIとは
[MDN Web doc](https://developer.mozilla.org/ja/docs/Web/API/View_Transitions_API)によると
> ビュートランジション API は、異なる DOM 状態間のアニメーション遷移を簡単に作成する仕組みを提供し、同時に DOM コンテンツも単一の手順で更新します。

とのことです。つまりスマートフォンアプリなどで一般的なスムーズな遷移表現のWeb版ですね。

## SvelteKitとView Transition API
SvelteKitとView Transition APIについてはSvelte.devの[Blog記事](https://svelte.dev/blog/view-transitions)に記載の通り、SvelteKit 1.24で実装されたonNavigateライフサイクルで利用可能になりました。

以下のコードはページ遷移時にクロスフェード効果を適用します。
“`js
onNavigate((navigation) => {
if (!

元記事を表示

Symbolノードリスト取得Script

Symbolのノードリストが欲しいときにどうぞ。
ノードリストは変動するので最新のリストは

https://symbolnodes.org/nodes/

にあります。

下記のコードをサイトにアクセスしてF12を押して
ブラウザーコンソールにコピペして叩くとノードのドメインリストが取得できます。
httpsかつapiノードを取得します。

“`
gets=document.getElementsByTagName(“table”)[1].getElementsByTagName(“tr”)

NodeList=[];
search=”.”;

for ( ass = 0; ass < gets.length; ass++) { const element = gets[ass] if(element.childNodes[8].innerHTML.indexOf("https")!=-1){ if(element.childNodes[5].innerHTML.indexOf("api")!=-1){ //ノードのドメインに検索したい文字列があれば"."を変更する。 //

元記事を表示

GitHub Actions上でのprocess.stdout.clearLine is not a function

ローカル開発では問題なく使えていた`process.stdout.なんとか`がGitHub Actions上だと使えなかったです。

“`
process.stdout.clearLine();
^

TypeError: process.stdout.clearLine is not a function
“`

## GitHub Actionsではprocess.stdout系は使えない模様。

issueあげてる人もいるようにprocess.stdout系は使えない模様。

https://github.com/vercel/pkg/issues/356

またprocess.stdout.writeだけは使えるようです。

GPTもこんな回答を

> ![スクリーンショット 2024-02-06 19.44.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/a0d3803e-b1e0-2a37-6341-fe25a6f3

元記事を表示

Node.jsでTCP通信する簡易クライアントとサーバを作ってみた

# はじめに
JavaScriptアプリケーションで簡易的にサーバに接続して状況確認する機能を実装できるか検討する必要があり、調査したところNode.jsの`net`ライブラリを使用することで実現できそうなことが分かった。
しかし、サンプルコード等を調べてみるとクライアントとサーバ間で複数回会話するものはなかった。
そこで、試行錯誤して開発してみた。

# サンプルコード
サーバアプリケーションとクライアントアプリケーションを開発した。

### サーバアプリケーション
“`javascript:サーバアプリケーション
const net = require(‘net’);

const sever = net.createServer(socket =>{
socket.on(‘data’, data => {
console.log(data + ‘ from ‘ + socket.remoteAddress + “:” + socket.remotePort);
socket.write(‘Echo: ‘ + data);
});

元記事を表示

OpenShift 上の container に Dev Containers でアタッチする

# 要約
– OpenShift 上の container に Visual Studio Code ( 以降 VSCode ) の [Dev Containers extension](https://code.visualstudio.com/docs/devcontainers/containers) で接続できたら便利かもしれないと思った
– extension のドキュメントには Kubernetes 上の container に接続できそうな記載がある
– Kubernetes で接続できるのであれば OpenShift でも接続できるに違いない
– 試した結果、接続できたが途中何度かつまづいたため記事に残す
– OpenShift を初めて 2 日程度の初心者のためもっと良い方法や間違っている箇所がある場合は教えてください
– 環境は以下を用いた
– クライアント ( VSCode の実行環境 ) は Windows 11
– [Redhat Developer sandbox](https://developers.redhat.com/developer-sa

元記事を表示

GitHub Organizationから専用のNode.jsのパッケージを展開する

## はじめに
この記事ではGitHub Organization内でのみ利用可能なNode.jsのパッケージを公開する方法を紹介します。

:::note info
パッケージはGitHub内の権限などを活用して公開するため、通常の[npm public registry](https://registry.npmjs.org)に公開するのではなく、GitHub Packagesのnpm registryに公開します。

GitHub Packagesでnpm private registryを利用するには、GitHub Team等のプランに加入する必要があります。利用できる環境にあるか確認してからお試しください。
:::

## パッケージを公開する
### 準備
公開するNode.jsのプロジェクトを準備します。今回は簡単のため2つの数値を足し合わせるプログラムを公開することを考えます。
ますはNodejsのプロジェクトの初期化を行います。対象のディレクトリで以下のコマンドを叩いてください。
“`sh
npm init
“`
名前は`@NAMESPACE/add_number

元記事を表示

Qiita ハッカソン 2024 準備編

## TODO

– [ ] Open AI API
– [ ] リスト化
– [ ] サンプル実装
– [ ] Gemini Pro API

元記事を表示

npm install —save-devオプションの意味

npmを使用してマークダウンを使って職務経歴書を作成している
そこで、参考にさせて頂いている下記の記事中でtextlintを使用すると良いと学んだ

https://zenn.dev/ryo_kawamata/articles/resume-on-github

installのコマンドを見た時に、疑問が湧いた

“`
$ npm install –save-dev textlint
“`

–save-devってなんだっけ?

前にも調べたことがあった気がしたが、完全に忘れていた。
なので、もう一度調べてみた。

## どういうときに—save-devするのか?

このオプションの有無で何が変わるのか?

を考えるとその存在意義が分かりやすかった。

このオプションは、
package.jsonに記載される依存関係が、
devDependenciesになるか?Dependenciesになるか?の違いを生み出す。

開発用のパッケージか、実行用のパッケージか分けられる。

当然開発していれば、これらを分離したいと思うのは当たり前だ。

特にLinterなんて、アプリケーシ

元記事を表示

OTHERカテゴリの最新記事