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

Reactサンプルアプリ開発 プラニングポーカー まとめ

いったんサンプルアプリとしての機能は完成したので、まとめ。 React Hooksの勉強のため、プラニングポーカーを題材にしたサンプルアプリを開発した。ソースコードはGitHubにアップしてある。また、サンプルアプリはHerokuにデプロイしてある（無料枠だが）https://pp-a-pp.herokuapp.com/ テクノロジースタックは以下。 フロントエンド言語TypeScriptツールBabelWebpackcreate-react-appUIライブラリReactReact HooksReact Transition Group (CSSトランジッション)react-i18next …

キーブレイク処理をジェネリクスで汎用化する

キーブレイク処理とは 業務アプリケーションの開発をやっていると、キーブレイク処理を書く場面にしばしば遭遇する。COBOLerなど昔からプログラムを書いている人にはお馴染みの処理であるが、知らない人のために說明すると、（ソート済みの）明細データの集合を順次処理していき、特定のキー項目が変わったタイミングで何らかの処理を差し込みながら出力を行っていく処理方法のことである。 具体例を示そう。以下のような売上明細クラスがある。※C#となっているが実際はJava public class SalesLine { // 売上日 private String salesDate; // 商品コード priv…
books

【読書記録】アジャイルソフトウェア開発の奥義(4) ソフトウェアを腐敗させないためのSOLID原則 S

前回の記事 引き続きボブおじさんの名著を読み直している。 第7章 アジャイル設計とは？ ソフトウェアの仕様は常に代わり続けるもので、仕様変更に耐えられず設計が劣化していくなら、それは自分たちの設計やプラクティスに問題があるのだとボブおじさんは言う。 ソフトウェアが腐敗し始めた兆候として以下の7つが挙げられている。 硬さもろさ移植性のなさ扱いにくさ不必要な複雑さ不必要な繰り返し不透明さ ソフトウェアの腐敗を防ぐために、アジャイル開発者はクリーンな設計を保つ努力をしなければならない。「アジャイルな設計とは何か？」について以下のように締めくくられている。 アジャイルな設計とは「プロセス（流れ）」や「…
2021-02-19
books

【読書記録】アジャイルソフトウェア開発の奥義 (3) 写経したい第6章

ボブおじさんの名著『アジャイルソフトウェアの奥義』を読み返しながら感想などをつらつらと書き連ねる、その3。 【読書記録】アジャイルソフトウェア開発の奥義 (1)【読書記録】アジャイルソフトウェア開発の奥義 (2) 第5章 リファクタリング エラトステネスの篩というアルゴリズムを使って素数を作るプログラムを題材に、少しずつリファクタリングしていく様子を実演する章。 リファクタリングは食後のキッチンを片付けるようなものだ。最初は後片付けをしなければ、それだけ食事時間は短くて済む。しかし、片付けておかないと、翌日の食事の用意をするときにもっと時間がかかってしまう。『アジャイルソフトウェア開発の奥義』…
2021-02-07
books

【読書記録】アジャイルソフトウェア開発の奥義 (2)

ボブおじさんの名著『アジャイルソフトウェアの奥義』を読み返しながら感想などをつらつらと書き連ねるシリーズ2回目。 第3章 プラニング この章では、XP（エクストリームプラニング）のプラクティスのひとつ「計画ゲーム」について説明されている。特筆すべき点はないので割愛。 第4章 テスティング テストコードを書くこと、テスト駆動で開発を行うことの重要さが説かれている。 つまり、テストを最初に書くという行為は、設計上の判断をふるいにかける行為でもあるのだ。『アジャイルソフトウェア開発の奥義』（第4章, p. 35） プログラムが解決しようとしている領域において、どの概念が他の概念より重要なのか、重要な…
2021-02-06
books

【読書記録】アジャイルソフトウェア開発の奥義 (1)

