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

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

こんにちは、@studio_meowtoon です。今回は、WSL の Ubuntu 22.04 で JavaScript Vue.js Webアプリケーションを作成して Hello World を出力する方法を紹介します。
![vuejs_on_ubuntu.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3206449/0057dee4-d3ba-ceef-af32-a5383c183112.png)

## 目的

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

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

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

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

:::note alert
この記事では、**学習目的**で手作業で**最小構成**のプロジェクトを作成しています。ご注意ください。より詳しいプロジェクトの作成方法については[公式の手順](https://ja.vuejs.org/guide/introduction.html)がご確認いただけます。
:::

## 技術トピック

### Vue.js とは？  

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

### [Vue.js (ビュージェイエス)](https://ja.vuejs.org/guide/introduction.html)

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

|内容|
|:--|
|プログレッシブフレームワークとは、ライブラリとしても、フルスケールのフレームワークとしても使用でき、他のライブラリや既存のプロジェクトにも容易に組み込めることを意味しています。|
|Vue.js は、コンポーネントアーキテクチャに基づいており、複雑な UI を容易に作成できます。また、仮想 DOM (Virtual DOM) を使用することで、パフォーマンスの向上にも貢献しています。|
|Vue.js は、規模の大小を問わず、多くのウェブ開発者に愛用されています。|

</details>

## 開発環境

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

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

<details>

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

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

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

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

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

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

```sh
$ npm -v
9.5.1
```

</details>

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

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

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

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

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

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

</details>

## Hello World を表示する手順

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

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

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

### JS ファイルの作成

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

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

ファイルの内容

```js:src/main.js
import { createApp, h } from 'vue';

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

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

app.mount("#app");
```

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

:::note info

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

</details>

<details>
<summary>このように記述することも可能です。</summary>

```js:src/main.js
import { createApp } from 'vue';

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

app.mount("#app");
```

</details>

### HTML ファイルの作成

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

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

ファイルの内容

```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** ファイルを作成します。

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

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

:::note info
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 ファイルを生成するように指定しています。|

:::

</details>

### ビルドと実行

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

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

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

```sh
$ vim package.json
```

ファイルの内容

```sh: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"
}
```

ライブラリをインストールします。

```sh
$ npm install \
    vue webpack webpack-cli html-webpack-plugin webpack-dev-server \
    --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/527e88c7-e738-bdb9-0ba2-52bbb0d71363.png)

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

## まとめ

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

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

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

## 関連記事

#### JavaScript React

https://qiita.com/studio_meowtoon/items/c4f635b470981a8cdecb

#### C# ASP.NET Core Blazor

https://qiita.com/studio_meowtoon/items/16d5d58e758beed8dd27