Node.js関連のことを調べてみた

DockerでNode.jsを使ってVue.js勉強環境を作って公式チュートリアルをやってみる

# はじめに
普段はバックエンドでPHPを使って仕事をしています。CakePHP歴1年、Laravel歴1ヶ月ほど。仕事ではほんの少しのJavaScript、JQueryをメンテナンスする、というほどのJavaScript歴です。

会社のとあるプロジェクトのバックエンド側で、VueでやるのかReactでやるのか、派閥が軽く分かれて争いが始まりそう。私はReactもVueも全くわからないですが、それぞれがどんなものか触っていこうと思います。

最小限のDockerfile、docker-compose.yamlでNode.jsを使える環境を作り、Vue.jsを公式チュートリアルに沿って学習するまでの流れです。

MacでVSCodeを使っています。

# Vue.jsを学ぶ環境の選択

https://zenn.dev/comm_vue_nuxt/articles/ways-of-vuejs-setup-app

こちらの記事にもいろいろな環境が紹介されていますが、とにかくシンプルにいきたい。調べた結果、DockerでNode.jsを使うのが一番簡単にできる気がしたので、あまり他のやり

Gemini API – node.js/チャット

# 概要
(日記)前回

https://qiita.com/shokkaa/items/0e257a5e9c069402c80c

の続き。現状JavaやKotlinのSDKが提供されていない※ので、Node.jsで試す。
※Android向けはある

# 環境
– Ubuntu 24.04
– Node.js v22.4.1

# Project準備
https://qiita.com/shokkaa/items/6f83b3a107006ccc598b

# generateContent() ―― 一問一答
“`ts:src/generateContent.ts
import { GoogleGenerativeAI } from “@google/generative-ai”

async function main() {
const key = process.env.GOOGLE_API_KEY ?? “”
const genAI = new GoogleGenerativeAI(key)
const model = genAI.getGen

child_process.spawnを理解する

# はじめに
Node.jsのコードにおいてchild_processモジュールを使用する機会があり、その中でもspawnを理解したいと思い、こちらの記事を記載しました。

# child_processモジュールとは
Node.jsでサブプロセス（子プロセス）を作成し、メインのNode.jsプロセスから独立してコマンドやプログラムを実行するための機能を提供します。

# child_process.spawn
[こちらの公式ドキュメント](https://nodejs.org/api/child_process.html#child_processspawncommand-args-options)に記載のある通り、child_process.spawnの書き方としては、child_process.spawn(command[, args][, options])というように、実行するコマンド、配列の中に引数、オプションの順番で記載します。

## サンプルコード

“`javascript:spawn.js
const { spawn } = require(“child_pro

Node.jsのストリーム（Stream）を理解する

# はじめに
Node.jsを利用していますが、重要な概念としてストリーム（Stream）が出てきます。何となくでしか分かっていないストリームのコードを、さらに理解しようと思いこの記事を書きました。

# ストリームとは何か
読み込む時や書き込む時にデータが細切れ（chunk)に流れてきて、全てのデータの読み込み or 書き込みを終了するのを待つ必要がないことです。そのため、全てのデータをメモリに保存する必要がありません。
例えばファイルからデータをストリームを利用して読み込む時に、少しデータを読んで何らかの作業（データ書き出しなど）をして、メモリを開放します。その後、また少しデータを読んでメモリを開放し、、、の繰り返しを続け、最後までデータを読み込みます。これがストリームです。
YoutubeやNetflixもストリーミングサービスと言われており、同じ原理ですね。すべての動画データが読み込まれる前に、視聴を開始することが出来ます。

## ストリームのメリット
– メモリの効率的な利用
– 時間の効率的な利用（全てのデータの読み込みなどを待つ必要がない、例えばNetflixですぐに視

Node.jsについて勉強したのでまとめてみた。

## 勉強のきっかけ

普段からフロントエンド、バックエンド両方の開発でお世話になっているNode.jsですが、サーバー環境を簡単に作れるライブラリー程度に考えて、あまり理解せずに使ってきたので、良い機会だと思い勉強することにしました。ここでは私が気づいたポイントをシェアします。
## Node.jsとは？JavaScriptのフロントからサーバーサイドへの拡張

