とあるプログラマーの技術ブログ

サンプル開発

サンプルアプリケーションの開発記録

React練習 – 割り勘計算アプリ(4)

前回の投稿では、ヘッダの支払額入力に反応して割り勘計算を行い、結果をヘッダおよび各明細に反映させるように実装を行った。 今回は、各明細の操作を可能にする。まずは、明細コンポーネントの各入力要素のchangeイベントにハンドラメソッドを紐付ける。 class Detail extends Component { render () { return ( <div> <input type="text" value={this.props.name} onChange={e => this.handleNameChange(e)} /> <l…
2019-10-22

React練習 – 割り勘計算アプリ(2)

前回の投稿では、ヘッダーコンポーネントと明細コンポーネントを作成し、固定値をプロパティで渡すところまで実装した。次のステップとして、これらのコンポーネントをまとめる親コンポーネントを作成し、親コンポーネントのstateに保持するデータを渡すように修正する。 コンポーネントのstateの初期状態をconstructorでセットする。 // 割り勘計算機コンポーネント class BillSplitter extends Component { constructor(props) { super(props); this.state = { payment: 0, //支払額 total: 0,…
2019-10-22

React練習 – 割り勘計算アプリ(1)

公式のスタートガイド、チュートリアルのほか本2冊を読んでReactの基本は理解できた気がするので、ちょっとしたサンプルコードを書いて確認したいと思う。題材は割り勘計算アプリ。 とりえあずnodeとcreate-react-appはインストール済みの前提で、アプリケーションの作成から。 $create-react-app bill-splitter 自動生成されたApp.jsに手を加えていく。今回はコンポーネントもファイルを分けずにApp.js内に記述していく。 import React, {Component} from 'react'; import './App.c…
2019-10-21

サンプルアプリ開発を始める

自己学習用に何かサンプルアプリを開発しようと思う。目的は以下のような感じ。 興味のある技術を試したい業務では使っていない技術を試したいアーキテクチャやパターンを試したい サンプルにちょうどよい適度に複雑な題材は何かないだろうか、ということで、『カイゼン・ジャーニー』でも紹介されている星取表をWebアプリケーションとして実装してみることにする。以下のワイヤーフレームのイメージで。 星取表はアジャイルチームのチームビルディングに使用するツールで、メンバーのスキルセットを可視化するもの。 今のところ想定しているスタックやアーキテクチャは以下のような感じ。 SPAフロントはReact+TypeScri…
2019-10-12