npm を Ubuntu にインストールして Hello World する

# npm を Ubuntu にインストールして Hello World する

こんにちは、@studio_meowtoon です。今回は、WSL の Ubuntu 24.04 に npm をインストールする手順を紹介します。
![npm_on_ubuntu.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3206449/a86fc5be-8805-15ac-62c0-df50191c5e02.png)

## 目的

Windows 11 の Linux でクラウド開発します。

こちらから記事の一覧がご覧いただけます。

https://qiita.com/studio_meowtoon/items/6119ab05d8b13527efd8 
 
## 実現すること

Windows 11 の WSL Ubuntu 24.04 に npm をインストールします。

## 技術トピック

### npm とは？  

<details>
<summary>こちらを展開してご覧いただけます。</summary>

### [npm](https://docs.npmjs.com/about-npm)

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

</details>

## 開発環境

+ Windows 11 Home 23H2 を使用しています。  

:::note info
[WSL](https://learn.microsoft.com/ja-jp/windows/wsl/about) の Ubuntu を操作していきますので macOS の方も参考にして頂けます。  
:::

<details>

WSL (Microsoft Store アプリ版) [※ こちらの関連記事からインストール方法をご確認いただけます](https://qiita.com/studio_meowtoon/items/cd0c4a607d451dbf5430)

```sh
> wsl --version
WSL バージョン: 2.2.4.0
カーネル バージョン: 5.15.153.1-2
WSLg バージョン: 1.0.61
```

Ubuntu [※ こちらの関連記事からインストール方法をご確認いただけます](https://qiita.com/studio_meowtoon/items/cd0c4a607d451dbf5430)

```sh
$ lsb_release -a
No LSB modules are available.
Distributor ID: Ubuntu
Description:    Ubuntu 24.04 LTS
Release:        24.04
Codename:       noble
```

</details>

:::note warn
この記事では基本的に **Ubuntu のターミナルで操作**を行います。**Vim を使用してコピペする方法**を初めて学ぶ人のために、以下の記事で手順を紹介しています。ぜひ挑戦してみてください。
:::

https://qiita.com/studio_meowtoon/items/7771ad48676926e41463

## npm のインストールと設定

存在を確認します。

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

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

Node.js の公式パッケージリポジトリを追加します。(※最新のLTS)

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

:::note warn
パッケージリポジトリを削除する場合は以下のコマンドを使用します。
:::

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

インストールします。

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

バーションを確認します。

```sh
$ node -v
v20.15.1
```

```sh
$ npm -v
10.7.0
```

:::note info
ここまでの手順で、**Ubuntu** に **npm** をインストールすることができました。
:::

## 作成する Web アプリケーションの仕様

|No|エンドポイント|HTTPメソッド|MIME タイプ|
|:--|:--|:--|:--|
|1|/|GET|text/html|

<details>
<summary>説明を開きます。</summary>

:::note info
Web ブラウザで **/** という**エンドポイント**にアクセスすると、**HTML ファイル**がレスポンスされるシンプルな Web アプリを実装します。
:::

</details>

## Hello World を表示する手順

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

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

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

### JS ファイルの作成

**index.js** JS ファイルを作成します。

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

ファイルの内容

```js:src/index.js
const hello = () => {
    const app = document.querySelector("#app");
    const h1 = document.createElement("h1");
    h1.textContent = "Hello World!";
    app.appendChild(h1);
}

hello();
```

### HTML ファイルの作成

**index.html** ファイルを作成します。

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

ファイルの内容

```html:src/index.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Vanilla JS</title>
    </head>
    <body>
        <div id="app"></div>
    </body>
</html>
```

### webpack 設定の作成

**webpack.config.js** ファイルを作成します。

```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',
    }),
  ],
};
```

### ビルドと実行

プロジェクトの初期化を行います。

```sh
$ npm init -y
```

**package.json** を修正します。

```sh
$ 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
```

起動します。
※ ctrl + C で停止します。

```sh
$ npm run start
```

以下の URL で Web ブラウザが立ち上がります。

```sh
http://localhost:3000/
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3206449/dd1de34d-3357-b0bc-db5e-2a5ce800e571.png)

:::note info
ここまでの作業で、Web ブラウザに **Hello World!** が表示されました。
:::

## 何が起こりましたか？

:::note warn
**npm** は、**index.js** と **index.html** ファイルを以下のように**変換**して **dist** ディレクトリにファイルを**出力**しました。今回の記事の例ではシンプルな構成なので変化は少ないですが、規模の大きいプロジェクトでは npm は必要とされます。
:::

```sh
$ sudo apt update
$ sudo apt install tree
$ tree -I node_modules
.
├── dist
│   ├── index.html
│   └── main.js
├── package-lock.json
├── package.json
├── src
│   ├── index.html
│   └── index.js
└── webpack.config.js
```

```js:dist/main.js
/*
 * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
 * This devtool is neither made for production nor for readable output files.
 * It uses "eval()" calls to create a separate source file in the browser devtools.
 * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
 * or disable the default devtool with "devtool: false".
 * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
 */
/******/ (() => { // webpackBootstrap
/******/ 	var __webpack_modules__ = ({

/***/ "./src/index.js":
/*!**********************!*\
  !*** ./src/index.js ***!
  \**********************/
/***/ (() => {

eval("const hello = () => {\n    const app = document.querySelector(\"#app\");\n    const h1 = document.createElement(\"h1\");\n    h1.textContent = \"Hello World!\";\n    app.appendChild(h1);\n}\n\nhello();\n\n\n//# sourceURL=webpack://frontend/./src/index.js?");

/***/ })

/******/ 	});
/************************************************************************/
/******/ 	
/******/ 	// startup
/******/ 	// Load entry module and return exports
/******/ 	// This entry module can't be inlined because the eval devtool is used.
/******/ 	var __webpack_exports__ = {};
/******/ 	__webpack_modules__["./src/index.js"]();
/******/ 	
/******/ })()
;
```

```html:dist/index.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Vanilla JS</title>
    <script defer src="main.js"></script></head>
    <body>
        <div id="app"></div>
    </body>
</html>
```

## まとめ

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

:::note warn
**Ubuntu** を使うと **Linux の知識**も身に付きます。最初は難しく感じるかもしれませんが、徐々に進めていけば自信を持って書けるようになります。
:::

どうでしたか？ npm の操作には、この他にもたくさんのコマンドがあります。みなさんも少しづつ試してみてください。今後も開発環境などを紹介していきますので、ぜひお楽しみにしてください。