B　L　O　G

【1分で実装】XserverでReact.jsを使ってみる【レンタルサーバー】

最終更新日：

JavaScriptのイマドキのライブラリといえばやはり「React.js」でしょう。jQueryなどの古いライブラリもまだ広く使われているわけですが、1つのページの中に複数の機能を持たせたり要素を動的に動かすようなWebアプリケーションの開発ではReact.jsの方が圧倒的に使い勝手が良いと言われます。

そこで今回、Xserver等のレンタルサーバーにReact.jsを導入して、WordPressなどの環境下で動くようなWebアプリを作る方法を紹介します。

React.jsのココがすごい！

フロントエンド系に携わっている人や、もしかしたら一部のブロガーの方なんかも聞いたことがあるかもしれない「React.js」ですが、一体どこがすごいのでしょうか。

HTMLの実体をJavaScript側に置ける

React.jsの特徴の説明においてはいろいろな表現が使われますが、私がまとめるとしたらこうなりました。

HTML要素のオブジェクト化

HTMLコードの中には「<div>」などを含む様々なタグがあり、それらは「HTML要素」と呼ばれています。　こういったHTML要素をJavaScriptによって操作することで要素が動く動的なWebページが作れるわけですが、HTMLの記法はJavaScriptの記法とはまた別の物なので、HTML要素を直接JavaScriptで操作するのは面倒くさいという問題がありました。

そこでHTML要素をJavaScript内で「オブジェクト化」してしまうことで、HTML要素をJavaScriptの記法に合わせて扱うことができるようになります。

これを実現したのがjQueryです。生のJavaScriptでもHTML要素を変数として扱えたりはしましたが、jQueryというライブラリによってさらに高機能なオブジェクトになり、DOMに対する操作が行いやすくなりました。

HTMLオブジェクトの仮想化

そしてReact.jsでもHTML要素が変数のように扱えるようになって非常に楽になったわけですが、それはjQueryも同じです。　では両者の違いは一体何なのでしょうか？

jquery react違い

図を作ってみました。　jQueryではHTML要素自体を直接オブジェクトとして定義し、それを直接関数などで扱うことによってリアルタイムで要素を動かしたりデザインを変更するなどの処理をしてきました。

対してReact.jsでは基本的にHTML要素自体を直接扱うのではなく、プログラム上で定義した仮想のHTML要素をJavaScript上でいじります。　そして変更点などが随時HTML上に反映されるという仕組みになっています。

そのため直接要素を扱うjQueryとは異なり、間接的に要素を動かしていることになるのですが、こうすることで見かけ上、JavaScript上ですべてのDOMの操作を仮想的に行うことができるようになり、非常に高速にDOM操作を行えたり複雑な動的Webページを作成することができます。

ここでめっちゃ変な例えなのですが、

目の前にたくさん積み木があったとして、その積み木を自分の目で見ながら自分の手で組みなおすのがjQueryを含めた従来のJavaScript上でのDOM操作だとして、

React.jsでは目を閉じて頭の中で積み木を組みなおすことを想像するだけで、現実世界でも勝手に積み木が動いてくれる。そんな感じです。

自分の目で確認しながら手を動かすよりも、頭の中で想像する方が圧倒的に速いし、積み木という情報が扱いやすいですよね。ちょっと違うかもしれませんが、そういう感じです。

コンポーネント指向

1つのページで完結するようなWebアプリを作ろうと思ったとき、恐らく複数の機能を1つのページに入れ込むことになります。

そこでReact.jsを使えば、機能ごとに「コンポーネント」と呼ばれる部品のようなものを作ることができ、それを組み合わせることで多機能なページを作ることができるのです。

JavaScriptの処理自体はクラスや関数などで分ければある種コンポーネント化ができるわけですが、React.jsではDOMまでもコンポーネントごとに構成していくので、HTMLコードも含めて完全に機能と機能を分離することができるので非常に見やすくなるうえに開発がしやすいです。

とはいってもコンポーネントの実体はJavaScriptの関数（function）やクラス（class）であり、別にReact独自の考え方というわけでもないですね。　そこに仮想DOMという性質が入ることで完全なるコンポーネント化が実現できている、って感じでしょうか。

React.jsをレンタルサーバーに導入する方法

他にもReact.jsのすごいところはいろいろあるのですが、今紹介したものだけでもう使いたくなった方は多いのではないでしょうか。

でもReact.jsとかってどうせサーバーの設定をしたりNode.jsをインストールしなければならなくてHTMLコード上ですぐに実装できないんでしょ…　って思ったそこのあなた。

別にReact.jsはフレームワークでもなく、ただのJavaScriptのライブラリなのでHTML上ですぐに実装できます。

もちろん管理者権限のないレンタルサーバーやローカル環境などでもすぐに実装できます。

React.jsを使うためのスクリプトを読み込む

基本的にReact.js内ではJavaScriptの記述ができるわけですが、仮想DOMをより簡単に扱うための特別な記法というものがあったりします。JSX記法と呼ばれるものですね。

こちらを利用するためには専用のスクリプトを読み込む必要があります。読み込むだけです。

<html>
  <body>
    <div id="app"></div><!-- HTMLコードを反映させるための印のような要素 -->
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script src="sample.jsx" type="text/jsx"></script><!-- 自分で作成したJSXファイル -->
  </body>
