- 0.0.1. Node.js + TypeScript で gRPCに入門する [前編: gRPCとは]
- 0.0.2. SAP BTPのCloud FoundryにGithub Actionsを使って自動デプロイする
- 0.0.3. Alexaスキル開発でGoogleカレンダーAPIと連携してみた
- 0.0.4. ESP32をAlexaでLチカする(1):これから作るものと環境セットアップ
- 0.0.5. fnmに切り替えたらVSCodeのF5実行できなくなった
- 0.0.6. nvm-windowsでNode.jsの環境構築
- 0.0.7. Slackで人狼がしたいねん
- 0.0.8. Amplify+React+Node.jsを使ってWebSocket通信の簡単なチャットアプリを作ってみる
- 0.0.9. Node.js 複数インポート、エクスポートする方法
- 0.0.10. かいはつ小話「モックをくださいな」
- 0.0.11. [npm]npm run prodに失敗する
- 0.0.12. 【OAuth 2.0】PKCE+State対応の認可コードグラントについてまとめてみた
- 0.0.13. ElectronとNode.jsの制約に苦しめられた話
- 0.0.14. 【Nodejs】ストリーム(stream)に念入りに気合を込めて正拳突きを繰り返しながら説明していく
- 0.0.15. WebStorm の設定確認事項
- 0.0.16. anyenv 経由で nodenv を導入した環境で新しい node.js を使う
- 0.0.17. Node.jsをアップデートしてみる(備忘録)
- 1. 問題
Node.js + TypeScript で gRPCに入門する [前編: gRPCとは]
[自ブログからの転載です](https://blog.hedrall.work/posts/grpc-what-20211216)
![grpc-horizontal-color.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/194978/65b59a3a-f7ab-7a2f-76fe-70160627b241.png)
[出典: https://cncf-branding.netlify.app/projects/grpc/]## 概要
`gRPC`は私も以前から興味はあり、なんとなくGeek達が集まって`GO言語`でハイパフォーマンスなバックエンドを作るあれでしょ?くらいに思っていました。しかし、最近では`Node.js(TypeScript)`を利用した開発環境も徐々に充実してきていることを知ったのがきっかけで、この本記事を書きました。
`gRPC`に関しては既に多くの記事がありますが、まだまだ集約した情報が少ないのと、バックエンドエンジニア目線の記事が多いということもあり、今回はフロン
SAP BTPのCloud FoundryにGithub Actionsを使って自動デプロイする
本記事は[GitHub Actions Advent Calendar 2021](https://qiita.com/advent-calendar/2021/github-actions)の12日目の記事です。
前回の記事で作ったSAP BTP のCloud Foundry環境にデプロイしたアプリをGitHubに保存して自動でBTP環境にデプロイ出来るようにします。
#前提条件
以下のブログと同じことをしていることhttps://qiita.com/nanaki11/items/47e6033dee3f76d0b156
#GitHubActions
https://github.co.jp/features/actions
みんな大好きGitHubのワークフロー機能です。
CircleCIとかと同じような事ができます。#今回の流れ
・コードをGithubにcommitする
・ワークフローを作る
・ワークフローの実行結果を確認する#コードをGithubにcommitする
アプリのフォルダで以下コマンド実施
“`bash
$ git config –glo
Alexaスキル開発でGoogleカレンダーAPIと連携してみた
この記事は [ZOZO #1 Advent Calendar 2021](https://qiita.com/advent-calendar/2021/zozo) 16日目の記事になります。
# はじめに
Alexaスキル開発にはアカウントリンクと呼ばれる機能があり、GoogleやAmazon、GitHubなどが提供する外部サービスとOAuth認証を使って連携することができます。今回はGoogleカレンダーAPIと連携し、Alexaがカレンダーに登録されたイベントを読み上げるスキルを開発したので紹介します。
## 例)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/130670/e213b0cc-ae9a-9b68-0b88-4487f21d6265.png)– 今日の予定を教えて
– ▷ 今日の予定は2件あります。1件目は、10時からのQiita投稿、2件目は、12時30分からのランチです。
– 明日の予定
– ▷ 今日の予定は1件あります。1件目は、10
ESP32をAlexaでLチカする(1):これから作るものと環境セットアップ
ESP32をAlexaでLチカします。
ESP32をAlexaのスマートホーム化することで、声で操作もできますし、AndroidやiPhoneアプリにインストールしたAlexaアプリでも、ESP32や周辺デバイスを操作したり状態を確認することができるようになります。以下のことができるようにします。
・ESP32に接続したENVユニットで、温度を取得して表示します。
・ESP32に搭載されている加速度センサを取得して表示します。
・ESP32に接続したガスセンサユニットで、二酸化炭素濃度を取得して表示します。
・ESP32に接続したRGB LEDユニットをカラー照明として操作します。
・ESP32に接続したサーボハットを回転操作します。
・ESP32に搭載されているLEDをスイッチとして操作します。
・ESP32のサイドボタンの押下状態を取得して表示します。
・ESP32のメインボタンをドアベルとして押下したことをAlexaに通知してもらいます。何を言っているかわかりにくいかもしれませんが、あとで示すAlexaアプリの画面を見るとわかるかと思います。
全体構成は以下のようになっ
fnmに切り替えたらVSCodeのF5実行できなくなった
# 背景
こちらの記事を読ませていただいて、Windowsにてfnmを導入しました。
すると、VSCodeでF5によるJSファイル実行ができなくなってしまいました。
今後も毎回必要になりそうなので、解決策を自分の備忘録のために書いておこう、という記事です。https://qiita.com/heppokofrontend/items/fe1c3bc41a0ae943c2ca?utm_campaign=popular_items&utm_medium=feed&utm_source=popular_items#3-%E5%90%84%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%81%ABnode-version%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%92%E8%A8%AD%E7%BD%AE%E3%81%99%E3%82%8B
# 解決策
`launch.json`の設定を下記のようにする“`launch.json
{
// Use IntelliSense
nvm-windowsでNode.jsの環境構築
* 任意のバージョンを使用したい場合に対応出来るようnvm-windowsを使用するための手順メモ。
—
## nvm-windowsインストール* nvm-setup.zipをDLしてインストールする
https://github.com/coreybutler/nvm-windows/releases## 利用できるバージョンの確認
“`shell
> nvm list available| CURRENT | LTS | OLD STABLE | OLD UNSTABLE |
|————–|————–|————–|————–|
| 17.2.0 | 16.13.1 | 0.12.18 | 0.11.16 |
| 17.1.0 | 16.13.0 | 0.12.17 | 0.11.15 |
| 17.0.1 | 14.18.2 | 0.12.
Slackで人狼がしたいねん
こんにちは。
初めてのAdvent Calendarの参加です。:::note warn
記事中のコード内には独自のメソッドやクラスがありますが、いちいち説明してません。
気になる方はコメントください。
:::#はじめに
/* 読み飛ばしてもなんの問題もありません。 */
2020年、リモートワークが始まり、慣れてきた2021年のこと。
ふと思いました。**人狼がやりたい。**
しかし、人狼をやろうと言い出すと、言い出しっぺは大概ゲームマスター(GM)をやらなければいけない。
いやだ。
私が人狼ゲームを楽しみたいのだ。**ならばslackbot(App)にGMをやってもらおう**
人狼ゲームは1ゲームに結構時間がかかる。
人数も揃えなければいけない。
予定の調整は誰がやるのか?
言い出しっぺだ。
いやだ。
私はやりたくない。**ならば、リアルタイムで毎日人狼をやるのだ。**
そうして私はリアルタイムで進む人狼ゲームをSlack上で作ることを決意したのだ。
#Slack人狼のルール
今でこそ役職はそれなりに選択できるように色々バリエーションを作ったが、最
Amplify+React+Node.jsを使ってWebSocket通信の簡単なチャットアプリを作ってみる
こんにちは。 [CYBIRD Advent Calendar 2021](https://qiita.com/advent-calendar/2021/cybird) 15日目担当の @utamakura です。
14日目は @cy-n_ao さんによる「Heroku&Phaserでかんたん環境構築」でした。
Heroku、お手軽に環境構築できていいですね!
料金について気になったので少し調べてみましたが、無料枠を超えても利用できなくなるだけで追加課金は発生しないとのことで、そこも個人開発に向いていると思いました。
個人でクラウドサービスを使っていると、基本無料だけど実際使ってみたら細かいところで追加課金されて総額でそれなりに請求されてしまった…みたいなことになるのが一番怖いですからね。:cold_sweat:## はじめに
今回、Amplifyの使い方と、Amplify+React+Node.jsを使ったWebSocket通信の実装方法をご紹介します。
これを読めば、Amplify+Reactで簡単にWebアプリを開発する方法を学ぶことができます。ちなみに、Amplifyや
Node.js 複数インポート、エクスポートする方法
Node.jsの学習の備忘録と振り返りの記事です。
何かの参考になれば幸いです。
付け足しや訂正などある場合ご教授いただけると
大変嬉しく思います!!##複数インポート、エクスポートする方法
“`js
const name = “yuka”;
const add = function (a,b){
return a + b
}module.export = {
//定義名:値,
name:name,
add:add, //最後のカンマは無くてもあってもどっちでもいい
}//===別ファイル===
const {name,add} = require(“インポートしたいファイル名”)
“`
かいはつ小話「モックをくださいな」
この記事は [株式会社サイバー・バズ Advent calendar 2021](https://qiita.com/advent-calendar/2021/cyberbuzz) 15日目の記事です。
むかし、むかしあるところに…
フロントエンドおばあさんとバックエンドおじいさんがおりました。
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620439/d7a81439-57b5-b4f8-3167-ffa1bd21e20f.png)
今回の開発は郵便番号でリクエストを投げると、住所が返ってくるというものです。
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620439/f25b220c-e7fa-efcd-4459-c9d95e9bf8c7.png)
**おばあさん**「フロントのフォーム部分の実装終わりましたよ…」
**おじいさん**「すまんな、ばあさん。まだAPIの
[npm]npm run prodに失敗する
# はじめに
現在、Web系自社開発企業への転職を目標にポートフォリオを作成中。
Dockerを活用してLEMP環境を構築し、Laravel+VuejsでWebアプリケーションの開発を行っております。今回は、npm run prodでJavaScriptのトランスパイルを実行するまでの流れを記録として残します。
# 目次
1. [やりたいこと](#Chapter1)
1. [トランスパイル実行したときに発生したエラー](#Chapter2)
1. [調査](#Chapter3)
1. [原因](#Chapter4)
1. [解決策](#Chapter5)
1. [参考文献](#reference)
# やりたいこと
npm run prodを実行してJavaScriptのトランスパイルを行いたい“`
npm run prod
“`“`
【OAuth 2.0】PKCE+State対応の認可コードグラントについてまとめてみた
3年目エンジニアが12月の書き入れ時に夜な夜ながんばってOAuth2.0についてまとめてみました。
実装例のところはNode.js想定です。# 目次
[1. 認可コードグラントとは](#認可コードグラントとは)
[2. stateとは](#stateとは)
[3. pkceとは](#pkceとは)
[4. 想定するユースケース](#想定するユースケース)
[5. 全体の認証フロー](#全体の認証フロー)## 認可コードグラントとは
OAuth 2.0の主要な認証フローの一つで、最もよく使われているフローです。
簡単に説明すると、リソースオーナー(ユーザー)によるクライアント認可が完了した際に認可サーバは認可コードをクライアントに対して発行し、クライアントはその認可コードをもとにアクセストークンを取得する、といったフローになります。
![認可コードグラント.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/401200/6aa65969-fc73-5778-74c1-dab64f2191a7.pn
ElectronとNode.jsの制約に苦しめられた話
# 注意事項
Electron初心者なので、間違った情報があるかもしれません。
タスクに追われてるので文章がちゃんとしていない可能性があります。
コードを引っ張り出してくるのが面倒だったので、コードは1行もありません!
ご了承ください。:bow:## バージョン情報
詳しくは覚えていないのでメジャーバージョンのみ
Node.js v16.x
Electron v15.x# 経緯
## Electronを採用した理由
– ブラウザの技術でデスクトップアプリを作れるから
– 実績がある(VSCode、Slackなど)
– 並列処理もなんとかできると思ってたあまり深く考えずにElectronを採用しましたが、これが原因で後々苦しむことになります…
# Electronの仕様
Electronは起動時に2つのプロセスを立ち上げます。
メインプロセスとレンダラープロセスの2種類があります。(参考: https://www.electronjs.org/ja/docs/latest/tutorial/process-model)
また、プロセス間の通信に
【Nodejs】ストリーム(stream)に念入りに気合を込めて正拳突きを繰り返しながら説明していく
#ストリームとは
ストリームとは、大きいデータを少量に分けてちょっとずつデータを運ぶ概念のことです。
英語でstreamは「流れや川」を表します。
小さいデータが連続的に流れる様子が川のようなのでstreamというのですね。streamには、大きく分けて2つの役割があります。
– データを読み込む (write)
– データを書き込む (read)具体的な例を見ていく前にストリームが役立つシーンを紹介します。
また、ここでは基本的にファイルモジュールを扱っていきます# ストリームが役立つ例
ファイルをコピーしてフォルダ1からフォルダ2に移す。単純な例を考えます。
“`
.
├── フォルダ1── a.txt
└── フォルダ2
“`ここで2つのコードの書き方が考えられます。
1.ファイルを一度完全にバッファ(一時保存される領域)にコピーしてから、フォルダ2にファイルを書き込む
2.ファイルをバッファに読み込み、読み込めたものから順に書き込みを行う1の場合
“`js
const fs = require(‘fs’)
text = fs.readFi
WebStorm の設定確認事項
## nodenv 利用時の IDE からの npm script の実行
IDE から npm script の実行すると以下の様な package manager が以見つからない旨のエラーがでます。“`
Error running ‘lint’: Specify a valid package manager: cannot find a binary file inside ‘/Users//.anyenv/envs/nodenv’ directory
“`以下の対応を行うと正常に npm script をキックできるようになります。
– `npm -g install @nodenv/jetbrains-npm`
– package manager のパスを `echo $(npm -g prefix)/lib/node_modules/@nodenv/jetbrains-npm` の出力結果に変更する
– ![webstorm1.png](https://qiita-image-store.s3.ap-northeast-1.amazon
anyenv 経由で nodenv を導入した環境で新しい node.js を使う
# はじめに
https://qiita.com/ucan-lab/items/ce35bcaf2562054917a8上記記事に体変お世話になりました。
(当記事では新しい node.js の利用にフォーカス)また、公式docは[こちら](https://github.com/nodenv/nodenv)
# 前提
– any env 経由で nodenv が入っている
– `nodenv install -l` しても、欲しい最新の node.js のバージョンが出てこない# 手順
– anyenv-update の plugin を入れてアップデート
– `mkdir -p $(anyenv root)/plugins`
– `git clone https://github.com/znz/anyenv-update.git $(anyenv root)/plugins/anyenv-update`
– `anyenv update`
– `nodenv install -l` で新しい node.js のバージョンを確認する
– 対象のバ
Node.jsをアップデートしてみる(備忘録)
問題
UdemyでRubyonRailsの学習を始めようと思ったら、
まずはMacで動いているNode開発環境を最新状態にする必要があるとのこと。Homebrew
Homebrewの最新バージョンはこちらから確認できます↓
https://github.com/Homebrew/brew/releases2021/12/13時点でのHomebrewの最新バージョンは3.3.7
![スクリーンショット 2021-12-13 20.11.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2384947/18bfaa4f-8a90-4a17-9d65-65c59e7fc6b0.png)私の環境でのHomebrewのバージョンは2.6.1
“`title:Homebrew
% brew -v Homebrew 2.6.1
Homebrew/homebrew-core (git revision d21e8d; last commit 2020-12-12)
AWS DevOps – AWS X-Rayによる分散トレーシング その3 (Node.js編)
# はじめに
本連載は以下の3部で構成されています。1. [AWS X-Rayによる分散トレーシング その1 (概要編)](https://qiita.com/k-inui/items/18eba083a6fe061e5ea5)
2. [AWS X-Rayによる分散トレーシング その2 (Java編)](https://qiita.com/k-inui/items/33bb5819d0ee24e02e28)
3. **AWS X-Rayによる分散トレーシング その3 (Node.js編) ←今回**X-Rayの基本から学びたいという方はまず[その1](https://qiita.com/k-inui/items/18eba083a6fe061e5ea5), [その2](https://qiita.com/k-inui/items/33bb5819d0ee24e02e28)を参照下さい。
本記事では、LambdaのランタイムにNode.jsを採用した場合にX-Rayに必要な設定やその際に注意すべきことを記載しています。
それでは、早速LambdaでX-Rayを使ってみましょう!
GoogleアナリティクスのAPIをNode.jsから触る
こんにちは、この記事は[岩手県立大学アドベントカレンダー](https://qiita.com/advent-calendar/2021/ipu)12日目の記事です。
先日Node-RED向けにGoogle Analyticsのノードを自作した記事を書きました。
https://qiita.com/n0bisuke/items/f5b3136e74d44ec2e4e1
この中で使ってる元の実装の紹介をしてみます。
## Google Analyticsのバージョン – GA4
[Google Analytics Data API (GA4)](https://developers.google.com/analytics/devguides/reporting/data/v1)のデモを触っていくのですが、Google Analyticsは従来のユニバーサルアナリティクス(UA)とGoogle アナリティクス 4(GA4)があります。
GA4の方が新しいバージョンって認識で問題なさそうな気がします。
## Google Analytics Data APIのサンプルを触る
Expressでsocket.ioを利用しWebSocket通信を実施する。
#アジェンダ
①公式提供のソースコードの解析
②Roomを追加する###①公式提供のソースコードの解析
リンクより、socketioのソースコードを取得し、実行する。“`javascript:サーバ側のコード
const app = require(‘express’)();
const http = require(‘http’).Server(app);
const io = require(‘socket.io’)(http);
const port = process.env.PORT || 3000;app.get(‘/’, (req, res) => {
res.sendFile(__dirname + ‘/index.html’);
});/** コネクション確立 */
io.on(‘connection’, (socket) => {
console.log(‘接続成功!!’)
socket.on(‘chat message’, msg => {
io.emit(‘chat message’, msg);
console.l