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

Node.js環境(Typescript)でJestを使用してテストを行う

## 使用環境
– windows11
– Node.js v18.17.1
– Visual Studio Code(VSCode)

Node.js環境は構築済みのところからの記事になります。
(`npm init`などは終了してプロジェクトが作成されている状態)

## フォルダ構成
“`
─ project rootフォルダ
├ scr/ : テストするTypescriptファイル用フォルダ
├ sample.ts : テスト対象ファイル
┝ test/ : テストコード用フォルダ
├ sample.test.ts : テストファイル
┝ packege.json
┝ jest.setup.ts
┝ jest.config.js
┝ tsconfig.json
┝ node_modules
“`
## 必要なパッケージをインストール
### Typescript環境用
– ts-node
– typescript
– @types/node

“`Typescript
// パッケージを

【初心者】React アプリの作成方法

仕事で、`TypeScript`と`React`を使用するプロジェクトに携わる予定なので、それの予習用です。

## コマンド実行
#### プロジェクト作成用コマンド（JavaScript用）
“`
npx create-react-app 「アプリ名」
“`
※事前にNode.js のインストールが必要
※「ユーザー\AppData\Roaming\npm」のディレクトリが無いみたいなエラーが出ますが、「npm」フォルダを作成すれば解消される場合があります。

#### プロジェクト作成用コマンド（TypeScript用）
`–template typescript`オプションを引数に追加することで、`TypeScript`用としてプロジェクトを作成することができます。

“`
npx create-react-app –template typescript 「アプリ名」
“`

#### アプリの開始用コマンド（Node アプリの共通コマンド）

“`
npm start
“`

一応これで、サンプルページが表示できます！

【初心者向け】TypeScript 導入方法

## インストール
コマンドラインで以下の２つのコマンドを実行してTypeScriptコンパイラをインストール。
（事前にNode.jsをインストールしておく必要がある）
“`
npm install -g ts-node
npm install -g typescript
“`

インストール完了の確認には、以下コマンドでバージョンを確認する。
`Version x.x.x`の様な出力がされればOK。
“`
tsc –v
“`

## コンソールで実行してみる
テストとして、以下ファイルを作成する。
“`test.ts
const test:string = ‘test…’;
console.log(test);
“`

コマンドで以下を実行 -> `test.js`ファイルが生成される。
“`
tsc test.ts
“`

以下コマンドで、JSコードを実行 -> コンソールに`test…`が出力される
“`
node test.js
“`
そういえば、普段使う機会少ないけど、`node`コマンドで`JS`実行できるんでしたね笑

WebSocket connection Errorについて

## 環境

### kubernetes
– ubuntu：22.0.4.1 LTS
– kubernetes：1.28.2
– containerd：1.6.24
– IP Address: 172.21.0.8

### Nodejsコンテナ
– node:18.17.1-alpine3.17
– react@18.2.0
– 環境変数
– PORT=3000

### 構成
– NodePortサービス
– TargetPort: 3000/TCP
– NodePort: 30669/TCP

## 事象
kubernetesでReactを起動し、ブラウザでアクセスしたところ以下のログが発生。

“`Error
WebSocket connection to ‘ws://:/ws’ failed:
“`

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2604097/dc8ff607-6535-765f-07

JavaScript まわりの用語あれこれ

# 概要
～script だの ～js だのが多すぎたのでまとめ。

# ECMAScript
– JavaScript の仕様、構文などをまとめた標準規格
– 要するに JavaScript のバージョンを示す（ 例：ES6 )

—

# Browser JS

– ブラウザ上で動作する JavaScript 環境
– 正確にはこんな単語はない（単に「ブラウザ上で動くJS」の意）
– 正確な表現があれば教えてください

# Node.js

– サーバー側で動作する JavaScript 環境
– **npm ( Node Package Manager )** と呼ばれるパッケージの管理システムを同梱している

—

## CommonJS

– JavaScript において、**モジュール**を使用するためのシステム
– Node.jsではデフォルトで全てのモジュールをこれで扱っている
– `require()`、`module.exports`などを使用

## ESModules

– ECMAScript 標準のモジュール管理システム
– 最新版の No

Node.js に入門したときの覚え書き

# はじめに
どうも。
普段は Express.js とか axios.js あたりを使ってﾁｮﾒﾁｮﾒしてるんですが、前提技術である **Node.js** について何も知らなかったので、改めて学んでみました。

内容的には以下の記事の嵩増しみたいなもんなので、改めて勉強される方はこちらの記事を推奨します。（とほほさん、いつも助かってます）

https://www.tohoho-web.com/ex/nodejs.html

# Node.js とは？

– **サーバーサイド**の JavaScript 実行環境
– **npm ( Node Package Manager )** と呼ばれるパッケージ管理システムを同梱
– **MEAN ( MongoDB ＋ Express ＋ AngularJS ＋ Node.js )** と呼ばれる構成で利用されることも多い

# なぜ Node.js なのか

– **Google V8 JavaScript エンジン** を採用しているため、高速
– 負荷の大きい処理（暗号化など）を内部で複数スレッド処理できる
– 様々なスケールに対

Node.jsの導入方法

# はじめに
ようやくWebへの重い腰が上がり、少しずつ着手しています。
Webは昔に少し触れたくらいで技術力はもはや無いに等しいので、改めてしっかり触れていこうと思います。
ただお気持ち表明だけだと忙しさに負けてしまうので、、、。
記事にすることで自身のモチベーションを維持していこうと思います！

まずは簡単にNode.jsの導入手順を備忘録も兼ねて記事として残しておこうと思います。

# Node.js導入手順
まず前提として環境はMacになります。
なのでMacに導入する前提で進めていきます。

まず、Homebrewを使用してnodebrewをインストールします。

“`
$ brew install nodebrew
“`

Homebrewを導入していない場合は以下ページより導入しておきます。

https://brew.sh/ja/

インストールが無事完了したら、次はnodebrewのパスを通すために調整します。

“`
$ nodebrew setup
“`

上記を実行すると通すべきパスの情報が出力されますので、そのパス情報を.zshrc (bashを使用し

LocalhostをiPhoneから確認する | Windows版

## 背景
Node.jsで起動した3000番ポートをiphoneで確認したい！
と思ったのですが、調べてもMacとiPhone, WindowsとAndroidなどしか見当たらず解決に時間がかかりました。
同じ状況にいる方の手助けになればと思います。

## 結論
ngrokというサービスを使います！

## 開発環境
– Windows 11
– iPhone

## 事前準備
1. ngrokに登録[（こちらから）](https://dashboard.ngrok.com/get-started/setup/windows)
2. 左バーの「Setup & Installation」が表示されていると思うので、AgentsからWindowsを選択
3. `Windowsキー + R` を押してcmdと入力し、コマンドプロンプトを起動
4. Chocolatoryが入っている場合はコマンドプロンプトから `choco install ngrok` を実行、入っていない場合はウェブサイトに戻ってDownloadから64ビット版をダウンロード
5. ダウンロードした場合は、.e

気になるあの人のタイプは〇〇！

## 1. 見た目のタイプ判定をする冷徹なLINEBot

今回は合コンや婚活を想定したLINEBotを作ったのでご紹介します。

皆さんは気になる異性に見た目がタイプであることを伝えた経験はありますか。

伝え損ねたせいで
**友達どまりになってしまった。**
ということがあるんじゃないでしょうか。

まあ伝えていたら進展が見られたかはわかりませんけどね。

しかし、あの頃
上手に伝えられていたら
後悔は少ないと思っている方は多いのではないでしょうか。

なかなか相手に直接、そういった気恥ずかしいことを伝えるのは
抵抗がありますよね。

そこで
***Taechable Machine***
の力を借りて
その悩みを解決させる
***LINE Bot***
を作りたいと思います。

## 2. 完成したLINEBot

このLINEBotを使えば
顔写真を送ってもらうことで
その相手に
見た目がタイプ

Astro.js と astro-compress をアップデートしたら Sharp でエラーが出た

# Astro.js と astro-compress をアップデートした

本日（2023年12月28日）、管理下のサイトにてnodeモジュールのアップデートを行ったところ、開発機のWindowsでは問題なかったのだが、ビルドを行うLinux上でエラーが発生した。

以下がアップデート内容（npm-check-updatesを利用）

“`sh
@astrojs/check ^0.3.1 → ^0.3.4
@astrojs/sitemap ^3.0.3 → ^3.0.4
astro ^4.0.3 → ^4.0.8
astro-compress ^2.2.3 → ^2.2.5
“`

エラーメッセージ

“`sh
$npm run build

