DenoでNotionのAPIを触ってみる

DenoでもNotionのAPI触ってみたいなーと調べたら、Node.jsのSDKと同じような使い勝手で利用できる非公式SDKがあったので触ってみました。

## 環境

“`bash
$ deno –version
deno 1.29.1 (release, x86_64-apple-darwin)
v8 10.9.194.5
typescript 4.9.4
“`

## notion_sdk_deno

執筆次点だと0.3.9が最新の模様です。

– https://deno.land/x/notion_sdk_deno@v0.3.9
– https://github.com/yeukfei02/notion-sdk-deno

“`app.ts
import { Notion } from “https://deno.land/x/notion_sdk_deno@v0.3.9/mod.ts”;

const notion = new Notion({
token: “APIトークン”,
});

const userList = await notion.

VSCodeでPlaywrightによるE2Eテスト自動化をはじめてみよう

今年8月にリリースされたPlaywrightのVSCode拡張を今更ながら深堀りして触ってみました。
本記事では、VSCode上でPlaywrightを使ったテストの生成・実行・デバッグ・結果確認を一通り実行する方法を紹介します。
PlaywrightないしEnd-to-End(E2E)テスト自動化がだいたいどんなものかを知りたい人に見てもらえれば嬉しいです。

## はじめに

### Playwrightとは

https://playwright.dev/

Microsoftが開発しているE2Eテスト自動化ライブラリです。
この分野ではSeleniumやCypressといったライブラリが先行していましたが、近年ではビッグテックならではの開発力を背景にPlaywrightが急速にシェアを拡大しているように思います。
事実これらを使い比べてみてもPlaywrightが圧倒的に使いやすく、これからE2Eテスト自動化に取り組んでみたい方にはまず最初にオススメしたいツールになっています。

PlaywrightはNode.js(TypeScript/JavaScript)、Python、

mocha と chai ってなにが違うん？

みなさん JavaScript, Node.js でのテストには何を使っているでしょうか。
たぶん Mocha & Chai, Jasmine, Jest あたりが有名かなと思います。

Jest は使ったことがないので省きますが、Jasmine って単体で使えるんですよね。

じゃあ Mocha と Chai は何でセットなんだ…？ 何が違うんだ…？ と疑問に思ったのでこの記事では Mocha & Chai コンビについて調べていきます。

## Mocha とは

[Mocha – the fun, simple, flexible JavaScript test framework](https://mochajs.org/)

Mocha は JavaScript の **テストフレームワーク** です。
ブラウザと Node.js で動作します。非同期のコードをテストすることも可能です。

`describe` や `it`、`beforeEach` や `after` などの関数を使うことができ、テストを実行するメインの機能を持っています。

テストコードは以下のように構成

Express の基本をちゃんと理解する

元々フロントエンドに惹かれてプログラミングを始めたこともありバックエンドには苦手意識があります。
今回の記事では少しでもバックエンドに親しむべく、普段何となく使っていた Express、そして Express が採用している API の形式である REST API について調べていきます。

## API とは

API は Application Programming Interface の略です。
ソフトウェアが別のソフトウェアと通信するときの窓口を指します。

例えば React というライブラリにおいて state を管理する機能を利用するための窓口、 `useState` は API であると言えます。

また他のアプリが自分のサーバーにあるデータにアクセスできるようにしたもの（または他所のサーバーにあるデータにアクセスする手段）を特に Web API と言います。

## REST API とは

RESTful API とも言われます。
「REST」は Representational State Transfer の略です。

![Deepl](https://qii

雪だるま作ろう〜obnizで〜【ちかちかしながらジングルベルが流れる】初心者向け

### はじめに
クリスマスツリーとあわせて飾る雪だるまが作りたくて、どうせなら光る方が、どうせなら音楽流れる方が、と思ってobnizで作りました。

サーボモーター使ってみたかったけど電流の関係で無理そうでした、、、
ツリーの下で
今年はツリーも全部ハンドメイド。#クリスマスツリー #protoout #protooutgym #もいせん#obniz pic.twitter.com/xZZ3othvJ7

— yi-ped (@ped_yi) December 11, 2022

### 準備する物
obnizスターターキット（obniz Board、USB micro B cable、LED　Keyestudio_TrafficLight
ブザー　Keyestudio_Buzzer、ボタンKeyestudio_Button）
発泡スチロール（雪だるま胴体）、装飾品（私は鼻用に人参の先をつけ、毛糸の帽子をかぶせました。）

### 実装
obnizの開発者コンソールはとても便利ですがブラウザを開いておかないといけないため、今回はNode.jsを使って動かしました。

↓参考になります。
[obniz.comに掲載されているnode.jsの記事](https://obniz.com/ja/doc/guides/nodejs/how-to-run)

パーツをつないで、後は好きな音楽の楽譜と[周波数表](ht

React のパフォーマンス最適化について調べてみる

ここ数日 React について調べてきたのでようやく「見た目だけは作れます」という情けない状態を脱しつつあるのではないかなと思います。

https://qiita.com/kotaro-caffeinism/items/f65a8aa226f37efcff20

今回は Web アプリを作るのに欠かせないパフォーマンスの最適化について調べていきます。私はだいたい読み込みに7秒以上かかるとブラウザバックしてます。せっかく作ったアプリが誰にも使われなかったらと思うといたたまれないですね…しっかり勉強しておきましょう！

## 公式ドキュメントで推奨されている方法

まずは [公式ドキュメント](https://ja.reactjs.org/docs/optimizing-performance.html) を見ていきましょう。

推奨されているのは以下です。

1. 本番用ビルドを使用する
1. 長いリストの仮想化
1. リコンシリエーション（差分検出処理）を避ける

特定の環境での最適化は今回飛ばしました（理由はただ私が `create-react-app` ばかり使っているためです）

React の useRef ってなんだ？

React のフックで最初につまづいたのが useRef でした（そして今なおつまずき続けています）。なんとなく DOM 操作したときに使ったような…くらいのイメージしかないので、今回は気合を入れて `useRef` について調べていきます。

▼ React の基本を復習したい方はこちらもご覧ください

https://qiita.com/kotaro-caffeinism/items/f65a8aa226f37efcff20

## useRef とは

[公式ドキュメント](https://beta.reactjs.org/learn/referencing-values-with-refs) を参考にすると、ref を使うケースとしては

1. コンポーネントに何か値を記憶させたい
1. だけど記憶させている値が変化しても再レンダリングを起こしたくない（無限ループになってしまう場合など）

という場面です。1 は state でも実現できますが、2 は state だとできません。state を変更するためには state setter function が必要であり、stat

静的サイトのOPG画像生成をNode.js、GitLab CI/CDで自動化した話

本記事は[Cocone Advent Calendar 2022](https://qiita.com/advent-calendar/2022/cocone)の22日目の記事になります。

# はじめに

今回は[全リヴリー大図鑑](https://www.livly.com/picturebook/
)で導入した、静的サイトのOPG画像生成をNode.js、GitLab CI/CDで自動化した話をしたいと思います。

https://www.livly.com/picturebook/

全リヴリー大図鑑はリヴリーアイランドの20周年記念のWEBコンテンツになります。2002年リリースから現在までに登場した全てのリヴリーを紹介しています。

サイトはAmazon S3 を使用した静的ウェブサイトになります。ビルド時にリヴリーデータを取得し、各リヴリーの詳細ページを生成後S3にデプロイしています。

そして、詳細ページは319ページあり（2022年12月現在）、OGP画像も詳細ページ数と同様に、319枚用意しています。

![OPG画像サンプル](https://qiita-ima

Vonage API + React(SPA) + Expressで電話番号認証とSMS送信アプリを作る

# 概要
本記事では、VonageAPIの**Verify API**と**SMS API**を用いて、電話番号認証をして認証済み電話番号に対してSMSでメッセージを送信するWebアプリケーションを作成するハンズオン記事になっています。

MFA（多要素認証）は今やアプリケーションのセキュリティを向上させる上で重要な役割を担っています。各個人でMFAのための認証基盤を作成するのはコスト的にも技術的にも大変だと思います。VoyageAPIを使用することで認証方法の1つである電話番号認証が簡単に実装できることがわかりました。
本記事では、まずVonageが提供している Verify APIを用いて SPAによる電話番号認証を作成していきます。

https://developer.vonage.com/verify/overview

（おまけ） セクションで、この電話番号認証をより堅牢にするために **Number Insight API** を用いて電話番号の有効性チェックの導入も行います。

https://developer.vonage.com/number-insight/ov

運用してるサービスのNode.jsバージョンをアップデートするまでの道のり

## 現在の状況
現在運用中のサービスのNode.jsバージョンが（かなり）古いため、
それをアップデートしないとそろそろやばいのでは？から始めました。（いって現在運用中のサービスに関しては、スタイルのビルドぐらいしか使ってなかったのでずっとメンテナンスsれてなかったのです・・）
現在のLTSがv16だったので、
[Node.jsリリース一覧](https://nodejs.org/ja/download/releases/)
まずはv16系にアップデートすることになりました。

## 問題
ただバージョンあげました、わーい:tada:で終わる話でしたらすごく良かったのですが、
すぐさま壁にぶつかってしまいました・・
現在使ってるパッケージのバージョンも一緒にあげないといけないので、Node.jsのバージョンを上げると同時にパッケージのバージョンも全てチェックしないといけなかったわけです。

今回はその中でもネックだったものを紹介したいと思います。
+ gulp
現在のサービスのスタイルのビルドの時使っていて、ずっと使っていたバージョンがv3.9.1であり、gulpって３と4で色々差が

超簡易的なチャットアプリを作ってWebSocketについての理解を深める

この記事では、HTTPについて触れながらWebSocketの使用についてチャットアプリを作って解説したいと思います。

# Websocketについて
Websocketの前にまず、HTTPについて触れたいと思います。
### HTTPとは
ハイパーテキスト転送プロトコル（HTTP）は、ウェブ上でのデータ転送を初めて可能にした一連のルールと情報システムです。クライアントとサーバーの間でリクエストとレスポンスのサイクルが行われます。
流れとしてはまず、リクエストは常にクライアントによって開始されます。
次に、クライアントからのリクエスト一回につき必ずサーバーから1回だけ応答があります。その後、クライアントとサーバーの間の接続は閉じられます。
なので、たとえばもしユーザーがチャットアプリで同じ相手に100通のメッセージを送ろうとした場合、HTTP1.0を使用していれば、100回のリクエストとレスポンスが繰り返されることになります。100通のメッセージを受け取った人は、ページを更新して、メッセージ来たかどうかを確認しなければなりません。サーバーとクライアントの間の接続は、リクエストとレスポン

今更ながらなんか速そうなfastify使ってみた

## 概要
Node.jsのフレームワークである「[fastify](https://github.com/fastify/fastify)」が速いらしいとの噂を聞きちょっといじってみようかなと思った記録です（何をいまさらですが…）。

fastifyに初めて触れる人にとってのチュートリアル的にものになればいいかなといった感じなので参考にしてみてください。

今回は一般的なCRUDのRead部分の処理を作ってみようかと思います！
他の処理はいずれ書く予定です…:bow:

## 下準備
### バージョン
node.js 18.7.0

### ディレクトリ作成
“`
$ mkdir fastify_play
“`
（任意の名前で大丈夫です）
ここで作業していきますー

### npm初期化
“`
$ npm init -y
“`

### fastifyインストール
最新版は4系ですが、他のパッケージ使いたかったりするので、相性がいい3系を使います。
あとはnodemonも使うので一緒に入れます。
“`shell
$ npm i fastify@3 nodemon

