Reactの公式リファレンスを見てみる①

beta.reactjs.org

クイックスタートをまず読みます。（PC用の最近のブラウザはGoogle翻訳がもともと入っています。スマホ用のブラウザでなら、自分でGoogle翻訳をダウンロード、インストールすれば、ブラウザ上で表示されたテキストは、簡単に翻訳できるようになってます。）

条件付きレンダリングについて取り上げてみます。（そのあたりまでは、これまでのYoutube動画を見ていれば理解できるはずです。）

このクイックスタートでは、ここでいきなり『レンダリング』というのがでてきますが、Youtube動画見ていれば分かりますが、何の知識もなければここで、えっと思うことでしょう。

リロードという言葉を知っていれば、デフォルトで決められたきっかけがあればその都度自動的にリロードを行ってくれるということです。決められたきっかけというのはYoutube動画でもあったように、propsが変更されたときと、stateが変更されたときです。

ただし、これは少し違う。全部をリロードしているわけではなく、ＤＯＭツリーのうち修正したノードだけリロードを行うことで高速化を実現している。

これはいわゆるReactで三項演算子をつかっているということですね。Youtube動画ではトグルボタンの件で出てきました。

次はカウンタの例です。これはYoutube動画で、アレンジ版も紹介されてましたね。

クイックスタートの最後の見出し『コンポーネント間でデータを共有する』というのは興味深い内容ですが、力不足でこれを読んでも理解できなかったです。

クイックスタートが終わると、チュートリアルです。

実践派と理論派でこれは意見が分かれると思います。

実践派はチュートリアルをやっていくべきでしょうが、全部とは言わないまでも、ある程度理解しないと進めない方は、とっつきにくい印象があり難しく感じてしまいます。

なぜでしょうか？

理論派は、まず、①この3×3のマス目がどのように作られており、②それぞれのマス目に値を入れるにはどうしたらいいかというのを考えてしまうからではないでしょうか？

HTMLはある程度分かるが、CSSファイルが読めないJavaScript初心者には、このコードを理解するのはハードルが高かったです。あとは、やはり、変数に何が入っているかがわかりにくい。（リテラル値、文字列、関数、オブジェクトあるいはこれらの配列のいずれかが入っているのであろうが）

そのほか、関数の戻り値も関数最後を読まないとわからないし、このサンプルの関数の引数が３個以上だと読みづらい。

などなど、結局自分の力不足で理解不能でした。ので、ここでは、独自路線を進んでいくことにします。

CSSの初歩しか知らない人が、このようなマス目をつくろうとしたときは、以前カレンダーを作成したときに利用した、CSS GridLayoutが有用です。

カレンダーの際は、罫線が被らないように少し複雑に記載してましたが、ここではかなり簡略化し、罫線のかぶりは気にしないことにします。

HTMLに戻りますが、下記のファイルをVSCode作成してます。

grid.html

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <div class="container" id="container">
        <div>1</div>
    </div>
    <style>
        .container{
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            border:solid 1px #00FF00;
            border-width: 2px 2px 2px 2px;
        }

        .container div{
            font-size: 40px;
            height: 100px;
            border:solid 1px #FF0000;
            border-width:2px 2px 2px 2px;
        }
    </style>
    <script>
       //ここに処理を記載
    </script>
</body>

コピペするとうまくいかないことがありますが、これはコピペで行けます。ただし、すべて１行ずつ空いてしまいますが、、、（のちに改良）

border-widthというのは聞きなれないですが、罫線の太さを上下左右別々に書くときに使用するようです。『0』だと罫線なしを意味するようです。

grid-template-colums:1fr 1fr 1fr ;　はマスが3行で改行ということです。

あとは、HTMLファイルで、<div>1</div>と同列に、<div>を追加していくだけで、マス目も自動的に一緒に作成されて表示されます。

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <div class="container" id="container">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
    </div>
    <style>
        .container{
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            border:solid 1px #00FF00;
            border-width: 2px 2px 2px 2px;
        }

        .container div{
            font-size: 40px;
            height: 100px;
            border:solid 1px #FF0000;
            border-width:2px 2px 2px 2px;
        }
    </style>
    <script>
       //ここに処理を記載
    </script>
</body>

これもコピペで作成し実行確認済。

では、これをReact.jsで書いてみましょう。

作成したときは、App.js　と　app.cssが作成されており、これを下記に変更します。

これはコピペ不可だったので自分で書いてみる必要あり。

App.js⇒Grid.js

import './grid.css';

function Grid(){
    return(
        <div className="container" id="container">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
            <div>9</div>
        </div>
    )
}

export default Grid;

app.css変更後⇒grid.css

@charset "utf-8";

.container{
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    border:solid 1px #00FF00;
    border-width:2px 2px 2px 2px;
}

.container div{
    font-size: 40px;
    height:100px;
    border:solid 1px #FF0000;
    border-width:2px 2px 2px 2px;
}

これでさきほどと同じHTMLファイルが作成できてます。

これで準備がととのったので、Reactでの配列の使い方を勉強し、遊んでみます。

（その次は、DOMについて勉強していく予定です。

JavaScript初心者でもすぐわかる！DOMとは何か？

さらにその次は、クイックスタートのリファレンスで理解できなかったコンポーネント間での値の受け渡しについてです。

【React】子以外のコンポーネントに値を受け渡すベストプラクティスの紹介 – 株式会社シーポイントラボ｜浜松のシステム・RTK-GNSS開発

）

カレンダー作成の際は、javascriptで、createElement（）を使って作成してますが、Reactではこれはできないようです。（うまくいくのかもしれませんが、うまくいきませんでしたのでこれは避けるようにします）

配列の要素を繰り返し処理で記載するにはどうすればよいでしょうか？

下記HPを参照しました。

dev-k.hatenablog.com

import './grid.css';

function Grid(){
    const number_1_1 = 1;
    const number_1_2 = 2;
    const number_1_3 = 3;
    const number_2_1 = 4;
    const number_2_2 = 5;
    const number_2_3 = 6;
    const number_3_1 = 7;
    const number_3_2 = 8;
    const number_3_3 = 9;

    return(
        <div className="container" id="container">
            <div>{number_1_1}</div>
            <div>{number_1_2}</div>
            <div>{number_1_3}</div>
            <div>{number_2_1}</div>
            <div>{number_2_2}</div>
            <div>{number_2_3}</div>
            <div>{number_3_1}</div>
            <div>{number_3_2}</div>
            <div>{number_3_3}</div>
        </div>
    )
}

export default Grid;

これでもいいが、これだとReactでなくてもよいので、React風に書くと以下のようになります。

Grid.jsを修正し、その子コンポーネントGridContent.jsを作成します。grid.cssはそのままです。

Grid.js

import './grid.css';
import GridContent from'./GridContent';

function Grid(){
    return(
        <div className="container" id="container">
            <GridContent value="1"></GridContent>
        </div>
    )
}

export default Grid;

GridContent.js

const GridContent = function(props){
    return(
        <>
           <div>{props.value}</div>
        </>
    )
}

export default GridContent;

CSSをあまり知らない場合、HTMLファイルのどこの場所というのを取得や利用したい場合、当然、JavaScriptからDOMを利用してアクセスすることを考えますが、CSSを知りすぎていると、HTMLファイルのどこの場所というのはCSSの設定で探しがちになるような気がします。

ただし、React.jsでは、DOMを意識して使う必要性がなくなってます。JSX内にJavaScriptを埋め込んで、HTMLでいうところのオブジェクトを直接取得することができるからです。