エラーハンドリングはResult型活用しようぜ

## Result型って何ですか

RustやSwiftだと馴染み深い`Result`型とは、その名の通り**結果**を表すものです。
TypeScriptだとその実装例として以下のものを私は使用しています。

“`tsx

export type Result =
| { ok: true; value: T }
| { ok: false; error: E }

export const Ok = (value: T): Result => ({
ok: true,
value,
})

export const Err = (error: E): Result => ({ ok: false, error })
“`

## どう活用できるんですか？

エラーの種類に応じて処理を変えたい場合に相性良く活用できます。

例えば、Sign in処理を行う際に、ユーザーのリクエストが不正である場合と、それ以外のネットワーク起因の場合とで処理を使い分けたいときを想定してみます。

【Vuetifly：Dialog】オーバーレイを押してモーダルを非表示

# オーバーレイを押してモーダルを非表示にする
VuetiflyでOverlayを押した時にモーダルを削除する方法

## 発生したエラー
dialogをtrueにしてモーダルを表示してオーバーレイを押すとエラーが発生する

## 解決策
リファレンスに書いてある
https://vuetifyjs.com/ja/api/v-dialog/#events-click:outside

**click:outside　：　**アクティブなダイアログの外側をクリックしたときに発生するイベント

### 使い方
“`
子

~~~~~~~~~~~~~~

ニフクラ mobile backendを拡張するNCMBプロキシを開発中です（署名なしのスクリプト実行）

[ニフクラ mobile backend](https://mbaas.nifcloud.com/)では認証やデータストア（クラウドデータベース）、ファイルストア（ファイルストレージ）、プッシュ通知など様々な機能があります。そして、サーバーレスで拡張できるスクリプト機能もあります。

しかし、実際のアプリ要件は多彩で、場合によっては他にも様々な機能が望まれます。すべての需要を満たすのは困難な場合もあります。そこで、NCMBのフロントとして動作するプロキシソフトウェアを開発中です。

このプロキシを使うことによって、小さなニーズはプロキシ側で実装できるようになります。今回は個人的に欲しかった「署名なしでのスクリプト実行」について解説します。

## 追加する機能（予定）

現状は透過的なプロキシでしかありませんが、以下のような機能を実装する予定です。

– 認証をJSON Web Tokenに
– GitHub認証
– ソーシャル認証（標準ではサーバー認証が必要ですが、プロキシだけで認証できるように）
– WebSocket（リアルタイム通信）
– Webhooks
– 署名なしでデータ

AzureFunctionsでGoogleForm自動入力

現在編集中
# 開発環境
– Windows11
– Azure Functions Core Tools (記事中で解説・インストール)
– VSCode +拡張機能
– Azure Functions
– Node.js +npmパッケージ
– Playwright-chromium
– Ubuntu (WSL2 (Windows Subsystem for Linux))
# AzureFunctionsの作成
## 関数アプリの作成
Azure Portalから、関数アプリを作成する。
主要な設定項目：
– 基本
– ランタイムスタック：Node.js
– バージョン：16 LTS
– 地域：Japan East (Westだとうまくいかない？)
– __オペレーティングシステム__ : __Linux__
– (プランの種類：消費量/サーバーレス)
– ホスティング
– ストレージアカウント：(新規作成)
– 監視
– Application Insights：(新規作成)

以上の通り設定して、作成

graphql-tools + GitHubでGraphQLサーバとスキーマ定義を分離する

## 目次

1. [目次](#目次)
1. [前書き](#前書き)
1. [本題](#本題)
1. [GraphQLサーバとスキーマ定義を分離する](#graphqlサーバとスキーマ定義を分離する)
1. [スキーマ定義用のGitHubリポジトリを作成する](#スキーマ定義用のgithubリポジトリを作成する)
1. [GraphQLサーバでGitHubからスキーマ定義を読み込む](#graphqlサーバでgithubからスキーマ定義を読み込む)
1. [まとめ](#まとめ)

## 前書き

### 経緯
GraphQLを使ってアプリケーション開発を試していたところ、
GraphQLサーバとスキーマ定義が一体化していると開発しづらいと感じたため、
分離する方法を調査して試してみました

### 対象読者

– GraphQLサーバとスキーマ定義を分離したい人
– Node.jsを使用してGraphQLサーバを構築したい人
– graphql-toolsを使用している/使用を検討している人
– GitHubを使用してリポジトリを管理して

【Node.js】Expressで存在しないパスにアクセスした時の404エラーハンドリング

## 初めに

Expressのエラーハンドラは存在しないパスにアクセスした時のエラー(404)はハンドリングしてくれません。
じゃあどうしたらいいか？ を調べたのでここにまとめます。

## サンプルファイル
ここにExpressを使ったserver.tsファイルを用意します。
ポート3000でサーバを起動し、/usersというルータのみ用意しています。

“`js
import express from “express”
const app: express.Express = express()

