- 0.0.1. 【NodeJS(TypeScript)】標準入力から読み取る
- 0.0.2. 再帰的にフォルダパスを取得する(node)
- 0.0.3. 【javascript】とにかくはじめたい
- 0.0.4. Typescript備忘録~Google mapへheatmapを描写~
- 0.0.5. 【2022年10月版】 macOS で node をインストールする
- 0.0.6. Node.js(axios)からQiita APIを利用して指定したユーザーの記事を取得するメモ
- 0.0.7. 【Puppeteer】スクリーンショットを撮る/ページのソースを取得する方法
- 0.0.8. MacにNode.jsをインストール
- 0.0.9. 2022年度のTypeScript製ES Modulesレシピ
- 0.0.10. gRPCのサーバーが空配列を返してくれない
- 0.0.11. gRPCで3テーブル結合したデータを取得する
- 0.0.12. Error: Failed to lookup view “index” in views directory “/Users/***/views”
- 0.0.13. GoとNode.jsでgRPCサーバーとクライアントを作成
- 0.0.14. Daggerを使ってNode.jsのHello worldをCIしてみる
- 0.0.15. フロントエンジニア、AWSエンジニア目指す方必見! TypeScript導入!
- 0.0.16. node js基礎終わり。
- 1. htmlだと面倒な複数作業が一気に効率化した
【NodeJS(TypeScript)】標準入力から読み取る
CLIツールを作るときにいつも使っている関数を紹介します。
NodeJSでは、標準の`readline`モジュールを使うことで標準入力から入力を受け取ることができます。## ソース
“`ts
import * as readline from “readline”;export const readFromCli = async (message: string, accept?: (input: string) => boolean): Promise
=> {
while (true) {
const ans = await readFromCli2(message);
if (!accept || accept(ans)) return ans;
}
};const readFromCli2 = async (message: string): Promise
=> {
const readlineInterface = readline.createInterface({ input: process.
再帰的にフォルダパスを取得する(node)
## lib xlsx install
[xlsx(SheetJS)()](https://www.npmjs.com/package/xlsx)
“`bash
npm install xlsx
“`## source
“`js
let XLSX = require(‘xlsx’)
let workbook = XLSX.readFile(‘./xls/ex_-01.xlsx’)
let input_sheet = workbook.Sheets[‘input’]
let input_json = XLSX.utils.sheet_to_json(input_sheet)
// console.log( input_json )
let ab_path = [];function getPath(json, folder_id) {
var tmp1 = json.find((v) => v.FOLDER_ID == folder_id);
if (!tmp1[‘PARENT_FOLDER_ID’]) {
console.log(`###### PA
【javascript】とにかくはじめたい
# はじめに: Javascript がとにかく分からない
何度も挫折している、役立たずで仕事ができなかったのが、このjava script を用いたfrontend 開発です。今回、少し、心を落ち着けてメモしておきたいと思います。
とりあえず、node.js の導入をメモしておきます。
WSL2で作業しています。下記にある通りの内容をなぞっています。
https://learn.microsoft.com/ja-jp/windows/dev-environment/javascript/nodejs-on-wsl
# 内容
## インストール
WSL2 ubuntu20.04 で、下記を行います。パッケージ管理ソフトでnode.js を導入することが推奨
されているようです。ここではnvm が使われていましたが、他にもあるそうです。まぁ面倒くさい。– nvm をインストール
– nvm を利用してNode.js と Node Package Manager (npm) をインストールする“`
$ sudo apt-get install curl
$ curl
Typescript備忘録~Google mapへheatmapを描写~
## Typescriptとは
TypeScriptは、JavaScriptの拡張版言語(2014年~@[Microsoft](https://learn.microsoft.com/ja-jp/training/modules/typescript-get-started/2-typescript-overview))。Javascriptから、静的型付けなどが改善されている。TypeScriptは、JavaScriptとシームレスな関係にあり、TypeScriptで書かれたコードをコンパイルすることで、JavaScriptのコードに変換される。コンパイル時に型チェックなどを行い、開発段階でエラー判定を行える。## Node.js npmとは
Node.jsとはJavaScriptを、サーバーサイドで動作させるプラットフォーム。Webブラウザ上で動作するJavaScriptを、Node.jsを使いサーバー上で動作させることで大量アクセスによる不具合の軽減などが行える。
インストールは以下のホームページから、インストーラーをダウンロードして、実行する。
https://n
【2022年10月版】 macOS で node をインストールする
# はじめに
macOS で node をインストールするメモです。ここでは nvm と nodebrew を使います。
# brew のインストール
まずは brew をインストールします
“`terminal
> /bin/bash -c “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)”
“`# nvm 版
## nvm のインストール
“`terminal
> brew install nvm
> echo ‘export NVM_DIR=”$HOME/.nvm”‘ >> ~/.zshrc
> echo ‘[ -s “$NVM_DIR/nvm.sh” ] && \. “$NVM_DIR/nvm.sh” # This loads nvm’ >> ~/.zshrc
> echo ‘[ -s “$NVM_DIR/bash_completion” ] && \. “$NVM_DIR/bash_completion” # This loads nv
Node.js(axios)からQiita APIを利用して指定したユーザーの記事を取得するメモ
たまに書くけどまとめてなかったので自分用メモとして残しておきます。
axiosを使ってQiita APIをアクセストークン付きで利用します。
## アクセストークンの取得
https://qiita.com/settings/tokens/new
> ![スクリーンショット 2022-10-22 17.15.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/e7566f42-ae84-a867-efe4-6e756b8e5331.png “スクリーンショット 2022-10-22 17.15.25.png”)
スコープのチェックは`read_qiita`だけでOK
> ![スクリーンショット 2022-10-22 17.15.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/38fbb336-831f-142c-23ed-e19466ed23b9.png “スクリーンショット 2
【Puppeteer】スクリーンショットを撮る/ページのソースを取得する方法
Puppeteerを使用する機会がありました。
https://github.com/puppeteer/puppeteer
デバッグの際、以下の2つのコマンドがすごく便利だったのでメモしておきます。
スクリーンショットを撮る
“`
await page.screenshot({ path: ‘screenshot.png’ });
“`ページのソースを取得する
“`
const bodyHandle = await page.$(‘body’);
const html = await page.evaluate((body) => body.innerHTML, bodyHandle);
console.log(html);
“`
MacにNode.jsをインストール
# 環境
“`
% sw_vers
ProductName: macOS
ProductVersion: 12.6
BuildVersion: 21G115
%
% brew -v
Homebrew 3.6.6
Homebrew/homebrew-core (git revision c6c9e681ea6; last commit 2022-10-19)
“`# インストール
## 1. nodebrew をインストール
“`
% brew install nodebrew
Running `brew update –auto-update`…
==> Auto-updated Homebrew!
Updated 1 tap (homebrew/core).You have 1 outdated formula installed.
You can upgrade it with brew upgrade
or list it with brew outdated.==> Downloading https://ghcr.io/v2/homebrew/cor
2022年度のTypeScript製ES Modulesレシピ
## はじめに
この記事は、2022年におけるTypeScript製ES Modulesの作成方法を解説、共有するためのものです。
node.jsにおけるCommonJSの歴史は長く、それに関する記事が大量にあります。どの設定がCommonJSに関わり、どの設定がES Modulesに関わるのかを読み解くには労力がかかります。この記事ではPure ESM作成の最小限構成を通して、ES Modulesの設定を整理します。
### 想定する読者
– JavaScript、TypeScriptの開発経験者
– node.jsおよびnpmの基礎的な知識がある
– CommonJSのサポートは考えず、新規にPure ESMのパッケージを開発したい### 想定する環境
– node.js v16.18.0 ~ v18.11.0
– TypeScript v4.8::: note warn
ES Modulesに関わる環境は頻繁に更新されます。この記事は2022/10/15時点での環境設定をまとめたものです。
:::node.jsのメジャーバージョンが更新された場合、この記事の
gRPCのサーバーが空配列を返してくれない
サーバー側から送信されているはずのオブジェクトのキーが排除されていたので原因を調べた。
そもそも LEFT JOIN を使っていたということもあり、レコードがない場合でも下記のようにオブジェクトを返していたので、空の配列を返すことにした。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/641690/cdd4a08d-739f-04eb-1cf7-9ea68dde865e.png)
## SQL
CASE WHEN THEN を使って値がない場合は空の配列を返すという条件を追加。
“`sql:sql
SELECT
g.id, g.name, g.orignal_extra_fields, CASE WHEN g.key is NULL THEN JSON_ARRAY() ELSE JSON_ARRAYAGG((JSON_OBJECT(‘key’, g.key, ‘title’, g.title, ‘gameId’, g.gameId, ‘adminId’, g.adminId,
gRPCで3テーブル結合したデータを取得する
gRPCで少し複雑なJSONを取得する方法に時間がかかったのでメモ。
## 環境
* Window10
* Go
* Node.js
* MYSQL8.0## JSON
最終的に下記のようなJSONが欲しい。“`json:game.json
{
“id”: 1,
“name”: “BLACK JACK”,
“tables”: [
{
“key”: “cf955e95-360b-43dd-bc0f-2d4569604a13”,
“title”: “Hello world”,
“gameId”: 1,
“adminId”: 3,
“limit”: 5,
“extraFields”: {
“turn”: “”
},
“players”: [
{
“i
Error: Failed to lookup view “index” in views directory “/Users/***/views”
Error: Failed to lookup view “index” in views directory “/Users/***/views”
`Node.js` + `Express` でテンプレートエンジンを`ejs`で設定するとエラーとなった
## フォルダ構成
エラー時のappフォルダ以下の構成
“`
├── package.json
├── src
│ ├── index.ts
│ ├── routes
│ │ └── index.js
│ └── views
│ └── index.ejs
├── tsconfig.json
├── yarn-error.log
└── yarn.lock
“`## 解決した方法
`app.set(‘views’, __dirname + ‘/views’)`を追加“`javascript:index.ts
import express from ‘express’;const app: express.Express = express();
app.set(‘view engi
GoとNode.jsでgRPCサーバーとクライアントを作成
## ディレクトリ構成
“`:ディレクトリ
root/
├ server/
│ ├ helloworld/
│ └ main.go
└ proto/
└ helloworld.proto
“`“`protobuf:helloworld.proto
syntax = “proto3”;option go_package = “./”;
package helloworld;
// The greeting service definition.
service Greeter {
// Sends a greeting
rpc SayHello (HelloRequest) returns (HelloReply) {}
}// The request message containing the user’s name.
message HelloRequest {
string name = 1;
}// The response message containing the greetings
message HelloRep
Daggerを使ってNode.jsのHello worldをCIしてみる
## Daggerとは
CICDというとGithub Actions、CircleCI、AWS CodeBuildのようなクラウドサービスを利用するケースが多いと思いますが、Daggerは、ローカル環境でも動作させることができるCICDツールになります。Daggerを使う利点は以下のようなことがあげられます。– ローカル開発で動かすことができるため、開発者が簡単に試すことができる
– CICDサービス上でも動作することができるため、Daggerで処理を共通化することでロックインを減らせますhttps://github.com/dagger/dagger
## インストール
OSによって手順が違うので以下の公式ドキュメントを参考にインストールしてください。
https://docs.dagger.io/install/
## Hello worldで試してみる
早速、Hello worldでDaggerを体験してみましょう。今回使用する開発言語はNode.js(TypeScript)にします。Dagger自体は特定の開発言語に依存するツールではありません。公式でもj
フロントエンジニア、AWSエンジニア目指す方必見! TypeScript導入!
# どういう方が読んだ方がいいか
・JavaScriptをある程度知っている方
・AWSエンジニアを目指される方
・フロント開発をされる方# TypeScriptとは
Microsoftが開発したプログラミング言語で、JS(Java Script)をさらに拡張した言語です。
静的型付け機能(static typing)となっています。新機能などがJSに追加されますが、JSのようにブラウザで実行できません。
新しい機能をTS(TypeScript)からJSにコードを変換(コンパイル)し、
開発者が正しいコードを書くことを支援します。# TypeScriptのインストール
この公式サイトを参考にします。https://www.typescriptlang.org/
このサイトからダウンロードします。ダウンロードをしていきます。
https://www.typescriptlang.org/download
npm経由で
“`
$ npm install -g typescript
“`
を実行します。権限が足りない時はsudoをnpmの前につけます。![
node js基礎終わり。
htmlだと面倒な複数作業が一気に効率化した
プログラミングチュートリアルさんというyoutubeに動画を載せている方がいて簡単なお天気アプリの作成からnodejsのデプロイ方法を載せていたので復習もかねて見てみる。楽しそう。早く実際に何か物を作りたい。
話はずれるが、よくapp storeやgoogle playで見かけるいわゆる“くそげー”の制作に関する面白い話を聞いた。映画が理論的に「何時間何分の時にこういう行動を起こす」と人は最も感動するといった具合に、ある程度くそげーも論理化されて作成されてきている話を聞いたので、一度作成してみたい。日本人向けに作るならappstoreで、上位にあるゲームのプログラムを覗いてマネするのがよさそう。
姿勢が悪いので、自分の姿勢を強制させる装置を作ったら逆に肩が凝りまくった。
## これは将来が心配だ
皆さんは、姿勢が良いほうですか?
私は、最近どんどん悪くなっていることを感じています。
危機感を持っているけど、気が付けば猫背になっています。もう猫になりたいです:smiley_cat:そんな中、会社の朝礼のラジオ体操にて腰に電撃が走ってしまい、さらに姿勢をよくすることを余儀なくされてしましました:sob:
ですので、手元にあるもので姿勢を正せるものを作れないか?と考えました。
いや、正すというよりも矯正させるものを作れないか?**つまり、姿勢矯正装置です:exclamation:**
## 目指すもの
姿勢の状態を検知して、姿勢が悪くなったと判断したら何かで知らせるものを作ることにしました。
できれば、**持ち運び可能**でどこでも使用できるものにしたいのと、どこでも使えることを前提に周りに迷惑が掛からないよう音とか光ではない知らせ方を模索したいなと思いました!## 姿勢矯正装置の完成デモ
試行錯誤した末にできた装置です。
どこにでも持ち運べるということで、**帽子に装置をつけることにしました。**### 仕組み
帽子に付いて
僕たちは植物を愛でるがいつも枯らしてしまう。遠隔水やり機を作りたい
# 僕たちは植物を愛でる
植物っていいですよね。
僕は緑が大好きで、よく芝生にゴロゴロしにいくのですが、
やはり植物に触れると心が癒されます。
しかしながら、仕事で忙しいとなかなか外出することができず、
最近はもっぱら自宅で観葉植物を育成し愛でております。# 僕たちは植物を管理したくなる
obnizで植物を管理するプロダクトを調べるといくつかヒットします。
下の記事は室内の温度・照度を計測し、植物にとって快適な状態かを管理しているようです。
[植物の生育状態をLINEで監視してみた](https://qiita.com/kosuke0517lab/items/60d00d7891f877c4a743)筆者は「植物がすくすく育つ喜びを感じて欲しい」という想いのもと制作されているそうです。
僕もその気持ちはとてもよくわかります。
IoTの力で植物の育成をもっと楽に・楽しくできたらいいなあというのが、今回の動機となります。# とはいえ、僕たちは植物を枯らしてしまう
はっきり言います。
**僕たちが抱える最も大きな課題は、植物を枯らしてしまうことです。**どれだけ植物を愛でよう
Expressのエラー処理まとめ 【第3弾】非同期関数のエラーハンドラ
# はじめに
Expressを学び始めて、エラーハンドラの扱い方にいくつかのパターンがあるため、実装方法を整理。
本記事では、第3弾として非同期関数における、エラーハンドラの実装方法をまとめる。
1. Expressのエラー処理まとめ 【第1弾】Expressのエラーハンミドラの定義
2. Expressのエラー処理まとめ 【第2弾】バリデーションのミドルウェア
3. Expressのエラー処理まとめ 【第3弾】非同期関数のエラーハンドラ(本記事)## 1.非同期処理のエラーハンドラの実装方法
非同期関数内のエラーについてはExpressの標準のエラーでは取得することができない。非同期関数内のエラーをハンドリングするにはtry-catch構文で括り、ハンドリングする必要がある。“`javascript
//
Expressのエラー処理まとめ 【第2弾】バリデーションのミドルウェア
# はじめに
Expressを学び始めて、エラーハンドラの扱い方にいくつかのパターンがあるため、実装方法を整理。
本記事では、第2弾としてExpressにおける、エラーハンドラを利用したミドルウェアのバリデーションをまとめる。
1. Expressのエラー処理まとめ 【第1弾】Expressのエラーハンミドラの定義
2. Expressのエラー処理まとめ 【第2弾】バリデーションのミドルウェア(本記事)
3. Expressのエラー処理まとめ 【第3弾】非同期関数のエラーハンドラ## 1.ルートハンドラでバリデーションの定義
ルートハンドラでミドルウェアを複数列挙することで、リクエストを受けてからレスポンスまでに行いたいバリデーションを複数定義することができる。
その列挙されたミドルウェアの中で、バリデーションエ