- 1. npmコマンドが何も出力せずに終了する問題を解決した話
- 2. 8/8に学んだこと
- 3. 【Express.js】リダイレクト時に未保存のセッションデータを確実に保存する
- 4. pm2 commands
- 5. Docker ComposeとGitHubを使用して、Node.js + Express + MySQLの環境構築を行う
- 6. Express + TypeScriptでexpress-sessionを利用する
- 7. sequelizeのモデルをTypeScript化して、ルーティングで使用する方法
- 8. express-generatorで作成したプロジェクトでTypeScriptを使用する
- 9. CloudFunctionsのデプロイエラー3つの対処方法/nodeとArtifact Registryとconfigの問題について
- 10. SourceTreeでコミットしたときにhuskyが動かないときの対処法
- 11. Vue + Dotenv で環境別の開発・運用を考える
- 12. discord.jsで計算認証
- 13. Express × TypeScriptでバックエンド開発①(下準備~簡単なGET, POST)
- 14. Renovateを使ってそれぞれのパッケージのアップデートを、半自動化してみた
- 15. DockerでVue+Node(Koa)+Nginx+MongoDB環境を作る
- 16. for、forEach、mapの使い方
- 17. Windows11のnpmをnpm-windows-upgrade(Powershell)でバージョンアップする
- 18. Heroku Postgresとアプリの接続設定
- 19. CloudStorageからダウンロードしたファイルの中身を取得
- 20. 一時的な障害に強いシステム（アプリケーション）を構築する
npmコマンドが何も出力せずに終了する問題を解決した話
Macbook Air M2をセットアップ中の出来事になります。備忘録としてメモを残しておきます。
# 結論
– .npmがシンボリックリンクだった
– 移行アシスタントはシンボリックリンクは解決してくれない（そのまま移行する）ので注意# 現象
`npm i` を実行すると、何も出力せずに終わる。
“`
% npm i yarn -g%
“`npmはある（ホームディレクトリは ~ に置き換えています）。
“`
% which npm
~/.nodenv/shims/npm
“`# 疑ったもの
## nodenv
nodebrewにするも現象は変わらず。
## M2
M1で普通に動いているけど。M2でまた何か特有の問題が起きているのかと思ったけれど、情報はなく。
# 調査
nodenvはコマンド実装が分かりづらかったので、結果的にnodebrewにしたのが解決につながったかも。`nodenv` の npm はこれ（ホームディレクトリは ~ に置き換えています）。
“`bash
#!/usr/bin/env bash
set -e
[ -n
8/8に学んだこと
:::note warn
警告
自分用のメモ書きの為、誤った事が記載されている場合や端折った記載になっています。
:::## node.jsとは
ChromeのV8JavaScriptエンジンで動作するJavaScript環境## npmとは
node package manager node.js(javascript)で使用するライブラリを管理するツール。
npmを使用する為にはnode.jsをインストールする必要がある。他にはyarn等がある。## javascriptのfalsyな値
* ”(空文字)
* 0
* NaN(not a number)
* null
* undefined## MySQLどうしても起動しない
“`
sudo rm -rf /usr/local/var/mysql
brew uninstall mysql
brew install mysql
“`## Cookieとは
サーバから送られてくる個人識別番号のこと
Cookieがないと、http通信はステートレスな(状態がない)ためwebサイト側が誰からのセッションなのか
【Express.js】リダイレクト時に未保存のセッションデータを確実に保存する
バグなのか仕様なのか分からないですが、`express-session`のデータ保存先（`sessionStore`）として、データベースやファイルなどI/Oに時間のかかるストアを選んだときに、リダイレクト後のリクエストで未保存のセッションデータを参照してしまうことがあったため解決策の備忘録です。
“`js
function beforeRedirect(req, res, next) {
// sessionデータを更新してからにリダイレクトするときにストア保存時の遅延により、
// リダイレクト後の画面で保存前のセッションデータを参照してしまう場合があるため、
// 確実にセッションを保存してからリダイレクトする
const redirect = res.redirect;
res.redirect = function () {
if (req.session) {
req.session.save(() => {
redirect.apply(this, arguments);
});
} els
pm2 commands
“`
pm2 list
pm2 start npm –name “react” — start
“`
Docker ComposeとGitHubを使用して、Node.js + Express + MySQLの環境構築を行う
# 初めに
Docker Composeを使用して、Node.jsとMySQLのコンテナを作成し、Sequelzieを使用してDBにアクセスするところまでを記載する。
また、Node.jsのコンテナ上でExpressのプロジェクトを1から作成する記事は多く見かけたが、既にあるGitHubのリポジトリ(ExpressとSequelizeを含む)をcloneしてそこから環境を構築していく記事はあまり見受けられなかったので、今回はそちらの手順で行う。(実際に現場で開発する際は、既にGitHubが作成されている場合もあると思われるため)#### 今回やりたいことの図
# 環境
■ 使用PC
MacOS Big Sur：バージョン11.6※既に使用PCにはgitを導入状態
Express + TypeScriptでexpress-sessionを利用する
### 初めに
Express + TypeScriptで開発を行う際に、sessionの設定方法がJavascriptと異なっていたため備忘録として投稿する。### 環境
■ Nodeのバージョン
14.14.0
■ 使用OS
MacOS Big Sur：バージョン11.6
■ expressのバージョン
4.16.1
■ @types/express-sessionのバージョン
1.17.4
■ express-sessionのバージョン
1.17.2### 設定方法
使用するパッケージをインストールする。
JavaScriptでは、express-sessionのみインストールしていたが、TypeScriptで使用するには@types/express-sessionが必要。“`shell
npm i express-session @types/express-session
“`app.tsに下記の記載を行う。
“`ts
var session = require(‘express-session’);
declare module ‘express
sequelizeのモデルをTypeScript化して、ルーティングで使用する方法
### 初めに
今回は、sequelizeで作成したモデルをTypescript化してルーティングから呼び出し、DBから値を取得する方法を記述します。### 環境
■ Nodeのバージョン
v14.14.0
■ 使用OS
MacOS Big Sur：バージョン11.6
■ 総合開発環境
Visual Studio Code
■ Sequelizeのバージョン
v5.22.4
■ MySQLのバージョン
v5.6.50### 使用するテーブル設計
“`SQL
CREATE TABLE `users` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(255) NOT NULL,
`pass` varchar(255) NOT NULL,
`status` int(11) NOT NULL,
`createdAt` datetime NOT NULL,
`updatedAt` datetime NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO
express-generatorで作成したプロジェクトでTypeScriptを使用する
今回は、express-generatorでプロジェクトを作成し、一部でTypeScriptを使用できるように環境構築を行います。
あらかじめ、npm、node、express-generatorをインストールしている前提で記載させていただきます。
## 環境
■ Nodeのバージョン
v14.14.0
■ 使用OS
MacOS Big Sur：バージョン11.6
■ 総合開発環境
Visual Studio Code## プロジェクト作成
“`
% express –view=ejs typescreate : types/
create : types/public/
create : types/public/javascripts/
create : types/public/images/
create : types/public/stylesheets/
create : types/public/stylesheets/style.css
create : types/routes/
create :
CloudFunctionsのデプロイエラー3つの対処方法/nodeとArtifact Registryとconfigの問題について
こんにちは。[virapture株式会社](https://virapture.com)でCEOしながら[ラグナロク株式会社](https://ragna-rock.com)でもCKOとして働いている[@mogmet](https://twitter.com/mogmet)です。
今回はcloud functionsのデプロイにまつわるトラブルシュートな内容を共有します。
## node versionの問題の解決法
下記のようなエラーが出たときの問題の対処法です。
> Build failed: Build error details not available.Please check the logs at https://console.cloud.google.com/cloud-build/builds;region=asia-northeast1/xxx-xxxx-xxx-xxx?project=xxx. Please visit https://cloud.google.com/functions/docs/troubleshooting#build for i
SourceTreeでコミットしたときにhuskyが動かないときの対処法
今まではSourceTreeをターミナルから起動することで対応していました。
でも毎回は面倒くさい…。
調べていたら、１コマンドで簡単にhusky用の設定ファイルを作成できる方法を見つけました。環境：macOS Catalina 10.15.7
gitクライアントツール：SourceTree# SourceTreeでコミットしてエラーが出たときの、今までの対処法
“`
.husky/pre-commit: line 4: npm: command not found
husky – pre-commit hook exited with code 127 (error)
“`
上記のようにエラーが発生してコミットできなくなることがあります。
その度にターミナルで
“`
$ open /Applications/Sourcetree.app
“`
を実行し、SourceTreeをターミナル経由で起動することで解決していました。
こちらの方法も有用ですので、これから記述する対処法でもし解決しなければ試してみてください。# 設定ファイル.huskyrcを作成する
[hus
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
