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

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
books

『React Explained』の感想 – React初学者にお薦めのチュートリアル本 –

『React Explained: Your Step-by-Step Guide to React』を読了した。 Manningから今秋出版予定の『React Hooks in Action』のアーリーアクセス版を読む前に旧来のReactをきちんと復習しておこうと思い、Kindle版で購入。 本書の特長 紙版で303ページと比較的コンパクト。2019年3月出版なので、情報は比較的新しい（ただしHooksは本書では取り扱わない）。演習問題やチュートリアルを手を動かしながら進めていく形式。 本書の構成 第1部（1章〜3章）は、Reactを学ぶための前提となるJavaScriptの知識が簡単に説明…
2020-06-07
Poker

Reactサンプルアプリ開発 プラニングポーカー (16) react-i18nextによる多言語対応

今回は、react-i18nextというライブラリを使ってプラニングポーカーアプリを多言語化してみる。こちらのブログを参考にさせて頂いた。 まずはパッケージのインストール。 $ yarn add i18next react-i18next 言語選択用のコンポーネント。 import React, { FunctionComponent } from "react"; export type LanguageSelectorProps = { languages: { code: string, name: string }[], selectedLanguage: stri…
2020-05-31

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

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

Reactサンプルアプリ開発 プラニングポーカー (15) デッキのタイプを変更 – Contextの利用

引き続きプラニングポーカーのサンプルアプリの開発。見積りに使用するデッキはフィボナッチ数で固定であったが、最初に選べるようにしたい。 デッキの選択 トップ画面で選択したデッキを引き渡して使うのだが、Deckコンポーネントは末端に存在するコンポーネントのため、トップレベルのコンポーネントからバケツリレーで渡すのは面倒くさい。 そこでContextを使った実装を試してみた。まずはコンテキストの定義と作成。 import React, { FunctionComponent } from "react"; interface IAppContext { deck: string[…
2020-05-22