UGA Boxxx

つぶやきの延長のつもりで、知ったこと思ったこと書いてます

【React】キャプチャフェーズのイベント

onClickCaptureを使えば、イベント伝搬のうちのキャプチャリングフェーズで実行される関数を指定できることを知った

ja.react.dev

キャプチャリングフェーズとは、ルート要素からクリックされた要素に向かってイベントが伝播し、それぞれの要素にイベントリスナ・イベントハンドラが登録されているかどうかを調べるフェーズで、登録されていれば実行される

ちなみに、キャプチャリングフェーズの他に、クリックされた要素に到達した時のターゲットフェーズ、クリックされた要素からルートに向かって伝搬するフェーズのバブリングフェーズがある

参考:React・JavaScriptのイベント伝播について今更ながらに理解したのでまとめる

つまり、onClickなどで指定したイベントハンドラを実行する前に実行したいイベントハンドラは、onClickCaptureで指定するのが良い

ちなみに、Reactではv16 -> v17の時に、ドキュメントルート要素からクリックされた要素に向かってイベントが伝播していたものから、ReactDOM.render(<App />, rootNode);のrootNodeに当たる要素からの伝搬に変わったみたい

イベントデリゲーションに関する変更

【React】useTransitionについて

useTransitionを調べる

ja.react.dev

上のドキュメントにあるように用途としては以下が挙げられる

  • state 更新をノンブロッキングトランジションとしてマークする
    トランジションなしの場合、ボタンを押したときそれが遅い処理だとUI が反応しなくなるが、トランジションありの場合だとフリーズしない
  • トランジション中に保留中状態を視覚的に表示する
    トランジション中はisPendingで判別が可能なので、それで視覚的な何かを表示させることができる
  • 望ましくないローディングインジケータの防止
    すぐに画面が切り変わるときにローディングインジケータが一瞬表示されるとユーザーの気が散ってしまうので、トランジションを使って防止する
  • サスペンス対応ルータの構築
    ページのナビゲーションをトランジションとしてマークすると、上記の更新ノンブロッキングやローディングインジケータの防止により、ユーザーに快適にページ遷移をさせることができる

仕組みはuhyoさんの記事がわかりやすかった

zenn.dev

startTransitionに渡すcallbackの中でsetStateを行うと、そのsetStateによって始まったレンダリングが完全に完了するまで表側のレンダリングを待ってくれるものと理解した

また、裏の世界と表の世界とあったが、確かにGitブランチのように例えても良さそう(そういう例え話をお聞きした)

表の世界がメインブランチ、裏の世界がフィーチャーブランチだとして、フィーチャーブランチで作業が完了したらメインブランチにマージされるイメージ

応用例としては以下の記事でプロレスバーが紹介されていて、トランジション開始時に100%のうちの数%ずつ等間隔で進行させて、100%になり切る前にトランジションが完了したらcallback関数の中で残りの%分を一気に終わらせるようなアニメーションを作成している

buildui.com

【Next.js】App RouterでView Transitions API を扱えるようにしてみたという話

もうすぐSafariView Transitions APIが実装されるということでちょっと盛り上がった

techfeed.io

とはいえ、まだTech Preview中なので、全ユーザーが使うとなるともう少し後になる模様

View Transitions APIChromeでは既に実装されていて、自分でも以前調べていた

uga-box.hatenablog.com

これがNext.jsのApp Routerで扱えるようにしてみたというお話しを聞いたのでメモ

View Transitions API を画面遷移の表現方法として使うには、以下のcallback関数に遷移開始と遷移完了をPromiseとして扱ったものを渡す必要がある

document.startViewTransition(callback)

しかし、App Routerでは遷移開始と遷移完了をPromiseとして扱えないので、工夫をしなければView Transitions APIが使えない

ゆえに、現在Next.js側でなんとかしてくれとdiscussion中とのこと

Add support for View Transition API · vercel next.js · Discussion #46300 · GitHub

ただ、コメントの中にuseTransitionでPromiseを返すようなhooksを実装をすれば一旦使えるという提案があり、これを試したというお話しだった

Add support for View Transition API · vercel next.js · Discussion #46300 · GitHub

実際に上に記載されたコードを自分でも試したところうまく動いた

ブラウザバックの対応などのためにはやはりNext.js側に対応してもらう必要があるが、このように実装することもできると理解した

実装してみてuseTransitionの仕組みがよく分かっていないことに気づいたのでそれは別の機会にまとめてみる

