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

Node.js関連のことを調べてみた2022年06月01日
目次

Nodejs 環境周りメモ

# 背景
久しぶりにnodejsを触ってバージョン管理関係の知識がゴチャゴチャしていたので、整理する。

# 開発環境

PC:macOS Montery(Intel Core)
エディター:Visual Studio Code

Homebrew 3.4.11

# 内容
「OS上でのnodejsのバージョン管理」と「プロジェクト毎にnodejsのバージョンを管理」が混ざっていたので、今回は後者の「プロジェクト毎にnodejsのバージョンを管理」についてまとめる。

「OS上でのnodejsのバージョン管理」だと[nodebrew](https://github.com/hokaccha/nodebrew)や[fnm](https://github.com/Schniz/fnm)などがある。

「プロジェクト毎にnodejsのバージョンを管理」には、nodenvを採用する。(pyenvやrbenvを使用したことがあり、似たようなものを検索したら出てきたため)

まず、homebrewを使用して、nodenvをインストールする。ターミナルから下記コマンドを実行する。

“`
b

元記事を表示

npxやnpmでのインストールが失敗する場合はNode.jsのバージョンを確認しよう

完全に自戒です

Next.jsをインストールしていて、
インストールは一見成功したみたいですが、

“`
$ npx create-next-app@latest –typescript

$ npm run dev

ReferenceError: TextEncoder is not defined
“`

インストール後の初期状態で起動コマンドを打ち込んでみるとエラーが出てしまいます。

さらに、Storybookをインストールしようとすると

“`
$ npx storybook init

input.flat is not a function
“`

エラーが出て失敗します。

エラー文で検索してもあまりいい情報がヒットしなかったのですが、
ふとNodeのバージョンはどうだったっけと思ったらv10でした。(現時点でLTSはv16)

Nodeのバージョンを更新してから試したら問題なくインストール成功しました。

元記事を表示

URL 生成サポートアプリを作ってみた

簡単な URL 生成サポートアプリを作ってみたので紹介します。

# GitHub

https://github.com/nkm-m/Translate-App

![](https://storage.googleapis.com/zenn-user-upload/20a97bf61cd6-20220531.gif)

## 概要
詳細は GitHub をご覧ください。
アプリの内容は以下の通りです。

・入力した日本語を英語に翻訳
・英語を小文字に変換
・英単語間にハイフンを挿入
・特定の記号 (`.`, `’`, `?`) を削除

# 作成したきっかけ
これまでは、URL を生成したい時に以下の手順で行っていました。

1. Goggle 翻訳で日本語を英語に翻訳
2. 英語で大文字になっている文字を小文字に直す
3. 英単語間にハイフンを手打ち or エディタで半角スペースをハイフンに置換
4. ピリオドなどの記号を削除

上記の手順は 1 ~ 2 分もあればできるのですが、それがちまちました作業だったので面倒だと感じていました。
上記の手順を一発で解決するツ

元記事を表示

ESLintでimport自動整形に関して ESLint × Prettierの設定しているなら「なし」に落ち着く予感

## はじめに
自身が開発しているプロジェクト内で少し議論になった事もあり、importの自動整形についてはどうなのか?考えてみた。

(プロジェクトや個人の考え方に結局よると事だが)なんとなく結論としては、ESLint・Prettierの構成を取っているなら、スタイルの修正をESLintで行わせる事になるimportの自動整形は「なし」になるだろうなと思う。

以下では、ESLint・Prettierの構成の場合に、なぜimportの自動整形が「なし」になりそうか?についてみていきつつ、ESLintの静的解析とPrettierのコード整形を分離する方法についても見ていく。
おまけとして、「なし」といったもののやりたいという需要もあると思われるので、importの自動整形を行う方法についても取り上げた。

## importの自動整形はできるけど、ESLint × Prettierのプロジェクトではやらない、になるだろう
Javascript(Node.js)であれば、静的解析にESLint、コードフォーマッターにPrettier、という構成は鉄板だと思う。その場合、importの自動

元記事を表示

Node.js 参考サイトとメモ

https://qiita.com/non_cal/items/a8fee0b7ad96e67713eb

https://eng-entrance.com/what-is-nodejs

## Node.js とは?

ブラウザ上という制限された環境でしか動けなかったJavaScriptを、PythonやRubyのように __OS上で__ 動かせるようにしてくれる __JavaScript実行環境__ が __Node.js__。

OSにNode.jsをインストールすると __node.exe__ ができる。
node.exeはJavaScriptコードを __実行するアプリケーション__ (JavaScript実行環境)。

Node.jsではJavaScriptでOSの機能にアクセスするプログラムを組むことができる。
つまりブラウザ上で動作していたときはできなかった自由なファイルの読み書きやネットワーク通信などのOSの機能を扱える。

Node.jsは元々 __大量の同時接続をさばけるネットワークアプリケーションの構築を目的__ に設計されたJavaScript環境。

__サ

元記事を表示

【Node.js】AWS SNSを使ってSMS(ショートメッセージ)を送る【Typescript】

ここでいうSNSは、Twitterみたいなソーシャルネットワーキングサービス・・・ではなく、
AWSの **SimpleNotificationService** のことです。
SNSでSMSを送る(噛みそう)機能を触ったので、設定方法などを記録します。

## IAMユーザの追加
まずはユーザを作成。
SNSのフルアクセス権限を付与します。

### ユーザー詳細の設定

このページの右上にある「ユーザを追加」ボタンを押下
https://us-east-1.console.aws.amazon.com/iamv2/home?region=us-east-1#/users

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284077/ff0e1717-5812-a4e0-e92c-85895c754cdf.png)

– ユーザ名: 適当なユーザ名
– SWS認証情報タイプ: アクセスキー -プログラムによるアクセス

ユーザ名は会社のルールに則るのがいいと思います。

元記事を表示

コミットリント(commitlint)を導入し、コミットメッセージをlintする

## はじめに
開発現場ではコミットメッセージが適当だと、後から見た時や他の人が見た時に???になって、開発のネックになってしまう事はままあると思う。今回はコミットメッセージが各人でバラバラで独自的なものにならないように、git hooksでコミットメッセージにリントを書ける方法についていきたいと思う。

## ひとまずやってみる
私はNode.js(Javascript)で開発している事もあり、[commitlint](https://github.com/conventional-changelog/commitlint)を利用する。

設定方法等は[Guide: Local setup](https://commitlint.js.org/#/guides-local-setup?id=guide-local-setup)に書かれているのでそちらを参照して行っていくが、私はgit hooksを設定するのに[simple-git-hooks](https://github.com/toplenboren/simple-git-hooks)を使う事にした。

※simple-git-

元記事を表示

ESLint・Prettierを併用してコードスタイルのチェックはPrettierにまかせてみた

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

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

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

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

https://github.com/yuta-katayama-23/node-express/commit/929ea5ef3e5e027c5f30b58f4d03ee9d6c09760d

元記事を表示

Lambda Node ランタイム v12 → v14 update 備忘録

# はじめに
Lambda Node ランタイム v12が2022/04でサポートが終わるため、v14に更新しないといけないProjectが存在していました。
その際の手順として備忘録を残したいと思います。
ただ、本記事ではv14へ上げるというよりは、ランタイムのバージョンを上げる際にどういうことをやったのかを記載したいと思います。

# 環境
– ローカル環境端末
– macOS Big Sur
– AWS SAM CLI 
– Docker
– Lambda ソース環境
– AWS SAM で構築を実施
– ApiGateway & Lambda(TypeScript)を構築
– TypeScriptのためwebpackで実行ソースを作成(トランスコンパイル)している
– 利用しているnodeModules群はすべて最新のVersionに更新済み

# 手順
私の環境での対応としては以下の流れで実施しました。
1. AWS SAM Template.yamlでNodeRuntimeのVersionを更新
2. AWSアカウントにデプロイを実施
3. AW

元記事を表示

【nodenv】BUILD FAILED (OS X 11.3.1 using node-build 4.9.43) のエラーが出た場合

M1 mac で `nodenv install x.x.x` をしようとしたときに以下のエラーがでたので、その対処方法です。

“`bash
$ nodenv install 8.16.0
Downloading node-v8.16.0.tar.gz…
-> https://nodejs.org/dist/v8.16.0/node-v8.16.0.tar.gz

WARNING: node-v8.16.0 is past its end of life and is now unsupported.
It no longer receives bug fixes or security updates.

Installing node-v8.16.0…

BUILD FAILED (OS X 11.3.1 using node-build 4.9.43)

Inspect or clean up the working tree at /var/folders/7k/4bcqvyqn59ngsw819tg29xd00000gn/T/node-build.20220530

元記事を表示

Discord.jsを利用してインスタグラムのDMにメッセージを送信する

# 初めに
レポートの合間の息抜きに組んでみました
概要としたらDiscordでユーザーIDとパスワードを入力したら自動でログインをしてインスタにDMするようになっています
詳しい説明は暇になってから書きます

# 必要なもの
* 技術
* Discord.js(v13)
* Node.js v16
* dotenv(必要な人のみ)
* instagram-private-api
`npm i instagram-private-api Discord.js@13 dotenv`
# コード
“`js
/* —————————————————————————-
* “THE BEER-WARE LICENSE” (Revision 42):
* ぶり wrote this file. As long as you retain this notice you
* can do whatever you want with this stuff. If we meet some d

元記事を表示

express・sequelize でJWT認証を実装した

ExpressでJWT認証を実装しようとしたが、DB接続まで行っている記事が見当たらなかったので勉強も兼ねて作成しました。

あと、筆者がPHP(Laravel)に慣れているためrouterとcontrollerを分けて書いています
## 参考記事
https://qiita.com/zaburo/items/985db4ccbb0cdb5c9095

https://qiita.com/sukeo-sukeo/items/6e86906d88e1110bbb36

https://qiita.com/a1k4r/items/82c62b7783837090ef27

[Node.js] SequelizeでMySQLを利用する – その2「SELECT文編」


## 準備

### 環境構築

省略

### 使用ライブラリ

– express
– sequelize
– dotenv(hash時のsaltとToken secretを.envに記述するため)
– bcrypt-nodejs
– jsonwebtoken

## 実装

### モデル・マイグレーション

元記事を表示

【個人開発】No.1企業を共有するサービスを作成してみた~企画からリリースまで~

# この記事について
個人的にWebブラウザで動作するアプリを作成しましたので、その開発の記録を書きたいと思います。

# 対象読者
* これから個人開発で何かアプリを作りたい方
* 個人開発における開発の進め方や技術選定などの方法について情報収集したい方
* 0からソフトウェア開発を行う方

# 今回作成したブラウザアプリ
* 名前:F1C(**F**ukui’s No.**1** **C**ompany = 福井のNo.1企業共有アプリ)
* 概要:福井に拠点のあるNo.1企業を共有し、また他ユーザの共有内容を閲覧できるサービス
* アプリURL:https://f1c.jp.net/home
* ソースURL:https://github.com/shin4488/no1-company-share
* 開発期間:約1.5か月

# このアプリを作成した背景
* 私自身、福井での転職を考えており企業を探しておりましたが、「そもそも福井にはどのような企業があり、それぞれの企業がどのような特徴を持っているのか」といった情報を得るのが大変だと感じたことがこのアプリを作成したきっかけです

元記事を表示

【自分用】Nodeパッケージの公開、更新コマンド

# 参考

– [初めてのnpm パッケージ公開 – Qiita](https://qiita.com/TsutomuNakamura/items/f943e0490d509f128ae2)
– [npm publishする時の注意点 – Qiita](https://qiita.com/__mick/items/e92e3fc001994ca9dfaf)

# 初回のみ

– ソースコード、 README.md などを更新したコミットを追加
– TODO、ビルド、CIなどの必要な準備を行う
– `npm init -y` でGitの情報を package.json に追加
– `git push`
– 初回バージョンのソースコードをプッシュするため
– package.json の更新をプッシュするため
– `git tag v1.0.0` で初回バージョンのタグを追加
– `git push origin tags/v1.0.0` でタグをプッシュ
– `npm publish ./`

# 更新

– ソースコード、 README.md などを更新したコミットを追加

元記事を表示

NestJS のチュートリアル、nest new ~ 基本的なCRUD の作成まで

# プロジェクトの作成

## NestJS CLI の導入

先ず、NestJS CLI をインストールします。

“`zsh
npm i -g @nestjs/cli
“`

## nest new の実行

次に、nest new コマンドを使い、プロジェクトを作成します。
今回は、tutorial-app というプロジェクト名を指定しています。

“`zsh
nest new tutorial-app
“`

実行すると、使用するパッケージマネージャーを聞かれます。
今回は、npm を選択します。
![Untitled.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/684930/77359090-571c-f21c-8848-893498f5a529.png)

# CRUD の実装

## nest g コマンド の実行

nest g コマンドを実行し、BooksModule、BooksController、BooksService を作成します。

“`zsh
nest g mo

元記事を表示

NestJS のチュートリアル、TypeORM を使ったCRUD の実装

# DB の環境構築
## docker-compose.yml

docker-compose.yml を作成し、コンテナの設定を記述します。

“`yml:docker-compose.yml
version: ‘3.7’
services:
mysql:
image: mysql:5.7
container_name: mysql
ports:
– ‘3306:3306’
volumes:
– /var/lib/mysql
environment:
MYSQL_ROOT_PASSWORD: password
MYSQL_DATABASE: develop
MYSQL_USER: develop
MYSQL_PASSWORD: password
hostname: mysql
restart: always
user: root
“`

## コンテナ起動

コマンドを実行しコンテナを起動します。
“`bash
docker-compos

元記事を表示

NestJS のチュートリアル、テーブルのリレーションを作る

# UserTable の準備
User Entity を追加し、Book Entity とリレーションを作ります。
まずは、ID と 名前だけをもつUser Entity を準備し、対応するUserTable を作成します。

## UserEntity を作成する
src/entities ディレクトリにuser.entity.ts を作成し、User Entity を設定します。

“`ts:src/entities/user.entity.ts
import { Column, Entity, PrimaryGeneratedColumn } from ‘typeorm’;

@Entity()
export class User {
@PrimaryGeneratedColumn()
id: string;

@Column()
name: string;

@Column()
createdAt: string;

@Column()
updatedAt: string;
}
“`

## マイグレーション の実行
一度アプリを起動し、e

元記事を表示

yarn でワークスペースにパッケージを追加できなくなった

表題の解決法メモ

“`sh
$ yarn workspace hoge add fuga
error An unexpected error occurred: “expected workspace package to exist for \”@babel/helpers\””.
“`

`@babel/helpers` の部分は人によって違うと思うが、ワークスペースにパッケージを追加しようとすると `expected workspace package to exist for …` のエラーが出て追加できなくなってしまった
[issue](https://github.com/yarnpkg/yarn/issues/7807)としても挙げられている

# 環境

– yarn 1.22.18
– node v16.14.0
– M1 MacBook Pro
– macOS Monterey 12.4

# 原因

https://github.com/yarnpkg/yarn/issues/7807#issuecomment-623223536
複数のパッケージが依存

元記事を表示

【自分用メモ】Laravel 環境構築してみた

# Composerのインストール
https://getcomposer.org/

1. Donwloadを選択
1. Composer-Setup.exeをダウンロード&インストール
# Laravelの環境構築
ターミナルで、`composer create-project laravel/laravel (プロジェクト名)`を実行。
# 作成したプロジェクトディレクトリに移動
`cd (プロジェクト名)`を実行。
# 簡易サーバーの確認
1. `php artisan serve`を実行
1. URLを開く。トップページが表示されればOK。
# node.jsのダウンロード&インストール
https://nodejs.org/ja/

1. バージョン確認`node -v`
1. エラーが出る場合はVS Codeを再起動してみる。
# タイムゾーン設定と言語設定
config\app.phpで以下の通り変更。
‘timezone’ => ‘Asia/Tokyo’,
‘locale’ => ‘ja’,
# デバッグバーのインストール
`composer require barr

元記事を表示

ChromebookにNode.js開発環境を構築する

## 概要
最近出先でプログラミングをする機会が増えてきたのですが、
持ち運びのできるまともな開発環境がMac mini(持ち運び?)くらいしかありませんでした。
そこそこ安価でそこそこ動作してくれるノートPCで簡単な開発環境を構築しようと考えて実行した、その備忘録です。

続き:[chromebookへのphp開発環境構築(Xampp)](https://qiita.com/kamekame85/items/2c00aa9766a0c406d3cc)

## 完成形
この記事の通りに作業すれば、以下の環境が整います
– Visual Studio Code
– Node.js
– crostini日本語対応
– ~~Docker~~(別記事に切り分けたので今はなし)

## chromebookである理由
モノはいいようではありますが・・・
– 安価
– Linuxベースであるため同価格帯で他OSより動作が軽い
– Chrome・Android・Linuxのアプリが標準で使用でき、汎用性が高い
– サンドボックス環境でアプリが動作するためセキュリティが強固

## 目次
1. Li

元記事を表示

OTHERカテゴリの最新記事