Node.js関連のことを調べてみた2022年03月08日

Google Sheets APIで誰でも編集できるスプレッドシートを作成する（Node.js / TypeScript）

## 結論

Google Sheets API だけじゃなくて、Google Drive API も使う

“`typescript
const sheets = google.sheets({ version: “v4”, auth: oAuth2Client });
const drive = google.drive({ version: “v3”, auth: oAuth2Client });

// スプレッドシートを作成する
const createdSheet = await sheets.spreadsheets.create();

// Google Drive APIでスプレッドシートの権限を作成する
await drive.permissions.create({
fileId: createdSheet.data.spreadsheetId,
requestBody: {
type: “anyone”,
role: “writer”,
},
});

// 誰でも編集できるスプレッドシートのURL
console.log(cre

Node.js ExpressのテンプレートエンジンでFailed to lookup viewエラーになった時はどうすればいいか？

## 以下の記事を参照して頂ければと思います

https://note.com/shift_tech/n/nf2f1d837666e

**※Qiitaの記事は全て個人的な記載であり、所属する組織団体とは無関係です**

## 補足
ソースコード全体は以下。

https://github.com/yuta-katayama-23/post-restaurant-reviews/commit/8f808e48df501d8f12e99cf284bba7b405e50f31

Azure Web App で React App のデプロイが反映されない際の解決方法

# Azure Web App へ React アプリをデプロイすると…

Azure Web App へ 自分で開発した React アプリをデプロイした際、デプロイが正常終了しているにも関わらず、Web App のスタートアップ画面から表示が切り替わらない。Azure Web App の再起動や VSCode からのデプロイ等も試したが、画面表示はスタートアップのままである。

# Web App のログを追いかける

**App Service > 監視 > ログストリーム** を開き、Web App の起動ログを確認する。

> Nodejsサーバーのファイル監視と自動再起動

初投稿です。
foreverを使う選択肢もありますがsystemdでやります。

# 目的
gitで自動デプロイしているNodeサーバーがあり、それをデプロイ後に自動で再起動させたい。

# 方法
– systemdでサーバーをデーモン化
– systemd.pathを使ってファイル監視して更新されたら再起動

## デーモン化
まずサーバーのデーモン化
“` /home/user_name/systemd/my_server.service
[Unit]
Description=hogehoge

[Service]
User=user_name
WorkingDirectory=/{サーバーまでのパス}/
ExecStart=/{nodeのパス}/node server.js
Restart=always

[Install]
WantedBy=multi-user.target
“`
シンボリックリンクをsystemdのディレクトリに作成しサービスを有効化、起動
“`
ln -s /home/user_name/systemd/my_server.service /etc

Webの勉強はじめてみた その35 〜Sequelizeを使った実装〜

N予備校「プログラミング入門Webアプリ」を受講しています。
今回は第4章18,19節です。

## UUID
:::note
任意のIDを作る。全世界で同じ値を持つことがない一意な識別子。
:::

データベースのデータ型として、UUIDが用意されている。

Node.jsで使う場合はライブラリをインストールする。
“`
yarn add uuid@3.3.2
“`

## データモデルの作成
“`javascript:models/schedule.js
‘use strict’;
const {sequelize, DataTypes} = require(‘./sequelize-loader’);

const Schedule = sequelize.define(
‘schedules’,
{
scheduleId: {
type: DataTypes.UUID,
primaryKey: true,
allowNull: false
},
scheduleName: {
type: Da

Next.jsで簡単なTodoページを作成してみた

## 初めに
今回、久しぶりにプログラミングの勉強をしようということで流行りのReactを勉強しました。
どうせならNext.jsも使って簡単なものを作ろうと思い、今回はTodoアプリを作成しました。

## 環境
– Docker
– Next.js
– TypeScript
– TailwindCSS

## Dockerでの環境構築
ネットでたくさん出回っていますが、私は下記サイトを参考にしました。
https://zenn.dev/tasuya/articles/da033574b85e6d

## ヘッダーを追加する
ほとんどのサイトではどのページに行っても、ヘッダーがあると思うので、ヘッダーを作成します
“`sh
$ mkdir components
$ touch ./components/Header.tsx
“`

Header.tsxの中身は下記です(タイトルをクリックするとトップページに戻れるようにリンクを設定しています)
“`tsx:Header.tsx
import Link from ‘next/link’

