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 開発環境を構築することが出来ました。