概要
Reactについて、何が特徴でメリットは何なのかを書かれた記事は多く存在する。しかし、実際にソースコードを作成する視点からReact.jsを学べる記事は少ないと感じた。そのため、今回はソースコード目線からReact.jsの基本を学ぶことができる記事を書こうと思う。
React.jsとは
Reactとは、Facebook社が開発しているユーザーインターフェース向けのJavaScriptライブラリである。最近では、「Create React App」 が用意されており、Reactを利用した開発が簡単に行えるようになっている。Webpack, Babel ,ESLintといった技術が搭載されており、JSXやES6に対応している。
「Create React App」のインストール方法は別記事 「docker-composeを用いてCreate React Appの環境を構築する」 を参照してほしい。
今回は基本を知るためにhtmlファイルにてreactを実装する。
簡単にReact.jsを使用してみる
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<script src="https://unpkg.com/react@16/umd/reacct.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/ract-dom.development.js"></script>
</head>
<body>
<div id="root"></div>
<script>
let dom = document.querySelictor('#root');
let element = React.createElement('p', {}, 'hello world');
ReactDOM.render(element, dom);
</script>
</body>
headタグの2つのscriptタグにより、Reactが使える状態にする。1行目がReact本体であり、2行目が仮想DOMを使用するためのものである。
bodyタグを見ると、<div id="root"></div>が記述されていることがわかる。Reactは特定のタグを利用して表示内容を組み込む。今回はid="root"に対して組みこむという事になる。rootの値は自由に決めることができる。
bodyタグのscriptタグ1行目を見る。これは、Reactを組み込むためのオブジェクトを取得している。先ほど設定したrootのオブジェクトを取得している。
2行目では、仮想DOMによるエレメントを作成している。createElementの第一引数はタグ、第二引数は属性、エレメントの内部に組み込まれるものを表す。つまり、html表記すると<p>hello world</p>となる。
Reactでは、javaScriptのDOMとは別に独自で仮想DOMを作っている。仮想DOMはレンダリング時に通常のDOMに転写され、実際に表示される。表示を実際に行っているのが3行目となっている。
JSXの登場
前章では、簡単にReactを実装したが、表示するタグをcreateElementで作成しなければならず、複雑な表示の場合、大変な記述になることは明白である。そこで今まで使用してきたことがあるhtmlのような記述をする仕組みが作られ、タグ構造を記述することを容易にした。これが、**「JSX」**という呼ばれるものである。JSXで記述されたコードは、コンパイルするプログラム「Babel」を使用して、createElementに書かれた記述に変換している。
(JSX)<p>hello world</p> ⇒ (JavaScript)React.createElement('p', {}, 'hello world');
前章の記述をJSXを用いて記述する。
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<script src="https://unpkg.com/react@16/umd/reacct.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/ract-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
let dom = document.querySelictor('#root');
let element = (
<>
<p>hello world</p>
</>
);
ReactDOM.render(element, dom);
</script>
</body>
headタグの3行目にJSX記述をするための「babel」を読み込んでおり、scriptタグにtype="text/babel"を指定することで、babelによってコンパイルするscriptタグを指定する。
bobyタグの変数elementの部分が、JSXを使用している個所である。JSXを使用するには、小括弧()を使用する必要がある。（イコールの後にタグを書き始めると小括弧を省略できるが基本は、小括弧をつけるとよい。）
JSXの一番外の<>~</>について、renderでは、一つのオブジェクトだけしか指定できない。2つのオブジェクトを指定するとエラーとなる。今回の場合はなくても大丈夫だが、明示的に一つのオブジェクトであると表現するために使用している。タグを指定していないため、レンダリングにかかる時間も影響ないと考える。
// エラー（2つのオブジェクトと認識
let element = (
<p>hello world</p>
<p>goodmorning</p>
);
// OK
let element = (
<>
<p>hello world</p>
<p>goodmorning</p>
</>
);
JSXの注意点
JSXは、htmlとは異なるので、注意する点がいくつかある。以下基本的な部分だけを述べる。
- javascriptを埋め込む際は中括弧{}を使用すること
// エラー
let isClickiing = false;
let changeClickFlag = () => {
isClicking = true;
};
let message = "hellow world";
let element = (
<>
<p onClick="changeClickFlag">message</p>
</>
);
// OK
let isClickiing = false;
let changeClickFlag = () => {
isClicking = true;
};
let message = "hellow world";
let element = (
<>
<p onClick={changeClickFlag}>{message}</p>
</>
);
- タグの属性はcamelCaseにて記述すること
// エラー
let isClickiing = false;
let changeClickFlag = () => {
isClicking = true;
};
let element = (
<>
<p onclick={changeClickFlag}>hello world</p>
</>
);
// OK
let isClickiing = false;
let changeClickFlag = () => {
isClicking = true;
};
let element = (
<>
<p onClick={changeClickFlag}>hello world</p>
</>
);
- 終了タグがない単一タグは<〇〇 />をつける。
// エラー
let element = (
<>
<input onChange={doChange}>
</>
);
// OK
let element = (
<>
<input onChange={doChange} />
</>
);
終わりに
以上、Reactの基本中の基本についてまとめた。
間違っている個所あればコメントお願いします。
参考