[vite] Error when evaluating SSR module /path_to_project/astro.config.mjs: failed to import “astro-compress”
|- Error: Could not load t

Stable Diffusionで空いた時間にLineスタンプ大量生成！

こんにちは、ひよっこエンジニア兼デザイナーのウエハラ　シンペイです。

プログラミングを初めて早１ヶ月。今回は話題のAIを使って何かできないかと思い、空いた時間にLineスタンプメーカーを作ってみようと思います！レッツ小銭稼ぎ！

# Stable Diffusion×LINEでスタンプ用のイラストをつくる
色々方法はあると思うのですが、今回は基本のプロンプトを記述して、なおかつ空き時間にサクッと送って置けるようにLINE Message APIを使って構築していきます。


# 1.Hugging Faceでアカウント作成

[Hugging Face](URL “https://huggingface.co/”)でアカウント作成し、導入方法や使用する上でのライセンスについてを調べると、アクセストークンの発行をしました。モデルについてはStab

田舎と都会論争に審判登場！？

## 1. 田舎ｖｓ都会
田舎に住むのはどうとか、都会に住むのはどうとか
色々と持論を展開している人は多いですね。

田舎の定義や都会の定義は
ご存じでしょうか。

広辞苑によると


ということみたいです。

都会はまあ皆さんのイメージにお任せします。

皆さんは田舎に住みたいですか？
都会に住みたいですか？
現在は田舎に住んでいますか？
都会に住んでいますか？

わたしは田舎派なのか都会派なのかというと
利便性という点では都会が好きです。
ゴルフ場が多い点では田舎も好きです。

とは言うものの
どこまでが田舎で
どこからが都会なのかの判断は難しいと思います。

私自身も自分が生まれ育った場所が
都会なのか田舎なのかは判断がつきません。

自信をもって
「田舎だ」とか「都会だ」
と判断する人はいます

【L2、L3】サーバーでWeb Workerを動かしてみる

## はじめに

2023年12月21日分のアドベントカレンダーの記事になります。

以下記事の続きです。
【L1、L2】ブラウザでWorkerを動かしてみる（基本編）
【L1、L2】ブラウザでWorkerを動かしてみる（番外編）

前回、前々回では、ブラウザにてWorkerを実行してみましたが、今回はサーバーでWorkerを実行してみようと思います。javascriptの実行基盤であるNode.js上することで確認できそうですね。
せっかくですから、前回、前々回で構築した環境であるfastifyを利用しちゃいましょう。

## この記事で分かること

* Node.js上で専用ワーカーを使いやすくするwokerpoolモジュールを利用方法。

## 準備

確認環境は前回、前々回で構築したfastify＋typescriptを利用します。workerpoolもインストール済だと思いますので特にモジュールのインストール、設定変更は不要です。

## 確認コードの作成

特定リクエストにワーカーを実施して時間のかかる処理を実行できるようにしましょう。
時間のかかる処理はフィボナッチ数列を

ESMとCJSのimportとexport

# CJSとESMのexportとimport

## CJSの場合のExport
### 一つのモジュールのエクスポート
“`sample-1.js
const someFunc () => {
//do something
}

module.exports = somoFunc
“`
### 複数のモジュールのエクスポート
“`sample-1-2.js
const someFunc () => {
//do something
}
const hoge =”hoge”

// その1 まとめてexport
module.exports = {
culc: someFunc
hoge: hoge
}
// その2 一つひとつエクスポート
exports.someFunc = () => {
//do something
}
exports.hoge = “hoge”

“`

## ESMの場合のExport
### 一つのモジュールをエクスポートする場合
“`sample-2.js
//デフォルトのエクスポート　その１
expo

Node.js/TypeScriptの特性と現場での活用

## この記事は？
[@cosme](https://www.cosme.net/)を運用するistyleでは、業務でNode.jsを積極的に活用しています。私、村田がいるメディア開発グループにおいても積極的に使っており、BFFのような中間層の実現、バッチの処理、API実装、フロントエンドの実行環境などなど使われ方は多岐に渡ります。この記事では、Node.jsの導入を考えている組織や、Node.jsの基本を振り返りたいエンジニアに向け言語環境の特性と活用を考えてみます。

## Node.jsの特性
Node.jsはサーバー上で動き、ブラウザでJavaScriptが動く機構とは異なります。近年、サーバー開発はもちろん、Next.js, RemixなどのNode.jsを利用する各種フロントエンドフレームワークが、サーバーに処理を寄せる流れになってきていることから、フロント開発者にとってもNode.jsの理解は重要でしょう。高性能な**v8エンジン**を搭載していること、そして何より、Node.jsの最も大きな特徴として、**シングルスレッドおよびノンブロッキングI/O**であること、**

Angular12＋Nxで作成されたWEBサイトをAngular17にアップデート

# はじめに
Angular12で作成されたWEBサイトを最新（Angular17）にアップデートする機会があったので、ソースと手順を残しておく。
Nxを使ったモノレポ構成だったこともあり、簡単にはいかなかった。

以下のAngular12のソースを17にバージョンアップする。
[Angular + Nest Example2](https://github.com/kyv28v/angular-nest-example2)
“`
Angular CLI: 12.2.11
Node: 16.12.0
Package Manager: npm 8.1.0
“`

# npm-check-updatesを使用した更新（失敗）
まずはnpm-check-updatesを試してみる。
`ncu -u`でpackage.jsonをまとめて最新にする。

“`
PS C:\Work\git\angular-nest-example2> ncu -u
Upgrading C:\Work\git\angular-nest-example2\pack

【Vonage】Video API スタートアップガイド「ビデオ通話が簡単に出来ちゃうAPIがあるんですか！？」