// サーバ起動
app.listen(3000, () => {
console.log(“Start on port 3000.”)
})

// ユーザ一覧
app.get(“/user”, (req: express.Request, res: express.Response) => {
res.send(“OK”)
})

“`

## エラーハンドラを定義してみる
Expressでデフォルトのエラーハンドラをミドルウェアに用意するなら一番下に以下を追記

ERR_SSL_DECRYPTION_FAILED_OR_BAD_RECORD_MACの対処メモ（Windows10、node v16.17.0）

Vuepressのプロジェクトをリポジトリから取得し、“npm install“したときに標題のエラーが出たので、その対処をメモしておきます。
以下は実際のエラーです。
“`
$ npm install
npm ERR! code ERR_SSL_DECRYPTION_FAILED_OR_BAD_RECORD_MAC
npm ERR! 5228:error:1408F119:SSL routines:ssl3_get_record:decryption failed or bad record mac:c:\ws\deps\openssl\openssl\ssl\record\ssl3_record.c:677:
:
npm ERR! A complete log of this run can be found in:
npm ERR! 【..local npm log dir..】\2022-09-29T02_57_10_549Z-debug-0.log
“`

エラーが出た環境は以下になります。
|名称|バージョン|備考|
|:-|:-|:-|
|OS|Windo

【Express】ミドルウェア関数スタックを勘違いしていた話

## はじめに
現在Expressのエラーハンドリングについて勉強しており、その為に公式ドキュメントを閲覧していました。

https://expressjs.com/ja/guide/error-handling.html#%E3%83%87%E3%83%95%E3%82%A9%E3%83%AB%E3%83%88%E3%81%AE%E3%82%A8%E3%83%A9%E3%83%BC%E5%87%A6%E7%90%86

「デフォルトのエラー処理ミドルウェア関数は、ミドルウェア関数スタックの最後に追加されます。」という記述があり、この「ミドルウェア関数スタック」が原因で頭を悩ませることになりました。
概要だけご説明すると「スタック」の意味が分からないという話です。

## Expressのミドルウェアについて
※本題からずれるのでExpressのミドルウェアとは何かなどの説明は省略します。

app.jsが読み込まれたときにuseメソッドやmethod(get,post,put,delete)メソッドによりミドルウェア関数がスタックに追加されます。そ

nodebrewでのNode.jsのインストール方法（Mac）

## Node.jsとは
JavaScriptを**PC上**で動かすための実行環境です。
**ブラウザ上**で動くことが有名なJavaScriptですが、Node.jsをPC上にインストールすることで、PC上でもJavaScriptが動作します。

詳しく知りたい人は[公式サイト](https://nodejs.org/ja/about/)をご確認ください。

## nodebrewとは
Node.jsのバージョン管理ツールです。
複数のバージョンを管理することができます。

## インストール方法
2種類のインストール方法があります。
1. 公式サイトからのインストール
2. nodebrewを利用する（今回の方法）

今回は、2の方法でNode.jsをローカル上にインストールします。
1の方法は↓をご確認ください。

https://qiita.com/s_yamaoka927/items/4fd8dacffa73bd64de1b

## 手順
以下の手順でNode.jsをインストールします。
1. nodebrewをインストールする
2. Node.jsをインストールする

#

【初心者向け】Node.jsのインストール方法（Mac）

## Node.jsとは
JavaScriptを**PC上**で動かすための実行環境です。
**ブラウザ上**で動くことが有名なJavaScriptですが、Node.jsをPC上にインストールすることで、PC上でもJavaScriptが動作します。

詳しく知りたい人は[公式サイト](https://nodejs.org/ja/about/)をご確認ください。

## インストール方法
2種類のインストール方法があります。
1. 公式サイトからのインストール（今回の方法）
2. nodebrewを利用する

:warning:
今回は、1の方法を行いますが、本格的な開発にはオススメしません。
Node.jsのバージョンが変わると、予期せぬバグを引き起こす可能性があるためです。
本格的な開発では、バージョン管理ができる、2の方法をおすすめします。
2の方法は↓をご確認ください。

https://qiita.com/s_yamaoka927/items/cf1bbd755c5636c3ce35

## 手順1
以下の公式サイトに行き、『ダウンロード macOS (x64)』の**推奨版*

【NestJS】基本アーキテクチャまとめ(Module,Controller,Service)

大きく分けて3つある

Module

@Moduleデコレータのプロパティ
・providers: @Injectableデコレータが付いたクラスを記述
・controllers @Controllerデコレータが付いたクラスを記述
・imports: モジュール内部で必要な外部モジュールを記述
・exports: 外部のモジュールにエクスポートしたいもの

以下はサンプル
・ユーザー機能を作成したとする

“`app.module.ts
import { Module } from “@nestjs/common”;
import { AppController } from “./app.controller”;
import { AppService } from “./app.service”;
import { UsersModule } from “./users/users.module”;

