JavaScript React Webアプリで Hello World する

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

目的

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

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

実現すること

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

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

技術トピック

React とは？

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

React (リアクト)

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

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

開発環境

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

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

JS ファイルの作成

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

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

ファイルの内容

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"));

説明を開きます。

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

HTML ファイルの作成

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

$ vim src/index.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 ファイルを作成します。

$ 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: {
    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',
    })
  ]
};

説明を開きます。

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

ビルドと実行

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

$ npm init -y

package.json を修正します。

$ vim package.json

ファイルの内容

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

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

$ 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

ビルドします。

$ npm run build

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

$ npm run start

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

http://localhost:3000/

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

まとめ

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

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

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

関連記事

JavaScript Vue.js

C# ASP.NET Core Blazor