</html>

一番上でReactのモジュールを読み込んでいます。また、仮想DOMを扱うためのモジュールも読み込んでいて、さらに下の方で「babel」というJSX記法に対応させるためのコンパイラのようなものを読み込んでいます。

babelを使うことでJSX記法などをブラウザが解釈できるJavaScriptに自動的にコンパイル（厳密にはトランスコンパイル・トランスパイル）してくれるので、安心してコーディングすることができます。

あとは処理を行うための自前のJSXファイルを読み込むことで、もうHTMLの記述は終わりです。

あ、忘れていました。HTMLを描画するための印となる要素としてappというIDを持ったdiv要素を一つ、マークアップしておきましょう。

JSXファイルを作る

TSXという、TypeScriptを用いたさらに高レベルなファイルも扱うことができるのですが、ここでは多くの人が見慣れているであろうJavaScriptを使ったJSXファイルを作っていきます。

class WebIntro extends React.Component{
    constructor(props){ //このコンポーネントを呼び出したタイミングで実行される関数
        super(props);
        this.intro = "のWebサイト紹介"; //クラス内で使える変数の定義
        this.desc_style = {color:"red"}; //CSS情報を連想配列形式で格納
        this.state = { //リアルタイムでDOMに反映させることができるような変数
            tail:"です",
            list:1
        }    
        setInterval(() => {
            this.setState((state) => ({tail:state.tail == "です" ? "よ！" : "です"}));
        },500); //500ミリ秒に一回、この処理が実行される
    }

    addList = () => { //state.listの値を1増やす関数
        const current = this.state.list;
        const next_num = current + 1;
        this.setState((state) => ({list:next_num}));
    }    

    render(){
        return <div>
                    <div>
                        <h1>{this.props.title}</h1>
                        <p style={this.desc_style}>{this.props.description}</p>
                        <p>{this.intro + this.state.tail}</p>
                    </div>
                    <button onClick={this.addList}>ボタン</button>
                    <ul>{[...Array(this.state.list)].map((_,i) => <li key={i}>リスト{i}番目</li>)}</ul>
                </div>;
    }
}
const app = document.getElementById('app'); //HTMLコードを書き出す位置の印となる要素を取得
ReactDOM.render(<WebIntro title="BableTech" description="コンピュータ情報メディア" />,app); //コンポーネント呼び出し

私もまだ今日Reactを学び始めたばかりなので初歩的なことしかできないのですが、とりあえずそれっぽいものを作ってみました。

サンプルページ

訳の分からないWebアプリですが、いろいろな要素を詰め込んでいます。詳しくは以下のサイト等で学んでみてください！

https://www.tohoho-web.com/ex/react.html

WebIntroというコンポーネント（実体はクラス）をtitleとdescriptionというプロパティ（props）を与えることで呼び出しています。

クラス内での処理では、受け取ったプロパティをクラス内変数（this.props.~）として扱うことができ、上のコードではrender()というレンダリングするときに呼び出される関数の中で、直接仮想DOMの中にtitleやdescriptionをぶち込んでいたりします。

このようなコンポーネントを、あたかも「title,description属性を持っているWebIntroというHTMLのタグ」があるかのような形で呼び出すことができていて、非常に面白いです。

これが究極の仮想DOMであり、超高機能なHTMLタグをその場で自作することができる感じですね。

あとはコンストラクタの中でsetInterval()という、指定した時間間隔で処理を実行し続けてくれる関数を実行しています。　この関数の中ではstate.tailという変数に、「です」と「よ！」の二つの値を交互に格納していて（三項演算子）

このstate.tailが仮想DOMの中で呼び出されているので、HTML上でも交互に表示ができています。このように、JavaScript内で仮想的に行っているDOMの処理を現実（HTMLの実体）にリアルタイムで反映してくれるのがReact.jsの素晴らしいところです。

また、ボタンをクリックすることでli要素を一つずつ、しかもカウントアップさせながら表示してくれる機能も盛り込んでいます。　このように仮想DOMからクラス内メソッドをお手軽に呼び出せるのも素晴らしいですね。

また、配列を仮想DOMにぶち込むことで勝手に展開（.join(“”)みたいな効果）　してくれるのもありがたいです。

これくらいのアプリであればjQueryか、むしろ生のJavaScriptでも容易に実装できますが、もっと動的で高機能なアプリとなってくるとReact.jsの方が圧倒的に見やすい、高速なプログラムを作ることができそうです。

なお、HTMLコードでbabelなどを直接CDNとして呼び出していますが、この方法だと簡単ではあるもののページ表示時に毎回トランスパイル処理が入ってしまい、表示速度低下につながってしまう恐れがあるので、

がっつり開発を行うときはNode.js環境でコマンドを使ってアプリを構築し、事前にコンパイルしてJavaScript化する方が良いでしょう。

以下のページなんかで丁寧に説明されているので、ぜひご覧ください。

https://www.wakuwakubank.com/posts/618-react-create-react-app/


関連記事

    人気記事

    管理人

    じゅんき
    10月頃BableTechが生まれ変わる予定です！

    記事内用語

    詳細ページ