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

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
books

[読書記録]秋本治の仕事術

評価:★★★☆☆ こち亀の作者による仕事術に関する本。以下の6章で構成される。 セルフマネジメント術時間術コミュニケーション術発想術健康術未来術 書かれていることは結構当たり前のことなのだが、当たり前のことをずっと続けてきた結果、40年間に渡る連載を続けた秋本さんの言うことだから説得力がある。突き詰めると、好きな仕事だから頑張れる、ってことなんだろうな。 https://www.amazon.co.jp/%E7%A7%8B%E6%9C%AC%E6%B2%BB%E3%81%AE%E4%BB%95%E4%BA%8B%E8%A1%93-%E3%80%8E%E3%81%93%E3%81%A1%E4%B…
2019-10-18
books

[読書記録]WebデベロッパーのためのReact開発入門

評価:★☆☆☆☆ サンプルアプリのフロントをReactで作りたいと思い、積ん読になっていた本を引っ張りだして読んだ。発行日が2016年12月1日なので内容は古いだろうが、まずは入門ということで。 コンパクトサイズ、200ページ強ということで入門書であることは間違いないのだが、想像よりもライトな感じ。Reactがどんな感じのライブラリか、というのをサクッと理解するのには役立つ。が、これを読んで実際にアプリケーションを開発できる気はしないので、もう少し本格的な本を読みたくなる。 似たようなサンプルコードが続いたり、サンプルコードの説明がダラダラ書かれていたりといった点は読者にとって苦痛なので改善し…
2019-10-14

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

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