- 1. CypressでE2Eの世界観にほんの少しだけ触れてみた
- 2. AWS CodeArtifactにPythonパッケージを登録して、実際に使ってみた
- 3. 非技術者がJavaScriptフレームワーク・ライブラリの違いを調べてみた
- 4. Jasmine と Mocha の違いは？
- 5. NestJS のカスタムログに リクエストID を出力する
- 6. [TypeScript,Jest] JestでオリジナルのMatcherを作ってテストをしよう
- 7. Raspberry PiにNode-REDをインストールしてデーモン起動する
- 8. Docker内でnode-modules消してしまって環境が壊れた時の対処法
- 9. Symbol Node Maintenance: Backups, Crashes, and Recovery
- 10. DenoでNotionのAPIを触ってみる
- 11. VSCodeでPlaywrightによるE2Eテスト自動化をはじめてみよう
- 12. mocha と chai ってなにが違うん？
- 13. Express の基本をちゃんと理解する
- 14. 雪だるま作ろう〜obnizで〜【ちかちかしながらジングルベルが流れる】初心者向け
- 15. React のパフォーマンス最適化について調べてみる
- 16. React の useRef ってなんだ？
- 17. 静的サイトのOPG画像生成をNode.js、GitLab CI/CDで自動化した話
- 18. Vonage API + React(SPA) + Expressで電話番号認証とSMS送信アプリを作る
- 19. 運用してるサービスのNode.jsバージョンをアップデートするまでの道のり
- 20. 超簡易的なチャットアプリを作ってWebSocketについての理解を深める
CypressでE2Eの世界観にほんの少しだけ触れてみた
## 概要
Cypress初めて触ってみる人向けの資料## 手順
### 準備
#### 作業用ディレクトリ作成し移動
“`sh
mkdir cypress
cd cypress
“`#### yarnの初期化
“`
yarn init -y
“`
#### Cypressのインストール
“`sh
yarn add cypress
“`
#### 初期設定＆起動
“`sh
yarn run cypress open
“`#### E2Eを選択
 {
it(“contains spec with an expectation”, function() {
NestJS のカスタムログに リクエストID を出力する
こんにちは、株式会社medibaでバックエンドエンジニアをしている @mdbr92 です。
この記事は [mediba Advent Calendar 2022](https://qiita.com/advent-calendar/2022/mediba) の23日目です。
※記事の内容はあくまで個人の発信であり、会社を代表する意見や見解ではありません。この記事では NestJS で API サーバを開発した際にちょっと実装に苦労した、
ログへの リクエストID の出力について書いてみたいと思います。# はじめに
NestJS で API サーバを開発した際、１リクエストに対して複数の箇所で出力されているログを、リクエスト毎に追跡しやすくするために、ログに リクエストID（リクエスト毎に一意なID） を含めるという設計にしました。
[nestjs-pino](https://github.com/iamolegga/nestjs-pino)のような外部パッケージを追加導入すれば実現できそうでしたが、リクエストID の出力という一点に対してパッケージの追加とカスタ
[TypeScript,Jest] JestでオリジナルのMatcherを作ってテストをしよう
# はじめに
こんにちは！
みなさん、jestでテストを書いていて **「xxxっていう値が返ってくるのをテストしたいけど組み込みのメソッドだとテストできない。。どうしよう」** となったことはありませんか？
実は、jestには **`expect.extend`** という関数が用意されていて自分オリジナルの※Matcherを作ることができるんです。(※ **`toBe`,`toHaveBeenCalled`** などテスト書くときに書くあれです。)
本記事では、自分がこの記事を書くきっかけになった **”ある値の型が `特定の型 | null` となるかどうか”** をチェックするMatcherの作成を通して、CustomMatcherの作成方法を解説します。
# 本記事のゴール
**自分だけのCustomMatcherを作成できるようになる**
# 準備
まずはTypeScript x Jestを実行できる環境を作成します。もしそれが面倒でちゃっちゃと試したい場合は、筆者のレポジトリ(https://github.com/ironkicka/jest-custom
Raspberry PiにNode-REDをインストールしてデーモン起動する
## 前置き
11月からIT企業で仕事をしている新人です。元は半導体の会社で働いていました。
当然、Node-REDを初めて触る素人なのですが、遠く離れたお客様の工場で稼働している設備から情報を取得する実験をしたいというとで、Raspberry PiでNode-REDを動かすことになりました。さらに、そのときのことをAdvent Calenderに記事にせよとのことでした。まず、遠隔地にRaspberry Piを設置して、データを取得するということなので、会社の先輩がこのような環境を作りました。
– [Raspberry Piでリモート操作用ルーターを作る](https://qiita.com/NaotakaSaito/items/be29e5926faf20cf5502)
そして、今回私に下されたミッションは
– Raspberry PiにインストールするNode.jsはnvmでインストールする
– Node-REDをインストールする
– インストールしたNode-REDが電源投入後に自動起動するよう、デーモン起動するです。RasbianにはNode-REDがインス
Docker内でnode-modules消してしまって環境が壊れた時の対処法
yarnでインストールしてきたnode_modulesを直接フォルダをぶち消して、そこまで作っていたDocker内の環境が壊れてしまいました。
localhostにアクセスできなかったり、動作がエラーになるなど起きるようになりました。yarnは高速化のために必要なキャッシュをローカルに保存しています。
このせいでDocker内とローカルで差分ができてしまうため、新規にDockerファイルを立ち上げようとするとDocker内で壊れた状態のnode_modulesを再利用されてしまい環境が壊れたままの環境を構築することになってしまいます。キャッシュするディレクトリパスは以下になります。
`yarn cache dir`キャッシュされているnpmリストの確認は以下になります。
`yarn cache list`キャッシュクリアは以下になります。
`yarn cache clean`私の場合はキャッシュクリアのコマンドをDocker内で行うと
下記のように表示されてしまい失敗してしまいました。消す対象が大きいのか、スペックが低いのか。。。“`
rm: cannot r
Symbol Node Maintenance: Backups, Crashes, and Recovery
**Greetings Symbol Community & Fellow Node Operators!**
This article focuses on an area I feel the Symbol Guide is somewhat lacking – node monitoring, backups, crashes, and recovery. The Symbol Guide’s entry on [Running a Symbol Node](https://docs.symbol.dev/guides/network/running-a-symbol-node.html) does a good job covering the basics of getting a node up and running, and the [Maintaining a Symbol Node](https://docs.symbol.dev/guides/network/maintaining-a-symbol-node.html) covers updates and
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 の略です。 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枚用意しています。
 + 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通のメッセージを受け取った人は、ページを更新して、メッセージ来たかどうかを確認しなければなりません。サーバーとクライアントの間の接続は、リクエストとレスポン
