- 0.0.1. 【備忘録】Node.jsをバックグラウンドで動かす方法
- 0.0.2. YahooAPIを用いた銘柄情報取得
- 0.0.3. git commitしてもlint-stageしても Unexpected Identifierと怒られる
- 0.0.4. AWS Step Functions で簡易的なジョブ管理ステートマシンを作成してみる
- 0.0.5. 1分でわかるNextJS+ChaktaUI画面遷移
- 0.0.6. Node.jsランタイムのLambdaでNodeモジュールを使いたいときにやったこと
- 0.0.7. How to create Nextron(NextJS + electron) app?
- 0.0.8. PowerShell で nodenv + yarn 環境を構築する
- 0.0.9. nvmのデフォルトのバージョンの変え方
- 0.0.10. Cloud Tasks を使って、Cloud Functions で作成した認証が必要なエンドポイントを叩いてみた
- 0.0.11. #プログラミング #英語 #Javascript #nodejs #glitch # 英単語を覚えたり、思い出すのを早くするツール
- 0.0.12. Directory Path の alias 設定(備忘録)
- 0.0.13. Express × TypeScriptでバックエンド開発②(MySQLの導入、ExpressでDB接続・操作)
- 0.0.14. herokuビルドでアプリがcrashしてしまった時の解決例
- 0.0.15. 【React学習シリーズ#1】環境構築
- 0.0.16. [備忘録]jest.spyOn()でモック化する時に気をつけること
- 0.0.17. javascript の module import のテストを自動化する
- 0.0.18. ESP32の周りのBLEデバイスを監視
- 0.0.19. Reactの基礎3
- 0.0.20. Reactの基礎2
- 1. Hello World!
【備忘録】Node.jsをバックグラウンドで動かす方法
# はじめに
node.jsをバックグラウンドで動かすための方法を調べたので未来の自分のためにも書き残しておきます。# 方法① foreverモジュールを使う
以下のコマンドでインストール
“`console
sudo npm install -g forever
“`
実行
“`
forever start hoge.js
“`
プロセスの起動を確認
“`
forever list
“`# 方法② Dockerコンテナ化する
jsファイルがあるディレクトリに移動してDockerfileを作成。中身に以下の内容を書く。
“`Dockerfile
FROM node:16-alpine3.15
WORKDIR /app
COPY . .
RUN npm install
CMD [“node”, “hoge.js”]
“`
ビルドする。ここではラズパイ上でdockerコンテナを稼働させることを想定しています。ラズパイで使いたいイメージは、ビルド時にプラットフォームを明示しておかないとうまく動作しない可能性があるので「–platform」を使う。
“`docker
YahooAPIを用いた銘柄情報取得
# はじめに
YahooFinanceに保存されている情報をAPIを用いて取得します。
今回、APIをより扱いやすくする為、OSSの[node-yahoo-finance2](https://github.com/gadicc/node-yahoo-finance2)を用いて取得してみようと思います。
■環境
– macOS
– Node.js
– npm(パッケージ管理)
– Express(WEBサーバ)
– javascript
# 目次
1. [環境構築](#環境構築)
1. [APIを叩いてデータを取得](#apiを叩いてデータを取得)
1. [動作確認](#動作確認)
1. [エンドポイントの作成](#エンドポイントの作成)
1. [参考文献](#参考文献)
# 環境構築
1. package.json及び必要ライブラリのインストール“`
npm init
npm install expres
git commitしてもlint-stageしても Unexpected Identifierと怒られる
## 簡単に結論
Node.jsのバージョンが古くてeslintが怒っていた
下記のコマンドでNode.jsをアップデートしたら解決しました!
“`bash
sudo apt update && sudo apt install nodejs -y && sudo npm install n -g && sudo n stable && sudo apt purge -y nodejs npm && sudo apt update && sudo apt full-upgrade -y && sudo apt autoremove -y
“`## 経緯
1. 開発途中でPCを買い替えたので、既にeslintやprettier、simple-git-hooks、lint-staged等の初期設定が終わっているGitレポジトリをクローンすることになりました
1. そんな訳で早速下記のコマンドを走らせて準備を終わらせる
“`bash
git clone https://github.com/foooooooo/hogehoge.git
AWS Step Functions で簡易的なジョブ管理ステートマシンを作成してみる
AWS で簡易的なジョブ管理をしてみよう、という試みです。
# 概要
AWS 上でジョブ管理するにはどうしたら良い?という話がありましたので、自分なりに少し考えてみました。普通に考えれば、例えば以下のようになるかとおもいます。
* Cloud Watch Events、場合によっては Event Bridge を使ってジョブを起動する
* ジョブの流れは Step Functions で様々なフロー制御を組み込んで作成
* Step Functions から Lambda 関数、ECS RunTask、AWS Batch などを順次呼び出す
* ログは Cloud Watch Logs に格納
* 問題発生時には SNS から SES や Slack 連携などでアラートを発報するただですね、今回は以下のような制約をつけて考えてみました。
* 数人の小さなチームで、スケジュールがかなり厳しい中で開発する必要がある
* AWS に詳しいのは自分だけで、他のメンバーはこれから学ぶ必要があるこういった状態ですと、いまから AWS を学んでもらうのは効率が悪いです。期間も短いこと
1分でわかるNextJS+ChaktaUI画面遷移
## 早速説明いたします。
“`
yarn add next/link
“`“`
yarn add @chakra-ui/react
“`
まずはプロジェクトのルートディレクトリでこの二つを実行しましょう。そしてjsxファイルなどで
“`js
import React from ‘react’
import { ChakraProvider } from ‘@chakra-ui/react’
import { Link } from ‘next/link’//Homeの部分は任意でOKです。
function Home () {
return (
page2
)
}export default Home
“`
で実装できるはずです。
事前に遷移先のページファイルも用意しておくとよ
Node.jsランタイムのLambdaでNodeモジュールを使いたいときにやったこと
## はじめに
こんにちは。フリューでサーバサイド開発をしています、kitajimaです。最近CDKに入門しました。
弊チームでは先日、API Gateway + Lambdaの構成をCDKで構築し、APIを実装する機会がありました。その際Node.jsで書いたLambdaスクリプト単体をアップロードしたところ、`”Unable to import module”`が発生しました。
この記事ではその際対応したことを紹介させていただこうと思います。
同じようにNode.jsランタイムのLambdaを初めて構築してみたい方の参考になれば幸いです。※本記事と同様の内容を弊社テックブログでも掲載しております。
https://tech.furyu.jp/lambda-node-modules/## 環境
– AWS CDK v2
– CDK実装 TypeScript
– Lambdaランタイム Node.js 16.x
– Lambdaスクリプト実装 TypeScript## 状況再現
そのときのインフラ構成の一部を再現したものはこちらです。Constructは`aws_lam
How to create Nextron(NextJS + electron) app?
## そもそもNextronとは何なのか
Nextronとはelectron+NextJSの環境を今までより簡単に構築できるようにつくられた(らしい)ツールです。とはいえ私はいきなりこれでやったので今までのやり方をしらないんですけども結構開発がしやすいです。
## プロジェクト作成方法
まずは以下のコマンドを入力
“`
npx create-nextron-app
“`割と軽めなので回線が良ければすぐ終わります。
そして
“`
npm run build
“`
と入力してビルドします。これをしないとエラーになるのでお気を付けて。通常のelectronだとpackage.jsonとかmain.jsを作成・編集しないとうまく起動しませんが、Nextronは勝手にやってくれるので楽ですね。んじゃあ
“`
npm run dev
“`
と入力すれば実行できます。ちなみに起動時は開発者ツールが自動で立ち上がります。メインページはrender/pages/home.jsxとなります。まずはそのファイルを編集して挙動を確かめてみましょ
PowerShell で nodenv + yarn 環境を構築する
## 1. PowerShellを立ち上げ、Bashを起動する
“`bash
$ bash
“`## 2. nodenvをgit cloneする
“`bash
$ git clone https://github.com/nodenv/nodenv.git ~/.nodenv
“`## 3. Nodenvの初期設定
Nodenvをクローン後、コンパイル
“`
cd ~/.nodenv && src/configure && make -C src
“`コンパイラが存在しないと怒られた
“`
# エラーメッセージ
> checking for C compiler … not found
> ./configure: error: C compiler cc is not found
“`gccをインストール
“`
$ apt install gcc
“`再度実行
“`
$ cd ~/.nodenv && src/configure && make -C src
“`## 4. nodenvの初期設定を追加
“`
$ ech
nvmのデフォルトのバージョンの変え方
# コマンドでデフォルトのバージョンを変更
ターミナルでコマンド
`nvm alias default v[version]`
を実行。
例:`nvm alias default v18.9.0`結果:ターミナルを開き直して `nvm ls` を実行するとdefaultのバージョンが変わる。
Cloud Tasks を使って、Cloud Functions で作成した認証が必要なエンドポイントを叩いてみた
## 目次
– Cloud Tasks から叩くエンドポイントの作成
– エンドポイントのデプロイ
– エンドポイントの権限設定
– キューの作成
– キューの設定
– サービスアカウントの作成
– タスク作成ロジックの作成
– タスク作成ロジックの呼び出し## Cloud Tasks から叩くエンドポイントの作成
Cloud Functions を用いてエンドポイントを作成します。
“`ts
export const helloWorld = functions
.region(“asia-northeast1”)
.https.onRequest(
async (req, res) => {
console.log(“hello world”);
res.status(200).send(“success”);
return;
}
);
“`参考 ↓
https://firebase.google.com/docs/functions/http-events?hl=ja
## エンドポイントのデプロ
#プログラミング #英語 #Javascript #nodejs #glitch # 英単語を覚えたり、思い出すのを早くするツール
本内容を利用した場合の一切の責任を私は負いません。
# 概要
リスニングができるようになるには、英単語の意味を思い出す早さも必要だと思った。
それをトレーニングするツール。
ほんとは見てではなく聞いてで行いたかったが素材が無いため。
一応、英単語を覚えるツールとしても使えると思う。# バージョン
– OS
OS 名: Microsoft Windows 10 Home
OS バージョン: 10.0.19043 N/A ビルド 19043
システムの種類: x64-based PC
– node.js
node-v10.16.0-win-x64
– linq(node.jsのライブラリ)
3.2.4
– multer(node.jsのライブラリ)
1.4.5-lts.1
– jsonwertoken(node.jsのライブラリ)
8.5.1
– async-lock(node.jsのライブラリ)
1.3.2
– csvjson-csv2json(node.jsのライブラリ)
bc644c4428f551
Directory Path の alias 設定(備忘録)
# 1. VSCode
1. `jsconfig.json` に書く。
“`json:jsconfig.json
{
“compilerOptions”: {
“paths”: {
“@root/*”: [
“./*”
],
“@/*”: [
“./src/*”
]
}
}
“`# 2. babel
1. `babel-plugin-module-resolver`([公式](https://github.com/tleunen/babel-plugin-module-resolver))をインストール
1. `babel.config.js`に書く“`javascript:babel.config.js
module.exports = {
plugins: [
[
“module-resolver”,
{
root: [“.”, “./src”],
alias: {
“@roo
Express × TypeScriptでバックエンド開発②(MySQLの導入、ExpressでDB接続・操作)
## ご挨拶
Express × TypeScriptでバックエンド開発①(下準備~簡単なGET, POST)
の続きです。
この記事では**ExpressでMySQLへ接続しGET・POST**します。
できる限りシンプルにハンズオンでまとめました。
皆様の新しいキャリア開拓の一助になればと思います。### ▼ゴール
・ExpressでMySQLに接続する
・シンプルなAPIの実装(GET, POST)と動作確認### ▼対象
・フロントエンドからキャリアを始めた人(ジュニア、ミドル)
・TypeScriptでバックエンド書いてみたい人## MySQLをインストール
https://dev.mysql.com/downloads/windows/installer/8.0.html
にアクセスし、自分のOSを選択したうえでインストーラーをダウンロードしてください。
![mysqlinstaller.png](https://qiita-imag
herokuビルドでアプリがcrashしてしまった時の解決例
herokuにデプロイした際にビルドは成功したのですが、WEBページを開くと下記の画面になってしまいました。
1週間ほど嵌ったので備忘録として記載します。?
参考にしてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2534058/3e3bc773-05ce-3a65-2112-ec106f64817d.png)# 起点 「Application error」
ビルドが正常に終了したのに、WEBページに「Application error」画面が表示され、「heroku logs –tail」でログを確認してね!とあるのでターミナルで確認する。
以下のログが表示されていた。“`zsh:heroku logs –tail
2022-09-12T03:32:48.194301+00:00 heroku[web.1]: Starting process with command `npm start`
2022-09-12T03:32:49.916104+00:00
【React学習シリーズ#1】環境構築
# はじめに
React初心者が、Next.js×TypeScriptにてWEBアプリケーションを作成する際の個人的な開発メモになります。
1回あたりの文量は少ないですが、少しづつ学んだことをメモに起こしたいと思います。# 前提条件
下記、環境については既に構築済の状態から始めます。# 環境
各バージョンは以下のとおりです。
エディタは、Visual Studio Codeを使用します。
“`
node -v
v16.16.0npm –version
8.11.0npx -v
8.11.0
“`# create-react-app
Reactプロジェクト作成ツールを利用して、プロジェクトを作成します。
今回はTypeScriptを使用する為、–templete typscriptを使用します。https://create-react-app.dev/docs/adding-typescript/
“`
# npx create-react-app{バージョン} {プロジェクト名} –templete typscript
npx create-reac
[備忘録]jest.spyOn()でモック化する時に気をつけること
# はじめに
jestを使ってユニットテストをしていると、関数やメソッドのモック化は頻繁に行う。
[jest.spyOn()](https://jestjs.io/ja/docs/jest-object#jestspyonobject-methodname)は、モック関数を作るのに便利なメソッドだが、つまづいたことがあったので備忘# 事象について
## 私の今までの認識
– `jest.spyOn()`したメソッドは、下記を使って戻り値や実装を書き換えてやることで、実行されないと思っていた([このあたり](https://jestjs.io/ja/docs/mock-function-api)のヤツ)
– `mockResolvedValue`
– `mockImplementation`
– などなど## 実際
– 気をつけないと実装したままのコードが実行されちゃう
– 特に`new`したインスタンスは、mockしようとしてるのが、実行されるインスタンスなのかをよく確認しないと、テスト実行時に、実装コード通りの動きをしてしまう##
javascript の module import のテストを自動化する
# 前提
以下がインストール済みであること
* Node.js – v16.14.2
* mocha – v8.4.0
* chai – v4.3.6
* @babel/register – v7.17.7# 0. テスト対象の script 構成
以下の様な javascript 階層があると仮定。
# 0.1. `src`ディレクトリ構成
* :open_file_folder: src
* :open_file_folder:scripts
* :open_file_folder:bin
* :pencil: apple.js
* :open_file_folder:lib
* :pencil: orange.js
* :pencil:index.js# 0.2. `src`ファイルの内容
“`javascript:scripts/bin/apple.js
module.exports = () => {
console.log(`apple.js`);
}
“`“`javascrip
ESP32の周りのBLEデバイスを監視
バッファローの「探せるキーホルダー」や、Logitecの「ぶるタグ」、懐かしい「Stick-N-Find」やNTTドコモのProject Linkingの「Pochiru」や「Tomoru」など、あるいは、LINE Beaconなど、常に電源On状態でアドバタイズし続けるBLEデバイスの、稼働状態や出入りを監視します。
BLEアドバタイズやレスポンスのスキャンデータには、デバイスがサポートするサービスUUIDが含まれています。
そこに、以下のUUIDが含まれていたら、生存していることとしてサーバに通知します。Stick-N-Find:bec26202-a8d8-4a94-80fc-9ac1de37daa6
Project Linking:b3b36901-50d3-4044-808d-50835b13a6cd
Immediate Alert Service:0x1802
LINE Things:0xfe6fスキャンするBLE CentralデバイスとしてESP32を使います。
M5StampC3が小さくてちょうど良い感じです。とはいっても、どのESP32でも動作します
Reactの基礎3
https://qiita.com/hiro949/items/855e64ba7934d1774d91
https://qiita.com/hiro949/items/633a9086abfb1be274fe
の続きです。
# 配列に対する操作
配列のメンバ関数mapに引数として関数を与えれば、配列の各要素に対してその処理をしてくれます。
“`index.js
const nums = [1,2,3,4,5];
const squares = nums.map(function(num) {
return num*num;
});console.log(squares);
const pokemon = [“Bulbasaur”, “Charmander”, “Squirtle”];
const paragraphs = pokemon.map(mon => `${mon}
`);
console.log(paragraphs);
“`“`
[ 1, 4, 9, 16, 25 ]
[ ‘Bulbasaur
‘, ‘
C
Reactの基礎2
https://qiita.com/hiro949/items/855e64ba7934d1774d91
の続きです。
# 変数の導入
ベースのコード:
“`index.js
import React from ‘react’;
import ReactDOM from ‘react-dom/client’;function HelloWorld(){
return (Hello World!
);
};const root = ReactDOM.createRoot(document.getElementById(‘root’));
root.render();
“`{ }で囲んだものをhrml形式のところに書くと、それは変数として認識されます。
例えば次のコードでは名前と苗字、現在の時刻を変数として付け加えてみました。
“`index.js
import React from ‘react’;
import ReactDOM from ‘react-dom/client’;functio