Node.jsは、**JavaScriptをサーバーサイドで動作させるためのランタイム環境**です。もともとJavaScriptは、ユーザーのブラウザ上で動作し、動的なWebページを構築するために使われていました。しかし、Node.jsの登場により、サーバー上でもJavaScriptを実行できるようになり、開発者はフロントエンドとバックエンドの両方をJavaScriptで書けるようになりました。

Node.js以前はクライアントサイドではJavaScript、サーバーサイドではPHPやRubyを使って開発するのが一般的でしたが、Node.jsを使うことで**JavaScript一つでフルスタック開発**が可能となりました。

🔰TypeScriptの環境構築をまとめてみた

## TypeScriptでコーティングするために必要な環境構築についてまとめていきます。
※Udemyの内容を噛み砕いて私なりにまとめました。

### TypeScript（TS）とは
JavaScript（JS）のスーパーセット（上位互換）
* 型を指定することができ堅牢なコードを書ける
* 古いWebページにも対応できる
などなど、さまざまな便利な機能が搭載されています。

TSで書いたコードはJSにコンパイル（変換）され、JSで動的なWebページを実現します。

### 環境構築
1. VS-Codeで開発用フォルダを開く
1. ターミナルを開く `⌘ + J`
1. packege.jsonファイルの作成　`npm init`
1. 3実行時に設定についていくつか問われるが、全てEnterでOK
1. lite-serverをpackege.jsonに追加 `npm install dev-server lite-server`
1. packege.jsonの`scripts`オブジェクトに手動で`”start”: “lite-server”`を追加
* オブジェ

Array.fromAsync()とPromise.all()の違い【JavaScript】

ようわからんかったのでメモ
# TL;DR

– Array.fromAsync()は順次実行
– Promise.all()は同時実行

“`javascript
const sleep = delay => new Promise(resolve => setTimeout(resolve, delay))

console.time()
await Array.fromAsync([200, 100, 300], sleep)
console.timeEnd()
// elapsed: 600ms

console.time()
await Promise.all([200, 100, 300].map(sleep))
console.timeEnd()
// elapsed: 300ms
“`

https://qiita.com/mellbrother/items/715ff5dce5845381eeee#comment-202a45c5d467a5dd67dc

cc @juner

## 戻り値

どちらも解決した値が入ってくる。HTTPリクエストを投げたいときに

ポート3000を占領する不届き者を倒せ！WindowsユーザーのためのローカルURL奪還作戦

こんにちは、みんな。今日はローカル開発で頻繁に遭遇する問題について話すわ。特に、`http://localhost:3000/`を使おうとしたら、何者かに占領されていた時の対処法よ。

ふんっ、大切なポート3000が使えないなんて、本当に迷惑よね。でも心配しないで。この記事を読めば、あなたもその謎を解き明かせるわ。Windows PCでポート3000を占領している犯人を特定して、安全に解放するまでの手順を解説するわ。

## 1. コマンドプロンプトを開く
まずは、Windows PCでコマンドプロンプトを開くわよ。

1. Windowsキー + Rを押して「ファイル名を指定して実行」ウィンドウを開く
2. `cmd`と入力して実行

これでコマンドプロンプトが開くわ。準備はいい？次に進むわよ。

## 2. 占領者を調査する
次に、ポート3000を占領している不届き者を特定するわ。以下のコマンドを入力して：

“`bash
netstat -ano | findstr :3000
“`

これで、ポート3000を使っているプロセスのリストが表示されるはずよ。例えば：

“

CLIのプログレスバーを作ってみた

## はじめに

皆さん、こんにちは。株式会社BTMの風間と申します。

今回はCLIで動くプログレスバーを作成してみました。
実際に作ったのはこちら。


コンソール（ターミナル）で、yum、apt、brewなどを利用したパッケージのインストールをされたことがある方は、こういった進行状況の表示をよく見ていると思います。

この進行状況の表示方法に以前から興味があったので、実際に作ってみて、使った方法をまとめてみました。

:::note info
本記事で紹介する実装・実行は以下の環境にて行いました。
・Windows11
・WSL2（Ubuntu 22.04.3 LTS）
・Node.js 20.11.1
・Git Bash（推奨ウインドウサイズ Columns:80 x Rows:20）
:::

## 実

node.jsのDocker環境を作成する

### はじめに

こんにちは,Mottyです。今回はnode.jsのDocker環境を作っていく手順を説明します。

