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

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