Node.js関連のことを調べてみた2022年08月05日

Vue + Dotenv で環境別の開発・運用を考える

# はじめに

Vue.js で SPA のフロントを構築し始めると、開発・検証・本番と環境別に違う情報を管理することになるかと思います。

そこで環境別の情報を `.env` ファイルに記述し、CI/CD に乗せて運用していく中で、ソース管理やファイル構成に困ったことはないでしょうか？

そんな時の一例を紹介しますので、何かの一助になれば幸いです！

※ 一個人の見解ですので必ずしも正解や正攻法ではありません。より良い方法があればお気軽にフィードバック頂ければと思います。

# 課題

`.env` ファイルに環境別の情報（サーバー情報や接続情報など）を記述して、Vue.js のフロントエンドを構築しました。

しかし、運用していくと以下のような課題が発生してきました。

– Git のブランチを環境別に作っているため、環境設定ファイルを管理しにくい
– `develop` ブランチ内に、 `staging` 環境の環境設定ファイルがある…等
– 環境別ファイルをソースコードと別リポジトリで管理すると、今度は開発がやりにくい
– ソースコードリポジトリのブランチを切り

discord.jsで計算認証

# 必要環境
Node.js v16.9.0以上
discord.js v14.1.2以上
# コード
“`index.js
const discord = require(‘discord.js’);
const Keyv = require(‘keyv’);
const verify = new Keyv(‘sqlite://db.sqlite’, { table: ‘verify’ });
const signale = require(‘signale’);
const prefix = “!”
const client = new discord.Client({
intents: Object.values(discord.IntentsBitField.Flags),
partials: Object.values(discord.Partials),
});
client.commands = new discord.Collection();

function Random_num(max) {
return Math.floor(Math.rando

Express × TypeScriptでバックエンド開発①(下準備~簡単なGET, POST)

## ご挨拶
お久リぶりです。おおのんです。
SPA開発が盛んな昨今、フロントエンドからキャリアを始める人も増えていることでしょう。
そしてキャリアの次手に迷っているアナタ様に朗報です。
この記事では**TypeScriptを用いたバックエンドの開発方法**をご紹介します。
できる限りシンプルにハンズオンでまとめました。
皆様の新しいキャリア開拓の一助になればと思います。

### ▼ゴール
・TypeScriptでバックエンド環境を作る
・シンプルなAPIの実装（GET, POST）と動作確認

### ▼対象
・フロントエンドからキャリアを始めた人（ジュニア、ミドル）
・TypeScriptでバックエンド書いてみたい人

## 前提
node.jsが必要です。この記事ではバージョン14.18.0で進めています。
フレームワークを使用します。今回は言わずと知れたExpressを使用します。

**【参考サイト様】**
・【公式】Express – Node.js Web アプリケーション・フレームワーク

Renovateを使ってそれぞれのパッケージのアップデートを、半自動化してみた

## 要約
いちいち`yarn upgrade`を気が向いたときに叩くのは面倒なので自動化しようぜ

## 導入の前に
### Renovateって何
例えばNode.jsの物であれば`package.json`に記載されたnpmパッケージに更新があった場合に、自動で検知してPull Requestを出してくれるブツです。他にもGithubActionsやdocker-compose、Dockerfileなんかもやってくれます。
[GitHub Marketplace](https://github.com/marketplace)から導入する場合、
今回は、[Renovateによるnpmパッケージ定期更新](https://user-first.ikyu.co.jp/entry/2018/05/07/193755)を参考に、私が作って管理している[DiscordBot](https://github.com/na2na-p/2na2-Discord)に導入してみます。

## 導入する
まずは私が作って管理している[DiscordBot](https://github.com/na2

DockerでVue+Node(Koa)+Nginx+MongoDB環境を作る

## この記事のアピールポイント

– 初心者に最適
– フロントエンド開発者に最適

## 0.事前準備

##### インストール

以下のソフトウェアと環境のインストールが必要です。

– Docker以及docker-compose（必須）
– Docker图形化界面（なくてもよい）
– Node.js（必須）
– MongoDB图形化界面（なくてもよい）
– yarn （なくてもよい，npm，pnpmを使っても構いません）

##### 知識

Dockerコンテンツの説明と構築がメインとなりますので、
フロントエンドとバックエンド開発の説明は特にしません。
なので、以下の知識はあった方がいいです

– Dockerの基礎知識
– Mongodbの基礎知識
– Nginxの基礎知識
– フロントエンド（vue，react..），バックエンド（node，koa..）の基礎知識

##### 環境

– OS：Windows 10
– エディター：VS Code
– Node.js：v16.3.0
– Docker：v20.10.13

##### demo

文

for、forEach、mapの使い方

### 動作環境
Node.js v16.14
Ubuntu20.4 （Vagrant + Windows10）

### はじめに
JavaScriptで配列を処理する方法はいくつかあります。色々なパターンを試してみました。テストで利用する配列がこちらです。
“`node.js
var ary = [“aa”,”bb”,”cc”,”dd”];
“`

### 内容
一番原始的なやり方がことらです。初学者であれば、まずは、このやり方が思いつくかと思います。この書き方でも、全然問題はありません。ただし、エレガントさに欠けるという言い方はできるかと思います。
“`node.js
for (let i = 0; i < ary.length; i++) { console.log("val=" + ary[i] + " idx=" + i ); } ``` 動作結果です。 ```node.js val=aa idx=0 val=bb idx=1 val=cc idx=2 val=dd idx=3 ``` 上記のfor文をエレガントに書くと、次のようになります。何がエレガン

Windows11のnpmをnpm-windows-upgrade(Powershell)でバージョンアップする

# はじめに
2022年8月某日、npxコマンドでReactアプリを作成しようとしたところWarningが表示されたので調べたところ、npm.cmdなどを書き換えれば解消できるとかnpmをバージョンアップすれば解消するとわかったので、自分で編集はできるだけしたくないのでnpmをバージョンアップすることにした。

環境はWindows11でコマンド操作は基本Powershellを使う。
node.jsはv16.15.1をインストール済みである。

npm/npx実行時のWarning
~~~console:
npm WARN config global `–global`, `–local` are deprecated. Use `–location=global` instead.
~~~

参照した情報
https://stackoverflow.com/questions/72401421/message-npm-warn-config-global-global-local-are-deprecated-use-loc

# 更新前のバージョン
バージョンアップする前の

Heroku Postgresとアプリの接続設定

# 目次
[1. herokuにデプロイした際の接続情報を設定](#1-herokuにデプロイした際の接続情報を設定)
[2. ローカルテスト時の接続情報を設定](#2-ローカルテスト時の接続情報を設定)
[3. DB接続のマネージャークラスを作成する](#3-db接続のマネージャークラスを作成する)
[4. node.jsでの記述](#4-nodejsでの記述)
# 1. herokuにデプロイした際の接続情報を設定
環境変数を管理する.envファイル追加する(アプリ作成フォルダに.envファイルを作成)
※ホスト名等はHerokuにログインしてアプリページからpostgresDBのページを開き、Database Credentialsのviewボタンをクリックして確認する
“` :.env
ENV_HOST = [ホスト名]
ENV_DB = [DB名]
ENV_USER = [ユーザー名]
ENV_PASS = [パスワード]
“`

dotenvモジュールをインストールする
“`
$ npm install dotenv
“`

アプリフォルダに新たにdbフォルダを作成

CloudStorageからダウンロードしたファイルの中身を取得

GCPのCloudStorageに設置されたバケット内にあるファイルの内容を取得する方法について説明します。
CloudSDKの[ライブラリ](https://www.npmjs.com/package/@google-cloud/storage)を使用して以下のコードで取得が可能です。

“`Node.js
import { Storage } from ‘@google-cloud/storage’;
const bucketName = ‘test-qiita-bucket’;
const fileName = ‘test-file.txt’;
storage = new Storage();
const data = await storage.bucket(bucketName).file(fileName).download();
const contents = data[0].toString();
console.log(contents);
“`

“`qiita:出力(ファイル内容)
test1
test2
“`

<参考ページ>
[googleapi

一時的な障害に強いシステム（アプリケーション）を構築する

## 以下の記事を参照して頂ければと思います

https://note.com/shift_tech/n/n236a7e03c033

**※Qiitaの記事は全て個人的な記載であり、所属する組織団体とは無関係です。**

## 補足
ソースコード全体は以下。

https://github.com/yuta-katayama-23/intro-vuecli/commit/a4f87435f7c34bae23cfa4f9ecfa450a94af371f

果物の甘さを最大限に感じつつ、かまいたちで笑い転げて1日を終えたい（obniz×LINEBot）

こんにちは～

みなさん果物はお好きですか？

私は1人暮らしを始めてもう10年くらいになっているのですが、
毎晩必ずと言っていいほど、果物を食べて寝ています。

**そんな毎晩のルーティーンである
果物タイムで果物の甘さを最大限に感じつつ、今日も楽しかったと思えるために
obnizと温度センサー、LINEBotを使って作ってみました！**

## どんな実装をしたのか

**①果物をより甘く感じるために温度センサーで食べごろ温度を測る**
果物はそれぞれ甘味を感じやすい温度があるらしいです！
なので果物を食べる前に温度センサーで温度を測り、
甘い果物を食べられるようにしました。

今回はすいか・桃・マンゴーの適温を知れるよう設定しました。

**②今日も楽しかったと思えるために芸人の力を借りる**
大好きな芸人「かまいたち」が温度判定結果を画像で返すように設定。
でも、かまいたちはしゃべらないと面白くない！！！！
「食べてええで」の判定をしてくれたら
かまいたちのYoutube動画をランダムに送ってくれてるよう設定しました。

## 完成したものはこちら
https://twi

2-Node.js

Node.jsで作成した機能は全部で７つある。

主に以下のyoutubeと書籍を参考にして作成した機能である。
プログラミング教室 Kikuチャンネル
「Node.js入門」
14 本の動画9,784 回視聴最終更新日: 2021/08/19

「Node.js ＋SQlite3」
6 本の動画425 回視聴最終更新日: 2022/01/13

Node.js超入門［第3版］ （単行本）
著者 掌田　津耶乃 著
ジャンル IT系書籍 > プログラミング言語
書店発売日 2020/07/18
ISBN 9784798062433
判型・ページ数 B5変・468ページ
定価 3520円
（本体3200円＋税10%）
その他 ダウンロード：有
https://www.shuwasystem.co.jp/

Node.js Web アプリケーションを Docker で構築してみる

## はじめに
以下の本を使って学習したので、その覚書です。
初学者には、とても分かりやすかったです。
1-Node.js立ち上げ

Node.js×Expressでにアプリ開発の手順書を記録しておく

1ファイルを作成
2ファイルにcdコマンドで移動する。
3以下のコマンドを実行する
“`
npm install express-generator -g
“`
実行が完了していれば、
4以下のコマンドも実行する。（pugをejsに書き換えている）
“`
express –view=ejs myapp
“`
5「myapp」というフォルダのなかに
・bin
・node_modules
・public
・routes
・views
フォルダと
・app.js
というファイルが作成される
6この後　appフォルダにcdコマンドで移動して、
“`
npm install
“`
を行う

7
“`
npm start
“`
が実行できるようになる。

Logto：サインイン、認証、およびユーザーIDを数分以内に構築するためのオープンソースプロジェクト

TL; DR
ウェブサイト -> https://logto.io
リポジトリ -> https://github.com/logto-io/logto

> Sorry if the grammar sounds weird since I used Google Translate for this article. You can check out the original English post [here](https://dev.to/gaosun/logto-open-source-project-to-build-sign-in-auth-and-user-identity-within-minutes-5bgi).

私は自分自身に問いかけました–なぜサインインを再度コーディングする必要があるのですか？ この未解決の質問を念頭に置いて、私は約1年前に数人の開発者の友人とLogtoの構築を開始しました。

より良いサインインソリューションが私たち自身のビジネス上の問題をどのように解決できるかを調査しているときに、サインインの内訳が多くの人々が認識しているよりもはるか

Node.js: Yahoo 郵便番号検索API の使い方

参考ページ
[郵便番号検索API](https://developer.yahoo.co.jp/webapi/map/openlocalplatform/v1/zipcodesearch.html)

“`js:get_address.js
#! /usr/bin/node
// —————————————————————
// get_address.js
//
// Jul/31/2022
//
// —————————————————————
‘use strict’
import * as https from “https”
import * as dotenv from “dotenv”

