Webアプリ開発 React.js フロントエンド環境 Part(9)

Javascript
2022.03.13

はじめに

こんにちは、swim-loverです。 初心者向けのWebアプリ開発記事です。フロントエンド環境にReact.jsを使用しています。今の目標は、出席簿アプリを作ることです。

第8回では、公式サイトに従い、テスト用サブドメインでHello Worldを表示してみました。(sample1-5)また、BabelでのJSX変換についても行いました。CodePen上ではなく、実際のサイトで実装すると初心者ならではの色々とした問題が発生します。

引き続き、Reactの勉強を進めていきたいと思います。

HTML＆CSSの知識が必要になってきたので知識を補うため、本を一冊購入しました。わからないときにさっと調べる使い方を想定しています。

https://amzn.to/3vZf1sw
amzn.to

React ‘Hello Worldの派生’

公式サイトにHello Worldの派生コードがありましたので、サクッと真似してみます。

<h1>要素に関数を埋め込んだサンプルです。

const title= document.querySelector('#hello_world_3');

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}
const user = {
  firstName: 'Swim',
  lastName: 'Lover'
};
ReactDOM.render(
  <h1>Hello, {formatName(user)}</h1>,
  title
);

特に問題は生じませんでした。

React ‘Hello World派生~if分岐

if分岐のあるgetGreeting()関数をelementとして設定しています。

const title= document.querySelector('#hello_world_4');

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Swim',
  lastName: 'Lover'
};

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }else{
    return <h1>Hello, Stranger.</h1>;
  }
}

const element = (
    getGreeting(user)
);

ReactDOM.render(
  element,
  title
);

これも特に問題は生じませんでした。公式サイトのコードを真似しているだけなので、問題が生じても困ってしまいますが。

React ‘JSXで属性を指定する’

これまでは、<h1>要素だけでしたが、今回は、<img>要素で属性srcを指定してみました。

const title= document.querySelector('#hello_world_5');

const user = {
  firstName: 'Swim',
  lastName: 'Lover',
  avatarUrl:'img/bike.jpg'
};

const element = <img src={user.avatarUrl}></img>;
ReactDOM.render(
  element,
  title
);

JPG画像が表示されました。

React ‘JSXで子要素を指定(1)’

子要素h1,h2を指定しました。

const title= document.querySelector('#hello_world_6');

const element = (
  <div>
    <h1>Hello! React learner.</h1>
    <h2>Go to forword.</h2>
  </div>
);
ReactDOM.render(
  element,
  title
);

これも問題ありません。

React ‘JSXで子要素を指定(2)’

子要素として、説明リスト<dl><dt>~</dt><dd>~</dd></dl>を指定してみました。

const title= document.querySelector('#hello_world_7');

const element = (
  <dl>
    <dt>Having child element</dt>
    <dd>
        <p>JSX tag can have chiled element.</p>
    </dd>
  </dl>
);
ReactDOM.render(
  element,
  title
);

説明リストが正しく表示されました。

React ‘JSXでUser Input’

公式サイトには、以下の内容が書かれています。

const title = response.potentiallyMaliciousInput;
// This is safe:
const element = <h1>{title}</h1>;

デフォルトでは、React DOM は JSX に埋め込まれた値をレンダー前にエスケープします。このため、自分のアプリケーションで明示的に書かれたものではないあらゆるコードは、注入できないことが保証されます。レンダーの前に全てが文字列に変換されます。これは XSS (cross-site-scripting) 攻撃の防止に役立ちます。

https://ja.reactjs.org/docs/introducing-jsx.html

ユーザー入力された値は、レンダリングするのをブロックするのだと思いますが、実際に動作を試してみたいと思います。

HTMLコードにユーザーインプットのコードを書いてみます。入力内容はJavaScriptで処理します。

今回購入した書籍を参考にして、テキストボックス(id=name)とボタン(id=update)を配置します。

8行目のid=msgは、入力されたテキストを表示します。

        <section class="features1">    
            <h1><span class="main-title1">JSXでUser Input</span></h1>            
                <section>
                    <div class="info-text">
                        <p>User Input</p>
                        <input type="text" size="40" id="name" placeholder="Please Input your name and Hit Enter Key.">
                        <input type="button" value="update" id="update">
                        <p id="msg"></p>
                        <div id="hello_world_8"></div>
                    </div>
                </section>
        </section>

次はJavaScriptのコードです。

3,4行目で、updateボタンが押されたときの動作を buttonClick()ハンドラに紐づけます。

7-11行目で、テキストボックスに入力された値を取得します。

15行目は、入力されたテキストをJSXでレンダリングするコードです。

const title= document.querySelector('#hello_world_8');

let checkButton = document.getElementById('update');
checkButton.addEventListener('click', butotnClick);
let nameText="unkown";

function butotnClick(){
  nameText = document.getElementById('name');
  console.log(nameText.value);
  msg.innerText = 'your name is ' + nameText.value;
}

//const title = response.potentiallyMaliciousInput;
//let text = "This text is NOT user input.";
let text = nameText.value;
const element = <h1>{text}</h1>;
ReactDOM.render(
 element,
  title
);

結果はどうでしょうか？

名前を入力して、updateボタンを押すと、your name is swim loverのみが表示されました。

JSXのレンダラーの方は何も表示されませんでした。ブロックされていることが確認できました。

まとめ

今回、公式サイトに従い、テスト用ドメインで、Hello Worldの派生からJPG画像の表示、最後には、ユーザー入力のブロックについて確認しました。(sample1-5, sample6-10)

コメント

タイトルとURLをコピーしました