• ホーム
• ブログ
• Firebase情報

Reactで変数を表示する！

2022年5月24日

React で変数を表示する！

React のフレームワークを利用して、Vue の公式チュートリアルと同じことをやっています。二回目は、Javascript の変数を表示する方法です。あまり Vue と変わりません！

Javascript の変数

Vue では HTML、CSS、Javascript を記述する場所が、xxxx.vueファイルのタグで決められていました。React で Typescript を利用する場合には、xxxx.tsxというファイルがこれに相当するファイルになりますが、基本的にこのファイルは、Typescript を記述するファイルです。

したがって、普通に Typescript の変数（定数）を作れば良いだけなので簡単です。

Tαypescript で書いているので、変数（定数）の型名を明示的に書くとコンパイル時に、変数（定数）を利用する際の型のチェックをしてくれるので、実際にプログラムを実行する前にミスを見つける事ができます。

今回の例では、「count」という定数を作って表示させているので、変数の宣言は

const count: number = 0;

のように行います。この定数の型は数値（number）なので、その型を宣言しておくと、プログラムでこの定数を使う際にチェックしてくれます。この例では、使うのは表示の部分のみなのであまり、大きなメリットはありませんが、例えば、この定数を関数に渡したりする場合には、関数側の型と一致しているかをチェックしてくれるので、型が違っている場合には、コンパイル時にわかるという仕組みです。

ステップ２のコードの例

以下のコードがステップ２のコードの例です。 定数「count」を「Hello World!」の下に表示する例です。 前回の、ステップ１と同じように、CSS は別のファイルに書いてインポートしています。

// src/tutorial/step2.tsx
import React from "react";
import "./styles/step2.css";
export default function Step2(): JSX.Element {
  const count: number = 0;
  return (
    <React.Fragment>
      <div className="step2">
        <h1>Hello World!</h1>
        <p>Count is {count}</p>
      </div>
    </React.Fragment>
  );
}

HTML に相当する「JSX」の記述は、以下のようになっていて、定数（変数）を中括弧（{}）で囲んでいます。

<p>Count is {count}</p>

あとは HTML に相当する、「JSX」を返す関数「Step2（）」にすれば完了です。

「const」を使う理由

ところで、Typescript(Javascript）では変数、定数の宣言には、「var」、「let」、「const」で宣言できます。今回は、「const（定数）」を使っています。 この例では、どれを使っても同じなのですが、実際のプログラムでは、値を変える必要のない値は「定数(const)」を使った方がバグの少ないコードになります。これは、万が一値を変えるような記述があった場合には、エラーになるためです。プログラムを書く際には、その値を変える必要があるかどうかはわかっています。変える必要のない値は「const」で宣言しておくと、誤って値を更新しようとした場合エラーになるので、間違いがすぐにわかるという仕組みです。

Typescript（Javascript）では「var」を使えば全てのケースをカバーできるのですが、同じような理由で、値を変える必要がある場合は、「let」を使った方が良いと言われています。 これは、「var」は、変数が有効な範囲が広いためです。これに対して、「let」を使うと、変数が有効な範囲を限定しやすいため、これもバグを少なくする事が可能になります。

例としては、「for ループ」では、以下のように書く事ができます。

for (let i = 0 ; i < 10 ; i++ {
    // Forループの処理
})

この場合、「let」を使っているので、変数「i」はこのループ内だけで有効です。 しかし、「var」を使ってしまうとループの外側でも、「i」が有効になるので、別の目的で、「i」という変数を使っていると、バグの原因になる場合があるからです。

ループのインデックスに利用するような変数や、似たような名前の変数を利用する場合、変数が必要な範囲に限定して使えるようにした方が、バグの原因を減らす事ができます。

その他の変更

今回記述した「部品」を React で表示するには、今回は React Router を利用しているので、別のファイルの変更も必要になります。

// src/App.tsx
import React from "react";
import { HashRouter, Route, Routes } from "react-router-dom";
import Step1 from "./tutorial/step1";
import Step2 from "./tutorial/step2";
function App() {
  return (
    <React.Fragment>
      <HashRouter>
        <Routes>
          <Route path="/step1" element={<Step1 />} />
          <Route path="/step2" element={<Step2 />} />
        </Routes>
      </HashRouter>
    </React.Fragment>
  );
}
export default App;

のようになります。変更点は以下の２行を加えています。

....
import Step2 from "./tutorial/step2";

....
            <Route path="/step2" element={<Step2 />} />
....

これで、開発サーバを利用する場合、Web ブラウザで「localhost:3000/#/step2」と指定すると、このページを表示する事ができます。

まとめ

いかがですか？ Vue と React の違いが何となく見えてきたでしょうか？

基本的に大きな違いはありませんが、

• Vue の場合は、一つのファイルに HTML/Javascript/CSS が書ける
• React の場合、CSS は別に記述する
• React の場合、Javascript の中に HTML に相当する「JSX」を書く

という違いがあります。Vue の場合でも、HTML の書き方は標準の HTML と違っていますが、JSX の方が違いが大きくなっています。このあたりが、Vue の方が学びやすいと言われる理由です。 ただ、違いがわかってしまえば、殆ど変わらないとも言えるので、あとは、どちらの方がコーディングしやすいかという、どちらかというと好みの問題になってきます。

Copyright(c) 2017-2021 by Silicon Valley Super Ware, all rights reserved.