React で変数を表示する！
記事IT・テクノロジー
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 の方が学びやすいと言われる理由です。 ただ、違いがわかってしまえば、殆ど変わらないとも言えるので、あとは、どちらの方がコーディングしやすいかという、どちらかというと好みの問題になってきます。