@Module({
imports: [UsersModule], // 作成したUsersMo

郵便受けと会話するためにobnizとLINE BOTでIoT装置を作ってみた

# ■はじめに
郵便受けを実際に見に行かなくても投函物の有無を確認できるIoT装置を初心者が奮闘しながら作成してみました。
IoT初心者の方でも読みやすくなるような執筆に努めていますが、なにぶん初心者の文書になりますので、温かい目で読んでいただければ嬉しく思います。

# ■こんなもの作りました
郵便受けの底に重量センサー（ロードセル）を置き、プログラムを実行しておくことで、LINE BOTから投函確認されたときに投函有無を返答するものを作りました。
0gより軽いときに投函確認すると「投函物はありません」と返答してくれ、
0g以上のときに投函確認すると「投函物があります」と返答してくれました。

https://youtube.com/shorts/XT1WT0I6q4o?feature=share

動画は以下の順で確認し

npm audit のvulnerabilityを手動で直す

# 始める前に
[この記事中](https://qiita.com/riversun/items/7f1679509f38b1ae8adb)の「マニュアル（手動）で修復する」が発生したらこの記事を進めてください．

# 脆弱性の確認
npm auditで脆弱性（vulnerability）のあるパッケージをリストする．
~~~bash
$ npm audit
~~~
実行結果（例）
~~~
=== npm audit security report ===

┌──────────────────────────────────────────────────────────────────────────────┐
│

Herokuの代わりを探してみた！サービスが多すぎて迷っている方に！

Herokuがサービス終了するけど、類似サービス多すぎじゃね？

と思ったので、まとめさせていただきます。
GithubからそのままあげられるPaasです。

胡散臭いサービスが多すぎる

Qiitaでも、類似の記事を書いている方はいますが、サービスの数が多く判断しきれません。
また、リンクを踏んでみると、チープなサイトが多く、データを預けるには怖いっす。

結果選んだサービス

・[cyclic.sh](https://www.cyclic.sh/)
・[render](https://render.com/)
・digitaloceanで[dokku](https://dokku.com/docs/getting-started/installation/)

cyclic.sh

1番おすすめだけど、難点も

◇メリット

• 性能が高い
• デプロイが早い
• 常時起動
• 無料でもドメイン名を変更できるらしい？

DynamoDBで大量データをまとめて書き込みたい

# はじめに
勉強がてら家計簿アプリを作成していた際に詰まった事柄のメモです。
アプリが持つ機能として”毎月のクレジットカード明細を画面上からアップロードできる”機能を持たせようとしていて、
クレジットカード明細は毎月大体100件前後のデータだったので、
画面でポチッとアップロードボタンを押すとすぐ登録処理が完了してほしいと考えていました。

# いざ実装しようとしてみると・・・
ググってみるとDynamoDBで複数件まとめてデータ登録するには”BatchWriteItem”を利用すればよいと分かったので、
１００件ほどのデータをBatchWriteItemでputすると下記エラーにぶち当たりました。
“`
at ‘requestItems’ failed to satisfy constraint: Map value must satisfy constraint: [Member must have length less than or equal to 25, Member must have length greater than or equal to 1]”
“`

PythonとC言語を勝負させた結果をLINE Botで通知してみた。

# どうしてPythonとC言語を戦わせる必要があるのか？
>まず最初に言っておかなければなりません。
>この戦いは、完全に私の勝手な想いによって始まりました。
>だから、PythonもC言語も悪くはありません。

#### 皆さん、Pythonって聞くとどんなことを想像しますか？

– 機械学習ができる
– Webサイトのスクレイピングができる
– 初心者が入りやすい
– **なんかかっこいい**

#### はい、ではC言語は？
– 初心者殺しの異名を持っている
– セミコロンを殺したくなる
– 意味わからないエラーが〇キブリみたいに出てくる
– **なんか嫌い**
– ~~臭い、汚い、きつい~~

これが __現実__ です。
簡単に言うとみんな __Pythonが大好きで、C言語は大嫌い__ 、、、
扱いづらいと思われているC言語ですが、実はあらゆる場所で使われているんです。
例えばみんな大好きPythonだって、C言語を元に作られているんですよーってね:sparkling_heart:

私は業務でC言語を扱っているため、C言語とは相棒みたいなものです！(~

Next.jsでPublicディレクトリに配置した画像を配列としてmapで表示する

## いちいちコード書くのは面倒くさいと思った

### 経緯

個人の趣味のブログサイトでイラスト公開のページを作成した際、**Next.js**の``で画像を表示していました。

ただ`

`のレイアウトをコンポーネント化したのに、画像が増える都度に**Props**でパスを渡しながらコンポーネントを増やしていくのは、**まだ運用していないにも関わらずちょっと面倒だなと思った次第**です。

というかせっかく記事はNotionをCMSとして更新できるので、**画像の更新もコードいじりたくない**と。

### 案1：NotionAPIで取得

**記事内の画像は普通にNotionAPIで取得している**ので、ここの画像もNotionAPIで取得するということも考えました。

ただ、APIで取得した画像の仕様として1時間でリンク切れになってしまうのを画像置場で使うのは。。。

また``と違って自動最適化に対応しないので却下。

### 案2：S3などに置く

そもそも趣味でちょっとブログ書きたかっただけで、メインは画像ではないのでそこまでのコ

プロトアウトスタジオの投稿記事、読むのを習慣化するためにLINE BOTを作ってみた。強くなりたいので。

# そもそもの動機

**「強くなりたい」**
史上最強の男にだれでも一度は憧れるものです。
とはいえ、僕は筋力が無ければ、運動神経も悪い、ただの独身男性なので早々と断念しました。
方向性をぐるんと変えて、「妄想を形にできる最強のクリエイター」を目指すことに。
それがきっかけとなり、僕は[プロトアウトスタジオ](https://protoout.studio/)の門を叩いたのでした。

# なぜ習慣化するためのBOTを作るのか

プロトアウトスタジオには[Qiita上](https://qiita.com/organizations/protoout-studio)にメンバーが執筆した記事がたくさん投稿されています。
ので、まずは記事をたくさん読み込んで圧倒的に成長しようと考えたのですね。
そして、すぐに挫折することとなりました。
* 「よく投稿

GoogleスプレッドシートAPIをサービスアカウント認証方式でNode.jsから利用する

Google系のAPIはOAuth認証、サービスアカウント、APIキーの利用の3パターンあると認識してますが、簡単な読み書きくらいのやりとりだとサービスアカウント利用は手ごろです。

> 参考
> [Google DriveのAPIをサービスアカウント認証方式でNode.jsから利用するメモ](https://qiita.com/n0bisuke/items/59607865040a63d1a640)

## 前提

以下ができてる前提になります。

– Google SheetsのAPIを許可してサービスアカウント作成
– 作成したサービスアカウントを対象のシートに権限付与
– サービスアカウントの鍵ファイルをJSON形式で取得

鍵ファイルをDLすると以下のような雰囲気の中身となります。

“`json
{
“type”: “service_account”,
“project_id”: “xxxxxxxx”,
“private_key_id”: “xxxxx”,
“private_key”: “—–BEGIN PRIVATE KEY—-○—–END P

unreachableを活用しよう

## unreachableってなんですか
`unreachable`とは下記で示される関数のことで、要するに到達して欲しくない & し得ない場所に防御的に使う関数です。

“`tsx
export const unreachable = (msg?: string) => {
throw new Error(msg ?? ‘Something went wrong’)
}
“`

## unreachableの活用方法

私はこの`unreachable`の主に2つのユースケースで使用することが多いです。

**パターン1: 三項演算子のチェック**

“`tsx
type SomeUnion = ‘foo’ | ‘bar’
const fooOrBar: SomeUnion = ‘foo’
const hogeOrFuga =
fooOrBar === ‘foo’
? ‘hoge’
: fooOrBar === ‘bar’
? ‘fuga’
: unreachable(‘Unexpected value’)
“`

TypeScrip