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

アジャイルの原点に立ち戻る (DevLOVE Advent Calendar 2019)

このポストは、DevLOVE Advent Calendar 2019の18日目です。テーマは「それぞれの10年、これからの10年」ということで、自分自身や周りの環境の、「これまで・いま・これから」を考えてみたい。 10年前〜 2009年というと、今の会社に転職してまもなく2年という時期だった。当時は.NETエンジニアで、担当していた仕事も.NETベースの業務アプリケーションやパッケージソフトの開発・保守だった。前職は技術系のコンサル会社だったので当時からXPベースのアジャイル開発をやっていたけれど、日本におけるアジャイルの普及度は当時まだまだだったと思う。 当然ながら今の会社(SIer)はア…
2019-12-17
books

[読書記録] Clean Agile 2. The Reasons for Agile

2章はアジャイルをやる理由が述べられている。 現代社会では、重要なことを成し遂げるにはソフトウェアが必須であり、ソフトウェアが世界を支配をしている。ソフトウェアを書く我々プログラマが世界を支配している、とも言える。プログラムのバグによって人を殺すことも、経済に打撃を与えることもある。だからプログラマはプロフェッショナルでなければならない。 マネジャーが、顧客が、ユーザーが、プログラマに当然期待する事柄が列挙さている。 クソを出荷しないイテレーションの終わりには、技術的に常にデプロイ準備できていること。デプロイするかどうかはビジネス的に決定する生産性を維持する変化に安価に対応できる常に改善し続け…
2019-12-14
books

[読書記録] Clean Agile 1. Introduction to Agile

ボブおじさんの新作、『Clean Agile』が刊行されていたので、すぐさまポチッと購入。本当はペーパーブックが欲しかったのだけど、取り寄せに最大3ヶ月となっていたのでKindle版を購入した。 とりあえずざーっと一通り読んで、二周目に入ったところ。記憶と理解を深めるために、1章ずつまとめと感想を残そう。 アジャイルマニフェストの採択から20年近くがたった今、今一度アジャイルの原点に立ち返ろうというのがこの本の主要なテーマとなっている。時間を経てアジャイルはメインストリームとなったけれど、その間に商業的なものが付着したり、プロセス面が強調されてアジャイルという言葉が独り歩きしたり、いろいろ負の…
2019-12-01

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

前回の投稿までで大部分の実装ができたので、残りは人数の増減アクションの追加。各明細の横に削除と追加のボタンを配置して、クリック時のイベントで処理を行う。 明細のJSXに、以下のようにボタンを配置してclickのイベントハンドラ呼び出しを記述。 <input type="button" value="削除" disabled={!this.props.deletable} onClick={e => this.handleDeleteClick(e)} /> <input type="button" value=…
2019-10-26

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

前回の投稿では、割り勘計算アプリをコンポーネント化し、HTMLがレンダリングされるところまで実装した。 BillSplitter …親コンポーネント。状態保持や計算処理を司るHeader …子コンポーネント。合計金額などの表示や入力を担当するDetail …子コンポーネント。各参加者の支払額などの表示や入力を担当する。 現時点での画面イメージは以下。 現在の画面 Reactではイベントハンドラが紐付かない入力要素はreadonly扱いなので、まずはヘッダの支払額要素にイベントハンドラを紐付ける。 class Header extends Component { render () { retu…
2019-10-23
books

[読書記録] React入門

評価:★★★☆☆ Reactの勉強のために2冊目に読んだ本。 ヤフーなどでフロントエンジニアとして働く著者グループによる書籍なので、実践的なSPAのアプリケーションを開発するために必要な内容がカバーされている。ただ、Reduxなども扱っているのと、本全体で約300ページということで、各章あたりの記述量ややや不足している感がある。個人的意見としては、ページ数を450ページくらいに増やしてガチ入門本とした方がよかったのではないかと思う(難易度が高めなのに、ページ数的にはライトな入門書ということで、良さが出し切れていない) サンプルコードのtypoは凄まじく多いので注意が必要(翔泳社さん、この仕事は…
2019-10-22

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