console.error (“*** 開始 ***”)
dotenv.config()
const APPID = `${process.env.APPID}`

const code_zip = proces

Firebase(v9) から取得したIDトークンをサーバサイド(Node.js)で検証する

# 概要
Express等で簡単に作ったAPIとの通信をセキュアにするため、Firebase Authenticationの“`getIdToken()“`メソッドを使おうと思ったら、v8でのnamespacedな書き方しか見つからなかったのv9でのmodularな記述方法を探した。

実はv8っぽい書き方が動かないというのがそもそも勘違いだったのだが、v9っぽくモジュール化されたメソッドでも同様のことができるので、雑にだが備忘として残しておく。

## 出来上がり
最初に結論をば
web v9っぽいidTokenの所得方法はこう
“`v9.js
import { getAuth, getIdToken } from “firebase/auth”;

const auth = getAuth()
const user = auth.currentUser
const idToken = await getIdToken(user, true)

“`
ちなみに、公式ドキュメントにはこう書いてある
v9っぽい書き方ではないが、v9を使っていてもちょっと手直しすれば普通に動

元記事を表示

パッケージ管理システム#2

# npm インストールのオプションを使い分ける
前回の記事でpackage.jsonとpackage-lock.jsonの違いやnode_modulesをまとめました。今回は、
・npm install
・npm install ＜package＞
・npm install -D ＜package＞
・npm install -g ＜package＞
の使い分けをまとめます。

