100日後にReactをちょっと理解するデザイナー - ちょっと触ってみたい
私は限界インハウスUIデザイナー。最近、エンジニアの工数が不足し、開発を効率化するため、デザインシステムを導入し浸透する活動をしている。
そこで出てくるのが「React」だ。リアクトって何すか…フロントエンドチームから説明はしてもらえるのだが、自分でも調べておかないとやばい。
HTMLとCSSがちょっと書けるレベルのデザイナーが、Reactについて調べた記録を残していくよ。
書ける様になるまではいかなくても、実際エンジニアが何をやっているのかを、UIを設計する立場から知っておきたい。
Progateやったよ
こういう時のProgate。Reactのコースがあったので、さっそくやってみよう。4回で1回あたりの目安が2時間未満なので頑張れそうだ。
App.jsの構成
やったあとで、ChatGPTに解説を依頼した
1.リアクトをインポート
import React from'react';2.Reactのクラスコンポーネントを定義する典型的な構文
class App extends React.Component{
〜〜〜〜
}3.〜〜〜〜の中で、render メソッド内でUIを定義し、return 文でコンポーネントの表示内容を返す。
（return内の記述「<h1>Hello, React App!</h1>」はJSX。外はJavaScript）
class App extends React.Component {
render() {
return (
<h1>Hello, React App!</h1>
);
}
}4.App コンポーネントを他のファイルで使用できるようにエクスポート
export default App;まとめるとこう。
// 1.リアクトをインポート
import React from 'react';
// 2.Appクラスを定義し、3.render メソッド内でUIを定義し、return 文でコンポーネントの表示内容を返す。
class App extends React.Component {
render() {
return (
<h1>Hello React</h1>
);
}
}
// 4.App コンポーネントを他のファイルで使用できるようにエクスポート
export default App;const
const は、JavaScriptで変数を宣言するためのキーワードの一つです。
class App extends React.Component {
render() {
const text="テキスト"
return (
<h1>{text}</h1>
);
}
}こうすると、「<h1>テキスト</h1>」が表示される。
クリックイベントの追加
JSXでボタンに直接クリックイベントを追加する
return (
<div>
<button onClick={() => {console.log('あああ')}}>あああ</button>
</div>
)ボタンがクリックされるとコンソールに 'あああ' が表示されます。
onClick プロパティには、アロー関数が使われています。このアロー関数はクリックされたときに指定されたコードを実行します。
通常の関数を定義しておき、その関数をonClickプロパティに渡す方法
ただし、上記の方法には注意が必要です。特に、アロー関数に渡す関数がコンポーネントのレンダリングごとに新しく生成されるため、パフォーマンス上の問題が発生する可能性があります。これを避けるためには、通常の関数を定義しておき、その関数をonClickプロパティに渡す方法もあります。
function handleClick() {
console.log('あああ');
}
// ...
<button onClick={handleClick}>あああ</button>state
stateの定義と表示
初期状態として name: 'あああ' をセットしています。render メソッド内で this.state.name を参照して、コンポーネントのUIに Hello, あああ! と表示されるようにしています。この状態は後でイベントや他の操作を通じて変更できます。
constructor(props) {
super(props);
// コンポーネントの初期状態を設定
this.state = {
name: 'あああ'
};
}
render() {
return (
<div>
<h1>Hello, {this.state.name}!</h1>
</div>
);
}stateの更新
this.setState() は、Reactコンポーネント内で状態（state）を更新するためのメソッドです。
constructor(props) {
super(props);
// 初期状態の設定
this.state = {
name: 'デフォルトの名前'
};
}
// あるイベントが発生したときに呼ばれるメソッド
handleButtonClick = () => {
// this.setStateを使用してstateの更新
this.setState({ name: '変更する名前' });
};
render() {
return (
<div>
<h1>Hello, {this.state.name}!</h1>
{/* ボタンクリック時にhandleButtonClickメソッドが呼ばれ、stateが更新される */}
<button onClick={this.handleButtonClick}>Update Name</button>
</div>
);
}
この例では、handleButtonClick メソッドがボタンのクリックイベントに紐づいており、その中で this.setState({ name: 'いいい' }) を呼び出しています。this.setState を使うことで、name ステートが 'いいい' に更新され、Reactが再描画を行います。これにより、画面上の表示も更新されます。
「いいい」を押したボタンによって出し分けるには
import React from 'react';
class App extends React.Component {
constructor(props) {
super(props);
this.state = { name: 'デフォルトの名前' };
}
// handleClickメソッドを定義
handleButtonClick = (newName) => {
// this.setStateを使用してstateの更新
this.setState({ name: newName });
}
render() {
return (
<div>
<h1>Hello,{this.state.name}！</h1>
<button onClick={() => { this.handleButtonClick('山田') }}>山田</button>
<button onClick={() => { this.handleButtonClick('鈴木') }}>鈴木</button>
</div>
);
}
}
export default App;handleButtonClick メソッドが、ボタンがクリックされたときに呼び出され、this.setState を使用してコンポーネントの状態を更新しています。このコードでは、初期状態として デフォルトの名前 を持つ name ステートが定義され、ボタンがクリックされると handleButtonClick メソッドが呼ばれ、新しい名前がステートに設定されます。これにより、画面上の表示が更新され、新しい名前が表示されます。
「handleButtonClick」は「newName」になるよ
handleButtonClick = (newName) => {↓
ユーザーが「山田」もしくは「鈴木」ボタンをクリック
↓
onClick イベント内で、「this.handleButtonClick」である「山田」もしくは「鈴木」が「newName」として呼び出される。
<button onClick={() => { this.handleButtonClick('山田') }}>山田</button>
<button onClick={() => { this.handleButtonClick('鈴木') }}>鈴木</button>↓
「handleButtonClick」は「this.setState」を使用してstateが更新される。
handleButtonClick = (newName) => {
this.setState({ name: newName });
}↓
「name: 'デフォルトの名前' 」が「newName」に更新され、Hello,山田！になる
<h1>Hello,{this.state.name}！</h1>GPT先輩に直される部分
修正例
修正前
ばなな(newName){
this.setState({name: newName});
}
render() {
return (
<div>
<button onClick={() => {this.ばなな('山田')}}>山田</button>
<button onClick={() => {this.ばなな('鈴木')}}>鈴木</button>
</div>
);
}
}修正後
ばなな = (newName) => {
this.setState({ name: newName });
}
render() {
return (
<div>
<button onClick={() => { this.ばなな('山田') }}>山田</button>
<button onClick={() => { this.ばなな('鈴木') }}>鈴木</button>
</div>
);
}
}
ばななメソッドをアロー関数として定義しました。
ボタンの onClick イベント内で、アロー関数を使用して this.ばなな を呼び出すように書き換えました。
修正前
ばなな(){
this.setState({〜〜〜〜〜});
}
render() {
return (
<div>
<button onClick={() => { this.ばなな()}}>+</button>
</div>
);
}修正後
ばなな = () => {
this.setState({〜〜〜〜〜});
}
render() {
return (
<div>
<button onClick={this.ばなな}>+</button>
</div>
);
}ばななメソッドをアロー関数として定義しました。
ボタンの onClick イベント内で、アロー関数を使用せずに this.ばなな を直接渡すようにしました。
アロー関数って何？
アロー関数（Arrow Function）は、ECMAScript 6（またはES2015）で導入された新しい関数の構文です。通常の関数式（function expression）よりも短く、コンパクトに書くことができます。
// 通常の関数式
function add(a, b) {
return a + b;
}
// アロー関数
const addArrow = (a, b) => a + b;シンプルな構文:
単一の式を返す場合、中括弧 {} や return キーワードを省略できます。
this の挙動:
アロー関数は this の値を独自に持たず、外部のスコープから this を引き継ぎます。通常の関数では this は関数が呼ばれたコンテキストによって変わるのに対して、アロー関数では外部のスコープの this を参照します。
アロー関数はコードを簡潔にし、this の挙動を理解しやすくするために広く使用されています。
メソッド内で this を使う場合は、クラスの通常のメソッドを使う方が適していることがあります。アロー関数を使うべきかどうかは、使用する文脈やケースバイケースで異なります。
進捗
一晩寝たら、書けなくなると思うけど、コードを見たときに、何をしようとしているのかは、何となくわかる様になったかもしれない。
明日もプロゲートをやる。
この記事が気に入ったらサポートをしてみませんか？