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

【React/Tailwind】YouTube動画を埋め込むためのコンポーネントを作ってみる(レスポンシブ)

## 概要
ReactでYouTube動画を埋め込むためのカスタムコンポーネントを作成してみました。スタイリングには、Tailwind CSSを使用し、レスポンシブに対応させました。

## コンポーネントの機能

– YouTube動画の埋め込み
– タイトルの表示
– カスタムスタイリング（Tailwind CSSを採用し、レスポンシブに対応）
– 動画情報のURLまたは動画IDの両方に対応

**対応している動画のURL形式について**
“`
https://www.youtube.com/watch?v=VIDEO_ID　標準形式のURL
https://youtu.be/VIDEO_ID　短縮URL

https://youtube.com/watch?v=VIDEO_ID%E3%80%80%E5%9F%8B%E3%82%81%E8%BE%BC%E3%81%BF%E3%83%97%E3%83%AC%E3%83%BC%E3%83%A4%E3%83%BC%E3%81%AEURL

“`

## デモ

https://react-youtube-embed.vercel.app/

## 使用例

### Propsの説明
| プロパティ名 | 説明

Node.jsでexpressとejsを使用しウェブページを作成（参考程度

# 使用したパッケージ
### 1.express
インストールコマンド

npm

“`
npm install express
“`

yarn

“`
yarn add express
“`

### 2.ejs

インストールコマンド
npm

“`
npm install ejs
“`

yarn

“`
yarn add ejs
“`
# サイトのファイル構成
– publicフォルダー
cssやimgなどを置くフォルダー
– views
app.jsでアクセスがあったページのejsを置く場所
-　app.js
サイトへアクセスがあったページへ移動処理など

“`
sample/
┣━ public/
┃　　　┣━ css/
┃　　　┗━ img/
┣━ views/
┃　　　┣━ top.ejs
┃　　　┗━ index.ejs
┣━ app.js
etc

“`

# ページ表示の処理
app.js ファイルで行う

### expressを使用するためapp.js

node.jsでmariaDBを使用するためのコーディング参考程度

## mariadbの導入

mariaDBを使用するためにmariadbをインストールする

#### npmの場合
“`
npm install mariadb
“`

#### yarnの場合
“`
yarn add mariadb
“`

# javascriptでの記述

## パッケージの読み込み

“`javascript
const mariadb = require(‘mariadb’);
“`

## DTBへの接続するための設定処理
“`javascript
const pool = mariadb.createPool({
host: ‘localhost’,
user: ”, //データーベースを操作するユーザー名を記述する
password: ”, //操作するユーザーのパスワードを記述する
database: ”, //操作するデーターベース名を記述
// 同時接続数の制限（任意）をかけるために記述
//connection

法律相談できるLINE bot「LegalAI」をリリースしました

# LegalAIとは
残業やパワハラの問題を抱えているけど、法的な知識がない人が法律相談できるLINE botを開発しました。
友達追加はこちら↓
https://lin.ee/KmWvcGp

# 技術
インフラ：firebase
サーバー：Node.js
AI：openai（BaseModel:gpt-3.5）

# 開発の流れ
firebase + Node.jsでLINE botを作る記事は山程あるので、割愛。

初めてopenaiのfine-tuningと作ったプログラムとの連携を行ったので、そちらをメインで書きます。

## openaiのfine-tuning
最初にBaseModelを選定します。

> https://platform.openai.com/docs/guides/fine-tuning
>

NestJSについてキャッチアップしてみた

案件で絶賛対応中になります。
初めて触るため、備忘がてらキャッチアップした内容を書いてみようと思います。

# NestJSとは
>Nest（NestJS）は、効率的でスケーラブルなNode.jsサーバーサイドアプリケーションを構築するためのフレームワークです。プログレッシブJavaScriptを使用し、TypeScriptで構築され、TypeScriptを完全にサポートし（それでも開発者は純粋なJavaScriptでコーディングできる）、OOP（オブジェクト指向プログラミング）、FP（関数型プログラミング）、FRP（関数型反応プログラミング）の要素を組み合わせている。

https://docs.nestjs.com/

Node.jsのフレームワークということは理解できました。
今度はNode.jsについてサクッと調査します。

# Node.jsとは
>Node.js は、オープンソースのクロスプラットフォームの JavaScript ランタイム環境です。ほぼあらゆる種類のプロジェクトで人気のあるツールです。

https://nodejs.org/en/learn/getti

お名前.com のレンタルサーバーでLaravelを動かすメモ

## 対象
* RSプランを契約している (重要)
* CLI を扱える
* SSH を行なったことがある
* レンタルサーバ系のコントロールパネルを扱ったことがある
* PHP 8.1

## 概要
1. コントロールパネルから SSH ログインできるようにする
1. パソコンから SSH ログインする
1. composer をインストールする
1. node をインストールする
1. プロジェクトフォルダを作成する
1. シンボリックリンクを貼る
1. .htaccess を修正する

## SSH できるようにする
### Key の登録
(登録済みの場合はスキップ)
`サーバー` > `SSH` に移動し `SSH Key を追加` する。

### 自動生成
秘密鍵がダウンロードされる (`Key名.pem`)。
該当ファイルを `~/.ssh` フォルダに移動して、パーミッションを `600` に変更する

### インポート
ローカルで自分で 公開鍵/秘密鍵 を生成する （作り方は各自調べる)。
この時、鍵が `~/.ssh` 以外に保存されている場合は、 `~/.s

