- 1. Node.jsプロジェクトでの環境変数の扱い方
- 2. 旅した国・街をマップで表示できるサイトを作った。
- 3. [nodejs] 軽量でパワフル: Dayjsによる効率的な日付管理
- 4. HackTheBox Codify WriteUp
- 5. 【Go / Protobuf / Node.js】gRPC の双方向ストリーミングを利用してチャットを実装する
- 6. nodejsのAPIをGraphQLで実装してみた
- 7. WSL:Ubuntu環境でnodeのアップデートで詰まった
- 8. 【aws-cdk-examples】API GatewayからLambda経由でDynamoDBを参照/更新する
- 9. nodenvでnodeのバージョンを管理する方法
- 10. ESモジュールとCommonモジュール:Node.jsにおける2つのモジュールシステム
- 11. npmとyarn:JavaScriptのパッケージ管理ツールの比較
- 12. TypeScriptをVSCodeのデバッグ機能で動かす環境構築 + ESLint, Prettier
- 13. [axios] APIのリクエストにインターバルを設ける
- 14. redoclyで作成したAPI仕様書からモックを作る
- 15. Playwright – FullPage指定のスクリーンショット撮影で意図しないマウスオーバー効果・ブラウザサイズ変更が起こってしまう
- 16. Node.js のサポート期間を8年に延ばせるひとつのやり方
- 17. Node.js 利用可能なメモリ量
- 18. 【TypeScript】yarn4 + VSCodeでts2307が一生出続ける問題の解消法
- 19. Hubot Slack アダプターや RTM API から移行先について
- 20. 拡張子がmjsとjsのファイルの違いについて
Node.jsプロジェクトでの環境変数の扱い方
# はじめに
Node.jsプロジェクトにおいて、環境変数の管理は非常に重要です。このブログでは、.env ファイルと globals.ts モジュールを使用して、環境変数を効率的に管理する方法について説明します。アプリケーションの設定情報をコードから分離することは、セキュリティのベストプラクティスとされています。特に、データベースの接続情報やAPIキーなどの機密情報は、公開されるべきではありません。.envファイルを使用することで、これらの情報を安全に管理し、異なる環境(開発、ステージング、本番)でのアプリケーションの動作を容易に切り替えることができます。
# ステップ 1: 環境変数の設定
.envファイルは、キーと値のペアで構成され、アプリケーションが実行される環境に応じて異なる設定を提供します。dotenvライブラリを使用することで、これらの環境変数をアプリケーションの起動時に読み込み、プロセスの環境変数として利用できるようになります。
“`.env
# okta credentials
SSH_USERNAME=”ssh-username”
SSH_PASSWORD=
旅した国・街をマップで表示できるサイトを作った。
行った国や街を登録してマップに表示できるサイトを作ったので、紹介します。
https://bokenmap.com
## イントロ
今回作ったのは、行ったことのある国と街を登録して、地図に表示することができるWebアプリケーションです。使い方としては、プロフィールページのリンクをSNSに載せたり、地図をiframeタグで他のサイトに埋め込むことを想定しています。
プロフィールページの具体例
[https://bokenmap.com/hikaru](https://bokenmap.com/hikaru)![](https://storage.googleapis.com/zenn-user-upload/1a137814df90-20240408.jpg)
*こういう感じの地図が作れる*[自分の個人ホームページに埋め込んでみた例](https://hikaruimai.vercel.app/travel)
## 課題
僕は旅行が好きなんですが、ウェブ上で「行ったことのある国」をパッと見せたい時に毎回困ります。ブログやSNSなどで自分の旅の経歴みたいなものを公開し
[nodejs] 軽量でパワフル: Dayjsによる効率的な日付管理
# はじめに
日付と時刻の操作は、Web開発において一般的かつ重要なタスクです。JavaScriptの標準Dateオブジェクトは使いづらいと感じる人も多く、これを解決するためのライブラリがいくつか存在します。Dayjsは、そのようなライブラリの中でも特に軽量でありながら、必要十分な機能を提供することで人気を博しています。
# Dayjsの特徴
1. 軽量性: Dayjsは非常に小さいサイズで、パフォーマンスに影響を与えることなくプロジェクトに組み込むことができます
2. 使いやすさ: Dayjsは一連の操作はチェインできます
3. 不変性: Dayjsは操作を行っても元のインスタンスを変更せず、新しいインスタンスを返すため、バグの発生を防ぎやすいです
4. 拡張性: プラグインを通じて機能を拡張でき、必要な機能を柔軟に追加することができます
5. 国際化対応: 多言語に対応しており、グローバルなプロジェクトにも適しています
# 基本的な使用方法
### Dayjsのインストール
“`
npm install dayjs
“`
### 日付の作成、フォーマット変更
“`typ
HackTheBox Codify WriteUp
今回はHackTheBoxのEasyマシン「Codify」のWriteUpです!
名前からしてコードを書いて攻略していくような感じになるのでしょうか…![スクリーンショット 2024-04-07 15.35.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1664764/f1f8966b-edfc-bcfc-0651-d56af756bf1c.png)
グラフはしっかりEasyマシンのようなグラフになっていますね。
評価も高いので楽しみです!攻略目指して頑張ります〜!HackTheBoxって何?という方は下記の記事を見てみてください!一緒にハッキングしましょう〜!
https://qiita.com/WhizOwl/items/165783694cb4791cff34
また、HackTheBoxで学習する上で役にたつサイトやツールをまとめている記事もあるので、合わせてみてみてください!
https://qiita.com/Perplex/items/30f949fe261f56a
【Go / Protobuf / Node.js】gRPC の双方向ストリーミングを利用してチャットを実装する
※ この記事は 2022年10月 に作成したものを一部改稿したものです。
**gRPC** は RPC (Remote Procedure Call) の一種で、Google が自社サービス向けに開発したものをオープンソース化した技術です。
RPC はあるコンピュータ上で動作するプログラムから別の場所にあるプログラムの処理を実行する手法で、1970年代から存在する考え方です。gRPC では、HTTP/2 の「ストリーム」を利用してサーバ – クライアント間で接続を確立することで、HTTP/1.1 のように1つのリクエストに対して1つのレスポンスを返すだけでなく、複数のリクエスト・レスポンスを並行して処理することができます。
そこで本記事では、gRPC の双方向ストリーミングを利用して CLI 上で動作する簡易的なチャットアプリケーションを実装してみようと思います。
## gRPC の特徴
実装に入る前に、APIの構築に最もよく使われる REST との対比を交えて gRPC の特徴について見ていきます。まず通信方式については、REST は先述の通り HTTP/1.1 が主流
nodejsのAPIをGraphQLで実装してみた
## はじめに
GraphQLというものをなんとなく知っていたものの、ちゃんと理解できてなかったなと思い
今回簡単な実装を交えて勉強しました。## GraphQLってなに?
GraphQLは、Web APIのためのクエリ言語であり、データ操作と取得のためのランタイムです。
Facebookによって2015年に開発され、以降、データを効率的に取得する方法として急速に普及しています。
GraphQLの主な特徴は、クライアントが必要とするデータの形をクエリで明確に指定できる点にあります。
これにより、過剰または不足なデータの取得を避け、アプリケーションのパフォーマンスを最適化できます。### Restとの違いは?
下記の違いがあります。
| 特徴 | GraphQL | REST |
|————–|—————————————–|—————
WSL:Ubuntu環境でnodeのアップデートで詰まった
## 環境
osはwindows11でwsl2を用いて、Ubuntuを使用しています。## 警告文が表示される
“`terminal
npm v10.5.1 does not support Node.js v18.16.0. This version of npm supports the following node versions: `^18.17.0 || >=20.5.0`. You can find the latest version at https://nodejs.org/.
“`
要約すると、
あなたのnpm v10.5.1はnode v18.16.0をサポートしてないよ。
だから、nodeのバージョンをv18.17.0かv20.5.0以上にアップグレードしてください。
って感じです。## アップデートに詰まる
じゃあ、アップデートすれば終わりやんと思って
“`terminal
sudo apt update && sudo apt upgrade
node -v
sudo apt-get install nodejs
node -v
“`
で解
【aws-cdk-examples】API GatewayからLambda経由でDynamoDBを参照/更新する
# これは何をしたくて書いたもの?
私個人として、現在業務でアプリ開発に利用しているReact NativeをAWSと連携させたいと考えているため、そのための学習の一環としてReact Nativeの通信先のREST APIを提供できるAPI Gatewayを構築して、その挙動を確認してみることにしました。
CDKには[aws-cdk-examples](https://github.com/aws-samples/aws-cdk-examples/)というサンプルプロジェクトをまとめたリポジトリがあります。今回はその中の[api-cors-lambda-crud-dynamodb](https://github.com/aws-samples/aws-cdk-examples/tree/main/typescript/api-cors-lambda-crud-dynamodb/)というサンプルを実際にデプロイして動かしてみます。# 構成
`cdk deploy`で構築できるリソースは、大まかには以下の画像の通りです。構築されるリソースの詳細は、[index.ts](https:/
nodenvでnodeのバージョンを管理する方法
今回はnode.jsのバージョンをnodenvで管理することで、node.jsのバージョンを簡単に切り替えることができるため紹介します。
:::note info
【前提知識】
– vim操作ができる
– .zshrcファイルが既に作られている
:::# brewコマンドが使えるか確認する
以下のコマンドを実行しbrewコマンドが使用できるか確認を行う。
“`terminal
brew -v
“`ここで、`command not found: brew`と表示された場合は以下のコマンドを実行してください。
【公式サイト】
https://brew.sh/
“`terminal
/bin/bash -c “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)”
“`以下のコマンドを実行しバージョンが表示されるか確認する
“`terminal
brew -v
“`:::note warn
MacOSを使用しておりAppleシリコン(M1など)の場合は以
ESモジュールとCommonモジュール:Node.jsにおける2つのモジュールシステム
## **はじめに**
Node.jsにおいて、モジュールシステムは重要な役割を果たしています。現在、Node.jsではCommonモジュールとESモジュールという2つのモジュールシステムが存在しています。本記事では、これらのモジュールシステムの概要と違いについて解説します。
## **Commonモジュール**
Commonモジュールは、Node.js誕生当時から使用されていたモジュールシステムです。モジュールをインポートする際には、`require`関数を使用し、エクスポートする際には`module.exports`を使用します。
“`javascript
// モジュールのインポート
const myModule = require(‘./myModule’);// モジュールのエクスポート
module.exports = {
// エクスポートする内容
};
“`
## ESモジュール
ESモジュールは、現在のスタンダードなモジュールシステムであり、多くの開発現場で使用されています。ESモジュールは、ECMAScript標準のモジュールシステムです。モ
npmとyarn:JavaScriptのパッケージ管理ツールの比較
# はじめに
Node.jsの開発において、外部のライブラリやパッケージを利用することは非常に一般的です。これらのパッケージを効率的に管理するために、パッケージ管理ツールが使用されます。Node.jsにおける代表的なパッケージ管理ツールとして、npmとyarnが挙げられます。本記事では、これらのツールの概要と違いについて解説します。
## パッケージ管理ツールとは
Node.jsは必要最低限な機能のみを提供し、ユーザーが必要なパッケージを各自でインストールする方式を採用しています。これにより、Node.jsの容量を抑えつつ、柔軟性を維持することができます。npmとyarnは、これらのパッケージを管理するために使用される代表的なツールであり、開発者はプロジェクトの要件に応じて適切なツールを選択することが重要です。
そして、パッケージ管理ツールとは、特定のシステムや言語環境において、パッケージを管理するためのツールです。パッケージとは、様々なシーンで活用するために作成されたプログラムの集合体のことを指します。パッケージ管理ツールは以下のような機能を提供します:
– パッケージの導
TypeScriptをVSCodeのデバッグ機能で動かす環境構築 + ESLint, Prettier
先人達の記事を参考にしながら、TypeScriptを手軽にVSCodeで動かすための個人的な最適解ができたので紹介する。
ESLint, Prettierも入れて実用的な環境構築となっている。「TypescriptとかESLintとかのセットアップは別にいいから、**VSCodeの設定**が知りたい!」
という人は [👇🏽VSCodeのデバッグ設定](#vscodeのデバッグ設定) にジャンプ!## 構築する環境
– VSCodeの **デバッグ機能**(F5押下) で **TypeScript** を動かせる。
– 内部的にTSCコマンドでビルドされる。
– **ESLint** と **Prettier** を入れる。下記は対象外とする。
– ESBuildなどは入れない。シンプルなTSCコマンドビルド環境。
– Vue.jsなどブラウザ環境ではない。TSからビルドされたJSを **Node.js** 上で動かす。:::note info
執筆時点(2024年3月)のバージョンで説明する。
– typescript: `^5.4.2`
– eslint: `
[axios] APIのリクエストにインターバルを設ける
## はじめに
APIのリクエスト処理を作成した際に、ステータスコードが429(Too Many Requests)で返ってきてヒヤっとした経験はないでしょうか?
サードパーティのAPIを利用する場合には、プロバイダがAPIのリクエスト頻度を制限していることが一般的です(例えば、1秒間に10回までなど)
上記の理由で、リクエスト頻度を意識する必要がありますNode.js には、AxiosというHTTPクライアントライブラリがあります
https://axios-http.com/
本記事では、Axiosにリクエスト間隔を設定する方法の一例を紹介したいと思います!
## ゴール
axiosを使って、APIのリクエスト間隔を制御できる## 環境情報
| 項目 | バージョン |
| :——–: | :——— |
| Node.js | 20.11.1 |
| TypeScript | 5.4.3 |
| Axios | 1.6.8 |## 方針
以下の方針で実装をしていきます
– axi
redoclyで作成したAPI仕様書からモックを作る
# はじめに
API仕様書を作成する手段としてよく使われるものに、以下があると思います。– API Blueprint + aglio
– Swagger
– redocly
– Excel昨年「API Blueprint + aglio」で作られたAPI仕様書をredoclyで作り直しました。
作り直した理由は以下です。
– 「API Blueprint + aglio」の仕様書の記法が好きではなかった
– YAMLを使ったAPI仕様書がイケイケな雰囲気になっている
– 「API Blueprint + aglio」の場合は、API仕様書を作成して終わり
– 「リクエストパラメタ一覧を書く + JSONのサンプルを書く」という手間が煩わしい作り直す中で、便利だった機能なので紹介しようと思います。
この記事を見てredoclyを選択するきっかけになっていただけたらと思います。
# 注意
この記事では– redoclyの使い方
– stoplight studioの使い方などは説明しません。
ご注意ください。# 完成品
### OK
リク
Playwright – FullPage指定のスクリーンショット撮影で意図しないマウスオーバー効果・ブラウザサイズ変更が起こってしまう
Playwrightの操作動画を記録してみて分かったのだが、Playwright は fullPage のスクリーンショット撮影の時、ブラウザサイズを変更することでスクリーンショット撮影を実現してそうな気がする
このため
– 意図しないブラウザサイズ変更がおこなわれる
– 副作用でカーソル位置が変わってしまうという現象が起きていそうだった
カーソル位置の問題に関しては、スクリーンショット撮影前にカーソル位置を左上に移動させておくことで、問題を抑止しやすくなるかもしれない
“`js
await page.mouse.move(0, 0)await page.screenshot({
path: `foo.png`,
fullPage: true,
})
“`# チャットメンバー募集
何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。
https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ
# プロフィール・経歴
https://github.com/Yu
Node.js のサポート期間を8年に延ばせるひとつのやり方
先日、「[Javaエンジニアのための Nodejs/Nuxt3入門](https://speakerdeck.com/hidekatsu_izuno/nuxt3ru-men)」という資料を公開したのですが、Node.js がすでに業務システムを作るのに十分な環境が整っています。しかし、どう考えても導入を進めるためのネックになっている項目があります。それは LTS (長期サポート)の短さです。
Node.js のランタイムは偶数バージョンが LTS となっており、リリースの半年後に長期サポートが始まり 30 カ月後にはセキュリティ・パッチの提供が受けられなくなります。実はこの 30 カ月という期間は、PHP(3年) や Ruby(3 年 3カ月) といった他の言語ランタイムに比べて特別短いわけではないですし、JavaScript の言語としての安定性を考えれば、気軽にメジャーバージョンアップをすればいいと思うのですが、これがこと業務システムとなると大問題になります。
業務システムの開発に長く携わっていると、多くの日本企業が EOL(製品のライフタイム終了)を非常に気にしていることに気
Node.js 利用可能なメモリ量
–max-old-space-size で設定する
“`
NODE_OPTIONS=”–max-old-space-size=999″
“`
デフォルト値、1400MB らしい
デフォルトで、積んでるメモリの50%までらしい。–max-old-space-sizeを設定しても、積んでるメモリによって制限されるっぽい。
384MBのコンテナに–max-old-space-size=300を設定したが、231BMしか使えないぽかった。“`.ts
const v8 = require(‘v8’);const heapStatistics = v8.getHeapStatistics();
const totalHeapSizeMB = (heapStatistics.total_available_size / 1024 / 1024).toFixed(2);console.log(`Total available heap size: ${totalHeapSizeMB} MB`)
“`
【TypeScript】yarn4 + VSCodeでts2307が一生出続ける問題の解消法
執筆時点で最新版のモジュールをガチャガチャかき集めたVue.jsプロジェクトを作成しようとしたところ、一瞬つまずいたのでここに解決方法を書きしたためておきます。
# やること
– TypeScriptで記述し、Node.jsランタイムに突っ込み、Yarn v4で依存関係を管理しているようなプロジェクトで、表題の問題を解決する
– `tsconfig.json`を極力いじらず、解決したい
– 解決方法は下記2通りのどっちでもOK
1. `.yarnrc.yml`に1行書いて、Yarn v2以降特有のパッケージ依存解決方法をYarn v1と同じやり方に設定する
2. VSCode用のYarn Editor SDKを設定して、VSCodeがインストールされたモジュールを認識できるようにする# 問題とその原因
## 問題
> TS2307: Cannot find module or its corresponding type declarations
このエラーがVSCodeだけで出現し続けてわずらわしいというのが問題です。画像を見ると「???」となる
Hubot Slack アダプターや RTM API から移行先について
こんにちは、Slack の[公式 SDK 開発](https://github.com/slackapi)と日本の Developer Relations を担当している瀬良 (@seratch) と申します :wave:
今週、Slack プラットフォームチームより以下のアナウンスメントが出ました。
https://api.slack.com/changelog/2024-04-discontinuing-new-creation-of-classic-slack-apps-and-custom-bots
要点をまとめると以下の三点となります。
* 2024 年 6 月 4 日以降、”classic app” と呼ばれる [RTM API](https://api.slack.com/legacy/rtm) や旧式の bot scope を持つアプリは新規で作成できなくなります
* これまでに作成されたアプリは引き続き動作しますが、RTM から [イベント API](https://api.slack.com/apis/connections/events-api) への早め
拡張子がmjsとjsのファイルの違いについて
Nodeのバージョン18以上のLambdaでは、デフォルトファイルの拡張子が`mjs`に変更されています。LambdaのNodeのバージョンを更新するにあたり、`mjs`ファイルと`js`ファイルとの違いについて調査しました。結論として、拡張子の違いはJavaScriptのモジュールシステムの違いに由来しています。以下、詳細を解説します。
## 拡張子が.mjsと.jsのファイルの違い
### 前提
JavaScriptには2つの主要なモジュールシステムが存在します。
– CommonJs
– ECMAScript(ES Module, ES2015)### モジュールシステムと拡張子
– CommonJs: cjs(あまり一般的ではありません)
– ES Module: mjs拡張子が`js`の場合は、`package.json`内の`type`フィールドで指定されたモジュールシステムに従います。`type`は`”commonjs”`または`”module”`のいずれかを指定できます。指定がない場合、デフォルトはCommonJSとなります。
## 実験
### 拡張子が.