【UI開発】UI Design Tips を紹介しているサイト

UIとUXの慣例的に良いとされている原則や名前のついた原則をイメージ付きで説明されているサイト

感覚的にもそうだろうというものが多く、一覧でまとめられているので重宝しそうなサイト

「UI & UX Design Tips」

www.uidesign.tips

www.uidesign.tips

この方法が良いといえる根拠は、いくつかの実際のサイトを分析した結果らしいが、これに載っているからという理由でプロダクトマネージャーやデザイナーを説得するのは難しいそう

なので、同サイトの別の記事を見ていて、以下のような1つのプロダクトを分析する記事も合わせて紹介すると、すんなり受け入れてくれそう

www.uidesign.tips

例えば、上の記事にある中で「CTAが2画面分以上離れている。これはフィッツの法則を応用すると良い。」とある

そして、すぐそばにフィッツの法則へのリンクも貼られている

このように、根拠も一緒になっていると良いなと思った

【事業戦略】Wardley Mappingで事業の立ち位置を測る(気候から教義まで)

前回のWardley Mappingを調べた続き

uga-box.hatenablog.com

Wardley Mappingは以下の孫子の兵法を基に作られたビジネス戦略のためのツール

  1. 目的…道徳的義務、行動範囲、なぜそれを行うか、他の人があなたをフォローする理由
  2. 風景…競争している環境や部隊の位置、風景の特徴、行く手を阻む障害物
  3. 気候…環境に作用する季節やゲームルール、競合他社の行動
  4. 教義…普遍的な原則であり、直面する状況に関係なく機能するように見える一連の信念
  5. リーダーシップ…自分の目的、状況、気候、能力を考慮して選択する

1.目的と2.風景は前回調べたので、今回は3.気候から4.教義について調べる

気候

ビジネス戦略における「気候」とは、自分の行動に関係なくマップを変えてしまうものである

マップとは前回調べて作り上げた「風景」にあたるもので、以下のような図を指す

Finding a path - https://medium.com/wardleymaps/finding-a-path-cdb1249078c0

これは「オンラインフォトサービス」の2005年のときの風景であるが、この風景は一生このままではなく「気候」によって変化するよ!ということがここで伝えたいことである

変化とはマップ上でいうコンポーネントが左から右に移動していくことで、未知の発想が技術の進歩により特定の用途で作れるようになり、特定の用途だったものが商品化し、やがて誰でも作れる世の中に進化していくことである

この変化を捉えていないとビジネスの優位性が失われる可能性がある

気候の特徴

自分の事業の立ち位置(風景)を変えてしまう気候にはいくつかの特徴があるという

例えば

  • すべてのコンポーネントは進化する
  • すべては進化はするが、すべてが生き残るわけではない
  • ある特定の変化にうまく機能したスキーム(アジャイル、リーンなど)が、別の変化にも機能するとは限らない
  • 進化することは他社との差別化がなくなっていくことだが、進化することによって新しいイノベーションを可能にする(たとえば標準化された電力供給は新しいイノベーションを生み出した)
  • 進化は効率を高め、効率の向上は新たな価値源を生み出す
  • 進化には追随するしかない(カルテルを形成して新規参入を阻止できない限り、進化をとりいえれた他社が必ず現れる)
  • 過去の成功が惰性を生む(今のモデルが衰退することが明らかになるまで、手を変えようとしない)

など

全ては書ききれないため、詳しくは記事を参照してほしい

medium.com

このような気候変動の特徴を念頭に、マップを眺めながら予測を立てる

2005年当時にWardley氏が予測できたことの例

オンラインフォトサービスについて

  • オンラインフォトサービスは、富を生み出すプロダクトにさらに移行していた
  • 他社が競合するオンラインフォトサービスを作ることがはるかに簡単になる
  • 投資をするか、新しい角度や新しい差別化要因を見つける必要があった

コンピューティングについて

  • コンピューティングはよりユーティリティになる可能性がある
  • 今は限られた企業しかないコンピューティング技術が、誰でも簡単に構築できる時代(今で言うとクラウド)がいつかはくるだろう
  • おそらく最初はクラウドコンピューティング化は抵抗があるであろうが、進化し企業は導入を迫られることになるだろう
  • コンピューティングに起こることは、コーディングプラットフォームにも起こるだろう
  • 構成、セットアップ、インストールなどの「ヤクの毛を剃る」タスクはなくなるだろう
  • コーディングしてデプロイするだけで済む未来の世界が待っているだろう
  • コーディングしてデプロイするだけで済む未来では、コンポーネント間の関係は同じでもコンポーネントの提供方法が異なるだろう
  • あらゆる種類の新しいイノベーションを実現したサービスが迅速に作成できるようになり、何かはわからないが多くの新たな価値の源が存在するだろう