Ubuntu 24.04 LTSにすると多分マストドンv4.2ブランチじゃないと上手く動かないんじゃねって話

## ポイントリリース前に24.04 LTSを入れました

nodejsが18以上になっていました。動かしていたのがv4.1ブランチだったので象バンバンになりました。

nodejsだけの問題だけだと思っていたらそうでもない様子。postgreSQLも10がコケていました。Mastodonのサービスは動いている。

めんどくさそうです。

## v4.2ブランチにしてみました

rubyも3.2.3をいれて、さあ！

やっぱり象バンバン。DB動いてないからそらそうか。

## ログを見る

postgreSQL10のログを見るとTimezoneが「Japan」になっていてむーりーってなって落ちている。そんな書き方は無い！

「Asia/Tokyo」にしたところ動いて、DBがマイグレーションできて動きました。

## 時間がかかりました

DBが動いてないというのに気づくのが遅くてやたら時間だけかかりました。ログを見るというのは大切ですね。

v3ブランチとv4.0ブランチはEoLになったのでUbuntu 24.04 LTSにアップグレードするぞという人たちはもりもりDBマイグレーション

DDNSを自分でやる

ダイナミックDNSを自分でやります。
以下のような思いを持っている方は是非ご検討ください。

1. 世の中にあるDDNSサービスで自身のサーバを晒したくない
2. 自分でAWSのRoute53ですでに自身のサーバのDNSを登録している
3. よくルータに割り当てられたIPアドレスが変わる

最近ルータに割り当てられたIPアドレスがころころ変わっているように思います。
なので、いざ外出先から接続しようとすると接続できないことが多くなってきました。
かといって、世の中にあるDDNSに自身のサーバのIPアドレスを登録して世間に晒したくないので、自分でDDNS相当をやってみました。

すでに、自分のドメイン名を持っていて、AWSを使っている方を対象としています。
また、言語はNode.jsを使っています。

ソースコード一式をGitHubに上げておきました。

https://github.com/poruruba/MyDDNS

# 仕組み

仕組みとしては、以下の通りです。

1. 定期的にルータ下のローカルネットワークからAWSにHTTP呼び出しをします。
2. AWSのLambdaで呼

SpringBootで包み込むVue.js開発環境 カンタン構築 OpenAPI 編

# はじめに

前回の記事で、SpringBoot (Gradle) を使ったバックエンドと、Vue.js (Node.js) を使ったフロントエンドで構成される SPA の環境構築手順を紹介しました。

https://qiita.com/hiroe-mkk/items/cf9617f49cc59c458124

この構成で、さらにフロントエンドに TypeScript を導入しようと考えたのですが、SPA や TypeScript が初めての私は、真っ先に「バックエンドとフロントエンドで別々に型定義するってことは手間が増えるなぁ」「いかにも修正漏れしそうだなぁ」と思ってしまいました。

そもそも、小規模なら手動で型定義を同期するコストは高くないですし、フロントエンドとバックエンドが密に連携できれば API の仕様変更に追従しやすいので、面倒がるほどでもありません。
それでもいい解決策があればと思ってあれこれ調べるうちに、OpenAPI にたどり着きました。

私の要件は、つまるところ以下の 2 点です。

1. フロントエンドからバックエンドの API に型安全に接続したい
2.

paiza.ioでnode.js その3

# 概要
paiza.ioでnode.js、やってみた。
練習問題やってみた。

# 練習問題
note.comのAPIを叩け。

