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

Pages RouterからApp Router移行で詰まったところ

移行時に意図しないところで手間取ったので備忘録です。

# Next.js本体の移行作業
小規模なアプリということもあり、基本的には公式のマイグレーションガイドで概ね解決。
https://nextjs.org/docs/pages/building-your-application/upgrading/app-router-migration

# トラブルと対応
#### ヘッダがMetadetaになったのでlinkをどこに埋め込めばいいか分からない
fontawesomeのcdnリンクなど。
layout内にheadタグ書いてその中に入れればよしなに合成してくれる。

#### next devでは動くけどnext build->startでエラー
“`
RangeError: Maximum call stack size exceeded
“`
原因はUIコンポーネント(material-tailwind)のAppRouter非対応。
特定バージョンでのNext.jsなら動くとのことでv13.5.3に固定して解決。
v13.5.7のcanaryでも行けるらしいですが少し

【L1、L2】ブラウザでWorkerを動かしてみる（番外編）

## はじめに

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

以下記事の続きになります。
【L1、L2】ブラウザでWorkerを動かしてみる（基本編）
https://qiita.com/k-kawashima/items/0bc4b862c0a91c2fdf99

前回は、短いコードでWorkerを動作させてみました。
今回はこのワーカーを更に便利に動作させる為のモジュールであるworkerpoolを利用してみます。

workerpool
https://www.npmjs.com/package/workerpool

workerpoolってどんなモジュール？（ChatGPTに聞いてみた）
>Node.js のワーカープールを簡単に作成できるパッケージです。ワーカー内で実行する関数を指定し、非同期にタスクを実行できます。

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

* 専用ワーカーを使いやすくするwokerpoolモジュールの利用方法。（こちら番外編として別記事にして記載します）

## 準備

確認環境は前回の「【L1、L2】ブラウザでWorkerを動かしてみる（

【L1、L2】ブラウザでWorkerを動かしてみる（基本編）

## はじめに

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

こんにちは、マーズフラッグの川嶋です。

今更で恐縮ではありますが、Web Workerを動かしてみようと思います。

Web WorkerはJSの処理をメインスレッドとは別のスレッドでコードを実行できます。
IOバウンドの問題を解決するのにはasync/awaitの利用して非同期処理で実現することで解決してきましたが、CPUバウンドの問題はWeb Workerを利用しマルチスレッド処理を実現することで対応できるとのこと。

弊社のフロントエンド開発でVue.jsを利用していおりますが、workerに処理を委譲したほうがよいようなシーンはまだありません。しかし、今後利用する機会もあるかもしれませんのでためしてみましょう！
最近はもっぱらバックエンドなんですけどね笑。

Mozillaのドキュメントに記載のある通りworkerには３種類あり、今回は一番確認しやすい専用ワーカー (dedicated worker) を取り上げようと思います。
https://developer.mozilla.org/j

小中高生向けロボコンWROの得点集計システムを決勝大会まで持ち込んだお話【WRO Scoring System】

# 目次