このように予測を立てていく

予測をたてたら次はビジネスにおける「教義」に取り組むことになる

教義

孫子曰く、「敵の側面を攻撃するには、敵が既知の位置にいる必要がある」

先述した通り、気候変動は自らの手で止めることはできないが、予測できるものであった

次に、ビジネスにおいて一般的に有用とされる原則を「教義」として取り組み、予測を立てた気候変動に対処できるようにする

全ての原則は網羅できないので、いくつかの原則を挙げ、説明が必要なものは補足する

原則:ユーザーのニーズに焦点を当てる

私たちが生み出すあらゆる価値は、他者のニーズを満たすことによって生まれる

ユーザーのニーズはマップ全体のアンカーとなるため、最初にユーザーのニーズを定義する必要があるということ

具体的には

  • どのユーザーについて話しているのか(顧客、業界の規制当局、株主、従業員、さらには自分)
  • 組織がユーザーと行ったトランザクションはどのようなものか
  • トランザクションを操作するときのカスタマージャーニーはどのようなものか
  • toBの場合はその企業の状況はどうか

など

ただ、ディスカッションとデータ収集で見つけた「ニーズ」は時に間違っている可能性があるので注意が必要なことはよく知られている

例えば有名な話で、フォード社が車の開発当初にユーザーにヒアリングをすると「私たちは車というものは別に欲しくないです。私たちはより速い馬が欲しいです!」という声が返ってきた

このようにコンポーネントが進化の段階の間を移動している時、ユーザーのニーズはレガシーな考えに固執している可能性があるので注意が必要である

原則: 共通の言語を使用する

割愛

原則: 透明性を保つ

割愛

原則: 前提条件に異議を唱える

ユーザーのニーズに焦点を当て、マップを使用して共通言語を作成し、それを組織内で透過的に共有しても、それに異議を唱える人がいない場合はほとんど意味がないとのこと

最近、デビルズ・アドボケートという会議のメンバーの誰かに、敢えて対立する意見や視点を提供する役割を与えるコミュニケーション手法を知ったのでそれに近いかもしれないと思った

www.seminar2b.site

原則: 重複と偏りを取り除く

原則: 適切な方法を使用する

適切な方法を使用するには、小さく考える必要があるという話

ここから組織も適切な小ささが良いというチーム編成の話し(AmazonTwo Piazza Teamのような話)になってきて面白いのだが、消化しきれていないので別のブログにまとめたい

詳しくは記事を参照

medium.com

感想

これで「気候」と「教義」を理解したことになるが、肌感覚的にこれらを知ったからといって使いこなせるものではなく、実際に事業に向き合って頭を捻って失敗しながら体得していくんだろうなという感想を持った

とりあえずやってみようと思う

【事業戦略】Wardley Mappingで事業の立ち位置を測る(目的から風景まで)

事業のコアドメインの見つけ方で、Wardley Mapping というのを知ったので調べた

Wardley Mapping(ウォードリー・マッピング)は、Simon Wardley氏によって開発されたツールで、ビジネス戦略の策定において組織が提供する価値やサービスをビジュアル化し、それらがどのように相互関連しているかを理解するためのツール

Wardley氏が経営していた会社の失敗の経験などを通じて、デジタル化における経営判断をサポートできるような、方向感のある「地図」を描きたくて作ったとのこと

以下の記事に書かれているのだが、彼がCEOとして道に迷っていた時に本屋でたまたま手にした「孫子の『兵法』」を読んで、自分の戦略の理解において何かが欠けていることに気づいたらしい

medium.com

孫子は他者との争いにおいて重要な 次の5 つの要素について説明している

  1. 目的…道徳的義務、行動範囲、なぜそれを行うか、他の人があなたをフォローする理由
  2. 風景…競争している環境や部隊の位置、風景の特徴、行く手を阻む障害物
  3. 気候…環境に作用する季節やゲームルール、競合他社の行動
  4. 教義…普遍的な原則であり、直面する状況に関係なく機能するように見える一連の信念
  5. リーダーシップ…自分の目的、状況、気候、能力を考慮して選択する

「他者との争い」を「他社との競争」に置き換えて、これをビジネス戦略にも応用しようという考え