# サンプルコード

“`
process.stdin.resume();
process.stdin.setEncoding(‘utf8’);

let http = require(‘https’);

const URL = ‘https://note.com/api/v2/creators/ohisama_llc/contents?kind=note&page=1’;

http.get(URL, (res) => {
let body = ”;
res.setEncoding(‘utf8’);
res.on(‘data’, (chunk) => {
body += chunk;
});
res.on(‘end’, (res) => {
res = JSON.parse(body);
for (let i = 0 ; i < res.data.content

paiza.ioでnode.js その2

# 概要
paiza.ioでnode.js、やってみた。
練習問題やってみた。

# 練習問題
note.comのAPIを叩け。

# サンプルコード

“`
process.stdin.resume();
process.stdin.setEncoding(‘utf8’);

let http = require(‘https’);

const URL = ‘https://note.com/api/v2/creators/ohisama_llc’;

http.get(URL, (res) => {
let body = ”;
res.setEncoding(‘utf8’);
res.on(‘data’, (chunk) => {
body += chunk;
});
res.on(‘end’, (res) => {
res = JSON.parse(body);
console.log(res);
});
}).on(‘error’, (e) => {
console.log(e.message);
});

paiza.ioでnode.js

# 概要
paiza.ioでnode.js、やってみた。
練習問題やってみた。

# 練習問題
バージョンを取得せよ。

# サンプルコード

“`
process.stdin.resume();
process.stdin.setEncoding(‘utf8’);
// Your code here!

console.log(“XXXXXXXX”)
const { spawn } = require(‘child_process’);
const ls = spawn(‘node’, [‘-v’]);

ls.stdout.on(‘data’, (data) => {
console.log(`stdout: ${data}`);
});

“`

# 実行結果

“`
XXXXXXXX
stdout: v16.17.0
“`

# 成果物

https://paiza.io/projects/xJH2PwUVbFMNOKn4XkSahg

以上。

FastAPI で銀行ごっこしよう: Next.js 導入編

### **user**:

ChatGPT先生、今日は、前回の「FastAPIを使って銀行ごっこをしよう」の続編として、Next.js を導入したいと思います。よろしくお願いします。

—

### **assistant**:

ちょっと待って！先生って…何があったって私があなたの先生になるわけないでしょ！でも、まぁ、Next.jsについて知りたいなら、私が教えてあげますけどね。だからって、あまり期待しないでよ。

というわけで、最初に言っておくと、Next.jsはReactのフレームワークだから、まずは基本的なReactの知識が必要なのよ。あなた、それが分かってるの？一応、Reactコンポーネント、props、state、ライフサイクル方法など、基本的な扱い方を理解してないといけませんよ。

そして次にNext.jsだけど、サーバーサイドレンダリングと静的サイト生成をサポートしているんだから、それらが何を意味するのか、何か分からないことがあったら、ちゃんと質問してね。

忘れてはいけないのが、Next.jsを使って開発を始めるためには、Node.jsがインストールされて

Service Locator と DI の違いを TypeScript を書きながら体験してみる

この記事を読みました。すごくわかりやすい記事です。

以下のことがふんわりわかりました。

– Service Locator も DI も同じような課題を解決するためのもの
– Service Locator と DI コンテナは利用する目線だとほとんど同じもの
– DI の方がおすすめ

なんとなく理解したんですが、たぶん後輩に聞かれても説明できないです。
このモヤモヤを取り払うため、実際に TypeScript で書いてみることにしました。

## 何も考えずに書くと

“`ts
class A {
exec(){
console.log(‘exec A’)
const b = new B()
b.exec()
}
}

class B {
exec(){
console.log(‘exec B’)
}
}

class App {
main(){
const a = new A()

Azure OpenAIをWebサイトに組み込む

# はじめに
Azure OpenAIにWeb ClientからWeb Serverを介してリクエストを行い、
応答をWebクライアントに表示する方法をサンプルコードで紹介します。

※node.js、socket.io、Azure OpenAIについての学習を行う過程で作成したもののため
回りくどいやり方をしている部分があります。ご了承ください。
### 作るもの
テキストボックスに質問を入力して送信するとAzure OpenAIからの応答が表示される
プログラムを作成します。

# Azure OpenAIについて
Azure OpenAI Serviceとは

ChatGPTを含む、複数のAIモデルを利用することができるMicrosoftの提供するサービスのことです。
プラットフォームはAzureでAzureのリソースと組み合わせて利用す

Node.jsをMacにインストールした

# はじめに
Macでhomebrewを使ってnodebrewをインストールし、node.jsをインストールした際のメモです。
# つまづきメモ
つまづいた箇所を記載します。詳しくは[参考にした文献](#参考にした文献)をご覧ください。
## node.jsがインストールできない
node.jsの安定版がインストールできませんでした。
“`
% nodebrew install-binary stable
Fetching: https://nodejs.org/dist/v22.0.0/node-v22.0.0-darwin-x64.tar.gz
Warning: Failed to open the file
Warning: /Users/owner/.nodebrew/src/v22.0.0/node-v22.0.0-darwin-x64.tar.gz: No
Warning: such file or directory
curl: (23) Failure writing output to destination

