- 1. 初学者のためのVonage Video APIスタートアップ
- 2. SPA の認証に GitHub OAuth を使おうとしてつまづいた話
- 3. なんでこんなに私のNext.jsは遅いのか
- 4. YouTubeのプレイリストから動画を付け替える
- 5. Bunを駆使して学ぶNode.jsモジュール開発
- 6. GPTのストリーム機能を使いたい方へ（その2）
- 7. JSON配列のキーの重複をチェックし、古いデータの方を削除する
- 8. Pages RouterからApp Router移行で詰まったところ
- 9. 【L1、L2】ブラウザでWorkerを動かしてみる（番外編）
- 10. 【L1、L2】ブラウザでWorkerを動かしてみる（基本編）
- 11. 小中高生向けロボコンWROの得点集計システムを決勝大会まで持ち込んだお話【WRO Scoring System】
- 12. GitHub Actions上で定期実行させ続けるためのTips
- 13. Mac上とGitHub Actions上でのファイル名解決問題で詰まった
- 14. 組み込みエンジニアがwebサービスを開発してみた
- 15. TerraformでAWS LambdaをNode.js 20へアップグレードする方法
- 16. NestJS でホットリロードを行う
- 17. 【初心者向け】TypeScriptの環境構築
- 18. Node.js環境でパスは合ってるのにモジュールが見つからないというエラー
- 19. Notion APIでNode.jsから日付情報から検索やソート
- 20. Attempted to load @next/swc-win32-ia32-msvc, but an error occurred: A dynamic link library (DLL) initialization routine failed.
初学者のためのVonage Video APIスタートアップ
皆さんこんにちは！
筆が遅すぎて、アドベントカレンダーに **”代わりに投稿”** されてしまったPOTIです ^_____^今年は [Vonage Advent Calendar 2023](https://qiita.com/advent-calendar/2023/vonage) に参加してみました！
> ・参考文献等が豊富でこれからも読み続けられそうな記事
> ・これから開発を進めるにあたって参考になり得る記事参考になる記事、、、
うーん・・・# はじめに
本記事では、
* 「**Video API** のことはよく知らないけど、**簡単にビデオ通話が実装できる**って聞いたの、、、」
* 「公式ガイドとかチュートリアルとか見てきたけど、**いまいちよく分からなくて**、、、」
* 「軽くデモを試してみたんだけど、こっからどうやって**カスタマイズ**すんの？」といったVonage Video API初学者会員向けに、Video APIについて **徹底的に噛み砕いて**[^1] 解説していきます。
SPA の認証に GitHub OAuth を使おうとしてつまづいた話
この記事は [N予備校プログラミングコース Advent Calendar 2023](https://qiita.com/advent-calendar/2023/nyobi) の 5 日目の記事です。
大遅刻してごめんなさい！
こんにちは、 N予備校の教材制作補助アルバイトをしている dorimiamn です。
今回は N予備校第 4 章の内容で扱う GitHub OAuth を自分なりに SPA で使おうとして詰まった話を書きます！
試行錯誤の結果から記事を書いており、検証したい箇所が依然残っています。
その部分含めて致命的な部分は加筆したいと考えています。# やりたいこと
私は習作として、 サーバをフロントエンドとバックエンドに分けた Todo アプリを作成していました。
このアプリのログイン機構にせっかくなので、 4 章で習う GitHub OAuth を利用したいと考えました。
しかし、この Todo アプリはサーバが 2 つある為、 [Passport.js](https://www.passportjs.org/) を使う方法では上手くいきませんでした
なんでこんなに私のNext.jsは遅いのか
# はじめに
こんにちは、HappyManaです。
今回、Next.jsでの開発をして起きた問題について話していきたいと思います。# Next.jsのレンダリングが死ぬほど遅い
Next.jsを立ち上げたとき、初回で最大120秒ほどレンダリングに時間がかかります。長すぎて萎えます。
まだ特にコードも追加してない、create-next-appしたときで23秒でした。ここで、開発環境を整理すると、以下の感じになってます。
– Docker
– Next.js 13
– Node.js 18
– pnpm(パッケージ管理)Dockerについては、APIサーバの方でRails+PostgreSQLを使っていたので、それ用のサーバも一緒に立ち上げるために使っています。
# 原因を考える
まず考えたのが私のPCのせいかなと思ったんですが、他の人のPCでも立ち上げ時間が変わらなかったので、違いました。
また、Cloudflare Pagesにデプロイしてみたところ爆速でレンダリングされたので関係ありませんでした。—
次に、Dockerの環境が重すぎるのかと思いました。
YouTubeのプレイリストから動画を付け替える
プレイリストAにある動画をプレイリストBに付け替えます。
過去にそれぞれ書いてた処理をまとめた感じです。
## 検索 -> 編集 -> 元のリストから削除の3ステップが必要そう
– 1. プレイリストAから対象動画Cを検索
– 2. プレイリストBに対象動画Cを紐付け
– 3. プレイリストAから対象動画Cを削除の処理が必要になりそうでした。
### 1. プレイリストAから対象動画Cを検索
`youtube.playlistItems.list`を使います。
“`js
const res = await youtube.playlistItems.list({
part: ‘snippet’,
maxResults: 50, // 一度に取得する最大動画数
playlistId: oldPlayListId
});
“`### 2. プレイリストBに対象動画Cを紐付け
`youtube.playlistItems.insert`を使います。
“`js
const playListAdd = async (playList
Bunを駆使して学ぶNode.jsモジュール開発
# 目次
– はじめに
– Bunとは
– 開発手順
– 構成と環境
– Bunインストール
– 関数作成
– クラスの作成
– テスト実行
– 型定義とbuildファイル作成
– モジュールの利用
– 終わりに
– 参考文献# はじめに
Nodeモジュールを開発する方法はいくつかありますが、Bunを使ってモジュール開発をしたので今回はそれを紹介します。(パッケージの公開は行いません)# Bun とは
Bunは、特に「速度」と「効率性」を重視して設計された新しいランタイムです。Nodeの場合、パッケージマネージャはnpmやyarnを使い、TypeScriptのトランスパイルはtypescriptパッケージを使います。
Bunの場合、自身がパッケージマネージャ(npm互換)やバンドラーの機能をもっています。
さらにTypeScriptのトランスパイルもデフォルトで可能で、トップレベルでawaitが使えます。
タスクランナーとしての使い方もできます。
“`json:
{
“name”: “testapp”,
GPTのストリーム機能を使いたい方へ（その2）
# Outline
– [注意事項](#注意事項)
– [前書き](#前書き)
– [本編](#本編)
– [先に結論を](#先に結論を)
– [GPTのストリーミング仕様](#gptのストリーミング仕様)
– [Pythonからストリームをコールするには](#pythonからストリームをコールするには)
– [なぜFetch Event Source推しなのか](#なぜfetch-event-source推しなのか)
– [Fetch Event Sourceの使い方](#fetch-event-sourceの使い方)
– [Reference](#reference)# 注意事項
本記事は「富士通株式会社 デジタルシステムプラットフォーム本部 Advent Calendar 2023」の25日目の記事です。記事の掲載内容は私自身の見解であり、所属する組織を代表するものではありません（お約束）。# 前書き
本記事は「[GPTのストリーム機能を使いたい方へ（その1）](https://qiita.com/eto_ryota/items/fa5f41b9c7
JSON配列のキーの重複をチェックし、古いデータの方を削除する
といった処理をしたかったのですが、こういったアルゴリズムっぽい話はChatGPTに聞くと割と一発でした。
## やりたいこと
このようなデータがあり、groupIdが複数あった際にendDateが最新の方を残して古い方は削除したいです。
“`js
const data = [
{
groupId: ‘po’,
classId: ‘PO09’,
// その他のプロパティ…
endDate: ‘2024-03-16’
},
{
groupId: ‘pds’,
classId: ‘PDS06’,
// その他のプロパティ…
endDate: ‘2024-01-20’
},
{
groupId: ‘po’,
classId: ‘PO08’,
// その他のプロパティ…
endDate: ‘2023-09-23’
}
];
“`↑これを↓こうしたい
“`js
const data = [
{
groupId: ‘po’,
cl
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/workerpoolworkerpoolってどんなモジュール？（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の保存期限を短くしておけば今の所僕が使う範疇だと問題なく動いてくれます。
> なんだろうと思ってキャッシュクリアしたり、フォルダ階層いじったり色々してみてました。
## 何回か試してたらVSCodeがエラーを出してくれた
`Already included file name~~`といった内容です。
> だと以下エラーが発生する。
“`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版であることを確認してインストール