### Dockerで環境構築するためのモチベーション

Dockerではコンテナ内にNode.jsと依存ライブラリがすべて閉じ込められているので、どの環境でも一貫して動する。開発者のローカル環境に依存せず、すべての依存関係が同一バージョンで実行されるため、”It works on my machine”問題を防ぐことができる、とのこと。

### 構築方法

WSL上のどこかのプロジェクトのルートディレクトリに以下２つを作成
・Dockerfile
・package.json

### Dockerfileの構築方法

“`Dockerfile
# ベースイメージとしてNode.jsの公式イメージを使用
FROM node:16

# 作業ディレクトリを設定
WORKDIR /usr/src/app

# package.jsonをコピーして依存関係をインストール
COPY package*.json ./
RUN npm install

#コンテナを終了させな

「現代魔術JS×Web設計」のイメージと概念〜ビルド編〜

# はじめに
半年前ぐらい前にアニメ「葬送のフリーレン」を見て、この際にふとエンジニアとして見過ごせない概念がありました。
**「魔術はイメージの世界」**
私はジュニアプログラマーながら激しく同意したのを覚えてます。
Web設計はどんどん肥大化と複雑化していくもので、それに抗うための技術が発生するなどして…中々イメージが捉えづらいと思います。
本記事はそんな捉えづらい概念をご紹介していければと思います。

:::note info
初投稿のジュニアプログラマーです。
ご指摘がありましたら、ビシバシお願いします。
:::

# Node.js


Node.jsとは…単にGoogle Chromeをサーバーサイドで動かしてしまおうという技術です。
今までJavaScriptはブラウザサイドで動くものとして扱ってきました。
しか

ガチ初学者の落書き　ノード

多分いろいろ間違っている覚書です。

# ターミナルよく使うコマンド
ls:ディレクトリ一覧表示
pwd:今いるパス表示
cd:ディレクトリ移動
mkdir:ディレクトリの作成
touch:ファイルの作成

# Nodeのターミナル操作
jsファイルの結果の出力:　node jsファイル名

## npm
– npm:パッケージ(他の人が作った便利ツール）が使えるようになるもの
– ノードモジュール:パッケージをインストールしたときにそのパッケージと、依存関係のあるパッケージを格納するディレクトリ
– package.json:自分のプロジェクトでインストールしたパッケージ情報などが記載されたjsonファイル
– package-lock.json:インストールしたパッケージの情報が記載されたjsonファイル

“npm init“:プロジェクト初期化。package.jsonとjsファイルが作成される。
“npm install パッケージ“:ノードモジュールにパッケージがインストールされる。package-lock.jsonも。
“npm install“:packag

Web Application開発者向けロードマップ

# 開発者ロードマップ

以下をベースにウェブアプリケーション開発者として
プロダクトリリースに必要な習得しておきたい知識や技術

– [GitHub](https://github.co.jp/)
– [TypeScript](https://www.typescriptlang.org/)
– [React](https://legacy.reactjs.org/)
– [Node.js](https://nodejs.jp/)
– [AWS](https://aws.amazon.com/jp/)

言語をTypeScript統一することでFE、BE、DB間での型を一貫できる構成となり、
継続的に安定したWebシステム開発ができるのと枯れた技術になりつつある（情報が豊富）なため、
不変な概念も多く、早々にパラダイムシフトが起きないと考えているため。

## プロダクトリリース棲み分け

プロトタイプ、MVP、プラットフォームの順

– FEだけ無料Github Pages：[viteでReact×TypeScript環境を爆速で作る最小版](https://qiita.com/t

サーバーをまたいでPHPからnode.jsを動かすサンプルコード

## 備忘録メモとして
レンタルサーバーに設置したフロントエンドから、別サーバー（VSP）に置いてあるNode.jsを動かしてデータを返すサンプルコード

テスト環境：XAMPP

### ファイル構成
“`
サーバー1（レンタルサーバー）
C:\xampp\htdocs\test1
call_run_node.php
index.php

サーバー2（VPSサーバー）
C:\xampp\htdocs\test2
run_node.php
script.js
“`
サンプルでは特に外部モジュールを使用していませんが、必要なモジュールがあればサーバー２側にインストールします。

## サーバー１
index.php：フロントエンド表示部分と実行ボタン
“`php