download failed: https:

【Node.js】GoogleのOAuth 2.0 APIを使ってクライアントアプリを実装してみた

OAuth 2.0の勉強のため、Google OAuth 2.0 API を使って、Node.jsでOAuth 2.0 のクライアントアプリをを実装してみました。Googleの認可サーバを使用し、トークンエンドポイントから`アクセストークン`と`IDトークン`を取得するところまで実装しています。

– GitHubリポジトリ
https://github.com/fcf-koga/google-oauth2client-node

この記事では、OAuth 2.0 の認可コードフローに対応したクライアントアプリを実装しながら学んだことを整理しておきます。

## シーケンス図
今回実装した、OAuth2.0のクライアントアプリのシーケンス図です。
基本的なOAuth 2.0の「認可コードフロー」になっています。

“`mermaid
sequenceDiagram
Actor U as ユーザー
participant A as ブラウザ
participant B as [クライアントアプリ]
participant D as [Google]

Node.jsで普通のJavaScriptをimportする

ES ModulesでもCommonJS でもUMDでもない普通のJavaScriptをimportする方法を調べました。ブラウザで動作するスクリプトをテストしたいときにご活用ください

# 普通のJavaScript

“`js:script.js
class MyClass {
hello() {
return ‘こんにちは’
}
}
“`

# 普通のJavaScriptを変更することなくimportする

## eval⭐⭐⭐⭐⭐

“`js:main.mjs
import { readFileSync } from ‘node:fs’

eval(readFileSync(‘script.js’) + ‘;global.MyClass=MyClass’)

console.assert(new MyClass().hello() === ‘こんにちは’, ‘あいさつすること’)
“`

普通のJavaScriptを変更しなくていいのでオススメ

## import⭐⭐⭐

“`js:main.mjs
import { readFile

node開発環境構築個人メモ

久々にエンジニア仕事をやることになったので、昨年末に買った Mac の環境構築個人メモ。
Node.js のコード管理ができるようになるところまで。

# Homebrew インストール
公式のインストールガイドを参照。

https://brew.sh/ja/

> macOSをお使いの場合は新しい.pkgインストーラーをお試し下さい。

と書いてあるのでそうする。

[https://github.com/Homebrew/brew/releases/latest](https://github.com/Homebrew/brew/releases/latest) にアクセスすると現時点での最新バージョンは 4.2.18 らしい。
ページの一番下にある `Homebrew-4.2.18.pkg` をダウンロードしてインストール。

これだけだと PATH が通らなかったので、スクリプトを実行する従来型インストールで最後に案内されるコマンドを実行。

“`
echo ‘eval “$(/opt/homebrew/bin/brew shellenv)”‘ >> ~/.zprofile

Moment.jsからDay.jsに移行したらタイムゾーン変換が遅すぎて転げ回った話

# はじめに
タイトル通り、本記事は約1年前に[Moment.js](https://momentjs.com/)から[Day.js](https://day.js.org/)へ移行した際のお話です。
今更なことは多々ありますが、その時に色々と学んだことがあったので備忘録と自戒の意味を込めて残しておきます。
ライブラリを移行するのは頻度としてはさほど多くないのですが、だからこそ気を付けなければならないことがありますね。

# 前提
そもそもの話として、Moment.jsについては2020年9月頃に**メンテナンスモード**[^1]へ移行しています。
ライブラリとしてはmomentオブジェクトがmutableであるとか、サイズが大きいのを削減出来ないとかの問題があったのですが構造的に解決が難しいとのこと。（[公式サイトより](https://momentjs.com/docs/#/-project-status/)）
そういうことでMoment.jsはもう他のライブラリ使いなよ～って言ってるのですが、そのライブラリの一つとしてDay.jsが挙げられています。実際に検索すると「Day.js