JavaScript Vue.js Webアプリで Hello World する

こんにちは、@studio_meowtoon です。今回は、WSL の Ubuntu 22.04 で JavaScript Vue.js Webアプリケーションを作成して Hello World を出力する方法を紹介します。

目的

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

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

実現すること

ローカル環境の Ubuntu で、JavaScript Vue.js Web アプリを起動します。

この記事では、学習目的で手作業で最小構成のプロジェクトを作成しています。ご注意ください。より詳しいプロジェクトの作成方法については公式の手順がご確認いただけます。

技術トピック

Vue.js とは？

こちらを展開してご覧いただけます。

Vue.js (ビュージェイエス)

Vue.js は、JavaScript フレームワークの1つで、ユーザーインターフェイスを構築するためのプログレッシブフレームワークです。

内容
プログレッシブフレームワークとは、ライブラリとしても、フルスケールのフレームワークとしても使用でき、他のライブラリや既存のプロジェクトにも容易に組み込めることを意味しています。
Vue.js は、コンポーネントアーキテクチャに基づいており、複雑な UI を容易に作成できます。また、仮想 DOM (Virtual DOM) を使用することで、パフォーマンスの向上にも貢献しています。
Vue.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

npm ※ こちらの関連記事からインストール方法をご確認いただけます

$ node -v
v19.8.1

$ npm -v
9.5.1

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

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

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

説明を開きます。

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

Hello World を表示する手順

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

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

$ mkdir -p ~/tmp/hello-vuejs
$ cd ~/tmp/hello-vuejs

JS ファイルの作成

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

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

ファイルの内容

src/main.js

import { createApp, h } from 'vue';

const hello = () => "Hello World!";

const app = createApp({
  render() {
    return h("h1", hello());
  }
});

app.mount("#app");

説明を開きます。

内容
このコードは、Vue 3 の createApp 関数を使用してアプリケーションを作成し、アプリケーション内で render メソッドを定義しています。
render メソッドは、仮想 DOM のツリーを作成するために使用されます。
この例では、h ヘルパー関数を使用して、仮想 DOM ツリーのルート要素である h1 要素を作成しています。
また、h 関数の第二引数に hello() 関数を指定して、h1 要素のテキストコンテンツに "Hello World!" をセットしています。
最後に、 app インスタンスを DOM の #app 要素にマウントしています。

このように記述することも可能です。

src/main.js

import { createApp } from 'vue';

const app = createApp({
  template: "<h1>Hello World</h1>"
});

app.mount("#app");

HTML ファイルの作成

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

$ vim src/index.html

ファイルの内容

src/index.html

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

webpack 設定の作成

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

$ vim webpack.config.js

ファイルの内容

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

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

説明を開きます。

Webpack の設定ファイルを示しています。Webpack は、アプリケーション内の依存関係を解決し、それらを1つのバンドルにまとめます。

各オブジェクトについて説明します。

フィールド	内容
mode	ビルドモードを指定します。ここでは、開発モードを指定しています。
entry	Webpack がアプリケーションをバンドルするときに最初に読み込むファイルを指定します。ここでは、src/main.js を指定しています。
output	バンドルされたファイルが出力される場所と名前を指定します。ここでは、dist フォルダー内にbundle.js という名前のファイルを出力しています。
resolve	Webpack が解決するファイルの種類を指定します。ここでは、Vue.js を ES モジュールの形式で使用するために、vue を vue/dist/vue.esm-bundler.js にエイリアスしています。
devServer	Webpack 開発サーバーを構成するための設定です。ここでは、Webpack 開発サーバーが dist フォルダーを基準として動作するように設定しています。
plugins	Webpack に追加の機能を提供するプラグインを指定します。ここでは、HTMLWebpackPlugin を使用して、Webpack に src/index.html をベースにした HTML ファイルを生成するように指定しています。

ビルドと実行

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

$ npm init -y

package.json を修正します。

$ vim package.json

ファイルの内容

package.json

{
  "name": "hello-vuejs",
  "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 \
    vue webpack webpack-cli html-webpack-plugin webpack-dev-server \
    --save-dev

ビルドします。

$ npm run build

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

$ npm run start

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

http://localhost:3000/

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

まとめ

Ubuntu に構築したシンプルな Node.js、npm 開発環境で、JavaScript Vue.js Web アプリを実行することができました。

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

どうでしたか？ WSL Ubuntu で、JavaScript Vue.js Web アプリケーションを手軽に起動することができます。ぜひお試しください。今後も Node.js、npm の開発環境などを紹介していきますので、ぜひお楽しみにしてください。

関連記事

JavaScript React

C# ASP.NET Core Blazor