前回のReact~基礎編~Stateでは、ReactのStateの機能について学習しました。今回は、ReactのStateを使ってアプリケーション開発を学びましょう。
KOUKI
プログラミングの勉強は、アウトプットが大切です。そのためには、アプリケーションを作るのが効果的です。しょぼいのでも大丈夫です!
事前準備
「React環境構築(Node.js)」が、構築済みであること。
プロジェクトセットアップ
|
1 2 3 4 |
create-react-app dice cd dice npm start touch src/Die.js |
|
1 2 3 4 5 6 7 8 9 10 |
Die.js import React, {Component} from 'react'; class Die extends Component { render() { return <h1>DIE!</h1>; } } export default Die; |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
App.js import React from 'react'; import Die from './Die'; import './App.css'; function App() { return ( <div className="App"> <Die /> </div> ); } export default App; |
開発に役立つツール
KOUKI
開発に役立つツールを紹介しておきましょう。
アプリケーション開発時に役立つツールを紹介します。
・ Font Awesom – WEBアイコンやロゴをインターネット上から提供してくれるサービス
導入は簡単です。public/index.htmlのheadタグに追加すれば良いのです。
|
1 2 |
<!-- font awesome --> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous"/> |
簡単な使い方を説明します。
まずは、Font Awesomの検索バーにDiceと打ち込みます。
様々な種類のアイコンが表示されるので、そのうちの一つをクリックして見ましょう。
「<i class="fas fa-dice-one"></i>」となっているタグをHTML要素としてアプリケーション内で使用するとアイコンが画面上に表示されます。
|
1 2 3 4 5 6 7 8 9 10 11 |
Die.js import React, {Component} from 'react'; class Die extends Component { render() { return <i className='fas fa-dice-one' />; } } export default Die; |
KOUKI
ダイスが表示されましたね。
propsに値を渡して、サイコロの数値を変えて見ましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
App.js import React from 'react'; import Die from './Die'; import './App.css'; function App() { return ( <div className="App"> <Die face='six'/> </div> ); } export default App; |
|
1 2 3 4 5 6 7 8 9 10 11 |
Die.js import React, {Component} from 'react'; class Die extends Component { render() { return <i className={`fas fa-dice-${this.props.face}`} />; } } export default Die; |
ついでにサイコロのスタイリングをしましょう。CSSファイルを作成してください。
|
1 |
touch src/Die.css |
|
1 2 3 4 5 6 7 |
src/Die.css .Die { font-size: 10em; padding: 0.25em; color: Tomato; } |
CSSを適用させるためには、Die.jsにCSSをインポートし、「Die」クラスをiタグに追加します。
|
1 2 3 4 5 6 7 8 9 10 11 |
src/Die.js import React, {Component} from 'react'; import "./Die.css"; class Die extends Component { render() { return <i className={`Die fas fa-dice-${this.props.face}`} />; } } export default Die; |
サイコロの目を変える
次は、サイコロの目を変えましょう。画面上にボタンを設置して、ボタンが押下された時にランダムに変わるようにします。
srcディレクトリ配下にRollDice.jsを作成してください。
|
1 |
touch src/RollDice.js |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
src/RollDice.js import React, { Component } from 'react' import Die from './Die'; class RollDice extends Component { static defaultProps = { sides: ["one", "two", "three", "four", "five", "six"] }; constructor(props) { super(props); this.state = { die1: 'one', die2: 'one' }; this.roll = this.roll.bind(this); } roll() { // サイコロ1の目を取得 const newDie1 = this.props.sides[ Math.floor(Math.random() * this.props.sides.length) ]; // サイコロ2の目を取得 const newDie2 = this.props.sides[ Math.floor(Math.random() * this.props.sides.length) ]; // サイコロの目を反映 this.setState({ die1: newDie1, die2: newDie2}); } render() { return ( <div> <Die face={this.state.die1} /> <Die face={this.state.die2} /> <button onClick={this.roll}>Roll Dice!</button> </div> ) } } export default RollDice; |
続いて、App.jsも変更します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
src/App.js import React from 'react'; import RollDice from './RollDice'; import './App.css'; function App() { return ( <div className="App"> <RollDice /> </div> ); } export default App; |
画面で動作を確認しましょう。
ランダムに表示されるようになりましたね。
スタイルの追加
スタイルを追加しましょう。
|
1 |
touch src/RollDice.css |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
RollDice.css body { background: #ddd; } .RollDice { display: flex; flex-flow: column nowrap; min-height: 100vh; } .RollDice-container { direction: flex; justify-content: center; align-content: center; } .RollDice button { align-self: center; width: 15em; padding: 1.5em; border: 0px; border-radius: 10px; color: white; background: #309849; margin-top: 3em; outline:none; } .RollDice button:hover { background-color: tomato; } |
RollDice.jsにクラスを追加して、スタイルを適用させましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
RollDice.js import React, { Component } from 'react' import Die from './Die'; import './RollDice.css' class RollDice extends Component { static defaultProps = { sides: ["one", "two", "three", "four", "five", "six"] }; constructor(props) { super(props); this.state = { die1: 'one', die2: 'one' }; this.roll = this.roll.bind(this); } roll() { // サイコロ1の目を取得 const newDie1 = this.props.sides[ Math.floor(Math.random() * this.props.sides.length) ]; // サイコロ2の目を取得 const newDie2 = this.props.sides[ Math.floor(Math.random() * this.props.sides.length) ]; // サイコロの目を反映 this.setState({ die1: newDie1, die2: newDie2}); } render() { return ( <div className='RollDice'> <div className='RollDice-container'> <Die face={this.state.die1} /> <Die face={this.state.die2} /> </div> <button onClick={this.roll}>Roll Dice!</button> </div> ) } } export default RollDice; |
おまけ：アニメーションの追加
最後に、CSSでアニメーションを追加しましょう。
|
1 |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
RollDice.js import React, { Component } from 'react' import Die from './Die'; import './RollDice.css' class RollDice extends Component { static defaultProps = { sides: ["one", "two", "three", "four", "five", "six"] }; constructor(props) { super(props); this.state = { die1: 'one', die2: 'one', rolling: false }; this.roll = this.roll.bind(this); } roll() { // サイコロ1の目を取得 const newDie1 = this.props.sides[ Math.floor(Math.random() * this.props.sides.length) ]; // サイコロ2の目を取得 const newDie2 = this.props.sides[ Math.floor(Math.random() * this.props.sides.length) ]; // サイコロの目を反映 this.setState({ die1: newDie1, die2: newDie2, rolling: true}); // タイマーセット setTimeout(() => { this.setState({rolling: false}) }, 1000) } render() { return ( <div className='RollDice'> <div className='RollDice-container'> <Die face={this.state.die1} rolling={this.state.rolling} /> <Die face={this.state.die2} rolling={this.state.rolling} /> </div> <button onClick={this.roll} disabled={this.state.rolling}> {this.state.rolling ? 'Rolling...': 'Roll Dice!'} </button> </div> ) } } export default RollDice; |
|
1 2 3 4 5 6 7 8 9 10 11 |
Die.js import React, {Component} from 'react'; import "./Die.css"; class Die extends Component { render() { return <i className={`Die fas fa-dice-${this.props.face} ${this.props.rolling? 'shaking' : ''}`} />; } } export default Die; |
これでボタンが押下された時、ダイスがグラグラと揺れるようになりました。
次回
次回は、ステートのより詳細な使い方を学習しましょう。
にほんブログ村
コメントを残す
コメントを投稿するにはログインしてください。