| 章 | タイトル | 内容 |
|:-:|:-:|:-:|
| 1 | [はじめに](#1-はじめに) | 自己紹介および本記事について |
| 2 | [WROとは?](#2-wroとは) | WROについての説明 |
| 3 | [昨年のシステム](#3-昨年のシステム) | 昨年のシステムのおさらいとメリット・デメリット |
| 4 | [システム要件](#4-システム要件) | システムに必要な事項のまとめ |
| 5 | [完成したシステム](#5-完成したシステム) | スクショを交えながらシステムを紹介 |
| 6 | [今年の開発過程](#6-今年の開発過程) | 時系列に沿ってシステムの開発過程を記します |
| 7 | [ハマったところ](#7-ハマったところ) | 開発中に躓いた点のまとめ |
| 8 | [今後の方針](#8-今後の方針) | 来年以降の方針について |

:::note warn
本記事は長編記事ですので、是非**いいね・ストック**等して頂き、時間のあるときにゆっくりお読みください!!
:::

# 1. はじめに

改めまし

GitHub Actions上で定期実行させ続けるためのTips

## GitHub ActionsはPublicであればずっと動いてくれる

そのうち制限かかりそうな気もしますが、現時点では無料です。

> https://github.co.jp/features/actions
> 

## とはいえ止まってしまう時

### 容量で止まった時があった

Artifactとlogの保存期限を短くしておけば今の所僕が使う範疇だと問題なく動いてくれます。

> ![スクリーンショット 2023-12-24 20.51.18.png](https://qiita-image-store.s3

Mac上とGitHub Actions上でのファイル名解決問題で詰まった

ローカル開発では問題なく、GitHub Actions上でだけトラブルが発生

> GitHub Actions上
> 

なんだろうと思ってキャッシュクリアしたり、フォルダ階層いじったり色々してみてました。

## 何回か試してたらVSCodeがエラーを出してくれた

`Already included file name~~`といった内容です。

> ![スクリーンショット 2023-12-24 20.13.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/bb167614-fb88-25f5-8866-19c9ee333a27

組み込みエンジニアがwebサービスを開発してみた

はじめまして。初投稿なので、お見苦しい部分があったら申し訳ありません。
## 　自己紹介
普段は都内のメーカで、エンジニアとしてサービスよりのプロトタイプの開発や生成AIを活用した新規事業の立ち上げに携わっています。
2023年夏頃までは、製品の組み込み開発とソフトウェアの開発マネジメント業務に従事していました。

## 　プロダクトの概要
世の中の議論を可視化する事と完全匿名で議論できるサービス「議論.com」をリリースしました。
https://www.web-giron.com/

## 　開発のきっかけ
今回のプロジェクトを始めたきっかけは、以下の3つの要因によります。
### 　①Web技術の習得への意欲
これまで画像解析や数値処理の開発を手がけてきましたが、Web技術の知識はほとんどありませんでした。
Web技術は非常に広範囲にわたり、技術書を読みながらの学習は普段の業務と並行して行うにはあまりにもハードルが高い状態だと感じ、一歩を踏み出せずにいました。
2023年初頭にChat GPTがリリースされ実際に自分で触った時、「GPTを副操縦士にwebサービスの開発をすれば技術

TerraformでAWS LambdaをNode.js 20へアップグレードする方法

先日AWSから **『[アクションが必要です] AWS Lambda での Node.js 16 のサポート終了について』** というタイトルのメールを受け取ったので、早速アップグレードを試みたのですが、Terraform初心者としてハマるところが多かったので、備忘録としての投稿です。

# 前提
今回の例は、以前Terraformで構築したNode.js 16のAWS Lambdaを、Node.js 20に更新するものです。
またTerraformは当初、1.4.4を使用していました。

# LambdaのNode.js Runtimeが更新できない！
AWSからのメールにあった`2024 年 6 月 12 日までに、既存の Node.js 16 の関数を Node.js 20 にアップグレードすることをお勧めします。`の指示に従い、aws_lambda_functionのruntimeを`nodejs16.x`から`nodejs20.x`に変更し、terraformのコマンドを実行したところ…

![Upgradeエラー1.png](https://qiita-image-st

NestJS でホットリロードを行う

# はじめに
この記事では、NestJS でホットリロードを行う方法について記載していきます。

“`npm run start“` でローカルサーバーを起動して開発をしていると、コードを変更して動作確認をする際、ローカルサーバーを再起動しないと変更が反映されません。そのため、ローカルサーバーを再起動しなくても変更を反映できるようにする方法について記載していきます。

# 方法1：“`npm run start:dev“`
“`npm run start:dev“` でローカルサーバーを起動すると、ホットリロードを行うことができます。

:::note

“`package.json“` 内で定義されているように “`start:dev“` の中身は “`nest start –watch“` です。

“`package.json
“start:dev”: “nest start –watch”
“`
:::

# 方法2
NestJS のこちらのドキュメントに記載の手順で実施できます。

https://docs.nestjs.com/

# 参考

【初心者向け】TypeScriptの環境構築

## はじめに
Node.js上でTypeScriptを動かす環境を構築する際に必要な手順をまとめました。今回はMacOSでの環境構築になるので、WindowsOSを利用している場合はコマンドを適宜読み替えてください。

## Node.jsのインストール
TypeScriptは実行する際にTypeScriptコンパイラが必要となり、Node.jsはそれを動作させる際に必要となります。

以下のNode.js公式サイトからインストーラーをダウンロードして、それを実行する事でNode.jsのインストールが完了します。

https://nodejs.org/en

基本的には最新バージョンをインストールすれば問題はありませんが、偶数のメジャーバージョンが安定版とされているため、偶数バージョンをインストールすることが望ましいです。

## TypesScriptプロジェクト用のディレクトリ作成
まずは適当な名前でTypeScriptプロジェクト用のディレクトリを作成し、その中に**package.json**を作成します。
“`
$ mkdir practice
$ cd practic

Node.js環境でパスは合ってるのにモジュールが見つからないというエラー

## 環境
– Windows10
– Node.js（v18.18.1）
– Express（v4.18.2）
– React（v18.2.0）

## 経緯
– Express環境で、React側と同じ記述を用いてモジュールをインポートしようとしたところ、パスは間違っていないのにモジュールが見つからないというエラーが発生した。

### 詳細
– Reactではファイルインポート時に以下の記述でOK。

“`react
import { apiHandler } from “test/apiHandler”
import apiHandler from “test/apiHandler”
“`

– Node.js(Express)だと以下エラーが発生する。

“`terminal
Error [ERR_MODULE_NOT_FOUND]: Cannot find module ‘C:¥test¥apiHandler’ imported from (インポート先のパス)
at ….
code: ‘ERR_MODULE_NOT_FOUND’
“`

## 対処方

Notion APIでNode.jsから日付情報から検索やソート

NotionのAPIを触ってみてます。締め切りが今週中の何か… といった情報を抜き出したいときがあるのですが、その辺のメモです。

## 日付でソート

提出期限などでソートします。

> 

“`js
const response = await notion.databases.query({
database_id: dbId,
sorts:[
{
“property”: “提出期限”,
“direction”: “descending”
}
]
});

console.log(response);
“`

#

Attempted to load @next/swc-win32-ia32-msvc, but an error occurred: A dynamic link library (DLL) initialization routine failed.

## 何のエラー？

32bit版win用のNodeを64bit版winで稼動させようとすると起こるエラー．

## やること
1. 32bit版Nodeをアンインストール
C:\Program Files (x86)\Nodejs のディレクトリを削除
注意：ディレクトリの削除は不可逆な可能性があるので注意してください

2. Nodeを再インストール
https://nodejs.org/en/download
64bit版であることを確認してインストール

Bitbucket Pipelinesで環境ごとにstepを分ける

## この記事について
この記事はBitbucket pipelineのymlの設定の中で、環境ごとに自動デプロイする仕組みを解説しています。
今回はReactアプリを使用してs3にアップロードします。

## 前提条件
* 前提条件としてS3にバケットが存在すること
* Bitbucketにリポジトリーが存在すること

## Bitbucketのリポジトリの設定
### パイプラインの有効化
まずはデプロイ対象のリポジトリの「Repository Setting」 → 「設定」の中にチェックがあるので押して有効にします。
有効にすると「このリポジトリはパイプラインを利用する」という設定が完了します。


## クレデンシャルの設定
次に環境ごとのクレデンシャルの設定を行います。
下記3つの

React Native + Node.js+Expo+Xcode+Aodoroid Studio 環境構築

スマホ開発のはじめの一歩
環境構築について執筆しました。
よろしくお願いします。

https://zenn.dev/nori1234/books/fb9bdb5315843d?fbclid=IwAR3Ni4VPMuUu-39FPwXIpYv9Kd_k-Xe7aU9jlWPzdv0Ceajcj9eifkxwKj0_aem_AaxBq3Urj_BEN0BmtT-OSsqJnOhA0XhaZWK1bbGijqA-eVZLaMrdJOSMz1EhZu20pJU

Node.jsでYouTubeにアップロード済みの動画のタイトルや概要を更新する – GPTに最初嘘つかれた

この辺りの記事の続きです。

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

https://qiita.com/n0bisuke/items/75062256622d83f49df4

## videos.updateでいけそう

https://developers.google.com/youtube/v3/docs/videos/update?hl=ja

こんな感じでいけそうでした。

“`js
const res = await youtube.videos.update({
part: ‘snippet’,
requestBody: {
id: videoId,
snippet: {
title: newTitle,
description: newDescription,
categoryId: 27 //カテゴリID
}
}
});
“`

### 動いたコー

Qiita CLIを使う

https://qiita.com/Qiita/items/32c79014509987541130

Qiitaの記事をGitHubリポジトリで管理する方法があるということで、試してみました。
MacでQiita CLIをセットアップするまでの流れを書いておきます。
実行環境：MacBook Air M1, 2020

# Node.jsのインストール
Qiita CLIを使うには、Node.js 18.0.0以上が必要ということで、Node.jsをインストールします。
Homebrewのインストール、nodebrewのインストール、Node.jsのインストールの順に行っていきます。

Homebrewのサイトにアクセスし、インストールの下に記載されたコードをターミナルで実行します。
https://brew.sh/ja/
![スクリーンショット 2023-12-22 22.37.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3569835/0a6b8ac7-8633-8b5d-22d8-740

Node.jsでYouTubeのプレイリストから動画を削除する

動画自体の削除ではなく、再生リストから削除します。

ベースの記事はこちらです。

https://qiita.com/n0bisuke/items/75062256622d83f49df4

## 再生リストから動画削除コード

“`js
‘use strict’;

const fs = require(‘fs’);
const {google} = require(‘googleapis’);

const googleAuth = () => {
const CREDENTIALS_PATH = ‘client_secret.json’;
const TOKEN_PATH = ‘token.json’;
const credentials = JSON.parse(fs.readFileSync(CREDENTIALS_PATH, ‘utf8’));
const token = JSON.parse(fs.readFileSync(TOKEN_PATH, ‘utf8’));

const {client_secret, client_

Node.jsでYouTube再生リストに含まれる動画リストを取得

こちらの記事の続きです。

https://qiita.com/n0bisuke/items/680ab634463eee2dbfd3

## OAuthクライアントとトークン情報を準備

– client_secret.json
– token.json

の二つを準備しておきます。

## 再生リストから動画の検索

色々なAPIがあっていまいちわからなかったのですが、ChatGPTに聞いて出てきたサンプルが役立ちました。

playlistItemsのメソッドが該当する模様です。

> 

ドキュメントを調べる -> サンプルではなく、ChatGPTに聞く -> ドキュメントを見るという流れ、効率的かも

https:/

Google APIのトークン取得で”このサイトにアクセスできませんlocalhostで接続が拒否されました。”

自分が管理しているYouTubeの再生リストを操作したいなと思ってAPI調べつつの詰まったところです。

何回かやってるけどいつも忘れている

## YouTube DATA APIのクイックスタート

こちらをやっていきます。

https://developers.google.com/youtube/v3/quickstart/nodejs?hl=ja

> 

### 準備など

– OAuthクライアントIDを作成して認証情報のJSONをDL
– `client_secret.json`
– サンプルコードを作成して実行

### スコープ

サンプルコードでトークン作成するときにスコープの指定がありますが、何をしたい