目次
こんにちは。あおしまロボです🤖
突然ですがみなさん、JavaScriptのライブラリ「React.js」はご存知でしょうか？
現在かなり人気のあるJavaScriptライブラリで、
開発現場での使用率もかなり高いようですね。
そんなReactを勉強してみたいと思いまして、
公式チュートリアルをやってみたのですか…
正直、さっぱりわかりませんでした(涙)
解説はとても丁寧でいいチュートリアル
だとは思いました。
しかし専門用語が多すぎて…
JavaScript勉強中の私にとってはかなり
難解なものであったなと思います。
でも私はReactを使えるようになりたい…！
そんなわけで、チュートリアルを
もう一度なぞって自分なりに解釈し、
さらなる理解を目指していこうと思います。
全て書くと長くなってしまうので、今回は
序盤のuseStateが登場したところまで
にしておきます。
Reactを使う意味
まずReactを使う意味について。
これは「コンポーネント」という単位で
コーディングを進められる点がメリットのようです。
主にナビゲーション部分やボタンを一つの部品
として捉えることで、そのまま他の場所に
流用できたり、一括で変更を加えられたりと
効率化が図れるようです。
Reactファイルの拡張子はjsxで、それをメインに編集
していくスタイルがメジャーとなります。
１：コンポーネントとJSX
コンポーネント
コンポーネントについてです。
先ほど記述した内容とも被る点がございますが、
Reactにおける部品のようなものであり、
UI (HTML)とプログラムを合わせた機能を
持っているようです。
基本形として、App.jsxにてコンポーネントの
プログラムを記載し、それがindex.jsでエクスポート
されるようにします。
export default function Square() {
return (
<>
<button className="square">X</button>
<button className="square">X</button>
</>
);
}コンポーネントはこのように記述します。
ここで気をつけなければいけないことは、
コンポーネント名の頭は大文字を使うこと、
そして必ず<>で囲むことです。
Reactの使用上、<>で囲まなければ
エラーが出てしまうようなのです。
また本来閉じタグのないHTML要素を記載
する際は、タグ内末尾に/を記入します。
ん？これは本当にHTML要素と言っていいのか？
そうですよね…これはHTML要素では
ありませんでした。
JSXとは何か
JSXとは、Reactで使われるHTML”のような”ものです。
このような記法を取るメリットとしては、
HTMLっぽい見た目で理解しやすくなるから
だそうです。
先ほどのコードを見ると、
className=”◯◯”という記載がされていますが、
これはpropsと呼ばれるもので、
HTMLのclassと同じ役割をしているようです。
またコンポーネントを入れ込むことも可能で、
<コンポーネント名 />と記述します。
コンポーネント名の頭文字を
大文字書くことを忘れないようにします。
コンポーネントへ変数を追加
変数の記法
function Square({ value }) {
return <button className="square">{value}</button>;
}上記のコードは、コンポーネントに引数を設定
したものです。
JSXで変数を記載する際は、変数を{}で囲む
必要があります。
これはこのカッコ内ではJavaScriptの記法が
通用するという、領域的な意味があるそうです。
関数とpropsの追加
function Square({ value }) {
function handleClick() {
console.log('clicked!');
}
return (
<button
className="square"
onClick={handleClick}
>
{value}
</button>
);
}つぎに動的なコンポーネントを目指したコードです。
上記のコードは、先ほどのコードにクリックの
条件を足したものになっているようです。
onClickはpropsの一種で、
JavaScriptのonclickと同じ役割だと思われます。
useStateについて
useStateとは
useStateとは、Reactが用意している
独自の変数のことです。
どうやら値を保持しておけることが特徴のようで、
戻り値として配列の最初には現在の状態が、
二つ目には状態を更新するための
関数が戻されます。
チュートリアルをやっていて最初に
理解に苦しんだものがuseStateでした。
useStateの使い方
import { useState } from 'react';
function Square() {
const [value, setValue] = useState(null);
function handleClick() {
setValue('X');
}
return (
<button
className="square"
onClick={handleClick}
>
{value}
</button>
);
}useStateを最初の部分にインポート
するところからスタートです。
次にコンポーネント内の先頭部分で
useState関数を呼び出します。
上記のコードですと、valueという
名前で値が返ってくることになります。
左辺のvalueが今現在の値、setValueが
次の値を更新するために必要で
次に入れたい値はsetValueに書くようです。
私にとって難しい内容だったため、
今のところはおまじないのような
認識でいいのかなと思います。
またsetValueに値を代入するときは、
setValue(◯);
と書く様で、＝は不要です。
右辺に記載されているuseState(null)
についてですが、こちらの場合は
nullが初期値になるようです。
また
またuseStateは関係ありませんが、
コンポーネント内で関数を書く時は
{関数名}だけで十分なようです。
おわりに
ここまで読んでいただきありがとう
ございました。
今回はuseStateの基礎までということで、
まだなんとかなりそうなところ
ではありますが、この後の
コンポーネント間の値のやりとりが
難解であったため、自分で理解を深め
続きの記事か書けるよう努めたい
と思います。
以上、あおしまロボでした🤖
