- 1. Reactでyarn startができなくなってしまった
- 2. pakage.jsonの^ (キャレット) と~ (チルダ)の違い
- 3. serverless FWの細かい設定 stageとcustomを使った外部ファイルでの環境変数設定
- 4. npm i とnpm ci の違い
- 5. Cloud Spannerにnode.jsでアクセスしてみる
- 6. SNS兼小説サイト「Satoruya」におけるライブラリの選定方法。枯れた技術の水平思考の勧め
- 7. SNS兼小説サイト、「Satoruya」を自作して限定公開しました
- 8. Node.jsとnpmをWindowsにインストールする方法
- 9. Node.js向けTypeScript環境のボイラープレートを作った
- 10. Node.js で digital envelope routines::unsupported（ERR_OSSL_EVP_UNSUPPORTED）と言われた
- 11. React+react-three-fiberで始めるWebGL
- 12. nodeのバージョンアップをnodebrewで
- 13. macを買い替えたり、brewが壊れたりしてbrew自体を最初から入れないしたいときに再度入れておきたいライブラリ等
- 14. 【Node.js・Express】multerではなくexpress-fileuploadでファイルをアップロードする方法
- 15. AWS CDKでSecrets ManagerのgenerateSecretString, secretObjectValue, secretStringValueを作ってみる
- 16. GitHub ActionsでのNode.js利用のアップデートメモ
- 17. Windowsでnode.js環境設定メモ
- 18. Kuber(minikube)でnode.js + PostgreSQLを使う
- 19. Dockerでnode.js + PostgreSQLを動かす
- 20. Node.jsをDockerで使う
Reactでyarn startができなくなってしまった
# 何の前触れもなく突然`yarn start`ができなくなってしまった
エラーは下記の通り
“`ターミナル
yarn run v1.22.17
$ react-scripts start
Could not find a required file.
Name: index.js
Searched in: /Users/name/folder/React/react-app/src // ←←名前載ってしまうので一部書き換えてます
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
“`# もちろん`build`しても Could not find a required file. と言われる
エントリーポイントであるindex.jsが見つからない？と言われているっぽい・・・（でもパスは書き換えてないし・・・バージョンかな？？）
依存関係を解決しようとバージョンが変え
pakage.jsonの^ (キャレット) と~ (チルダ)の違い
# 背景
特定のパッケージをインストールしてから`pakage.json`を見ると、以下のように表記されていることがわかる。
“`shell
$ npm install –save react
“`
“`json
“dependencies”: {
“react”: “^15.3.2”
}
“`
`15.3.2`と最新のバージョンだけ記載されれば良いのに、なぜか`^`のマークが前についている。
これの意味を以下でメモする。# ^ (キャレット)
パッケージのバージョン番号のうち、一番左のゼロではない値を変更しない範囲でアップデートを許容する、という意味。
具体的にいうと、以下のように整理できる。– ##### インストールされたバージョンが ^1.2.3 の場合
→1.2.3以上2.0.0未満までのアップデートはOKにする。– ##### インストールされたバージョンが ^0.2.3 の場合
→0.1.2以上0.2.0未満までのアップデートはOKにする。– ##### インストールされたバージョンが ^0.0.3 の場合
→0.0.3以上0.0.4未
serverless FWの細かい設定 stageとcustomを使った外部ファイルでの環境変数設定
## はじめに
serverlessアプリケーションを開発する上で便利な[serverless](https://www.serverless.com/)における、ちょっとしたTipsを備忘録として残しておこうと思う。※今後も随時追記していく予定。
## serverless の細かい設定
### stage
環境を分けるためにある機能
以下のように`opt:stage`（CLI のオプションで渡ってきた値（ex) `–stage dev`））、`self:custom.defaultStage`（yaml の custom に定義している defaultStage の値）などを利用して設定可能“`yaml:serverless.yaml
provider:
stage: ${opt:stage, self:custom.defaultStage}custom:
defaultStage: localfunctions:
hello:
name: hello-lambda-${self:provider.stage}
“`また
npm i とnpm ci の違い
# npm i（npm install）
プロジェクトにパッケージをインストールするためのコマンド。
npm iは大きく２つの方法で動作する。### 1. 特定のパッケージをインストールする際に使用
“`shell
$ npm i ‘package-name’
“`
特定のパッケージの名前を直接入れてインストールする。### 2. `package.json`に明示されているすべてのパッケージをインストールする際に使用
“`shell
$ npm i
“`
特定のパッケージ名を指定しなかった場合は、`package.json`に明示されているすべてのパッケージをインストールし、`node_modules`に保存しておく。### 上記の方法の共通点
上記の方法の両方とも、`package-lock.json`の存在をまず確認し、依存しているパッケージ情報を把握してから`node-modules`にインストールする。
また、`node-modules`や`package.json`に変化があれば、`package-lock.json`を更新する。# npm ci（
Cloud Spannerにnode.jsでアクセスしてみる
基本的には[こちら](https://cloud.google.com/spanner/docs/getting-started/nodejs?hl=ja)の記事通りにいろいろやればいい。
## 前提
[こちら](https://qiita.com/zaburo/items/8af75280465d05621a92)の記事の続き。
* Emulator環境
* テーブル作成済み
* データInsert済み## 準備
### 作業場の作成
まあどこでもいいのですが、以下のようにしました。
“`bash
cd
mkdir spanner-node-test
cd spanner-node-testtouch index.js
“`### モジュールのインストール
spannerにアクセスするためには@google-cloud/spannerをインストールするようです。
“`bash
npm install @google-cloud/spanner
“`## 実装
### コードを書く
いろいろな書き方ができるみたいですが、一旦SQLを使った
SNS兼小説サイト「Satoruya」におけるライブラリの選定方法。枯れた技術の水平思考の勧め
この記事ではSNS兼小説サイト「Satoruya」におけるライブラリの選定方法をご紹介します
まぁ、ぶっちゃければ横井軍平氏のやり方である「枯れた技術の水平思考」をそっくり真似ました。# 1.「枯れた技術の水平思考」とは？横井軍平氏って誰？
ゲーム業界においてマリオの作者である宮本茂氏、スマブラの作者である桜井政博氏、任天堂の社長を務めていた故・岩田聡社長と並ぶ最大の偉人の一人(1997年に逝去)なのでウェブアプリ業界であっても知っている人は相当多いと思いますが、改めて解説します。
非常に簡潔に述べると「ウルトラハンド」という玩具を作って大ヒット商品にし、その後も「ラブテスター」「光線銃」など立て続けにヒット商品を連発、「ゲーム＆ウォッチ」を作って任天堂を立て直し、ゲームボーイの開発などを行った人です。
おそらくこの人の存在を知ってゲーム業界を目指し、結果的にゲーム・非ゲームを問わずIT技術者になった人も多いのではないでしょうか？
それで、この人の思考法として「枯れた技術の水平思考」というのがあります。
これは「最新技術ではなく敢えて枯れて使いまわされたメリット・デメリット
SNS兼小説サイト、「Satoruya」を自作して限定公開しました
タイトル通り、SNS兼小説サイト、「Satoruya」を自作して一部の人に限定公開しました。
この記事では簡潔にですが、「Satoruya」をどうやって作ったのか書いていきます。# 主な構成内容
– フロンドエンド：Next.js
– バックエンド：Nest.js
– CSSライブラリ：BootstrapHTMLとCSSを除き、全てTypeScript(Node.js)で構成されています。
ご存じの方も多いと思いますが、一つ一つ解説していきます。# フロントエンド
Next.jsを使って作りました。これはほぼReactが中身のNode.js製フロンドエンドWebフレームワークです。私はReactの方が好きなので、こちらを選びました。
競合フレームワークにVue.jsをベースにしたNuxt.jsがあります。# バックエンド
Nest.jsを使って作りました。これはNode.js製バックエンドWebフレームワークです。主にDBを用いるAPIサーバーを使う時に使用するものです。バックエンドにRuby on Railsを使う会社は多いですが、今回は使用しませんでした。
こ
Node.jsとnpmをWindowsにインストールする方法
Node.jsとnpmをWindowsにインストールする方法を紹介します。
# 環境
+ Windows10
+ Node.js v18.12.1
+ npm 8.19.2# インストール手順
「[ダウンロード | Node.js](https://nodejs.org/ja/download/ “ダウンロード | Node.js”)」のページから、インストーラーをダウンロードします。
ダウンロードしたインストーラー（ここでは「node-v18.12.1-x64.msi」）を実行します。
「Next」をクリ
Node.js向けTypeScript環境のボイラープレートを作った
# はじめに
TypeScriptのアプリを作り始めるたびに毎回同じようなパッケージをインストールしてtsconfig.json書いてESLintの設定書いて、vscodeの設定を書いて…ってやって時間を使うのが面倒になってきたので、必要最低限のスタート環境用のボイラープレートを作ってみました。# いきなり成果物
https://github.com/masaminh/boilerplate-node-typescript* Node.js 16用としてv16.0.0のタグをつけてあります。
* 以下のものが使える状態になってます。
* TypeScript 4.8
* ESLint (Airbnbスタイル)
* JestAirbnbスタイルにしているのは完全に私の好みです。
Node.js で digital envelope routines::unsupported（ERR_OSSL_EVP_UNSUPPORTED）と言われた
Node.jsのバージョンをアップデートすると、Vue.js(Nuxt)アプリのビルド時にこれを言われるようになった。
“`
opensslErrorStack: [ ‘error:03000086:digital envelope routines::initialization error’ ],
library: ‘digital envelope routines’,
reason: ‘unsupported’,
code: ‘ERR_OSSL_EVP_UNSUPPORTED’
“`## 解決法
以下のコマンドを叩く。これは一時的な対応となり、公式でいずれちゃんと対応してくれるらしいので、それまではこのコマンドを叩いて、待とう。
“`
export NODE_OPTIONS=–openssl-legacy-provider
“`
React+react-three-fiberで始めるWebGL
# はじめに
私は普段体重管理をスマホアプリで行っているのですが、二次元のグラフがダサい…
とふと感じてしまい「そうだ！今こそWebGLを勉強だ！ただWebGLを直接扱うのは難しそう…」ということでReactからはreact-three-fiberが割と簡単にWebGLを扱えそうだったのでやってみました。最終的にはかっこいい体重管理グラフの表示を目指しています。
ということで、今回のゴールは以下とします。
* 環境セットアップ
* 簡単な画面を表示# 環境セットアップ
まずはNode.jsが必要なのでインストールします。https://nodejs.org/ja/
本稿作成時点では18.12.1が推奨版だったのでこれをインストールします。
全てインストーラのデフォルト設定でインストールします。##### インストール結果確認
コマンドプロンプトを立ち上げnodeコマンドからバージョンを確認します。
バージョンが表示されればインストールは正常終了しています。
“`
node -v
18.12.1
“`
# Reactプロジェクト作成
適当なフォルダからプロジェク
nodeのバージョンアップをnodebrewで
nodeの今の主な用途としては
nodescriptなので、現在の１６でなにか困っていたわけではないですが、
最近はウェブ制作が多いので、
ちょっと黒い画面をさわろうと、
nodeをバージョンアップしてみることにしました。インストールしたのはだいぶ前なのですが、
いろいろ忘れてしまっていたので、
メモとして残します。## globalにインストール
まずはサクッと調べて出てくるのは、次のような感じ
`npm install -g n`
でも、うまく反映されなかったので、
pathのことを思い出して、確認。
`which node`.nodebrew/という文字を見つけ、
nodebrewで管理していたのを思い出す。## nodebrew
### nodebrewで使えるバージョンを確認す
`nodebrew ls-remote`
ずらっと並びました。
“`
.1 v16.6.2 v16.7.0 v16.8.0 v16.9.0 v16.9.1 v16.10.0
v16.11.0 v16.11.1 v16.12.0 v16.13.0 v16
macを買い替えたり、brewが壊れたりしてbrew自体を最初から入れないしたいときに再度入れておきたいライブラリ等
## brew
個人のPC汚したくないからコンテナ内でinstallすればいいじゃないかという話は置いといて、phpやcomposerやyarnやnodeなどのライブラリの導入管理をするためのツール。nodeを管理するための`n`も`brew`で導入できる。
macユーザー必須のパッケージ管理ツール。https://brew.sh/index_ja
“`bash
% /bin/bash -c “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)”
“`バージョン等確認。
“`
% brew info
54 kegs, 19,016 files, 695MB
% brew -v
Homebrew 3.6.10
Homebrew/homebrew-core (git revision b3600170839; last commit 2022-11-11)
Homebrew/homebrew-cask (git revision a7fa89f029; la
【Node.js・Express】multerではなくexpress-fileuploadでファイルをアップロードする方法
# 環境構築
1.以下を実行（もしくは`express-file-upload`フォルダを作成してその中に移動）
“`terminal
mkdir express-file-upload
cd express-file-upload
“`2.`package.json`以下を作成して以下をコピペで記述
“`json:package.json
{
“name”: “express-file-upload”,
“version”: “1.0.0”,
“description”: “”,
“main”: “server.js”,
“type”: “module”,
“scripts”: {
“start”: “nodemon server.js”
},
“keywords”: [],
“author”: “”,
“license”: “ISC”,
“dependencies”: {
“ejs”: “^3.1.8”,
“express”: “^4.18.2”,
“express-fileupload”:
AWS CDKでSecrets ManagerのgenerateSecretString, secretObjectValue, secretStringValueを作ってみる
# 背景
`cdk`で `secrets manager`を使ってパスワードや環境変数を登録するときに、
1. `generateSecretString`
1. `secretObjectValue`
1. `secretStringValue`のパターンをそれぞれまとめてみました。
# 環境
Typescript: ^4.8.2
aws-cdk: ^2.44.0# generateSecretString オプションなし
## generateSecretString: コード
“`ts
const generateSecretString = new aws_secretsmanager.Secret(this, ‘GenerateSecretString’, {
generateSecretString: {
secretStringTemplate: JSON.stringify({ username: ‘postgres’, say: ‘hi mom’ }),
generateStringKey: ‘pa
GitHub ActionsでのNode.js利用のアップデートメモ
エラーではないけどアラートが出ていた
> Node.js 12 actions are deprecated. For more information see: https://github.blog/changelog/2022-09-22-github-actions-all-actions-will-begin-running-on-node16-instead-of-node12/. Please update the following actions to use Node.js 16: actions/checkout, actions/setup-node, actions/checkout
> 
書き方古
Windowsでnode.js環境設定メモ
# 概要
久しぶりにWindows機で開発環境を整えたので、備忘録として。
大したことはしていません。## 環境
– マシン：Surface Laptop 4
– Windows 11 Home
– Visual Studio Codeはインストールしておく## 何をセットアップするか
以下を使えるようにするだけです。
– PowerShell 7.1
– vscodeへの反映
– git
– node.js
– バージョン切り替えつき## PowerShell 7.1への切り替え
デフォルトでは PowerShell 5.1 だったので、PoserShell 7.2 に変更。
以下よりLTSをダウンロード。
https://github.com/PowerShell/PowerShellインストールすると、5.1と共存する形で7.2のPowerShellが入るので、インストール後はそちらを起動して利用するようにすればよいだけ。
もし、ターミナルを利用している場合は、[設定]を開き、[スタートアップ]ページにある[既定のプロファイル] で、イ
Kuber(minikube)でnode.js + PostgreSQLを使う
[この記事](https://qiita.com/zaburo/private/96ca9a1197f72dccfbe3)の続き。
## minikubeのインストール
Mac前提であれば基本以下で動きますが、詳細はこちらをどうぞ。
“`bash
brew install minikube
“`“`bash
minikube start
“`## 前準備
### DB 接続文字列の書き換え
node.js側のコードのDB接続文字列を構成に合わせて変更します。
接続先ホストはdbコンテナを公開するServiceの名前になります（コンテナ名とかは動的になるから）。“`js
// PostgreSQL connect info
const pool = new pg.Pool({
user: “postgres”,
host: “my-db”,
database: “postgres”,
password: “postgres”,
port: 5432
});
“`>kubernetesのpod名にはアンダースコ
Dockerでnode.js + PostgreSQLを動かす
諸事情でDocker上のnode.jsとPosgreSQLを連携させる必要があったので調査。
## 方針
最終的にクラウド上のマネージドサービス（Cloud Run想定）でコンテナを動かす予定なのでdocker-composeへの依存は可能な限り下げます。
* 書ける記述はなるべくDockerfileに記述する
* 全体制御をdocker-composeに記述する>環境はDocker Desktop for Macを利用。
## 準備
### 作業場の確保
“`bash
cd
mkdir docker-node-pg-test
cd docker-node-pg-test
mkdir app db
“`
## PostgreSQL(db)関連の作業appはdbに依存するので、先にdbの準備をします。
### dbに移動
“`bash
cd db
“`### ディレクトリ作成
“`bash
mkdir data init
“`### 必要なファイル作成
“`bash
touch Dockerfile .dockerignore ini
Node.jsをDockerで使う
node.js（Express）をDockerで使う最低限の方法メモ。
## 準備
### 作業場の確保
“`bash
cd
mkdir docker-node-test
cd docker-node-test
“`### モジュールのインストールと必要なファイルの生成
Expressをインストールします。あと、index.jsを作ります。
“`bash
npm install express
touch index.js
“`## 実装（最低限）
index.jsに実装していきます。一旦最低限。
“`js:index.js
const express = require(“express”);
const app = express();app.get(“/”, (req, res) => {
res.send(“Hello Node.js”);
});app.listen(3000, () => {
console.log(“Start server on port 3000.”);
});
“`## 動作確認
早