## npm install
用途・・・package.json及びpackage-lock.jsonが共有されていて、自分のディレクトリでまだpackageがインストールできていない時にnode_modulesを生成（packageをインストール）する。
もしくは、package.jsonが更新され、新たに全てのパッケージをインストールするとき

## npm install ＜package＞
ローカルインストール
用途・・・グローバルインストールでもdevインストールでもない時に使用する。基本的にはこのインストールコマンドを使用する。
packageは、.node_modules/.bin/配下にイン

元記事を表示

ゼロからNode.js環境をHomebrew、nodenv経由で構築(MacOS)

# ゼロからNode.js環境をHomebrew、nodenv経由で構築
大学入学時に購入して何もわからず環境構築したMacBook Pro。
何かがおかしいと気づきつつ無理矢理使ってきましたが本当に限界を感じたので一旦出荷状態まで戻して全てを最初からやり直します。
**この記事ではNode.js環境をHomebrew、nodenv経由で構築していきたいと思います。**
一連の投稿のハブになる記事は[こちら](https://qiita.com/TakayoshiK/items/ae53424b788c8fcb645b)

**参考にさせていただいた記事**
[MacにHomebrew経由でnodenvを導入する（＋PHPStorm対策）](https://qiita.com/alice37th/items/989af6749264de50bb85)

## 環境
MacBook Pro (13-inch, 2018)
macOS　Monterey Version 12.5
メモリ intel Core i5
zsh 5.8.1 (x86_64-apple-darwin21.0)

#

元記事を表示

パッケージ管理システム #1

# パッケージ管理システム
## npm（Node Package Manager）とは？

Node.jsで外部パッケージをインストールして使うためのマネージャ。
package.jsonを読み込んで、npmのリポジトリにパッケージを取りに行く。
npmを使うと、依存しているパッケージを一度にインストールできる。
似たようなパッケージ管理システムにyarnがある。
以前はBowerというものが使われていたが、今ではnpm,yarnが一般的。

## package.jsonとpackage-lock.json
### package.json
自身のパッケージを管理するために使われるファイル
package.jsonは npm init　コマンドによって生成される
インストールすべきパッケージのバージョンのの範囲や対応ブラウザのバージョン指定、npm-scriptなどが記入される。
また、package.jsonが存在するディレクトリにnpmを使って新たにパッケージをローカルインストールすると自動的にpackage.jsonの情報が更新される。※グローバルインストールでは記入されない

元記事を表示