環境毎に分けて定数を定義する方法【React】

■はじめに

前回の記事の「定数クラス」に環境毎に分けた定数を定義する方法を記載します。

APIの向き先などで使用することはあると思います。

■手順

プロジェクトは「create-react-app」を使用して作成しておいてください。

※そうすることで、環境を分ける定数が自動で用意されます。

以下のようにConst.jsを作成します。

class Const {
ENV = () => {
if (process.env.NODE_ENV === 'development') {
return {
API_URL: "http://hogehoge.com/",
API_KEY: "aaaaa"
}
} else if (process.env.NODE_ENV === 'test') {
return {
API_URL: "http://hugahuga.com/",
API_KEY: "aaaaa"
}
} else if (process.env.NODE_ENV === 'production') {
return {
API_URL: "http://example.com/",
API_KEY: "aaaaa"
}
} else {
return {
API_URL: "http://aaaaaaa.com/",
API_KEY: "aaaaa"
}
}
}
}
export default new Const();

以下のIF文で環境を判定しています。

process.env.NODE_ENV

上記は、ビルド方法によって値が変わります。

具体的には、以下のように変わります。

実行コマンド NODE_ENVの値
yarn start development
yarn test test
yarn build production

ID指定でオブジェクトを取得する方法【React】

■はじめに

以前、「ボタン押下時にテキストの値を取得する方法【React】」でテキストの変更時処理で変数に値を保持して操作していました。

ここでは、オブジェクトを取得することで、必要な時に最新の値が取得できるようになります。

どちらが良いかは、好みな気もしますが、個人的には、こちらの方法の方がしっくりきます。

■手順

まずは、App.jsのソースコードの全量は以下

import React from 'react';
class App extends React.Component{
render()
{
function btnClick() {
alert(document.getElementById('target').value);
}
return (
<div>
<h1>Hello World</h1>
<input type="text" id="target"/><br/>
<button onClick={btnClick}>ボタン</button>
</div>
);
}
}
export default App;

以下のようにすることで、IDを指定してオブジェクトを取得できます。

document.getElementById('[id名]')

取得したオブジェクトの「.value」でテキストフィールドの場合は入力されている値を取得できます。

ボタン押下時処理【React】

■はじめに

Reactで作成したHTMLのボタンを押下した際の処理の方法を記載します。

■手順

以下の記事を参考に、Reactのプロジェクトを作成してください。

www.reigle.info

App.jsを以下のように書き換えてください。(丸々コピペで大丈夫です).

import React from 'react';
class App extends React.Component{
render()
{
return (
<div>
<h1>Hello World</h1>
<button onClick={this.btnClick}>ボタン</button>
</div>
);
}
btnClick() {
alert("ボタン押下");
}
}
export default App;

「button」のHTMLの「onClick」でボタン押下時に呼び出される関数を指定しています。

Reactの環境構築【React】

■はじめに

最近話題のReactの環境構築方法をまとめました。
Javaなど他の環境と違って、どハマりする事もないかと思いますが、一応残しておきます。

■手順

以下のサイトを参考に、Node.jsをインストールしてください。

www.reigle.info

以下のコマンドを実行し、yarnをインストールしてください。

npm install --global yarn

以下のコマンドでcreate-react-appをインストールします。

yarn global add create-react-app

これで環境構築は終了です。

■プロジェクトの作成

以下のコマンドでプロジェクトを作成します。(「[app_name]」の部分は任意で変えてください).

create-react-app [app_name]

プロジェクト作成後、カレントディレクトリにし、以下のコマンドでアプリを起動する。

npm start

以下にアクセスして、Reactのサンプルが起動されていれば終了です。

http://localhost:3000/