- 1. jestでモックしてみたメモ
- 2. Node.jsをインストール(nodebrewでバージョン管理)
- 3. LINE botを勉強会の受付に導入してみたい! ~connpass APIの紹介~
- 4. [Node.js] express + nodemon + BrowserSync でゲボ楽コーディング
- 5. 話題のanalyzeコマンドを実装してみた
- 6. JavaScriptでちょっと複雑なcliを作るのに便利なEnquirer
- 7. 【未完】楽天市場のAPIを使って買えるマスクを提案してくれるLINEBotを作ってみた
- 8. [備忘録]Macの開発環境構築(anyenv + nodenv + Node.js)
- 9. VSCode1.43.0では即時関数内でtry-catchを使うとreturnが正しく解釈されない
- 10. create-react-appを卒業して自分でReact + TypeScriptの開発環境を作れるようになるということ
- 11. Node.js を持ち歩けるようにして、どこでも簡易WEBサーバを起動出来るようにする
- 12. obniz+赤外線LED+TypeScriptでリモコンコンセント(OCR-05W)を動かす
- 13. node.jsのテンプレートリテラルと+による文字列結合の速度差
- 14. Windows10にてReact公式チュートリアル用のローカル開発環境構築時、node最新化、npx実行で突っかかった備忘録
- 15. Node.jsでファイル出力
- 16. N予備校の教材でAjaxでCORSを試してみる
- 17. GraphQL Mesh は何を解決するのか? ~ Qiita API を GraphQL でラップして理解する GraphQL Mesh ~
- 18. homebrewでnodeモジュールのダウングレード
- 19. [Node.js] request モジュール がDeprecated になっていた
- 20. 三井住友銀行口座の残高を自動取得する(Puppeteerで)
jestでモックしてみたメモ
レガシーコードのテストをjestに移行していた時に、
jestだとどうやってモックしたり、追跡したりするんだ?となったのでその時のメモ# 最初に
相当アホなところでハマったのだが、jest はnamespaceをそのまま読み込むため以下のようの読み込まないといけない。“`typescript
import ‘jest’ // OKimport jest from “jest” // NG
jest.xxxx()
“`# 特定の関数をモックする
関数にもろもろについてモックの仕方です。## テスト用のモック関数の作成
“`typescript
const mockFunc = jest.fn().mockImplementation(() => return “mock func”);
console.log(mockFunc()); // mock func
“`
関数自体のモックは jest.fn()に集約されており、単純に何か値を返すのみの関数は mockImplemantionの引数で定義します。
また、mock関数の引数や、どういった値を返した
Node.jsをインストール(nodebrewでバージョン管理)
**本来の目的:ローカル環境でES6を使用**
node.jsのバージョン管理ツールnodebrewをインストール
※メリット:複数のnode.jsのバージョンを簡単に切り替えられる。
#brewがインストールされているか確認
“`ruby
$ brew -v
“`“`ruby:【実行結果】インストールされている
Homebrew 2.2.6
Homebrew/homebrew-core (git revision ba38; last commit 2020-02-28)
“`#nodebrewのインストール
“`ruby
$ brew install nodebrew
“`“`ruby:【実行結果】
Updating Homebrew…
==> Auto-updated Homebrew!
Updated 1 tap (homebrew/core).
==> New Formulae
abseil hdf5@1.10 publish
archi
LINE botを勉強会の受付に導入してみたい! ~connpass APIの紹介~
#導入
仕事は別に勉強会を開いているのですが、有志による運営のため手が回らないこところが多いです。その中でも受付業務にフォーカスして手助けになるシステムのプロトタイピングを行っています。
[Noodlで受付嬢を創った](https://speakerdeck.com/maepu/noodldeshou-fu-niang-wochuang-tuta)
私と同じくユーザコミュニティの運営やイベントの開催をされている方に読んでいただいて、少しでも負担が軽くなるシステム例としていただけたら嬉しいです。
勉強会といえば、IT関連の勉強会支援サービス**connpass**ですね。
と、いうことでconnpassのAPIを利用してLINE botと連携してみようと思いました。
この記事ではconnpass APIの紹介と簡単な使い方を書いています。#connpass APIについて
こちらの[connpass API](https://connpass.com/about/api/)からURLと検索クエリ、レスポンスについて解説されています。開催日時や場所だけでなく、サイトのH
[Node.js] express + nodemon + BrowserSync でゲボ楽コーディング
# はじめに
expressを使ってBrowserSyncを使う記事が少なかったので書きます。
nodemon + BrowserSyncでブラウザノータッチの楽々コーディングを目指そう。
# 方法
1. expres側ファイルをnodemonで監視(3000portで起動)
2. BrowserSync を 4000 番ポートで起動、nodemonに接続これによりクライアント側のファイルはBrowserSyncでブラウザをリロード
nodemonによるサーバ再起動は、再起動後にBrowserSync に通知してもらえるようにする。
#前提
– node + expressは導入済み
– Nodeの側のポートは3000に指定# 導入
`browser-sync` のインストール“`
$ npm install –save-dev browser-sync
“`インストールが終わってからbrowser-syncのコンフィグファイルを生成
“`
$ npx browser-sync init
“``bs-config.js`が作られるので、以下のように一部
話題のanalyzeコマンドを実装してみた
今、イケてるエンジニア界隈で話題沸騰中の`analyze`コマンドをご存知でしょうか。
こういうやつですね。
# Yet another `analyze` command
コレCLIっぽい見た目をしていますが、実はWebブラウザ上[^sobaya007]でしか動作しません。不便ですね。
[^sobaya007]: https://qiita.com/sobaya007Shellでも使いたい!という声にお答えして、実装してみました!!
コチラです。
[![NPM](https://nodei.co/npm/qiita-analyze.png)](https://nodei.co/npm/qiita-analyze/)Source
JavaScriptでちょっと複雑なcliを作るのに便利なEnquirer
# この記事は
[LAPRAS アウトプットリレー](https://daily.lapras.blog/) の…何日目だっけ?3/25の記事です!
こんにちは!LAPRAS エンジニアの @rockymanobi です!最近Node.jsでCLIを作る機会があり、その時に触ったEnquirerというライブラリが便利だったので、軽く紹介してみようというものです。ツールそのものについて軽くふれつつ、制作過程で出てきた「こんなことしたいけど、どう実現すれば良いんだろう」と試行錯誤して分かった使い方などを共有できればなと思います。
# Enquirerとは
Enquirerは CLIアプリケーションにおける対話的インターフェイスの実装を楽にしてくれるライブラリです。単純なテキスト入力の受付はもちろん、リストからの選択、チェックボックス、パスワード、入力補完、など、様々な入力方式を手軽に組み込むことができます。Node.js製です。JavaScript(TypeScript)万歳!
[公式サイト](https://github.com/enquirer/enquirer)による
【未完】楽天市場のAPIを使って買えるマスクを提案してくれるLINEBotを作ってみた
### はじめに
ProtoOutStudioというイケイケなスクールの「LINE Bot+APIで表現してアウトプット」という課題で製作したものです。こちらの[1時間でLINE BOTを作るハンズオン](https://qiita.com/n0bisuke/items/ceaa09ef8898bee8369d)の記事をベースにLINEBotを作成しました。
最近の新型ウィルスの影響で、ネットショッピングばかりしているのですが、ちょっと楽天市場のトップ画面を見るのに飽きてきたので、(マスクなどの)必要なものを、(売り切ればかりなので)在庫のある商品で、高額になりすぎて買う気がなくなってしまわない(金額の)範囲で、提案してもらえるLINEBotを考えました。
(Amazonは申請が大変そうに見えたのでお見送りしました)### 概要と作れなかったところ
#### 概要
+ LINEBotにほしいもの、「マスク」と入力したら
1. 楽天市場のキーワード検索から「マスク」を検索
2. 絞り込み検索で「購入可能」
3. 「最安価でソート」
4. 「最低金額
[備忘録]Macの開発環境構築(anyenv + nodenv + Node.js)
# 構築の流れ
1. Homebrewのインストール
2. Gitのインストール
3. anyenvのインストール
4. nodenvのインストール
5. Node.jsのインストール# 環境
– macOS Catalina
– シェルは zsh# Homebrewのインストール
[本家](http://brew.sh/index_ja.html) のスクリプトを実行。
“`
% /bin/bash -c “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)”
“`Homebrewのバージョン確認。
“`
% brew -v
“`# Gitのインストール
Gitがインストールされているか確認する。
使い方が表示されればOK。“`
% git
“`
### HomebrewでGitをインストール“`
% brew install git
“`# anyenvのインストール
HomebrewかGitでanyenvをイン
VSCode1.43.0では即時関数内でtry-catchを使うとreturnが正しく解釈されない
VSCode(1.43.0と1.43.1で確認)では、以下のコードでconsole.logの部分が「到達できないコード」として判定されてしまいます。
“`JavaScript
const message = (() => {
try {
/* エラーが発生しそうな処理 */
return “success”;
} catch (e) {
return “error:” + e;
}
})();console.log(“message = ” + message);
“`しかし、Node.js(12.16.1)で上記のコードを実行すると、console.logはちゃんと実行されます。
“`
message = success
“`即時関数の中でtry-catchは使うべきではないのでしょうか。
そもそもこういった処理を即時関数化すべきではないのかも知れません。
ただ、VSCode 1.42.1 以前はちゃんとconsole.logが到達可能と判定されていましたし、よく分かり
create-react-appを卒業して自分でReact + TypeScriptの開発環境を作れるようになるということ
これまでReactの環境構築をする時は[create-react-app](https://github.com/facebook/create-react-app)に頼りっきりでしたが、いい加減自分で作れないとまずいなと思い忘備録も兼ねて残しておきます。
また、せっかくTypeScriptも使うので `webpack.config.js` もTypeScriptで書けるようにしたいと思います。***
最終的なディレクトリ構成は次のようになります。
“`
.
┃━━ public
┃ ┗━ index.html
┃━━ src
┃ ┃━ index.tsx
┃ ┗━ App.tsx
┃━━ package.json
┃━━ package-lock.json
┃━━ tsconfig.json
┗━━ webpack.config.ts
“`それではやっていきましょう。
## 1. ディレクトリの初期化
適当なディレクトリを作って `npm init` するだけです。
“`
mkdir hogehoge
cd hogehoge
npm init -y
“
Node.js を持ち歩けるようにして、どこでも簡易WEBサーバを起動出来るようにする
Node.jsで便利なライブラリをつくったとしても、お客さまのPCやサーバの本番環境に **Node.jsの実行環境がないケース** もあります。**「Node.jsの実行環境を持ち歩けたらなぁ、、」**ということでググってみたらこの記事が。。
– [Node.js & npm をインストーラー無しで 手軽にはじめる](https://www.cottpic.com/2019/04/use-NodeJS-without-installer.html)
インストーラなどの実行が不要な **解凍すればすぐに使えるNode.js実行環境**の構築手順です。コレを使えば、実行環境ごとZipでアーカイブしたファイルを作成し**作業環境でそれを解凍すればNode.js環境の構築完了**、なんて事ができそうです。
ついでに、そのNode.js上でWebサーバを立ち上げることで、どこでも簡易WEBサーバが起動出来るようにしてみます。
## Node.js実行環境の構築
[公式](https://nodejs.org/ja/download/)からバイナリをダウンロード。Windows Bi
obniz+赤外線LED+TypeScriptでリモコンコンセント(OCR-05W)を動かす
## はじめに
こんにちは。電気毛布エンジニアの[@tmitsuoka0423](https://twitter.com/tmitsuoka0423)です。
昨日書いた「[obniz+赤外線LEDでリモコンコンセント(OCR-05W)を動かす](https://qiita.com/tmisuoka0423/items/ac84514454857d157c60)」では、obnizのパーツライブラリページ上で動作確認しましたが、今回はTypeScriptで実装していきます。
ソースコードは[https://github.com/tmitsuoka0423/obniz-ocr-05w](https://github.com/tmitsuoka0423/obniz-ocr-05w)で公開しています。## 【クラウドファンディング実施中!】mouful(モウフル)
「[**電気毛布につけるだけ!スマホで布団の温度調節できるmouful(モウフル)**](https://camp-fire.jp/projects/view/220261)」
というクラウドファンディングを実施しています。
node.jsのテンプレートリテラルと+による文字列結合の速度差
# はじめに
文字列を取り扱う際、毎回テンプレートリテラルと文字列連結だとどちらの方が早いのだろう。という疑問が毎回頭を過ぎってました。
ということで軽くですがテストしました。# 環境
– Windows 10 pro
– node.js v13.0.1# 試す
計測には`performance`を使用しました。
10^7回文字列連結する処理を10回繰り返し、平均実行時間を出しました。
なお実行時間の単位は`ms`です。まずは単純な文字列同士の結合です。
“`javascript
const { performance } = require(“perf_hooks”);
const a = “hogehoge”;
const b = “fugafuga”;/** concat_text */
let concat_sum = 0;
for (let i = 0; i < 10; i++) { const start = performance.now(); for (let j = 0; j < 10 ** 7; j++) { const hog
Windows10にてReact公式チュートリアル用のローカル開発環境構築時、node最新化、npx実行で突っかかった備忘録
# はじめに
React公式チュートリアルをやってみたところ
ローカル開発環境構築中にnode最新化、npx実行で突っかかったので、備忘録。実施したチュートリアル
[Reactチュートリアル(日本語)](https://ja.reactjs.org/tutorial/tutorial.html)なお、自分はReactは触ったことが無い。
# 環境
– windows10 64bit
– node 6.9.4 -> 13.11.0
– npm 6.13.7# ローカル開発環境の構築
チュートリアルを進める方法には、2つのオプションがある。> オプション 1: ブラウザでコードを書く
> 始めるのに一番手っ取り早い方法です!
> …
> オプション 2: ローカル開発環境
> これは完全にオプションであり、このチュートリアルを進めるのに必須ではありません!今回はオプション2を実施した。
## node最新化
### 既存nodeバージョン確認
> 1. 最新の Node.js がインストールされていることを確かめる。とあるので、nodeを最新化する。
現行入
Node.jsでファイル出力
下記の『同期処理メソッド「writeFileSync」』を参考に実施
[node.jsでファイルの入出力操作](https://qiita.com/shirokuman/items/509b159bf4b8dd1c41ef)
N予備校の教材でAjaxでCORSを試してみる
# やりたいこと
N予備校のAjaxのページに「同一生成ポリシーを満たさない場合CORSにひかかって通信できません」と書かれているが、そのあたりの回避策について特に紹介されていなかったので`Access-Control-Allow-Origin`を試してみる。
## 前提知識
* CORS https://developer.mozilla.org/ja/docs/Web/HTTP/CORS
* N予備校 https://www.nnn.ed.nico/courses/497/chapters/6891
* この教材をそのまま使います(非会員は見れません)## 環境
* Vagrant ubuntu(Node.jsにて上記のリンクのサーバが稼働している)
* 手元のマシン(Mac)## 実験
* 手元のマシンのブラウザから、Vagrant上のNode.jsに対してAjax通信を行い失敗することを確認する
* CORSを回避するためにサーバー側にヘッダーを挿入する### 修正前
* LoadAvgが表示されない
* コンソールログをみると以下のエラーが発
GraphQL Mesh は何を解決するのか? ~ Qiita API を GraphQL でラップして理解する GraphQL Mesh ~
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163591/c72738fa-a7bc-9b9f-dd68-cbc29dec5af4.png)
# GraphQL Mesh とは
[The Guild](https://twitter.com/TheGuildDev) から [GraphQL Mesh](https://github.com/Urigo/graphql-mesh) が発表されました。
? GraphQL Mesh – Query Anything, Run Anywhere ?https://t.co/PlZpAC9b54
? I'm very proud to announce our new open source library – GraphQL M
homebrewでnodeモジュールのダウングレード
homebrewでダウングレードしたnodeを使用する際に、詰まった部分を残します。
###環境
インストール済みのnodeバージョン:13.11.0
インストールしたいnodeバージョン:12.16.1macOS:10.14.3
##nodeバージョン12系をインストール
バージョン指定の方法が12系の場合`@12`で最新の12系のバージョンがインストールできます。“`
$ brew install node@12
==> Downloading https://homebrew.bintray.com/bottles/node@12-12.16.1.mojave.bott
==> Downloading from https://akamai.bintray.com/3d/3dee3426e2ea8928d0724a801591a
######################################################################## 100.0%
==> Pouring node@12-12.16.1.mojave.bott
[Node.js] request モジュール がDeprecated になっていた
### 内容
> As of Feb 11th 2020, request is fully deprecated. No new changes are expected to land. In fact, none have landed for some time.– 2020年2月11日をもってDeprecatedになったようです。
– 下記のモジュールについても `request` と依存関係があることから非推奨となりました。
– [request-promise](https://github.com/request/request-promise)
– [request-promise-native](https://github.com/request/request-promise-native)
– [request-promise-any](https://github.com/request/request-promise-any)
– 代替手段については[このissue](https://github.com/request/req
三井住友銀行口座の残高を自動取得する(Puppeteerで)
# やりたいこと・背景
– [三井住友銀行のインターネットバンキング SMBCダイレクト](https://direct.smbc.co.jp/aib/aibgsjsw5001.jsp)で口座にログインし、現在の口座残高を取得
– 他行では個人向けのAPIが公開されていたりする([個人で動作を試せる銀行系オープンAPIまとめ](https://qiita.com/Puerto/items/c80ecfdd82f070ed2063)等参照)が、三井住友銀行では現在法人向けしかないようす
– MoneyForwardやZaim等のFinTechサービスのAPIを使って取得することはできるかもしれませんが、それらのサービスを日常的には利用していないため、調べていません
– 三井住友銀行のLINE公式アカウントに友だち登録してID連携すると、チャット形式で残高が取得できます。この記事ではよりプログラマブルに取得したい場合を想定しています。たとえば「オレオレ家計簿APIみたいなものをつくりたい」や「残高が一定金額以上(以下)になったら通知させたい」といった応用ができます# 使用するもの
–