- 1. 初めてQiita APIでデータ取得したら、下衆な探偵になっていた
- 2. Node.jsでのReact環境構築
- 3. コードジェネレーター、Hygen を導入する
- 4. Sakura VPSサーバにCentOS Stream9を突っ込んでApache(Let’s encrypt)、MariaDB、NodeJSあたりをサクッと準備する方法
- 5. ts-nodeで作成してたscriptをまとめる方法を模索した話
- 6. React × Firebase × MaterialUI で作る登録フォーム
- 7. uWebSockets.js を使った Webサーバー・WebSocketサーバーのお試し【Node.js】
- 8. Node.js のフレームワークの Fastify と WebSocket を利用可能にする fastify-websocket を軽く触ってみる
- 9. S3からcsvを取得して表示する。（Node.js）
- 10. Socket.IO の最新版 4.x の情報を見てみる（2022年3月）
- 11. Node.jsとは【個人的なお勉強アウトプット】
- 12. 環境変数をファイルで扱う env-cmd をローカルインストールで利用してみる（-f オプションでの利用）
- 13. “There was an error deploying functions” firebase
- 14. 久々にfirebaseで開発に取り組んだら環境整備ではまった
- 15. Puppeteerでデータ取得
- 16. nodeのバージョンdefaultめんどくさい
- 17. Discord.jsで役職パネルを簡単に作る
- 18. 「これ、何のためにやってるの？」をまとめてみました【Node.js】
- 19. 改めてTypescriptに入門してみた。
- 20. Webの勉強はじめてみた その36 〜Sequelizeでデータ削除とCSRF脆弱性の対策〜
初めてQiita APIでデータ取得したら、下衆な探偵になっていた
# 背景
取得データの読み方もそれをどう活用するのかもわからない。そんな私がまずはやってみようという試み。自分の興味に従い、楽しく体感＆理解！# 真面目に調べるつもりが、野次馬根性にあっさり負ける
私が今「ハーフミラー」を使ったメディアアート作品を作っているので、「ハーフミラー」というワードを使った記事を書いている人がどれだけいるのかな？と、まずは検索。
すると、記事を書いた人のLocation＝場所がわかることが判明。私と同じ対象、しかも多分Qiita内ではニッチであろうハーフミラーに興味を持ち記事にまでする人がどのエリアに出没しているのかが図らずもわかってしまい、俄然野次馬根性が湧く。
ここで興味の対象が、「ハーフミラー」から一転、「記事を書いた人がいるらしい場所」調べに。# 初手は真面目に「ハーフミラー」の記事検索／その方法
１．「ハーフミラー」と検索して出てくる記事の日付および件数をQiitaAPIで取得。思いのほか多かった。
２．さらに、記事を書いている人たちがどのエリアに生息しているのか覗き見ちゃう。どれどれ、みんなどこにいるんだ。# コード
まずはconsol
Node.jsでのReact環境構築
Node.jsからReactのサンプルページの表示までの一連の環境構築のメモ。
# Node.jsインストール
下記サイトからNode.jsをインストールする。
https://nodejs.org/ja/download/
基本デフォルトですべて「next」でインストールまで進む。
インストールされたNode.jsバージョンを確認。
“`
node -v
“`
※作者がインストール時では、v16.14.0 (2022/03/14時点)
これより新しいバージョンだったらうれしい。# Y
コードジェネレーター、Hygen を導入する
## Hygen とは
http://www.hygen.io/
CLIで実行できるコードジェネレーターです。
テンプレートを作成して、それをもとにファイルの生成などを行ってくれます。新規ファイルの作成時、毎回同じ記述をする必要がなくなる、チームである程度ファイルの記載の仕方を揃えることが出来るなどといった利点があります。
カスタマイズ性、実行が高速であることがウリとされているようです。
この記事では、実際の導入手順と、とりあえず動かしてみるところまでを記載します。
## 導入
[公式サイト](https://www.hygen.io/docs/quick-start/) だと、homebrew、npm でグローバルインストール、npx を利用したやり方が記載されてます。
チームで使うことを考えて、今回はリポジトリにdevDependencies として導入しようと思います。`yarn add -D hygen`
その後、init をしてあげる必要があります。
その際に二つの方法を選択せることができます。repo: 他のリポジトリでテンプレートを作って、それを
Sakura VPSサーバにCentOS Stream9を突っ込んでApache(Let’s encrypt)、MariaDB、NodeJSあたりをサクッと準備する方法
# ただのインストールメモです。
> Webサーバ立てて、DBとNodeがあれば何か作れるよねって事で、インストールメモです。Let’s encrypt周りの部分は、Stream9の少し前のバージョンではSnapdが手動でないと入らなかったりと、同じStream9でも、Web上の情報が色々なので、2022年3月14日時点でのインストールログを残しておきます。
> 仮に**tmu.ac**というホスト名を割り当てるという事で説明します。## OS初期化設定
Sakuraのコンソールで**OS再インストール**を選び、以下の設定でCentOS Stream9をインストールする。| 項目 | 選択 |
| :———————————: | :——————–: |
| OSインストール形式 | 標準OS |
| インストールOS
ts-nodeで作成してたscriptをまとめる方法を模索した話
メインで書いている言語がjavasciptなので日頃、業務やらプライベートなりで使用するscriptをTypeScriptで書いているのですが
scriptを書くたびにpackage.jsonに追記していくのが非常に面倒だし、package.jsonのscriptsの中身の記述が増えすぎてえらいことになってきたので、整理できないかなと奮闘した記録になります。package.json
“`
scripts: {
“script1”: “./node_modules/.bin/ts-node src/scripts/script1.ts”,
“script2”: “./node_modules/.bin/ts-node src/scripts/script2.ts”,
“script3”: “./node_modules/.bin/ts-node src/scripts/script3.ts”,
“script4”: “./node_modules/.bin/ts-node src/scripts/script4.ts”
// 作るたびに増えるし、毎回書くのは面倒
React × Firebase × MaterialUI で作る登録フォーム
今回は[MaterialUI](https://mui.com/)のテンプレートを用いて、サクッとWEBページを作ってみたいと思います!!
正しくjsxやstateなどなどを理解することも大切ですが、実際に動くものを作って見ましょう## 0.Node.jsインストール
まずはNode.jsのインストールから始めていきましょう！
インストール後は、下のコマンドをうって、バージョンが表示されればOKです。
https://nodejs.org/ja/download/“`
node -v
“`## 1.MaterialUI(MUI)からテンプレート選び
MUIには有料だけでなく、無料で使用できるテンプレートがいくつか存在します。
[こちらから閲覧が可能です?](https://mui.com/store/#populars)ダウンロードが終わったら、terminalやgit bash等で操作をしていきます。
package.json等も含まれているので、npm startですぐに動いてくれます。
“`terminal
cd ../../material-kit-rea
uWebSockets.js を使った Webサーバー・WebSocketサーバーのお試し【Node.js】
以下の記事を書いた時に見かけた「uWebSockets」が気になって、情報を少し見てみたり、試してみたというものです。
●Socket.IO の最新版 4.x の情報を見てみる（2022年3月） – Qiita
https://qiita.com/youtoy/items/c57158f4a08e478dff57### Socket.IO のドキュメント内での記載
Socket.IO のドキュメント内だと、具体的に以下の部分などで登場しています。
## uWebSockets.js を試す
まず、uWebS
Node.js のフレームワークの Fastify と WebSocket を利用可能にする fastify-websocket を軽く触ってみる
以下の記事を書いた時などに見かけた「[Fastify](https://github.com/fastify/fastify)」が気になって、情報を少し見てみたり、試してみたというものです。
Fastify だけでなく、関連して出てきた fastify-websocket も気になったので、合わせて見てみました。●Socket.IO の最新版 4.x の情報を見てみる（2022年3月） – Qiita
https://qiita.com/youtoy/items/c57158f4a08e478dff57公式の GitHubリポジトリは、以下になるようです。
– [fastify/fastify: Fast and low overhead web framework, for Node.js](https://github.com/fastify/fastify)
– [fastify/fastify-websocket: basic websocket support for fastify](https://github.com/fastify/fastify-webs
S3からcsvを取得して表示する。（Node.js）
今回はwebサイトのコンテンツ管理にcsvでやろうと思い、タイトルのサンプルコードをnode.jsで作成しました。
## ・前提
* s3の作成していること（コンソールから）
* s3にcsvをアップロードしていること（コンソールから）
* ローカルでawsのconfigurationが設定されていることの確認。
※参考：https://qiita.com/yuchaman/items/29458107c8ea7f2e0b42## ・コード
“`
const aws = require(‘aws-sdk’);
const csvToJson = require(‘csvtojson’);module.exports = {
// get csv from s3
getDataFromS3: async () => {
console.log(“call getDataFromS3”);const s3Client = new aws.S3({ apiVersion: ‘2006-03-01’ });
Socket.IO の最新版 4.x の情報を見てみる（2022年3月）
2013年か2014年くらいに初めてさわった気がする「[Socket.IO](https://socket.io/)」。
最近は、リアルタイム通信系は WebSocket を直接扱ったり、MQTT を使ったりという感じで、Socket.IO を使わなくなっていました。そして、いつのまにかメジャーバージョンアップが複数回行われて、現在は 4.x になっている状況。
●Socket.IO
https://socket.io/それで、久しぶりに最新版の Socket.IO を軽く使ってみようと思って、この記事の内容をやってみました。
## 公式の最新情報を見てみる
Socket.IO は、リアルタイム通信をするための仕組みを提供しており、サーバ側とクライアント側のそれぞれの仕組みを提供しています。### 対応言語（サーバ側とクライアント側）
[Socket.IO公式の「Introduction」のページ（v4 のもの）](https://socket.io/docs/v4/)で、サーバ・クライアント用として提供されている仕組みの最新の状況を確認してみます。
 などがありますが、自分は使ったことのない「env-cmd」というのを見かけて、それを試してみました。
●env-cmd – npm
https://www.npmjs.com/package/env-cmd●toddbluhm/env-cmd: Setting environment variables from a file
https://github.com/toddbluhm/env-cmd## サクッと試す
まずは、 `$ npm i env-cmd` というコマンドで env-cmd をローカルインストールします。そして、ここで Node.js で環境変数を出力する以下のプログラムを動かしてみて、env-cmd を使わなかった場合にデフォルトで読み込める環境変数を確認してみます。以下を nodeコマンドで実行してみると、ご自身の環境の環境変数が出力されると思います。
“`javascript
console.log(proce
“There was an error deploying functions” firebase
## 問題
Firebase Cloud Functionsにて、
`firebase deploy`
時に以下のようなエラーが出てdeployができなくなった。“`
There was an error deploying functions
– Error Failed to update function xxx in region yyy
– Error Failed to update function xxx in region yyy
– Error Failed to update function xxx in region yyy
・・・
“`## 解決策
package.json内のモジュールのバージョンが変わっていたため、以下コマンドにてモジュールをアップデートする必要があった
`npm install`Happy Developing!
久々にfirebaseで開発に取り組んだら環境整備ではまった
## 概要
firebaseで作っていた個人プロジェクトを1年ぶりくらいに再開したところデプロイで多段に失敗したのでその備忘録です。環境としてはWindows 10のWSL1上のUbuntuで開発しています。
以前の開発時にはfirebase cliのセットアップ等も終え、deployも問題なくできていたのですが、
久しぶりに開発をしようとしたら準備運動だけで2時間ほどかかってしまいました。## エラー1
deployしようとすると、Authentication errorが発生しました。
まあ、1年ぶりだからexpireするよなぁ… と思ってfirebase login –reauthを実行すると…“`
$ firebase login –reauth
…
Visit this URL on this device to log in:
https://accounts.google.com/o/oauth2/auth?client_id=…(略Waiting for authentication…
Error: An unexpected error
Puppeteerでデータ取得
## やること
ログインがあるサイトのデータ取得
## 前提
以前作成した下記記事の環境からスタート
https://qiita.com/sh19982580/items/d0e4fde11e734bee8c76
## puppeteerインストール
`yarn add puppeteer puppeteer-core`
## サイトに入る
import puppeteer from “puppeteer”
import dotenv from “dotenv”import { initLogger } from “../logger/index”
dotenv.config()
const { infoLogger, errorLogger } = initLogger(“src/logger/index.ts”)type ScrapingData = () => Promise
export const scrapingData: ScrapingData = async () => {
nodeのバージョンdefaultめんどくさい
# nodeのバージョンめんどくさい問題
Localの開発環境の nodeのバージョンめんどい
Local開発環境でPCを再起動するなどでdefault設定のバージョンで起動する。
nvmのデフォルトのバージョンの設定方法をサクっとぐぐると
“`bash
nvm alias default v*.*.*
“`
みたいなのが出てくる
この指定方法でデフォルトを設定をしてるとマイナーアップデートするたびにデフォルト設定を変更するの面倒
“`bash
$ nvm ls
-> v14.18.3
v14.19.0
v16.8.0
v16.13.2
v16.14.0
default -> v14.18.3 # <- バージョンで指定していると、マイナーアップデートしても デフォルトのバージョンが固定されたまま iojs -> N/A (default)
unstable -> N/A (default)
node -> stable (-> v16.14.0) (default)
stable -> 16.14 (->
Discord.jsで役職パネルを簡単に作る
# 用意するもの
今回はkeyvにします[discord-job-panel](https://www.npmjs.com/package/discord-job-panel)
[keyv](https://www.npmjs.com/package/keyv)又は[aurora-mongo](https://www.npmjs.com/package/aurora-mongo)
[Discord.jsv13](https://www.npmjs.com/package/discord.js)`npm i discord.js discord-job-panel keyv`
# コード
“`js
const {Client,Intents} = require(‘discord.js’),
client = new Client({intents: [Intents.FLAGS.GUILDS, Intents.FLAGS.GUILD_MESSAGES]}),
discord_job = require(“discord-job-panel”);
//module
「これ、何のためにやってるの？」をまとめてみました【Node.js】
## はじめに
Node.js初学者が、N予備校のプログラミング入門コースを一通り勉強して、少し忘れてしまってる部分や「これ、何のためにやってるの？」という部分を洗い出してみました。## GitHub
“`
ssh-keygen
“`
秘密鍵`id_rsa`と公開鍵`id_rsa.pug`を作成する
このうち、公開鍵をGitHubに登録する。“`
ls /.ssh
“`
ここに作られていることを確認する。### pushする際の設定
“`
git config –global user.name “名前”
git config –global user.email メールアドレス
git config –global core.editor “vim”
“`
設定しない場合、PCにログインしているユーザー名で`Commit`される。というかされた。## Node.js
### nvm
Node.jsのバージョン管理を行うツール“`
nvm install v10.14.2
“`
Node.jsのインストール### yarn
Node.js
改めてTypescriptに入門してみた。
# はじめに
プロジェクトでNuxt.jsとTypescriptを使用したフロントエンド開発を経験してきて今までなんとなく書いていたので基礎をしっかり身に着けることで同じような技術スタックの案件の時に即戦力になりたいと思い、改めて学び直してみた。# Typescript で Hello World するまで
### Typescript をグローバルにインストール
terminalで下記コマンドを入力する。ちなみに今回は node はすでにインストールされている前提。
“`
$ npm install -g typescript
“`### 任意の場所でディレクトリを作成して新規tsファイルを作成する。ここではindex.tsを作成。
index.tsに下記を記述。
“`index.ts
let hello:string = ‘hello’
console.log(hello)
“`### 作成したindex.tsをjsにコンパイル
お使いのterminalで下記コマンドを実行(`tsc` はTypescriptをインストールしたことで使用可能なコマ
Webの勉強はじめてみた その36 〜Sequelizeでデータ削除とCSRF脆弱性の対策〜
N予備校「プログラミング入門Webアプリ」を受講しています。
今回が最後、第4章20〜24節です。## Sequelizeを利用したデータの削除
テストデータの一括削除。
“`javascript
function deleteScheduleAggregate(scheduleId, done, err) {
Availability.findAll({
where: { scheduleId: scheduleId }
}).then(availabilities => {
const promises = availabilities.map(a => { return a.destroy(); });
return Promise.all(promises);
}).then(() => {
return Candidate.findAll({
where: { scheduleId: scheduleId }
});
}).then(candidates => {
const promi
