React(Node.js + Datastax + REST API)の構成でアプリを作成をしました【Flight Widget Database】

## 環境の準備
①ターミナルでreactアプリケーションを作成する。

“`
npx create-react-app <プロジェクト名>
cd <プロジェクト名>
yarn start
“`

公式サイト : [DataStax](https://www.datastax.com/jp)

## 参考サイト
[Build a Flight Widget Database Project using React + Node.js + Datastax + REST API](https://www.youtube.com/watch?v=uCBsqgC5YQ0)

【Node.js】ファイル処理周りで調べたことmemo

# はじめに
expressでファイル関連の処理を実装する際に前提知識がなさすぎたので初歩的なことを調べました。
その際にメモしたものをつらつらと書いていきます（雑です

## バイナリデータ

– コンピュータが見て分かる/扱えるデータ
– `binary`は「2進法の」という意味
– 具体的には画像、音楽、動画、圧縮されたファイルなど
– 一般的には人間が読めるテキストデータ**以外**のデータを指すことが多い
– バイナリとテキストは対比の意である

## バイト

– 1byte = 8bit
– 1か0を並べた数値の1個をbitと言う

## Buffer

– Node上でバイナリデータを扱うためのクラス
– 文字列とは全く別ものであるバイナリデータ（バイト列）を扱う
– ちなみに文、字列を扱うクラスは`String`
– ちなみに、C言語ではこの両者を同じ型として扱える
– `new Buffer(128)`のような形で書くと128バイトのバッファを作成できる

## ArrayBuffer

– JavaScriptでバ

nvm useでバージョンが切り替わらない（windows環境）

# nvm useでバージョンが切り替わらない（windows環境）

## 経緯
– 元々nodeバージョン16.16をインストール済み
– nodeバージョン12.22.3を使用する必要ことになった。
– nodeバージョン管理ツール**nvm-windows**をインストール。インストール方法の参考サイト（[nvm-windows の導入と簡単な操作をやってみた](https://qiita.com/akipon0821/items/eaeffe79221cfcd4d258)
– **nvm-windows**インストール後、再起動が必要ヨ！
– `nvm install 12.22.3`でnodeバージョン12.22.3をインストール。
– しかし、`nvm use 12.22.3`でバージョンの切り替えができない。

#### 具体的なエラーメッセージ

“`cmd
C:\Users\atom>nvm use 12.22.3
exit status 5: ・A・N・Z・B・・・・・・・・・B
exit status 1: ・・・a・・・・・・・t・B・・・・・・低・・・B

hygenのテンプレートファイルレンダリング方法を確認する

社内のコーディングの生産性向上のために、[hygen](https://www.hygen.io/)でファイルを追加するスクリプトを作っていたのですが、[hygenのTemplateドキュメント](https://www.hygen.io/docs/templates)を見てもどういう風にテンプレートファイルがレンダリングされているのかよくわからなかったので調べてみました。

# 前提

– yarnでhygenを実行して、複数のテンプレートファイルから数種類のファイルを生成したかった。
– オプションの値によってテンプレートファイルの処理方法を変えたかった。
– 条件分岐の書き方などでわからないところがあった。
– hygenのバージョンはv6.2.11

# hygenのコードを読む

ドキュメントは使い方がざっくり書いてあるだけなので、コードを読みました。
[render.tsのrender関数](https://github.com/jondot/hygen/blob/v6.2.11/src/render.ts#L38)

## front-matterでパース

実際にファイ

setTimeoutを書くのがめんどいから少し楽にしてみた

1ヶ月ぶりですねこんにちはトマトです

“`js
setTimeout(() => {
console.log(“Hello World”)
},5000)
“`
いっつもsetTimeoutをこんな風に書いていてめんどいなって思って色々してたら
`timers/promises`っていうのが元々入ってるのを発見
使ってみたところ結構楽になったので紹介します。

早速ですがコード
“`js
const time = require(“timers/promises”).setTimeout

async function main() {
await time(5000)
console.log(“Hello World”)
}
main()
“`

自分的にはこっちの方が書いてて楽なので見つけてよかったなと改めて思った。多分みんな知ってる

JavaScriptはやめれないっす
ではまたー

Windowsでnodeを複数バージョン管理するためのnvmをインストールする

# 前提
* OSは Windows10 Pro
* scoop導入済み
* 詳しい説明は ***ないです！***

# 目的
npmのバージョンを切り替えれる環境にしたい

# とりあえずnvmインストールしてみる
scoopを使って、nvmをインストール
cmdでもPowerShellでもお好きな方で

## 実行
“`:cmd
scoop install nvm
“`

## 結果
“`:cmd
C:\>scoop install nvm
Installing ‘nvm’ (1.1.9) [64bit] from main bucket
Loading nvm-noinstall.zip from cache
Checking hash of nvm-noinstall.zip … ok.
Extracting nvm-noinstall.zip … done.
Running pre_install script…
Linking ~\scoop\apps\nvm\current => ~\scoop\apps\nvm\1.1.9
Creating shim

【Nuxt2】環境ごとに設定を切り替える

# はじめに
n番煎じかつNuxt2での環境変数の書き方です．

# .envファイルの作成
.envファイルを作成し，環境変数を記入する．Nuxt2では自動的にgitignoreになる．以下例
“`.env
# ここはコメント
API_URL=http://example.com
API_KEY=abcdef
“`
# nuxt.config.jsに環境変数を定義
nuxt.config.jsを編集し，page, layout, componentなどから参照できるようにする．
nuxtに元から入っているruntimeConfigを用いる．
“`js:nuxt.config.js
export default {
// 省略
publicRuntimeConfig: {
apiURL: process.env.API_URL
},
privateRuntimeConfig: {
apiKey: process.env.API_KEY
}
}
“`

### publicとprivateの違い
publicはフロントエンドに公開してもいい環境

【discord.js】 Promise { } の対処法

# バージョン情報
discord.js : v14.3.0
node : v16.13.2
npm : v8.1.2

# Promise { < pending > } について
discordのbotを開発している際、下記のようなコードを書くとある結果が返ってきます。
“`javascript:bot.js
client.on(‘ready’, () => {
console.log(client.channels.cache.get(“チャンネルのID”).messages.fetch(“メッセージのID”));
});
“`
結果
“`terminal:terminal
Promise { }
“`
ちなみに上記の処理は、特定のチャンネルにある特定のメッセージの内容をメッセージIDを使って取得する時などに使います。
“`terminal:terminal
Message {
channelId: ‘00000000000’,
guildId: ‘00000000000’,
id: ‘00000000000’,

M1 Pro搭載MacBook Proの初期設定cheatsheet(Vim, Git, VSCode, React, Python, Node.JS)

# Apple Silicon搭載のMacBook Proを使いこなせ

* 手順通りの設定を行うことで1日でM1 Pro MacBook Proの生産性をフルパワーの8割まで引き出すcheatsheetです。
* ★マークをつけた箇所は個人的主観が入ってる箇所です。適宜飛ばしたりコマンドを変更したりしてください。簡単な質問は受け付けてます。

## 前提条件

* OS: Monterey
* MacBook Pro(16-inch, 2021)
* CPU: Apple M1 Pro
* ★US配置
* コマンドラインの基本を習得してる

## コンセプト

* iMac(Intel late2017)とMacBook Air(2020 M1)の役割を一元化したかった
* ファイル構造をシンプルに保ち、ターミナルからの操作の簡潔さを保つ
* 後述する理由よりOSを英語に設定する
* 書類⇒Document, デスクトップ⇒Desktop等ファインダーでの命名と実際のディレクトリ名を一致させる等の目的
* GUI操作においてマウスを使う場面を減らす
* Intel C

【Windows】Virtualbox上のCentOSにDockerでNginxを立てExpressにアクセスした時のネットワークを図解してみた

## はじめに

アプリケーションの開発は普段やっているが、その際にはあまりインフラに関しては意識しないで開発している事が多かった。今回は少しネットワークがどうなっているか？が気になって図解してみたので、その備忘録を残す（理解に誤り等があればご指摘いただけると幸いです）。

## ネットワークの基本的な概念
いきなりどのようなネットワークになっているのか？を見ていく前に、ネットワークに関する重要そうな概念について理解を深めてみた。

### IPアドレス（IPv4）
ネットワーク内の住所。ネットワーク機器やPCなどネットワークにつながっている端末の場所を特定するための値。グローバルIPとプライベートIPがある。

表記は`192.168.56.2`のように10進数表記で4つの区切りで示される。コンピュータ内では2進数として扱われている。

–

M1 Macでzsh: command not foundに遭遇した場合の解決法

M1 Macでnpmのパッケージ追加時に`zsh: command not found`に遭遇してパッケージが使用できない場合の解決法を投稿させていただきます。私も何度かこの問題に遭遇しているので参考になれば幸いです。

1. global用にディレクトリを作成: “`mkdir ~/.npm-global“`
1. npm用のパスを1.で作成したディレクトリに設定: “`npm config set prefix ‘~/.npm-global’“`
1. “`.profile“`に以下を追加: “`export PATH=~/.npm-global/bin:$PATH“`
1. システム変数を更新: “`source ~/.profile“`

パッケージを一度アンインストールしてから再インストールしたところパッケージが使用できるようになりました。

参考記事

http://npm.github.io/installation-setup-docs/installing/a-note-on-permissions.html

ToDoアプリがいろいろありすぎるので、LINEにToDo機能を追加してみた。

## ToDoアプリは多すぎるし、スマホのアプリを増やしたくない
私はToDo系のアプリを使用していないのですが、使用していない理由としては以下が挙げられます。
1. **ToDoアプリが多すぎるのでどれを使えば良いかわからない**
1. **いちいちToDoアプリを開くのが面倒**
1. **使いなれるまでに時間が掛かる**

面倒臭がり屋の私でも、いろいろと試してみたときはありました。
だけど、どれもすぐにそのアプリの存在を忘れてしまったり、使い勝手が面倒で諦めてしまいました:dizzy_face:

でもそんな私も毎日のように使用しているアプリがあります。

そう、それはLINE!!

今まではこのLINEにToDo機能があればなー、って思っていたわけですが、あるじゃないですか！LINE Botなんて便利機能が！
LINE Botならプッシュ通知も可能なので、ToDoを知らせてくれるにはもってこいやないか:thumbsup:

ということで、LINE Botを用いて、ToDo機能をLINEに実装してみました！

## 最低

【Version確認】各ミドルウェアのVersion確認まとめ

## _Version確認まとめ_
アプリ作成時に、自分の環境のバージョン把握は必須となるため、各ミドルウェアのVersion確認方法を自分なりにまとめてみた…

## VersionUpのメリットデメリット
– __メリット__
1. Webサイトの安全性が向上する
セキュリティ上の問題や不具合へのサポートがあるため、サイト攻撃の可能性が低くなります。

2. 最新の環境での開発が可能になる
新しい機能やプラグインが利用可能になることで、今まで実現が難しかったことが簡単にできるようになり、開発内容の広がりが期待できます。

– __デメリット__
1. サイトが正しく表示されなくなる
過去に構築したサイトについて、最新のプラグインやテーマが非対応の場合があります。
その場合、Webサイトの一部が正しく表示されなかったり、最悪の場合はサイト全体が動かなくなったりする可能性があります。

2. 廃止された関数の改修が発生する
バージョンアップに伴い、今まで使えていた関数が廃止され、別の関数への置き換えを求められる場合があります。
サイトを今まで通りに表示させるためには、過去に構築したプロ

nodeのアップデート

https://phoenixnap.com/kb/update-node-js-version#:~:text=Update%20Node%20JS%20on%20Windows%201%20Navigate%20to,checking%20the%20box%20and%20click%20Next.%20See%20More.

npm ERR! Error: EACCES: permission denied, access ‘/usr/local/lib’

上記のようなエラーが出た。
sudo を付けて

sudo npm install -g n

上記のようなコマンドにすることで解決した。

芝生が好きすぎるので、芝活が捗るLINE botを作ってしまった。

# 芝生はいいぞ…

突然ですがみなさん芝生は好きですか？
僕はと言いますと、他人にドンびかれるくらい芝生を愛しています。
暇さえあればホーム芝生で酒を飲んでますし、土日は遠征して一日中芝生で過ごすみたいな生活をしています。
冗談抜きに、芝生にいくと人生が好転するので、みなさんにも味わってほしいのです。

# 実は、良質な芝生と出会うのは難しい

「さっそく芝生に行ってきてください！」と言いたいのですが、
実は良い芝生に出会うのはなかなか難しかったりします。
特に東京で見つけるのは至難の技で、
僕も上京したばかりの頃は失敗を繰り返して鬱になりそうでした。
東京で良い芝生を見つけるのが難しい理由は大きく分けて２つあります。
– 小規模の芝が無数にあり、かつ整備の質の差が激しい。
– 質の高い芝生でも、養生中で入れなかったり、季節によってコンディションに差が出る

Puppeteerでの2captcha-solverプラグインの使い方

Puppeteerでの2captcha-solverプラグインの使い方

この記事では2captcha-solverプラグインをPuppeteerで使う方法を説明します。 PuppeteerはNodeライブラリで、ブラウザを起動し、その中で複数のアクションを実行できます。使

Node.js: シリアルポートの出力

こちらのページのテスト用プログラムを Node.js で書きました。
[M5Stack Core2: シリアルで LED を制御](https://qiita.com/ekzemplaro/items/e4ddb0ba0b03a9004204)

“`js:led_control.js
#! /usr/local/bin/node
// —————————————————————
// led_control.js
//
// Oct/4/2022
// —————————————————————
‘use strict’;
require(‘date-utils’)
// —————————————————————
function send_proc(color)
{
port.write(color, function

超自分好みのなろう小説を検索してくれるLINE Botを作ってみた

## 好きななろう小説はありますか？
筆者は[小説家になろう](https://syosetu.com/)が好きで日々新たな作品との出会いを求めています。
検索機能も存在しておりよく使うのですが、非常に作品数が多く検索条件も幅広いためタイトルで惹きつけられるものの、読んでみたら自分の好きな感じではない、ということも多くありました。

そんな中、なろう小説のAPIが存在することを発見しました。
スマホで小説を読むことも多かった私としてはLINEと連携させることで超自分好みの条件で小説を検索・レコメンドするLINE Botができるのではと思い製作を開始しました。

## 自分好みのなろう作品検索Botが誕生しました。
キーワードを入力するとランダムで2件の作品が表示されます。
(一回の検索上限が20件

Firebase(version9)をJavaScriptプロジェクトに追加してみる

# はじめに
Firebase JavaScript SDK（バージョン9）を新規のウェブアプリに追加しようとした時に少しハマったので、何かの役に立てばと思い、記事を作ってみました。

基本的には[公式のドキュメント](https://firebase.google.com/docs/web/setup?hl=ja “Firebase を JavaScript プロジェクトに追加する”)に解説があります。ただ自分はドキュメントに従って進めてもうまく行かない箇所があり、どうせ観ても分からないと思っていた英語の解説動画を自動翻訳付きで観てようやく理解しました。

ドキュメントでサラッと流されている所が意外と大事だった…というか、単純に自分がES6やモジュールバンドラについて無知だっただけなのですが…

# 前提

ウェブアプリの構成は、利用する言語やフレームワークによって様々な形があると思いますので、この記事ではなるべくシンプルな構成を例にすることで、応用しやすい形になればと思っています。

自分がハマったのはステップ４辺りなのですが、ヘタに途中を省略すると分かりにくくなる可能性もあるかと

Node.js: タイマーの使い方

こちらのページを参考にしました。
[Node.jsでsetTimeoutを使ったタイマー](https://qiita.com/rjegg/items/63a9ce3bd2b133efb7e3)

ライブラリーのインストール

“`bash
sudo npm install -g date-utils
“`

“`js:timer_test.js
#! /usr/local/bin/node
// —————————————————————
// timer_test.js
//
// Oct/3/2022
// —————————————————————
‘use strict’
require(‘date-utils’)

var count = 0
function counter () {
var dt = new Date()
var formatted = dt.toFormat