export default functi

S3バケットにあるgzipファイルを加工して再度gzipで出力

大したことない作業のようですが、若干つまりどころがあったので残しておきます。

## やりたいこと
とあるS3バケットにあるgzipファイル（中身はjson）が生成されるたびに一部加工して、別のバケットに再圧縮して出力したい。
図を書くほどのものでもないんですが、こんな構成になります。

## どうやるか
Source BucketからSQSに通知してLambdaを呼び出すところは一般的な設定なので割愛します。
gzipを取り扱えるnpmパッケージは有名どころだと[node-zip](https://www.npmjs.com/package/node-gzip)などがありますが、zlibだけで出来ましたので今回のようなシンプルなケースだと外部パッケージは不要でした。
解凍・加工・再圧縮を行うLambdaは下記のようにな

Sequelizeでトランザクション処理を行う際のtransactionオプションの配置場所

## 初めに
Sequelizeでマネージドトランザクションを使用する際に、transactionオプションの配置場所がメソッドによって異なっていたので備忘録として投稿する。

結論として、Sequelizeのトランザクション処理に使用するtransactionオプションはcreate、updateのようなメソッドは第２引数に、その他のメソッドは第１引数に渡す必要がある。
理由は、create、updateのようなメソッドには更新するべき値を記載するが、その他のfindAll等のメソッドには更新するべき値がないため、その影響で引数の格納場所が異なっていると考えられる。
今回はupdateメソッドとfindAllメソッドを例にとって記載する。

## 環境
■ Sequelizeバージョン
3.30.4
■ 使用OS
Amazon Lunux 2
■ MySQLバージョン
5.7.35

## updateメソッド
[Sequelizeを使用してトランザクション処理を行う](https://qiita.com/shintaro_secual/items/845651b23804ff4

DockerによるNext.jsの環境構築

# はじめに
タイトルにある通り、DockerによるNext.jsの環境構築の手順を記載しています。
様々な方の記事も拝読させていただきましたが、create-next-appをルートに展開している例が見つからなかったため、投稿させていただきました。
ルートに展開した理由としましては、heroku等にデプロイする際にpackage.jsonがルートにないと正常にデプロイが完了しないことや、ツリー構造が分かりづらくなるといった観点からです。
しかしながら、苦し紛れな実装になっているため、お詳しい方はコメントでお知らせください。
# Dockerfileの作成
“`dockerfile:Dockerfile
FROM node:17.6.0

WORKDIR /usr/src/app

RUN npm install -g npm@latest && npm install create-next-app
“`
上記のDockerfileにより実行されるのは、下記の3点です。
1. 公式のnodeイメージを使用
2. 作業ディレクトリを定義
3. create-next-appをインス

Google Nest Hubを使って、家庭内チャットをしよう

Google Nest Hubは、音声操作ができ、画面もついているので、誰でも何となく使うことができます。
そこで、Google Nest Hubの画面を使って、LINEのような機能を実現しようと思います。

全体構成は以下になります。


Nest Hubで使えるよう、Actions on GoogleのInteractive Canvasを利用します。
自宅にあるNest Hubでは、「OK Google、チャットキャンバスにつないで」というと、起動し、あとは発話でチャットを投稿します。
Interactive Canvasでは、受動的に他人がチャットを投稿されたことを知る方法が見当たらなかったので、Nest HubのInteractive Canvasの中で、定期的にWebAPI呼び出しで新しいチャットがないかを問い合わせるようにしました。

【node.js + express + mongodb】記事管理アプリを作ってみた

## 概要
記事を投稿、管理できるアプリを作成した。機能としては、アカウント登録、ログイン機能、記事作成＆編集＆削除機能がある。見た目は以下のようになる。

### 見た目
見た目は以下のようになる。

**ログイン画面**：bootstrap使用。

**登録画面**

**記事リスト**：ページ分け、編集削除
![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2353023/77f50a93-daef-99d8-f31a-6d7

[Node.js]無料クラウドサービスでEclipse Theiaをビルドする。

## クラウドIDEをもっと自由に

https://shell.cloud.google.com/?show=ide

[Google Cloud Shell](https://shell.cloud.google.com/?show=terminal)ではデフォルトで[Cloud Shell Editor](https://shell.cloud.google.com/?show=ide)というIDEが利用可能になっています。
これは現在、最もスタンダードなコードエディタである[Visual Studio code](https://code.visualstudio.com/)をWEBアプリで実装した[Eclipse Theia](https://theia-ide.org/)（以下Theia）をベースにカスタマイズされたもので、コードエディタとしてかなり高性能といえます。

数年前に使ってみたときにはバージョンも古く、機能も物足りないものでしたが、現在はバージョンも新しくなり、多機能に進化しています。
![image.png](https://qiita-image-store

【GitHub】GitHub Actionsで独自のActionを定義する

## はじめに
最近、GitHub ActionsのWorkflowを構築するお仕事をしていたので、そこで発見したTipsについて書きます！
『**同一リポジトリ内で同じActionを呼びたい**』時に便利です！

## Node.jsのcomposite action
`composite action` ･･･ ユーザーが独自に定義したAction
“`yml:.github/workflow/node/action.yml
name: my-actions

runs:
using: ‘composite’
steps:
– name: set up Node.js
uses: actions/setup-node@v2
with:
node-version: ’14’
cache: ‘npm’ # or ‘yarn’
cache-dependency-path: app/node/package-lock.json
“`

#### !!!注意!!!
> The metadata f

SAMで構築したLambdaのエラーをSentryに通知する

# 概要

AWS SAM(AWS Serverless Application ModelにてStepFunctionsを利用したバッチを作成しています。
各Lambdaで発生した例外をSentryへ通知したかったため、調べてやってみました。

共通的にソースコードを変えずに設定する方法が見つからなかったので、
1つ1つのLambda handlerのソースを修正する方法になってしまいました。
※知っている方いたら教えてください。

# 設定方法

まずはSentryにてプロジェクトを作成しdsnを取得してください。

次に[公式](https://docs.sentry.io/platforms/node/guides/aws-lambda/)にも書いている通り@sentry/serverlessを追加します。
（Lambda Layerを使用することもできます。詳しくは後述）
“`sh
yarn add @sentry/serverless

or

npm install –save @sentry/serverless
“`

実際のソースコードへSentryへの通知設

【Nicehash API+Nodejs+LINE Notify】マイニングリグのステータスを24時間監視してLINEに通知する

# まえがき

グラボ4枚でマイニングしているんですがパソコンの調子が悪いときは急に落ちたり（電源は入った状態）、ネット回線の影響でマイニングできてなかったりします。

これを心配して外出先で毎回Nicehashのダッシュボード見るのも疲れたので、エラーのときやエラー回復したときだけLINEで通知してくれたらいいなと思って作ったものをまとめました。

前からやってマイニングリグ監視をnicehash apiとline notifyで通知するやつ完成したのでqiitaに記事あげます#Bitcoin #マイニング pic.twitter.com/PIVMs2bSms

— のどかもめ@HackBomb Steamで好評リリース中 (@nodokamome) October 16, 2021

# 必要なもの

各トークンの取得方法については割愛します。ググればだいたい出てきます。

1. Nicehash APIのアクセストークン
– https://www.nicehash.com/docs/
1. LINE Notifyのアクセストークン
– https://qiita.com/iitenkida7/items/576a8226ba6584864d95#line%E3%81%AE%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%A7-notify-%E3%81%A

Node.jsのインストール　npmの使い方について学んでみた。

## はじめに。。

今回、Node.jsとnpmコマンドについて学習したので、その復習として記事を書きました。
学習するに当たって利用したのは、環境構築を必要とせずに、PCとブラウザさえあれば利用できてしまうというオンライン学習サービス、Envaderを利用しました。

リンクはこちら　[Envader](https://envader.plus/)

## この記事でわかる事

– Envader is 何？
– Node.jsのインストール方法
– npmコマンドの使い方
– package.jsonの意味、意義

### 動作環境

EnvaderはLinux環境なので、コマンドもそれに付随します。
“`bash
OS Linux
ディストリビューション　Ubuntu 18.04.6 LTS
“`

## Envader is 何？

Envaderとはなんぞや？
全体を紹介すると、以下のコースを学習することができるサービスです。

– Linuxコース (一部無料あり)
– セキュリティ基礎コース(無料)
– ターミナルカスタマイズコース(有料)
– Databa

Event Meshを試してみる

お仕事でEvent Meshを触る機会があったので自分でも触ってみようと思いました

わかりやすい説明とかは書けないのでこちらの記事を読んで頂くとだいたいのことはわかると思います（感謝）

https://qiita.com/tami/items/727fe127158eea39fd3e

また実務での利用イメージはこちらを見ていただくと良いかと思います。

https://discovery-center.cloud.sap/protected/index.html#/missiondetail/3242/3268/?tab=overview

S/4のBusinessPartnerが更新されるとEventMeshにMQTTプロトコルで連携がされてODataで見に行くようになっています。

# 今回の流れ

https://github.com/SAP-samples/event-mesh-client-nodejs-samples

Node.jsのメッセージクライアントリポジトリがあるのでこちら使ってみます。
基本的にこちらの解説に従って進めていきます。
大きな流れとしては
１．

[Nuxt.js] Node.js 16 時代の Sass の利用方法

`Nuxt.js` での Sass(SCSS) の利用については毎回苦しめられるのですが、 `Node.js` バージョン 16 の環境でもひと癖あったのでメモします。

## ? TL;DR
### 素直に Nuxt 3 使っとけ

公式でベータ版になった `Nuxt3` には、とくに設定などなく `Sass(SCSS)` を利用できる環境が備わっています。

抵抗がなければ `Nuxt 3` 使うのがベター。

### Nuxt 2 を使う場合

リリース済みのアプリなど `Nuxt 2` で `Sass(SCSS)` を利用しないと行けない場合は、次の手順です。

“`shell
$ yarn add -D sass sass-loader@10
“`

でインストールして、

“`javascript:nuxt.config.js
export default {
css: [ ‘~/assets/scss/style.scss’ ],
}
“`

ですね。

個人的には `fibers` 使いたいところなんですけど、こいつも `Node.js` 14 止ま

パワポの教材をマークダウンに移行した話

## 背景

定期的にプログラミング研修の講師の仕事をしています。その研修で使用する教材はほとんどがパワポで作成されています。受講生に対しては、パワポから出力したPDFを研修のテキストとして配布し、パワポのスライドをプロジェクターに映しながら講義をします。その研修はもう何年も前からこの運用方法で実施していますが、最近はパワポで教材を作ることに色々と不便に感じる部分があり、マークダウンに移行することにしました。この記事はその過程と移行する際に使用したツールや技術に関するまとめ、及び備忘録です。

## パワポで教材を作ることの問題点

パワポでプログラミングの教材を作ることには以下のような問題点がありました。

1. 共同制作が難しい
1. 編集履歴の管理ができない
1. Macユーザーに不利
1. アクセシビリティが悪い
1. ソースコードのコピペが不便

### 共同制作が難しい

講師は私一人ではなく、複数名存在します。そのため、講師間で共同編集できると効率が良いですが、パワポのファイルで教材を管理していると共同制作は難しくなります。OneDriveやSharePointを使うこ

StrapiをバックエンドとしてセットアップしてHerokuでデプロイする方法

## Strapiとは

StrapiとはNode.js環境において動作するオープンソースヘッドレスCMSです。Strapiは100%JavaScriptベースで開発者がお気に入りのツールやフレームワークを自由に使用することができます。

https://strapi.io/why-strapi

## ヘッドレスCMSとは

ヘッドレスCMSとは従来のCMS（コンテンツ・マネジメント・システム）から見た目（View）の部分を切り離し、バックエンドのみの機能を用意したCMSの一種です。ヘッドレスCMSでは「バックエンド」のみを集中的に管理する目的があり、フロントエンドに関してはヘッドレスCMS外で運用する必要があります。基本的にはAPIを用いて入稿したコンテンツを取得し、表示したい場所へと映します。フロントエンドの自由度が高められることや表示速度が速いというメリットが挙げられます。

## StrapiをHerokuでデプロイする方法

#### Herokuインストールする前に

1.[Git](https://git-scm.com/book/en/v2/Gett