npm の導入と Hello World!

# npm の導入と Hello World!

## 目的

npm で JavaScript プログラムをビルドする最小限の環境を構築します。  

## 実現すること

ローカル環境 (Ubuntu) に JavaScript のプログラムをビルドするツール [npm](https://www.npmjs.com/) をインストールします。  

## 前提知識として  

+ npm (Node Package Manager) は、Node.js 用のパッケージマネージャーであり、Node.js アプリケーションで使用するパッケージを管理するためのツールです。
+ Node.js は JavaScript の実行環境であり、サーバーサイドの JavaScript アプリケーションを実行します。
+ また、フロントエンドの開発においては npm を使用して依存関係の管理やビルドツールの実行などを行います。
    + これらのツールは、Node.js 実行環境で実行されます。
    + つまり、フロントエンドの開発において Node.js が必要とされるのはこれらのツールを使用するためであり、WEBブラウザ上で Node.js が実行されるわけでありません。


## 開発環境

+ Windows 11 Home 22H2 を使用しています。  
+ [WSL](https://learn.microsoft.com/ja-jp/windows/wsl/about) の Ubuntu を操作していきますので macOS の方も参考にして頂けます。  

<details>

WSL (Microsoft Store アプリ版)

```sh
> wsl --version
WSL バージョン: 1.0.3.0
カーネル バージョン: 5.15.79.1
WSLg バージョン: 1.0.47
```

Ubuntu

```sh
$ lsb_release -a
No LSB modules are available.
Distributor ID: Ubuntu
Description:    Ubuntu 22.04.1 LTS
Release:        22.04
```

</details>

※ この記事では基本的に Ubuntu のターミナルで操作を行います。

## npm インストール

存在確認

```sh
$ node -v
コマンド 'node' が見つかりません。次の方法でインストールできます:
※ 以下省略
```

```sh
$ npm -v
コマンド 'npm' が見つかりません。次の方法でインストールできます:
※ 以下省略
```

Node.js の公式パッケージリポジトリを追加

```sh
$ curl -fsSL https://deb.nodesource.com/setup_19.x | sudo -E bash -
```

※ パッケージリポジトリを削除する場合

```sh
$ sudo rm /etc/apt/sources.list.d/nodesource.list
```

インストール

```sh
$ sudo apt update
$ sudo apt install nodejs
```

確認

```sh
$ node -v
v19.6.1
```

```sh
$ npm -v
9.4.0
```

## "Hello World" を表示する手順

### プロジェクトフォルダの作成

※ ~/tmp/frontend をプロジェクトフォルダとします。  

```sh
$ cd ~
$ mkdir -p tmp/frontend
$ cd ~/tmp/frontend
```

### JS ファイルの作成

```sh
$ mkdir -p src
$ vim src/index.js
```

ファイルの内容

```js:index.js
const hello = () => {
    const app = document.querySelector("#app");
    app.textContent = "Hello, World!";
}

hello();
```

### HTML ファイルの作成

ファイルの内容

```sh
$ vim src/index.html
```

```html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Index</title>
    </head>
    <body>
        <div id="app"></div>
    </body>
</html>
```

### webpack の設定の作成

```sh
$ vim webpack.config.js
```

ファイルの内容

```js:webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
  devServer: {
    static: {
      directory: path.join(__dirname, 'dist'),
    }
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      filename: 'index.html',
    }),
  ],
};
```

### npm の操作

初期化と修正

```sh
$ npm init -y
$ vim package.json
```

ファイルの内容

```sh:package.json
{
  "name": "frontend",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "build": "webpack",
    "start": "webpack serve --port 3000 --mode development --open "
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}
```

ライブラリインストール

```sh
$ npm install webpack webpack-cli html-webpack-plugin --save-dev
```

ビルド

```sh
$ npm run build
```

確認用のWEBサーバー起動 (Ctrl + C で停止)

```sh
$ npm run start
```

以下の URL でWEBブラウザが立ち上がる

```sh
http://localhost:3000/
```

WEBブラウザに "Hello, World!" が表示されました。

## まとめ

+ Ubuntu に Node.js 環境と npm をインストールして、最小構成のフロントエンド JavaScript 開発環境を構築することが出来ました。