- 1. Next.js × Typescript で環境構築
- 2. jest + talkbackで外部APIリクエストをお手軽ユニットテスト
- 3. 【Opensea】NFTに無限に「いいね❤」押せるツールを作成した話
- 4. GASからシンプルにDiscordにポストするライブラリを作ってみた
- 5. Node.js + Express + Typescriptでプロジェクト作成
- 6. 【JavaScript/TypeScript】jestで環境変数を差し替えてテストする方法
- 7. コマンド付きでリプライするとリプライ元のメッセージ内容を取得する
- 8. Markdownで振り仮名が使える「Markdown Furigana」
- 9. WindowsでNode.js+React+TypeScriptの開発環境を作る
- 10. discord.jsのバージョンを13から14に移行する
- 11. Voltaを使うためのNode環境見直し記録
- 12. Node.jsでgRPCを実装する前準備 .protoファイルの自動整形するための設定をやってみた
- 13. Node.jsでExcelの既存フォーマットを崩さず加工したい！！！
- 14. みんなが簡単簡単書いているので、React + JavaScript + FullCalendar を触ってみた
- 15. ターミナルのインタープリターを使って文字列+連番を出したい！
- 16. expressの古い資料を参考にする時の注意点
- 17. Sequelizeを使ってDBマイグレーションをやる方法2つを試してみた
- 18. HerokuでWeb名(app名)変更時の再push方法
- 19. discord.jsでのbotが突然起動しなくなった方へ
- 20. ブラウザからカメラを起動して録画，サーバにアップロードするまで
Next.js × Typescript で環境構築
Next.jsとTypescriptで開発環境の構築していきます。
環境{
Mac Os 12.5
Vscode
}備忘録です。
## 初めに
エディタのターミナルでnode.jsのバージョン（存在）を確認
“`terminal
node -v// v16.14.0
“`nodeの存在を確認。
これは、JavaScriptのライブラリを管理するパッケージ。
パッケージとしてまとめたファイルが作られる。＝`package.json`
具体的にいつ使うのかはこの後すぐに分かる。## アプリケーションの作成
##### ①ファイルの保管場所を決める。今回はデスクトップ。
“`terminal
cd desktop//ユーザー名＠ユーザー名PC desktop ← となればOK
“`##### ② アプリ名を決め、コマンドを実行
“`terminal
npx create-next-app {好きなアプリ名} –use-npm –typescript
※{}は不要npx create-next-app {好きなアプリ名} –types
jest + talkbackで外部APIリクエストをお手軽ユニットテスト
# TL; DR
– [talkback](https://github.com/ijpiantanida/talkback)を使えば、HTTPリクエスト/レスポンスを記録、再生可能！
– Rubyの[vcr](https://github.com/vcr/vcr)のNode.js版# はじめに
外部APIのリクエスト箇所は、ユニットテストに苦戦しがちです。テストのたびに本家のAPIを叩くわけにはいかないし、かといってモックまみれにすると本番との差分が怖いです…
そこで今回は、talkbackを使ったユニットテストの方法を紹介します。
# 仕組み
https://github.com/ijpiantanida/talkback
talkbackは、外部APIリクエストのHTTPプロキシとして動作します。初回テストでは実際にAPIリクエストを発生させ、リクエスト、レスポンスの組み合わせをjsonファイル（「テープ」）に保存します。
次回以降はtalkbackがテープをもとにレスポンスを返すため、実際のAPIにはリクエストが飛びません。– **実際のAPIリクエ
【Opensea】NFTに無限に「いいね❤」押せるツールを作成した話
## Openseaが意外とガバガバだった話。
[Opensea Hack] NFT Favorite Bot 2022✨
✅Everyday Everynight Getting More Likes on Your NFTs
Created by @LostMyCode#NFTCommunity #opensea
GASからシンプルにDiscordにポストするライブラリを作ってみた
GASのライブラリ作成ってどうやるんだろうと勉強がてら作ってみました。
## インストール
ライブラリIDはこちらです。
> `1s04ndQZRPQeivPoo_62F7wXa-GIdkSOij3W-2KcYeKYl_yiAsgS1CwJv`
GASのライブラリ追加からIDを指定してライブラリのインストールができます。
> 
## 使い方
“`js
function myFunction() {
const discord = new DiscordWebhook.init(`WEBHOOKのURLを指定`);
discord.post(`hogehoge`);
}
“`こんな感じで実行できます。
Node.js + Express + Typescriptでプロジェクト作成
ExpressとTypescriptを使ってプロジェクトを立ち上げる手順を書き残します。
コードは[GitHub?](https://github.com/hinahinako/node-typescript-sample)で公開しています。## ? ディレクトリ構成
– 以下のようになる予定です。“`
– src
– server.ts ・・・Typescriptで実際に記述するコード
– dist
– server.js ・・・トランスパイル後に生成されるjsファイル
– tsconfig.json
– package.json
– package-lock.json
– node_modules
“`– src配下に`.ts`ファイル
– dist配下に`.js`ファイルが生成される想定です。
## ? プロジェクト作成
以下のコマンドを実行します。
“`
mkdir myapp
cd myapp
npm init -y
“`以下のようにプロジェクトができます。
“`{
“name”: “myapp”,
“ve
【JavaScript/TypeScript】jestで環境変数を差し替えてテストする方法
jestを使ってテストを書いていて、環境変数をケースごとに書き換えたくなった際にハマったので記事に残しておく。
# 前提Lambdaで環境変数を受け取る際に、以下のようにhandlerの外側で変数を定義しているときの話である。
“`typescript:例)
import { Context, SQSEvent, SQSHandler } from ‘aws-lambda’;
import * as log from ‘lambda-log’;// ** こんな感じで環境変数を取得している場合 **
export const TABLE_NAME = process.env.TABLE_NAME || ”;
export const PRIMARY_KEY = process.env.PRIMARY_KEY || ”;export const handler: SQSHandler = async (event: SQSEvent, context: Context) => {
log.info(‘event row data’, { event, cont
コマンド付きでリプライするとリプライ元のメッセージ内容を取得する
# インストール必須
– Node.js
# 必要なライブラリ
– discord.js# Q.需要はあるのか？
わかりません
# Q.なんで作ったんや
暇つぶし
# コード
“`js:index.js
client.on(‘messageCreate’, async message => {
if(message.content === ‘!replytxt’ && client.user.id !== message.author.id) {
console.log(message.reference)
if(message.reference != null){
console.log(message.reference.messageId)
const msg = await message.channel.messages.fetch(message.reference.messageId)
message.reply(‘返信したメッセージの内容:’+msg.content)
}else {
message.reply(‘メッセージ
Markdownで振り仮名が使える「Markdown Furigana」
# はじめに
普段､VScodeでMarkdownを使っていると､たまに振り仮名を使いたくなる時がある｡振り仮名をふるにはHTMLの``でマークアップするのだが､せっかくMarkdownを使っているのだから簡単に使いたい｡そこで調べたところ､`furigana-markdown-it`というnpmパッケージと､それを利用して作ったVScode拡張機能の`Markdown Furigana`を見つけたので紹介する｡
# Markdown Furigana
## インストール
VScode拡張機能の欄で「**furigana**」と入力すれば､「Markdown Furigana」が表示されるのでインストールする｡拡張機能:[Markdown Furigana – Visual Studio Marketplace](https://l.pg1x.com/UCMi)
## 使い方
`[]`で漢字を囲い､`{}`で振り仮名を囲う“`md:foo.md
[猫]{ねこ}
“`
この状態でMarkdownのプレビューを見れば､猫
WindowsでNode.js+React+TypeScriptの開発環境を作る
## Node.jsをインストールする
既にNode.jsがインストールされている場合でNodistを使用したい場合は
Node.jsをアンインストールしてから、Nodistのインストールを行うこと。### Nodistのダウンロード
Node.jsのバージョン管理をするためにNodistをダウンロード＆インストール
[Nodist Github](https://github.com/nullivex/nodist/releases)### nodistコマンドが使用できるようになっているか確認
“`
nodist -v
“`### 使用可能なNode.jsのバージョン確認
“`
nodist dist
“`### 指定するバージョンのNode.jsのインストール
v14.17.2をインストールする場合
“`
nodist + v14.17.2
“`### 指定したバージョンのNode.jsがインストールされているか確認
“`
nodist list
“`### 指定したバージョンのNode.jsに切り替え
v14.17.2に切り替える場合
`
discord.jsのバージョンを13から14に移行する
一昨日バージョンを下げるのを試してみてくださいという記事を書きましたが運営してるbotのコードをv14用に変えたのでついでに記事を書きます。
# Intentsがv13とは違う
今までは`FLAGS.GUILD_MESSAGES`のようなIntentsでしたがv14からは`GatewayIntentBits.MessageContent`のようなIntentsになります。
なので一昨日の記事のようなエラーが出るのです。
APIの変更により2022/8/31よりメッセージ内容読み取りのIntentsが必要になります。https://discord.com/developers/applications
Discord Developersよりbotを選択
Bot→MESSAGE CONTENT INTENTをONにする
を知った。（winとmacで動作するnodeバージョン管理）
– 管理ツール統一で作業の手間を減らせる。（使い方忘れてググる手間）
– プロジェクトごとにバージョン管理可能。## 導入前の環境
– macOS Monterey ver.12.4 ? nodebrew → nvm → nodenv
– Windows 10 Pro ver.21H2 ? nvm## いったんきれいにする
### 【Win10】nvm アンインストール
アプリと機能から NVM for Windows をアンインストールすればOK。
“`text
下記インフォメーションがポップアップ、「OK」 をクリック。Removing NVM for Windows will remove the nvm command and all versions of node.js, including global npm modules.
Node.jsでgRPCを実装する前準備 .protoファイルの自動整形するための設定をやってみた
## はじめに
Node.jsでgRPC通信をやってみようと思い、.protoファイル（Protocol Buffers）を書き始めたがPrettierではコードフォーマットされず困った。そこで今回は、.protoファイルでも自動整形が走るようにする設定をやってみた。自動整形の方法としてはエディター側で行う方法と、エディターによらずgit hooksを利用した方法の2つを設定してみた（エディターが異なる開発者がいても自動整形を行えるようにするには、git hooksなどを利用した設定が必要になるため）。
ソースコード全体は以下。
https://github.com/yuta-katayama-23/node-grpc/commit/7584ad3351a285647425daf182a322880733026c
## VS Codeの設定
今回はフォーマッターに[ClangFormat](https://clang.llvm.org/docs/ClangFormat.html)を利用する事にした。VS Codeの拡張機能としては[Clang-Format](https://
Node.jsでExcelの既存フォーマットを崩さず加工したい！！！
## 導入：スマホアプリエンジニア目線
×：スマホアプリ内部でフォーマットを崩さずにエクセルを編集・書き出しをする
○:サーバーサイドでエクセルの編集・書き出し(アプリにレスポンスでExcelを投げる)をする## 早速Node.js + Herokuでアプリを作ることに
Node.jsは初心者なのでお手柔らかに、、(アロー関数等を使えばもっと綺麗になると思います。)
今回は無料で使えるHerokuを用いてサーバーアプリを作ることにしました。
・Heroku
参考：https://jp.heroku.com/free・Nodeの環境構築
各OSによって違いがあるので今回は省略・expressを導入(Webフレームワーク)
参考：https://expressjs.com/ja/・xlsx-populateを導入
参考：https://github.com/dtjohnson/xlsx-populate#xlsx-populate### xlsx-populateに決定した理由
・今回はテンプレートのExcelファイルに追記したいのでフォーマットが崩れないものを選んだ
みんなが簡単簡単書いているので、React + JavaScript + FullCalendar を触ってみた
## Glideでカレンダー形式の予約アプリを作ったら紙以下と言われた
詳しくは書きませんが、 **会社の会議室予約管理を紙でやっていて**、テレワークの促進とともにに紙の弊害が目立ち始めたので、[Glide](https://www.glideapps.com/)でサクッとアプリ化してみました
**見出しの通りで激おこなので、フルスクラッチで作ることに決めました。**
>画像は紙以下で検索して出てきたイメージ画像です。React + FullCalendarというありきたりなライブラリではありますが、
* 既存の記事が“`TypeScript“`向けのものが多かった
* 本当の初心者はどこにソースを追加すれば良いのかわからない
* 忘備録以上の理由で記事を執筆します。
Reactを触ったことがなくても~~参考記事の皆
ターミナルのインタープリターを使って文字列+連番を出したい！
# はじめに
仕事してて
“`
hoge430,hoge431,hoge432,hoge433,hoge434,hoge435,hoge436,hoge437,hoge438,
“`
みたいな文字列+連番みたいなのをぴゃぴゃっと出したいなーって思ったんですよ。使う用事があったんで。
で、こういうのってターミナルの各言語のインタープリターを使うとやれるんですけど、どうやったっけなー、と思いまして。
備忘録的な感じで。# Ruby
まずはRubyです。Rubyがこういうの一番簡単に行けたイメージあったので。
“`bash
$ ruby -e ‘(430..438).each{|i|print “hoge#{i.to_s},”}’
“`簡潔でいいですね。
ちなみにfor文使うとこうです。結局コレでも内部的には`each`が動いているんだそうです。
“`bash
$ ruby -e ‘for i in 430..438 do print “hoge#{i.to_s},” end’
“`@scivola さんからコメントで頂いたのですがこんな書き方もあるとのことで
expressの古い資料を参考にする時の注意点
# はじめに
node.jsのexpressの色々なプログラムを見比べている時、“`javascript
app.use(express.cookieParser());app.use(cookieParser());
“`と明らかに同じ目的を持ったメソッドを見かけました。
さて、いったいどっちの方がいいのでしょうか。それともただのエイリアスなのか。
気になったため調べてみると知らなかった上に割と知らないとめんどくさい情報だったため記事にしておきます。参考
https://expressjs.com/ja/guide/migrating-4.html
## 変更点
express3からexpress4へのアップデートにあたって、**互換性のない**変更がなされたようです。
以下はサイトに書かれた表の変更の一覧です。変更時の再push方法
Node.jsの初心者です。
herokuでapp名を変更するとgitリポジトリが変更になります。
この時、ローカルリポジトリは更新されていないため
変更したリモートリポジトリにpushできなくなりはまりました。
検索しても載っていなかったためこの時の解決手順を書こうと思います。1. ローカル環境の.gitフォルダを削除する
1. git bashを起動しローカルのappフォルダに移動
1. git init g初期化
1. git add . ステージングエリアに追加
1. git commit -m “リポジトリ変更対応” コミットする
1. heroku git:remote -a **新アプリ名** 新リモートリポジトリを設定
1. git push **-f** heroku master リモートリポジトリを強制的に上書き要は最初からgitを作り直して
変更先にリモートリポジトリに強制的に上書きをするという方法です。commitを戻したりしていてハマってしまった場合の一から作り直す手順になります。
discord.jsでのbotが突然起動しなくなった方へ
今日botを起動しようとしたらこのようなエラーが出ました。
“`
root@localhost:~# sudo node ytdl.js /root/ytdl.js:12 intents: Intents.FLAGS.GUILDS | Intents.FLAGS.GUILD_MESSAGES,
^
TypeError: Cannot read properties of undefined (reading ‘FLAGS’)
at Object.(/root/ytdl.js:12:20) at Module._compile (node:internal/modules/cjs/loader:1112:14)
at Module._extensions..js (node:internal/m
ブラウザからカメラを起動して録画，サーバにアップロードするまで
# やること
1. ブラウザからカメラを起動する
2. 起動したカメラを使って録画する．
3. 録画したデータをサーバにアップロードする# 動作環境
– ブラウザ: Firefox(推奨), IE以外
– サーバ: Node.js / Express.js# 本編
ここから実装に入ります．
## ブラウザ
### カメラ・マイクの使用
[MediaDevices.getUserMedia()](https://developer.mozilla.org/ja/docs/Web/API/MediaDevices/getUserMedia)を使います．:::note warn
ただし，[安全でない環境では動作しません](https://developer.mozilla.org/ja/docs/Web/Security/Secure_Contexts)(undefinedになってたはず)
OK: https://, file:///
NG: http://
:::カメラを起動するには，jsファイルに以下を記述します．
“` main.js//オプションみた
