【JavaScript】サンプルボタン作成 - その3(React利用 - 関数コンポーネントver.)
はじめに
JavaScriptを勉強し始めました。
Reactのありがたみを知るために、簡単なサンプルボタンを下記パターンで書いて比較してみます。
それぞれの書き方の差を確認するために書いたので、実装としては良い書き方じゃないところもあります。
比較パターン
クラス利用無し
【JavaScript】サンプルボタン作成 - その1 - オンプレ系インフラエンジニアがAzureを勉強する
クラス利用有り
【JavaScript】サンプルボタン作成 - その2(クラス利用) - オンプレ系インフラエンジニアがAzureを勉強する
React利用有り-関数コンポーネント使用ver.(この記事)
【JavaScript】サンプルボタン作成 - その3(React利用 - 関数コンポーネントver.) - オンプレ系インフラエンジニアがAzureを勉強する
React利用有り-クラスコンポーネント使用ver.
【JavaScript】サンプルボタン作成 - その4(React利用 - クラスコンポーネントver.) - オンプレ系インフラエンジニアがAzureを勉強する
題材
下記のようなボタンをサンプルにします。
【要件】
OKボタンをクリックするとNGボタンに変わる
OKボタン、NGボタンともにマウスオーバーで色が変わる
ボタンにカーソルを合わせるとマウスカーソルが変化する
共通部分(CSS)
CSSは一律共通にしています。
/* ボタンの基本にするスタイル */ /* OKの時 */ .sampleButton-ok { width: 128px; height: 40px; margin: 8px; background-color: #ff3535; border: solid 1px #ff3535; border-radius: 4px; color: #fff; font-size:12px; line-height: 40px; text-align: center; cursor: pointer; } /* OKの時のマウスオーバー */ .sampleButton-ok:hover { background-color: #da3232; } /* NGの時の基本スタイル(※OKボタンからの差分のみ) */ .sampleButton-ng { background-color: #fff; border: solid 1px #3553ff; color: #3553ff; } /* NGの時のマウスオーバー */ .sampleButton-ng:hover{ background-color: #eee; }
HTML/CSS/JavaScript-React利用有り-関数コンポーネント使用ver.
HTML/CSS/JavaScriptに加えてReactを使います。
Reactのコンポーネントにも関数コンポーネントとクラスコンポーネントがあるので、今回は関数コンポーネントを使います。
ja.reactjs.org
プロジェクトの作成
Reactのプロジェクトを作成するところは備忘録として記載します。
Reactを使うための初期構築についてはいろいろわかりやすい記事があるのでそちらをご覧ください。
[手順]
- Visual Studio Codeを開く。
- 新しいターミナルを開く。
- npx create-react-app [プロジェクト名]でプロジェクトを新規作成。
- cdでプロジェクトのディレクトリに移動。
- yarn startで実行。
不要なファイルもたくさんあるため、必要に応じて削除します。
index.html
タイトルの部分を変更します。
不要な部分も削除します。(残しておいてもボタンの挙動には影響ないです。)
index.js
App.jsというメインになるページを呼び出しています。
ここで直接ボタンのコンポーネントを呼ぶこともできますが、複雑なUIを作っていくことを考えると、ここでボタンのような一機能のコンポーネントを直接呼び出すことはあんまりないかなと思います。
import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById('root') );
App.js
ここでSampleButtonというボタンのコンポーネントを呼び出します。
クラスを適用するためのidの指定をしておきます。
import React from 'react'; import SampleButton from './SampleButton'; function App() { return ( <div > <SampleButton id="samplebutton"/> </div> ); } export default App;//他の関数から呼び出せるように
SampleButton.js
ボタンの本体部分になります。
import './SampleButton.css'; import React from 'react'; function SampleButton(props) { // クリックイベントで実行する処理 function handleClick(e) { const samplebutton = document.getElementById(props.id); // sampleButton-ngのクラスが適用されているかで動作を分ける if (!samplebutton.classList.contains('sampleButton-ng')) { //クラスの追加 samplebutton.classList.add('sampleButton-ng'); //テキストの書き換え samplebutton.textContent = "NG"; } else { //クラスの削除 samplebutton.classList.remove('sampleButton-ng'); //テキストの書き換え samplebutton.textContent = "OK"; } } return ( // idは上位から受け取ったものを利用する <div onClick={handleClick} className="sampleButton-ok" id={props.id}> OK </div > ); } export default SampleButton;
ボタンを増やす場合
コンポーネント呼び出し時のidを分けるだけで同じボタンが量産できます。
App.js
import React from 'react'; import SampleButton from './SampleButton'; function App() { return ( <div> <SampleButton id="samplebutton1"/> <SampleButton id="samplebutton2"/> <SampleButton id="samplebutton3"/> </div> ); } export default App;//他の関数から呼び出せるように
SampleButton.js
変更なし。
コード全体
コード全体は下記Githubにあげています。
github.com