- 1. Expressを習得するためにやったこと(随時更新)
- 2. THE TYPESCRIPT WORKSHOPをやる時のハマりどころ・注意どころ
- 3. Mac で nodebrew が動かない ( #node )
- 4. Alexaスキルの開発 0から公開まで
- 5. npm audit fixで解決しないとき
- 6. Node.jsでCSVファイルを読みこんでJSONデータに変換するサンプルコード
- 7. Puppeteer Tips
- 8. nvm環境のnpm自体をコマンド一発で最新化する方法
- 9. [Node.js][JavaScript]CryptoAPIの違いでハマったのでまとめ
- 10. 画像をスライダー形式にするswiperをyarnで導入するところまで
- 11. 【Electron】Bootstrap4を使用する際、jQueryの読み込み位置のミスの解決方法-備忘録
- 12. メッセージベースのMicroServiceをNode.js上で簡単につくれるSenecaを試してみた
- 13. webpackとは何なのか?
- 14. ElectronでcontextBridgeによる安全なIPC通信(受信編)
- 15. 【MongoDB】APIログ取るのに手軽で最高だった件 (+intellijだとさらに手軽)
- 16. VPSで複数のNodeJSアプリをHTTPS化してホストする
- 17. Node.js と Babel で ES6
- 18. Nowでプロキシを建ててCORSエラーを爆速解決
- 19. NestJS CLIで初心者でも簡単にNode.js REST APIが作れる!
- 20. GoogleのCloud Text-to-Speechを使ってDiscordの読み上げbotをサクっと作った
Expressを習得するためにやったこと(随時更新)
Node.jsのフレームワーク、Expressを習得するためにやったことをここにまとめていきます。(随時更新!)
### 前提知識
Expressを使うためにはNode.jsのインストールが必要
※参考:[初めてのNode.js:インストール確認、REPL、Hello worldまで](https://www.i-ryo.com/entry/2018/11/21/223710)
REST APIとは何か
※参考:[REST APIとは何かを調べまくったらようやくイメージができてきたのでまとめた](https://www.i-ryo.com/entry/2020/02/04/083542)
### Express事始め
まず、Expressとはなんなのか。JSフレームワークとの役割の違い。
※参考:[https://www.i-ryo.com/entry/2020/02/13/083521](https://www.i-ryo.com/entry/2020/02/13/083521)
次はExpressでハロワ(Hello World)する予定。
随時更新していきま
THE TYPESCRIPT WORKSHOPをやる時のハマりどころ・注意どころ
## 概要
[THE TYPESCRIPT WORKSHOP](https://cdkworkshop.com/20-typescript.html)をやった時に感じた、ハマりどころ・注意どころをメモしました。## Node.jsの相互互換性問題
JavaScriptでlambdaを書く部分を以下のように修正しないと`SyntaxError`がでます。
lambdaの設定で、`runtime: lambda.Runtime.NODEJS_10_X`としているので、Node.jsが`ES Moduleのsyntaxを理解できないことが原因です。### Before
“`js:hitcounter.js
import { DynamoDB, Lambda } from ‘aws-sdk’;
“`### After
“`js:hitcounter.js
const { DynamoDB, Lambda } = require(‘aws-sdk’);
“`## DynamoDBは`cdk destroy`で削除されない
気をつけましょう。
これはデフォルトの挙動で、`R
Mac で nodebrew が動かない ( #node )
brewが使えないというひどい罠が。
# Error
“`
nodebrew list
No such file or directory at /usr/local/bin/nodebrew line 575.
“`# Resolve
https://github.com/hokaccha/nodebrew#install
“`
brew uninstall nodebrew
“`“`
curl -L git.io/nodebrew | perl – setup
“`“`
export PATH=$HOME/.nodebrew/current/bin:$PATH
“`“`
not installedcurrent: none
nodebrew ls
“`# Original by Github issue
https://github.com/YumaInaura/YumaInaura/issues/2988
Alexaスキルの開発 0から公開まで
初めて **Alexaスキル** の開発を始めてから公開するまでの流れについて。
# フローチャートを作成する
事前に Alexaにどう発話したらどう分岐するかをまとめたフローチャートを作っておくとフローが整理できて開発が捗るので以下のような感じで作成します。(黒塗り多くてすみません)![alexa-flowchart.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416295/eb926020-0439-8afd-7548-05d19c892f89.png)
# alexa developer console への登録
[amazon alexa](https://developer.amazon.com/ja-JP/alexa)にアクセスし、アカウントを作成してログインします。
「スキルの作成」ボタンを押し、好きなスキル名を入力して作成。スキルを作成した後、ビルドタブの左メニューから「エンドポイント」を選択し、表示される **スキルID** を覚えておきましょう。
# AWS La
npm audit fixで解決しないとき
随分古いバージョンのパッケージを使っていたシステムで、node.jsをアップデートをしたときに
“`shell
found 98 vulnerabilities (39 low, 13 moderate, 46 high) in 10622 scanned packages
94 vulnerabilities require semver-major dependency updates.
4 vulnerabilities require manual review. See the full report for details.
“`のような文言が出力されましたので、その対応を行います。
大体の場合は『`npm audit fix –force`』をすれば解決するようですが、今回は一部上手くいかないものがあったので、直接ファイルをイジイジして治すことにします。
(この辺はあまり自信がないので、もしかしたら間違えてるかもです)
# どのパッケージが問題なのか調べる
まずは、問題の原因であるパッケージの確認を行います。
“`shell
$ npm a
Node.jsでCSVファイルを読みこんでJSONデータに変換するサンプルコード
Node.jsでShift_JIS で書かれたCSVファイルを取り扱う必要があり、その際の備忘メモ。
**JSON変換までできた方が便利**なので、[csvtojson](https://www.npmjs.com/package/csvtojson) を使ってみました。## 要約
– csvtojsonを使えば、標準的なCSVファイルを**簡単にJSONデータ**に変更できました。
– Node.jsはファイル読み込みは基本UTF-8を想定しているようですが、UTF-8以外の場合は [iconv-lite](https://www.npmjs.com/package/iconv-lite)をかましてShift_JIS→UTF-8変換してあげればOKでした。
– **csvtojson はコマンドラインからも呼び出せる**ので、コマンドラインでCSV→JSON変換できるのはなにげに便利です。## 前提や環境
“`console
$ sw_vers
ProductName: Mac OS X
ProductVersion: 10.15.3
BuildVersion
Puppeteer Tips
## Puppeteer?
読み方は「**ぱぺてぃあ**」。
Node.jsのライブラリでChromeを操作しDOMの要素を取得、ステータスコードを取得、レスポンスタイムを計測・・等々できます。
※Chromeのデベロッパーツールで見れる情報は(たぶん)全てpuppeteerで取得できる## Sample
「サイト内の各ページのタイトルが予測した値になっているか?」という自動テストをPuppeteerを利用して処理してみます。
大まかな流れは下記のようになります。
1. テストデータをCSVファイルから読み込み
2. 1行ずつループし、取得した値と予測した値を比較
3. 結果表示### Code
https://github.com/yusukeito58/puppeteer-template
“`shell
$ tree -I node_modules
.
├── package.json
└── src
├── data
│ └── title.test.csv
├── lib
│ └── output.js
nvm環境のnpm自体をコマンド一発で最新化する方法
## コマンド一発でnpm自身を最新化する方法
nvm環境でnpm自体のアップデートがうまく行かなかったのでコマンド一発で成功する方法を公開しときます
### やり方
以下、bashコマンドラインで実行するだけの簡単なお仕事
ヒアドキュメント使ってるのでcatから下部のEOFまでコピーしてね
(Macの場合は「$PROGRAMFILES」環境変数とれないので書き換えればOK)“`
$ cat <npm_update.sh && chmod +x npm_update.sh && ./npm_update.sh && rm -rf ./npm_update.sh
#!/usr/bin/bash
cd “$PROGRAMFILES”/nodejs
rm npm npx npm.cmd npx.cmd
mv node_modules/npm node_modules/npm2
node node_modules/npm2/bin/npm-cli.js i -g npm@latest
rm -rf node_modules/npm2/
EOF
“`### やって
[Node.js][JavaScript]CryptoAPIの違いでハマったのでまとめ
#Overview
Node.jsはJavaScriptで書けるから、Webの中では”Write once, run anywhere”的な美味しいこともある。
しかし、各環境にbuiltinされているAPIを使ったときはそうはいかない時がある。
今回は暗号化のCryptoで不覚にも1日ハマったのでその記録を残しておく。#Target reader
– Node.jsで暗号化したデータをブラウザで復号化したいと思っている方。
#Prerequisite
– AESの概要は理解していること。
– 今回はAES256-CBCを使用する。
– 記憶が正しければAES192はブラウザのAPIでサポートされていない旨のエラーが出たため。#Body
##どうして片方のAPIで統一しないの?
これはいい質問だ。実際のところ、Node.jsのcryptoをブラウザで実行したことがある。
どうして採用されなかったのか?**なぜなら100KBほどバンドルサイズが増えたから。**
詳しく知りたい場合は、この方の記事を読んでみるといいかもしれない。
https://enginee
画像をスライダー形式にするswiperをyarnで導入するところまで
## yarnとは?
JavaScript(node.js)のパッケージマネージャで、2016年にFaceBookが公開したものです。
他にもパッケージマネージャーとしては**「npm」**とう言うものものありますが、今回は、yarnを使います。yarnの仕組みは簡単で、$ yarn add 〇〇と言う形で、使いたいパッケージをインストールすると、package.jsonと言うファイルに、インストールしたパッケージに関する情報が記載され、$ yarn installを実行すると、開発環境下にパッケージ(関係するファイル一式)がインストールされ、パッケージを使うことができます。$ yarn installを実行すると、yarn.lockと言うファイルが生成され、固定されます。
実は、gemの管理とよく似ていて、gemの場合は、Gemfileに記載されたgemは、どの環境でも$ bundle installすればgem同士の互換性など考慮して良しなに調整してインストールしてくれて使えるようになりますが、yarnも似たような管理方法で、package.jsonに記載されているパッケ
【Electron】Bootstrap4を使用する際、jQueryの読み込み位置のミスの解決方法-備忘録
# 目的
Electronでデスクトップアプリを作成する際に、Bootstrap4を使用して綺麗なデスクトップアプリを作成する。# 準備
### BootStrapのインストール
“`
npm install bootstrap@4.0.0-beta
“`
### jQueryのインストール
“`
npm install jquery
“`
### Popper.jsのインストール
“`
npm install popper.js
“`
# 陥ったミス
### ソースコード
“`
test
メッセージベースのMicroServiceをNode.js上で簡単につくれるSenecaを試してみた
# 背景
関わっているプロジェクトで触る機会があったので備忘録的にメモ
# Senecaとは
Node.js環境でメッセージベースのMicrorServiceを簡単に構築出来るパッケージ。メッセージはJSON形式です。
# Senecaの3つの重要な機能
– **Pattern matching**: Instead of fragile service discovery, you just let the world know what sort of messages you care about.
– **Transport independence**: You can send messages between services in many ways, all hidden from your business logic.
– **Componentisation**: Functionality is expressed as a set of plugins which can be composed together as microservices.
webpackとは何なのか?
# 概要
執筆中
ElectronでcontextBridgeによる安全なIPC通信(受信編)
## はじめに
Electronにおけるメインプロセスとレンダラープロセス間のやり取りに関して、セキュアなIPC通信にはcontextBridge[^1]を使おう、[という記事](https://qiita.com/pochman/items/64b34e9827866664d436)を前回書いたらそれなりに読んでもらえているみたいです。ありがとうございます。
その時の例として、レンダラープロセスからメインプロセスへの**送信**を扱いましたが、**受信**についてもリクエストがあったので紹介します。基本的にはStackOverFlow[^2]からの引用です。
基本的にElectronにおけるメニュー操作はメインプロセスでハンドルすることになるので、それをレンダラープロセスへ送る際には、**メインプロセスからチャンネル付きで信号を送信し、レンダラープロセスで受信時にチャンネルに従って処理を分ける**、ということをするでしょう。これを目的としたcontextBridgeの利用法です。
## 前回からの改修点
まずは前回の記事の方法3までをお読みください。今回は前回の方法3から
【MongoDB】APIログ取るのに手軽で最高だった件 (+intellijだとさらに手軽)
#はじめに
気にはなっていたけど、なかなか触れる機会が無かった。。
そんな、同じクラスのあの子のような存在、それがmongoDBでした。
実際、使ってみると手軽でとても使いやすい。こちらの記事では、簡単にインストールから導入までをまとめてみました。
#MongoDBを使った開発内容
趣味の個人開発でMongoDBを利用しました。
[APIを利用したbitcoin自動売買システム]– bitcoin値取得にCryptWatchAPIを使用
– bitcoin売買にBitflyerAPIを使用
– 開発言語:Node.js
– 開発環境:macOS Catalina
– デプロイ環境: AWS:EC2:ubuntu18.04LTSMongoDBはbitcoin売買時の値段と、その売買判断に使われた値のログを取りたくて使用しました。
#mongoDBとは
誤解を恐れずに極端に言うと、**データをJSON形式でレコードできるデータベースです**
すいません! ここでは、わかりやすさ優先しましたm(_ _)m
(玄人の方々、マサカリ投げないでください。)他にも、
VPSで複数のNodeJSアプリをHTTPS化してホストする
VPSで複数のサービスのAPIサーバーを運用するための手順です。
**概要**
* Digital Ocean の Ubuntu イメージ(5USD/month)
* サブドメインに各アプリを紐づける
* Let’s Encrypt で SSL 化## サーバーのセットアップ
### Digital Ocean Droplets のセットアップ
以下の設定でDropletsを作ります。
※ 他社のVPSサービスを利用する場合は、ドメインの`@` `www` `app1` `app2`をサーバーに向けてSSH接続できる状態までやってこの項を飛ばしてください。* Image: Ubuntu
* Plan: Standard / 5USD
* Region: シンガポール
* Authentication: SSH keysドメインの管理画面から使うドメインの`www` `@` `app1` `app2` を上記で作ったサーバーに向けます。
“`bash
# SSH 接続 できることを確認
$ ssh root@yourdomain.com
“`### メモリのス
Node.js と Babel で ES6
なんか、いつも、Node.js で、ちょっとコード書いて試したり、勉強がてらコード書いたりするときに、 ES6なコード書きたい時どうすんだっけ? と悩んでしまうので、ここにメモしておきます。
実際に確認した時のそれぞれのバージョンは以下になります。
“`
$ node –version
v12.14.1
$ npm –version
6.13.4
$ npx –version
6.13.4
“`あと、このメモ作成時にインストールされる Babel 関連パッケージのバージョンは、以下の通り。
“`
$ grep babel package.json
“@babel/cli”: “^7.8.4”,
“@babel/core”: “^7.8.4”,
“@babel/node”: “^7.8.4”,
“@babel/preset-env”: “^7.8.4”
“`# 作業用のディレクトリを作る
“`
mkdir work
“`# npm init を実行
“`
npm init -y
“`# babel 関連を
Nowでプロキシを建ててCORSエラーを爆速解決
# 前置き
`nuxt generate`で作った静的サイトをGitHub Pagesにホスティングし,自分のはてなブックマークのRSSをAxiosでGETして表示させようとしていました.
何も考えずにブラウザで開くとこんなエラーが出てうまくいきません.
“`
Access to XMLHttpRequest at ‘http://api.example.com’ from origin ‘http://localhost.com’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
“`いわゆる,[オリジン間リソース共有(CORS)](https://developer.mozilla.org/ja/docs/Web/HTTP/CORS)における同一オリジンポリシー違反です.このエラーはブラウザにおいて,現在アクセスしてるサイトと異なるオリジンにあるリソースに対してリクエストを行うときに起きます.
今
NestJS CLIで初心者でも簡単にNode.js REST APIが作れる!
Node.jsなんてほとんど使ったことがないのに、頑張って[NestJS](https://nestjs.com/)でCLIを使ってREST APIを作りました。
あまりドキュメントなかったことに加えて私のスキル不足で半日ほどかかってしまいましたが慣れれば30分もかからないです。# 環境
Ubuntu18.04.01 LTSで動かしました。
NEST CLIの`nest info`でバージョン情報を見ます。“`bash
$ nest info_ _ _ ___ _____ _____ _ _____
| \ | | | | |_ |/ ___|/ __ \| | |_ _|
| \| | ___ ___ | |_ | |\ `–. | / \/| | | |
| . ` | / _ \/ __|| __| | | `–. \| | | | | |
| |\ || __/\__ \| |_ /\__/ //\__/ /| \__/
GoogleのCloud Text-to-Speechを使ってDiscordの読み上げbotをサクっと作った
## Discordのメッセージ読み上げbot
Discordのボイスチャットで、特定のチャンネル内のメッセージを自動で読み上げてくれるbotを作りました。
弊ディスコで導入されている読み上げbot pic.twitter.com/VvdzYlmqEz
— 古都こと (@kfurumiya) February 12, 2020
Discordの読み上げbotとしては[喋太郎](https://www.d