JavaScript React Webアプリで Hello World する

# JavaScript React Webアプリで Hello World する

こんにちは、@studio_meowtoon です。今回は、WSL の Ubuntu 22.04 で JavaScript React Webアプリケーションを作成して Hello World を出力する方法を紹介します。
![react_on_ubuntu.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3206449/406f2e9a-eaeb-4175-3dbb-fedfcf36465e.png)

## 目的

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

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

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

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

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

## 技術トピック

### React とは？  

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

### [React (リアクト)](https://ja.reactjs.org/)

React は、Meta (旧称 Facebook 社)が開発した JavaScript ライブラリであり、ユーザーインターフェースの構築に使用されます。

|内容|
|:--|
|React は、MVC アーキテクチャーの View 層を担当し、再利用可能なコンポーネントを作成することができます。|
|React は、コンポーネントの状態の変更に応じて、自動的に UI を更新することができます。|
|React は、React Native を使用することで、iOS や Android などのモバイルプラットフォームにもアプリを開発することができます。|
|React は、その柔軟性と高速性から、現在、Web 開発において最も人気のあるフロントエンドライブラリの1つとなっています。|

</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-react をプロジェクトフォルダとします。  

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

### JS ファイルの作成

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

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

ファイルの内容

```jsx:src/index.js
import React from 'react';
import ReactDOM from 'react-dom';

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

const App = () => {
  return <h1>{hello()}</h1>;
};

ReactDOM.render(<App />, document.getElementById("app"));
```

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

:::note info

|内容|
|:--|
|React では、react と react-dom パッケージをインポートし、ReactDOM.render() メソッドを使用して、コンポーネントを DOM にレンダリングします。|
|上記の例では、App コンポーネントを ReactDOM.render() メソッドに渡して、#app 要素にレンダリングしています。|
|App コンポーネントでは、hello() 関数を呼び出して、\<h1\> 要素の中にテキストを表示する方法を示しています。|
|また、JSX 構文を使用して、HTML のようなマークアップを書くことができます。

:::

</details>

### HTML ファイルの作成

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

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

ファイルの内容

```html:src/index.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>React</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: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
          },
        },
      },
    ],
  },
  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/index.js を指定しています。|
|output|バンドルされたファイルが出力される場所と名前を指定します。ここでは、dist フォルダー内にbundle.js という名前のファイルを出力しています。|
|module|Webpack がソースコードを解釈するために使用するローダーを指定しています。ここでは、babel-loader を使用して、JSX 構文を通常の JavaScript に変換するように指定しています。|
|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-react",
  "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 \
    react react-dom \
    babel-loader @babel/core @babel/preset-env @babel/preset-react \
    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/e6d52a34-a82b-71f8-ca43-b49fd0095779.png)

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

## まとめ

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

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

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

## 関連記事

#### JavaScript Vue.js

https://qiita.com/studio_meowtoon/items/2381f271f88f783d1321

#### C# ASP.NET Core Blazor

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