yarnとnpmがタイムアウトして動かないときの対処法

# yarn とnpmが動かない

yarn
“`
yarn add v1.22.19
[1/4] Resolving packages…
info There appears to be trouble with your network connection. Retrying…
info There appears to be trouble with your network connection. Retrying…
info There appears to be trouble with your network connection. Retrying…
info There appears to be trouble with your network connection. Retrying…
error An unexpected error occurred: “https://registry.yarnpkg.com/global: ETIMEDOUT”.
info If you think this is a bug, please o

React の state と useState について調べ直す

React は UI を作るライブラリですが、HTML などとは違って単に見た目をマークアップするだけのものではありません。先にHTML を触っていた私にとってはその点が少し難しかった記憶があります。

今回は React のフックである `useState` についてまとめていきます。

▼ React の基本を復習したい方はこちらもご覧ください

https://qiita.com/kotaro-caffeinism/items/f65a8aa226f37efcff20

## state とは

日本語に直訳すると「状態」ですね。
[公式ドキュメント](https://beta.reactjs.org/learn/state-a-components-memory) によると、**コンポーネントの「記憶」** のことだそうです。

例えばショッピングサイトを React で構築したとしましょう。

コンポーネントはユーザーの操作によって画面に表示されるものを更新するでしょう。検索バーに商品名が打ち込まれれば検索結果のページを表示し、ページの下にある「次へ」ボタンが押されると次のペ

Boxアプリ統合でファイル翻訳

# 概要

この記事では、Boxアプリ統合でファイルを翻訳する方法を紹介します。


Boxファイルの翻訳を実現するには、3つのコンポーネントを使います：Box API、Google Cloud Functions、 Google Cloud Translation API。ファイルはBoxにあり、翻訳はGoogle Cloud Translation APIで行いますが、Google Cloud Functionsの関数がその2つを繋げます。

流れは下記の通りになります：
1. ユーザーはBox上でファイルを選択し、右クリックで出るアプリ統合メニューからファイル翻訳を開始します。
2. Box Web統合で設定されたコールバックURL（Google Cloud Function

MacでNode.jsをパッケージ化して配布

# 技術要素
– Mac(M1)
– Node.js
– electron-packager

# パッケージ化
これは情報はそれなりにありますが、軽く載せておきます。
ちなみにはじめは[nexe](https://www.npmjs.com/package/nexe)でやってたんですが、M1 Macだからかパッケージ化は成功しても実行ができなかったので[electron-packager](https://www.npmjs.com/package/electron-packager)を利用しています。

“`package.json
{
“name”: “application-name”,
“version”: “1.0.0”,
“main”: “index.js”,
“scripts”: {
“build”: “electron-packager .”
},
“author”: “”,
“license”: “ISC”,
“dependencies”: {
:
:
:
},
“devDependencie

OpenAPI Linstをローカルで実行

# 技術要素
– Node.js
– OpenAPI
– Swagger（で生成したyamlで検証しています）
– Github

# Github ActionsでOpenAPI Lintを実行
こんな感じで設定してあげればPull Request作成時にLintを実行してくれます。
“`.github/workflows/test.yaml
– name: OpenAPI Lint Checks
– uses: nwestfall/openapi-action@v1.0.2
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
file: FILE_PATH
“`
<参考>

https://github.com/nwestfall/openapi-action

# ローカルでOpenAPI Lintを実行
本題。
Lintエラーの対応結果をプッシュして確認するのは非常に辛かったのでローカルで実行できないか調査してみました。

## npxコマンドでチェック
以下のコマンドでチェックできます。（基本はこれで問題ない

Node.jsでMailgunを使ってメールを送信する

[Next.js + サーバーサイドTypeScript + 関数フレーバーでクリーンなアプリを作ったので実装意図とか書く Advent Calendar 2022](https://qiita.com/advent-calendar/2022/shwld)
の**20日目**。[株式会社mofmof](https://www.mof-mof.co.jp/)に生息している[shwld](https://twitter.com/shwld)です。

前日は[VitestでGraphQLとReactをテストするための環境づくり](https://qiita.com/shwld/items/312d10c3cad13cbdb14e)について書きました
# Node.jsでMailgunを使ってメールを送信する

“`ts:/infrastructures/mailer/src/index.ts
import ky from ‘ky’;
import FormData from ‘form-data’;
import type { Mailer as MailerType, MailSend

Node.js + MongoDBでWikipediaのリンクを辿ってみる

# はじめに

チーム内で雑談をしているとき、「ある人から知り合いを6人辿ると全世界の人に辿り着けるらしい」という話を聞き、調べてみるとこのような仮説は[六次の隔たり](https://ja.wikipedia.org/wiki/%E5%85%AD%E6%AC%A1%E3%81%AE%E9%9A%94%E3%81%9F%E3%82%8A)という名前がついているようです。Wikipediaの記事に対しても同様の仮説が語られており、ソーシャルメディアや某掲示板等でたまに話題に挙がったりしているようでした。

[Wikipediaの記事総数](https://ja.wikipedia.org/wiki/Wikipedia:%E6%97%A5%E6%9C%AC%E8%AA%9E%E7%89%88%E3%81%AE%E7%B5%B1%E8%A8%88)は2022年12月17日現在で1,354,638件であり、1記事あたり平均して100件リンクを含むのだと仮定すると、リンクを4回辿れば全ての記事に辿り着ける計算です。（もちろん記事によってリンク数の多寡には大きく開きがあるので超ざっくり推定です）

【GCP】Node.jsでRetail API Recommendations AIのAPIを叩く方法【機械学習】

はじめに

前回[VertexAI Automl](https://qiita.com/SyoInoue/items/2688b99a4e7549bcfc59)のチュートリアルをやってみて、機械学習やAiに軽く触れて色々学びになったので今回はRetail APIのRecommendations AIをNode.jsからテストAPIを叩いてみたいと思います！

Why Retail API? Recommendations AI?

Retail APIとは

GCP（GoogleCloud）が提供しているレコメンド&検索サービスで、小売向けの主にECサイトに導入できるサービスを提供しています。
提供しているサービスは二つで商品検索サービスの[Retail Search](https://cloud.google.com/solutions/retail-product-discovery?hl=ja)と商品レコメンドサービスの[Recommendations AI](https://cloud.google.com/recommen