npm の導入と Hello World!

目的

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

実現すること

ローカル環境 (Ubuntu) に JavaScript のプログラムをビルドするツール npm をインストールします。

前提知識として

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 の Ubuntu を操作していきますので macOS の方も参考にして頂けます。

WSL (Microsoft Store アプリ版)

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

Ubuntu

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

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

npm インストール

存在確認

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

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

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

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

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

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

インストール

$ sudo apt update
$ sudo apt install nodejs

確認

$ node -v
v19.6.1

$ npm -v
9.4.0

"Hello World" を表示する手順

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

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

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

JS ファイルの作成

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

ファイルの内容

index.js

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

hello();

HTML ファイルの作成

ファイルの内容

$ vim src/index.html

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

webpack の設定の作成

$ vim webpack.config.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 の操作

初期化と修正

$ npm init -y
$ vim package.json

ファイルの内容

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"
}

ライブラリインストール

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

ビルド

$ npm run build

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

$ npm run start

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

http://localhost:3000/

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

まとめ

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