手順(目的から風景まで)

手順は上の順番通りだが、まず目的から風景までの手順はMiroのテンプレートを使うのが良さそう


ウォードリーマップテンプレート | ビジネス用コンテクストマップ | Miro

このテンプレートに詳細な手順が記載されていて、付箋を活用してアンサーを描いていく

  1. Purpose: この組織は何のために存在しているか?
  2. Scope: 何をマッピングするのか?
  3. Users: ユーザーは誰か?
  4. User Needs: ユーザーはあなたに何を求めているのか?各ユーザーのジャーニーは何か?
  5. Value Chain: ユーザーのニーズを満たすために必要な要素を矢印で繋ぐ
  6. Map: Value Chainを丸々マップに移し、各要素を進化の特性(横軸)に合わせて水平移動する

5のValue Chain の縦軸は顧客から見て「見える」か「見えない」かの軸(可視化軸と呼ばれる軸)で、上位のカスタマーを置いて→ニーズ→必要な要素の順に矢印で繋いでいく

例えば、顧客が「オンラインで写真を編集したい」というニーズを持っていると仮定した場合、「オンラインストレージ」が必要であると想像すると以下のような図になる

まずは一つずつやるのがポイントであり、合っているか間違っているかも気にしない方が良い

これを6のMapにそのままコピーする(最初のCustomerの位置はどこでも良さそう?とりあえず中央におく)

横軸は以下のように分かれていて(意味はMiroにもう少し詳しく書いてある)、これに合わせて要素を水平移動させる

  • Genesis…マーケット: 不明
  • Custom…マーケット: これから、荒削り
  • Product (+rental)…マーケット: 成長中
  • Commodity (+utility)…マーケット:成熟

やってみると、これは時代によって代わることがわかる

説明のために仮に2005年の時とすると以下のような感じになる(合っているか間違っているかはまずは気にしない)

これで5.Value Chain -> 6.Map の1セットが終わったので、 5に戻ってくり返す

次に、「オンラインストレージ」を実現するには「Webサイト」が必要なので繋げる

そして、それを2005年だとしてマップに持っていく

これをくり返すとマップが出来上がる

実はこの例はWardley氏のブログで紹介されていたもので、最終的なマップは以下となる

Finding a path - https://medium.com/wardleymaps/finding-a-path-cdb1249078c0

全ての線は「ニーズ」でつながっている

完成した図をみると「オンラインストレージ」「Webサイト」は顧客の直接のニーズにもなりうるので、顧客からもつながっていたりする

逆に一番下は「電力」まで掘り下げていて、マーケットの成熟とはこのあたりを指すことがわかる

目的から風景までの手順はこれで終了となる

より詳細な説明はWardley氏の記事にある

medium.com

これは一発で描くことが難しいと思うので、チームメンバーでよく吟味することが必要だと思った

この後の気候〜の手順はこのマップを使って実際に事業戦略を練ることになる(別ブログにまとめる)

【Test】TDDの定義の話

Kent Beck氏がTDDの定義を改めて明確化した文章をt-wadaさんが翻訳した記事

t-wada.hatenablog.jp

内容としては、Kent Beck氏がTDDの本来の意味や定義が弱まって伝わっている(t-wadaさんは「意味の希薄化」と書かれている)ことが残念なので、正しく広まってほしいため改めて定義するというものだった

TDDの定義は以下

  1. テストリストを書く
  2. テストコードを書いてテストが失敗することを確認する(1つずつ)
  3. プロダクトコードを変更しテストを成功させる(その過程で気づいたことはテストリストに追加する)
  4. 必要に応じてリファクタリングを行い、実装の設計を改善する
  5. テストリストが空になるまでステップ2に戻って繰り返す

私はほとんど認識齟齬はなかったが、いくつかはやりがちなものがあった

例えば、

  • 3.でテスト対象を実際に動かしたときの値をコピーして、テストコードの中の期待値にペーストしてしまうこと
    →たまにAPIの結果で分かりきったjsonの構造を手で作るのが大変すぎると感じた時にやってしまうことがある
  • 4.で必要以上にリファクタリングしてしまうこと
    →Kent Beck氏も言っているが、コードの整理整頓は気持ちよくついやってしまうことがある

t-wadaさんのご意見の中で、言葉の定義も誤解している人がいると書かれていて

テストファーストなのか、開発者テストなのか、自動テストなのか、はちゃんと区別して使うべきというのはそうだと感じた