Webアプリ開発 React.js フロントエンド環境 Part(1) 3つ並べゲーム(1)

Javascript
2022.01.15

はじめに

こんにちわ、swim-loverです。 初心者向けのWebアプリ開発記事です。フロントエンド環境にReact.jsを使用しています。この記事を通じて、エクセルファイルで管理している、一年間の通じてのイベントの出席簿をWebブラウザから入力する、入力内容を表示、ファイルへ保存させたいというものです。もちろん、出席簿アプリはこれまで多数あると思いますが、それぞれの用途の応じて、カスタマイズをできるようにしたいためです。

GASのGoogleフォームを活用すれば、出席簿も比較的簡単にできそうですが、GoogleDriveを使用する制約があります。個人、組織のWebサーバー上で出席簿アプリを実装し、管理できるようにするのが今回の目的です。

Webアプリ開発環境

Webアプリの開発環境には、フロントエンド側とバックエンド側で別れているようです。フロントエンド側は、Webページ等のユーザーの目に触れる部分を受け持つ。バックエンド側は、ユーザーの入力内容に応じで、データベースへの読み書き、その他処理を行う。といった理解で、まずは進めることにします。少し検索しただけでも、Webアプリフレームワークのおすすめがたくさん出来てきます。

今回、フロントエンド側は、React.js(Java Scriptベース）、バックエンド側として、Django(Pythonベース）に触れてみることにしました。GASで軽くJavaScriptに触れている、また、Pythonも多少慣れていることから、これらのフレームワークを選びました。

React.js

簡単に動作を学べるサンプル（Hello Worldのような）があるか調べてみましたが、検索結果にこれといったものがヒットしません。どうも勝手が違うようです。そこでまずはReact.js公式サイトを眺めてみることにしました。スタートガイドにはReact.jsでできることが解説されていますが、初めてのフロントエンドを初見で理解するのは、難しい印象でした。

チュートリアルに進んでいきます。前提知識はHTMLとJavaScriptとのことです。本格的にこれらの言語を使ったことはありませんが、「使いながら覚える」をコンセプトとして、先に進んでみます。

HTML と JavaScript に多少慣れていることを想定していますが、他のプログラミング言語を使ってきた人でも進めていくことはできるはずです。また、関数、オブジェクト、配列、あるいは（相対的には重要ではありませんが）クラスといったプログラミングにおける概念について、馴染みがあることを想定しています。

https://ja.reactjs.org/tutorial/tutorial.html

チュートリアルでは、三つ目並べゲームが例となっています。そのままブラウザで開きます。

React.Component 派生Class

三つ並べゲームのJSタブのコードを確認すると、以下のようになっています。

class Square extends React.Component {
  render() {
    return (
      <button className="square">
        {/* TODO */}
      </button>
    );
  }
}

クラスの概念は、C++で多少の知識はあるので特に困ることはなさそうです。JavaScriptでは、派生クラスを、’extends’で表記するようです。render()は、メソッドですが、特に何もしていないようです。

一方、Boardクラスは、render()メソッドに処理が実装されています。<div>~</div>の意味は後回し視するとして、this.renderSquare()で、renderSquare(i)を9回呼び出しています。

チュートリアルでは、このrenderSquare(i)にコードを追加しています。<Squre …/>の表記だけで、BoardクラスからSqureクラスにデータを渡すことができるとは信じられません。

class Board extends React.Component {
  renderSquare(i) {
//    return <Square />;
    return <Square value={i}/>;//Pass the value to Square class
  }

  render() {
    const status = 'Next player: X';

    return (
      <div>
        <div className="status">{status}</div>
        <div className="board-row">
          {this.renderSquare(0)}
          {this.renderSquare(1)}
          {this.renderSquare(2)}
        </div>
        <div className="board-row">
          {this.renderSquare(3)}
          {this.renderSquare(4)}
          {this.renderSquare(5)}
        </div>
        <div className="board-row">
          {this.renderSquare(6)}
          {this.renderSquare(7)}
          {this.renderSquare(8)}
        </div>
      </div>
    );
  }
}

また、Squreクラスのrender()にも処理を書き込みました。

class Square extends React.Component {
  render() {
    return (
      <button className="square">
//        {/* TODO */}
          {this.props.value}//view data value
      </button>
    );
  }
}

すると、ブラウザの下部の図が更新され、数値が表示されました。９個のマスの位置をどこで定義しているのかなど、色々疑問が湧きますが、数値がSquareクラスのrender()に渡ったことは確かなようです。データを渡す仕組みをpropsというものらしいです。このあたりは慣れが必要なのかもしれません。

まとめ

今回、初めてWebアプリ関連の記事を書いてみました。開発環境は結局何？という素朴な疑問があります。また、フロントエンド側は、組み込み技術者からすると、最も遠い位置にある技術かもしれませんが、多くの人の目に触れる技術であることは確かだと思います。Web関連の投稿は、自作Webアプリを作るまで続けたいと思います。

コメント

タイトルとURLをコピーしました