ボブおじさんことロバート・C・マーチンによる名著の第2版。長らく積ん読状態だったが、少しずつ読み進めながら感想などつらつらと書いていこうと思う。 https://www.amazon.co.jp/%E3%82%A2%E3%82%B8%E3%83%A3%E3%82%A4%E3%83%AB%E3%82%BD%E3%83%95%E3%83%88%E3%82%A6%E3%82%A7%E3%82%A2%E9%96%8B%E7%99%BA%E3%81%AE%E5%A5%A5%E7%BE%A9-%E7%AC%AC2%E7%89%88-%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%…
2021-02-03

JavaScriptの配列のソートの話 (3) – lodash _.orderBy()

前回の記事 lodashのorderByについて書くのを忘れていたので簡単に。sortByよりも柔軟なソートを手軽に行うことができる。 it('_.orderBy()でソートできる', () => { // Act const sortedUsers = _.orderBy(users, , ); // Assert expect(sortedUsers).toEqual() }); 上の例は、第1ソートがuserプロパティの値の昇順、第2ソートがageプロパティの値の降順であることを示している。以下のようにネストされたプロパティの指定もできる。 it('_.or…
2021-01-24
books

Bookレビュー：Test-Driven React

https://www.amazon.co.jp/dp/B07VB5SFZ5/ 本の概要 タイトルのとおり、テスト駆動でReactアプリケーションを開発していく方法を学べる本。紙の本だと170ページとのことで、分量はそれほどでもない。ただ、チュートリアル形式の本なので、実際に手を動かしながら読んでいくのがよい。そうすると少し時間がかかる。 簡単なテストケースからスタートして段階的にコンポーネントを作成しながらReactについての説明もされるが、ある程度の知識（公式のドキュメントやチュートリアルを読み、簡単なReactアプリケーションを作成できるレベル）はあった方がよいと思われる。とくに5章のH…
2021-01-24

JavaScriptの配列のソートの話 (2) – lodash _.sortBy()

https://blog.ynkb.xyz/296/ の続き。Array.prototype.sort() は操作が破壊的である点や、柔軟なソートに耐えられないという決定があり、多くの場面では使いづらい。 プリミティブ要素のソート まずは _.sortBy() から。_.orderBy() はまた次の投稿にて。 null と undefined の扱いは Array の場合と異なる。null と文字列の 'null' は同一視されない。 null は undefined よりは前に来る。 it('nullとundefinedの扱い', () => { // Arrange…
2021-01-19

JavaScriptの配列のソートの話 (1) – Array.prototype.sort()

JavaScriptでの配列のソートについて簡単にまとめてみた。 問題：以下の操作を行った場合の配列要素の並びは？（答えは最後）.sort() Array.prototype.sort() 配列自体のsortメソッドには通常比較関数を渡すが、何も渡さなかった場合は要素が文字列に変換されてUTF-16のコード順でソートされる。配列自体が書き換わる破壊的操作である点に注意が必要だ。 it('文字列の配列をソートできる', () => { // Arrange const array = ; // Act array.sort(); // Assert expect(array…
2021-01-18

Jestを試してみる

インストールとテスト実行 Jestを使ったことがなかったので、create-react-appを使って簡単に試してみたメモ書き。 プロジェクトの作成。 $ npx create-react-app try-jest --template typescript $ cd try-jest $ code . App.tsx に対するテスト App.test.tsx が既に存在している。 ターミナルからテストを実行。 $ yarn test ウォッチモードで実行されるので、aを選ぶ。 テストが成功する。 App コンポーネントに表示される文字列を変更してみる。テストの期待値を修正。 test(…
2021-01-12

Azure Static Web Apps にReactアプリをデプロイする方法

簡単なサンプルアプリを作成してデプロイする手順のメモ。※2020年11月時点で未だにプレビュー版なので、手順は大きく変わる可能性もあり 前提条件： nodeがインストール済みVS Codeがインストール済みAzure Functions Core Toolsがインストール済み Reactアプリの作成 プロジェクトのルートを作成。 $ mkdir hello-static-webapps-sample && cd hello-static-webapps-sample create-react-appでサクッと作成。 $ npx create-react-app hello-app VS Cod…
2020-11-17