
所属会社が CTO 協会主催の[Thanks Giving Day 2022](https://eventregist.com/e/gmxATLNsi1KK)にスポンサーとして出展したので、スポンサーとして講演してきました。

久々のオンラインイベントだったことや、基調講演から非常に熱い話が聞けたので、終始熱気に包まれた雰囲気の良いイベントだったと思います。主催の CTO 協会と当日運営されていたメンバーの方々、本当に素晴らしいイベントでした。感謝しています。

今回は、基調講演の小林議員の話が非常に印象的だったので、その辺りの熱気が冷めないうちに記録にのこしておこうと思います。

## 基調講演の感想

基調講演は藤本理事・小野理事・小林議員の特別対談ということで進められました。

正直なところ、議員が基調講演すること正直あまり期待していなかったんですよね。
しかし、実際の話を聞いてみるとデジタル庁でやっていることや、今後の日本の未来のためのアイデアがビジョンの話など
想像以上に面白く、また、アプローチ自体が非常にプログラマ思考で進められていて感心しました。

話の内容としては、小林議員がデジタル庁でおこなっていることが中心でしたが、どれも非常に興味深い内容でした。

- 日本は公共インフラが老朽化してきて問題となっているが、実は下のインフラ（法律・制度・さまざまな商習慣。以下、ソフトインフラ）が実は老朽化していて、新しい取り組みを行う際に障害になっている。
- ソフトインフラのボトルネック箇所をすでに特定し、そこをリファクタする取り組みをしている。
- 法律のコード化に取り組んでいる。コード化することで、法律を変更した際にどこに影響があるか、それぞれが矛盾しているか検知することが可能。これにより影響についてコンピュータ上でシュミレートができる。また、コード化することで A と B がどちらが良いかなど、実際にものを見て議論ができるようになる。
- 国として自治体共通のインフラを整備しようとしている。将来的にマーケットプレイスのようなものを設立し、調達のコストや期間、サービスの多様化などを促す。
- ソフトインフラに縛られた理不尽な要求がある、その場合、もっと上流に行ってルール（仕様）を書き換える必要がある。

最後に、「**みんなで上流に行ってルール（仕様）を書き換えよう**」という強いメッセージをもらいました。話を聞いているうちに、自分の中で何かが熱くなるのを感じました。

久々に日本の未来について希望が持てる話でしたし、デジタル庁がしっかり仕事をしているんだなと認識しました。デジタル庁がんばれ！

そしてこの基調講演はイベントの空気を決定し、イベント全体が非常に熱気があるものとなりました。

## 「これからのエンジニア採用・育成のあり方」　スポンサーセッション

![](https://blog-mitsuruog.s3.ap-northeast-1.amazonaws.com/images/2022/cto-1.png)

小賀理事との対談形式でした。「これからのエンジニア採用・育成のあり方」というテーマでいろいろと話をしました。会場は満員でかなり緊張したことを覚えています。また機会があったら挑戦してみたいです。

![](https://blog-mitsuruog.s3.ap-northeast-1.amazonaws.com/images/2022/cto-2.JPG)

個人的には、セッションの準備の過程で、自社のプロダクトの理念や強みなどを改めて知る機会になって、非常に良かったです。

## 最後に

CTO 協会主催の Thanks Giving Day 2022。私自身も多くの CTO と直接お話する機会があり、想像以上に収穫が多かったイベントでした。

自身も含め、多くの人がデジタル庁や CTO 協会に貢献したいという気持ちを抱くようになったのではないでしょうか？

日本にはオードリー・タンのような人は現れないのかと巷では嘆かれているが、実はすでに存在してて、それなりに成果も出ているようでした。なぜ日本のメディアはこのことを取り上げないで、ネガティブな情報ばかり発信しているのか不思議に思いましたね。

「**みんなで上流に行ってルール（仕様）を書き換えよう**」

そんな気持ちになるいいイベントでした。


CTO協会主催のThanks Giving Day 2022に行った感想


この記事は[Visual Studio Code Advent Calendar 2019 - Qiita](https://qiita.com/advent-calendar/2019/vscode)8 日目の記事です。

現在、仕事で使っている VS Code の LiveShare を使ったリモートペアプログラミングについて紹介します。
ちなみに利用している技術スタックは、「React+TypeScript」のフロントエンドチームの事例です。

## 目次

## 背景

なぜ現在この方法を採用しているかというと、次のような理由がありました。

- ジュニアのフロントエンドが参画したため、育成する必要がある
- PullRequest をレビューという従来の形を採用してみたが、育成効果があまりないことにすぐ気づいた
- リモートワークが多い

## なぜ PullRequest をレビューがジュニア育成に機能しなかったのか？

一番の理由は、フロントエンドの UI には文書化しにくい暗黙の仕様(※)のようなものがたくさんあり、これらの内容を PullRequest という 1 点で指摘する場合、どうして**ももぐらたたき**のようになってしまいがちだからです。

> ※ レスポンシブ対応や中のコンテンツの幅を変化させたときにどう振る舞うかなどです。

このような指摘方法では、指摘している自分自身もなんだか楽しくないですし、ジュニアのモチベーションを下げてしまいそうで心配でした。

しばらくして**ももぐらたたき式**のやりかたを改め、自分のやり方を見せながら教える方針に変更しました。つまり**ペアプログラミング**です。

## 自分がやりたいペアプログラミングの形を探る

過去にやってきたペアプログラミングには、個人的にどうしても嫌いな側面があって、自分がペアプログラミングを主導する上でこれら問題を解決する方法を考える必要がありました。

自分がこれまでやってきたペアプログラミングの嫌いな点です。

- 教える側と教えられる側が別れている(今回のシニア・ジュニア間は特にそうなりやすい)
- 片方がナビゲータ側になるので、ナビゲータは画面を見ているだけで非常につまらない
- ナビゲータとドライバーで上下関係が生まれる(相性が悪いと今後の仕事上の関係が悪くなる可能性がある)
- スキルや知識の継承や共有が主目的になりがち

つまり、これまでのペアプログラミングは心理的な負荷が高く、双方にストレスが多いと感じていました。そこで、今回いい機会だと思い自分なりにどうしたいのか真剣に考えてみました。

そこで感じたことは、ペアプログラミング(というかペア作業)の一番の醍醐味は「**お互いに 1 つのものを協力して完成させていく過程を楽しみ、そこで生まれる達成感からお互いの信頼関係が深まることではないか**」と思った次第です。

そのため自分がやりたいペアプログラミングを実現するために、同じ PC の画面上で同時に並行作業でき、ナビゲータとドライバーの垣根をなくせるようなツール(道具)が必要でした。
そこで出会ったのが「**[Live Share](https://visualstudio.microsoft.com/services/live-share/)**」です。

## Live Share とは

前置きが長くなりましたが、Live Share を一言でいうと「**コードの共同編集**」です。
Google Doc の共同編集を体験した方であれが想像がしやすいかと思いますが、複数人で同時に同じコードを編集することができるツールです。

Live Share を使うと、下のように VS Code 上で他の人がどこを編集しているか一目でわかるようになります。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/liveshare-03.png)

> (画像は本家サイトのもの) https://visualstudio.microsoft.com/services/live-share/

Live Share は VS Code の plugin となっているので、こちらからインストールしてください。

- [Live Share \- Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare)

こまかな設定や利用方法については、Web を検索すると様々な情報が見つかるので、そちらを参照してください。

## 実際のリモートペアプログラミングのやり方

リモートペアプログラミングをする上で次のツールを利用しています。

- VS Code + Live Share
- Slack(ビデオチャット用。画面共有できれば他のもので代用可。)

VS Code の他にはリアルタイムで会話するために、ビデオチャットツールを利用しています。
Live Share には**Shared servers**や**Shared terminal**など相手の環境を共有できる強力な機能がありますが、やはり「そっちの画面ちょっとみせて」といったライトなやりとりができた方がいいので、ビデオチャットには画面共有ができた方がいいです。

まず、どちらかのローカル環境に VS Code 経由で接続する(Collaborative Session)ことでリモートペアプログラミングが始まります。

基本的に VS Code を左右 2 ペインにして作業します。
下の例では左がジュニア、右がシニアです。ジュニア側は React の小さな UI コンポーネントを作成し、シニア側はコンポーネントを検証するコードを書きます。こうすることで 2 人同時に並行作業することができます。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/liveshare-02.png)

今回は小さな UI コンポーネントを題材にしました。シニアがスタイルガイド([React Styleguidist](https://react-styleguidist.js.org/))に UI コンポーネントの様々なバリエーションを追加していき、これをジュニアが実装していきます。
ジュニアがつまづいたりした場合は、ビデオチャットで教えたり、直接コードを変更しながら実装の手順を順番に見せたりします。

最終的に二人で協力しながら 1 つの UI コンポーネントを完成させることを目指します。

> スタイルガイド([React Styleguidist](https://react-styleguidist.js.org/))とは、UI コンポーネントの見本カタログのようなものです。他には[Storybook](https://storybook.js.org/)が有名です。
> 個人的な経験として、昨今のフロントエンドの品質を上げるためには、**末端の UI コンポーネントを品質を上げることが非常に重要**なことがわかってきました。そのため、このようなスタイルガイドを利用して様々な状態(レスポンシブ・内包するコンテンツなど)に対応する UI コンポーネントを作り込む作業を非常に重要視しています。

二人で作成したコンポーネントは最終的に下のような美しいスタイルガイドになるため、ペアで作業していてスタイルガイドが順番に完成に近いていく様子や、スタイルが崩れるバリエーションの例(文字が長いとか)を、スタイルガイドに追加してジュニアに見せてワイワイさせたり、終始ペア作業をしていて楽しいです。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/liveshare-01.png)

また、ネストした構造のコンポーネントをレスポンシブにしていく手順など、これまで教えにくい部分についても、シニアがどのような視点でコンポーネントを完成させていくのか順に見せることで教えやすいように感じています。

> ここでは紹介していませんが、デザインは[Figma](https://www.figma.com/)を使っています。デザイン作業も完全リモートです。

なにより一緒に作業することで、ジュニアのスキルレベルの把握ができ、どのような課題があって次にそのような挑戦をさせたらしいか、考えることができるようになりました。

ジュニアも今まで謎だった、フロントエンド実装の手順について明らかになり、自信がついてきたような気がします。
このようなことは、フロントエンド特有の自由度に起因するのかもしれませんが、ジュニアに結果だけでなく過程も見せることで確実にスキルアップできそうな気がします。

## まとめ

VS Code の LiveShare を使ったリモートペアプログラミングの紹介でした。

きっかけはチームにジュニアが参画したことで、従来の**もぐらたたき式**の PullRequest レビューや、ストレスの多いペアプログラミングを脱却し、本当にチームの中でジュニアがのびのび楽しく成長できる環境を作りたかったことが始まりでした。

まだ、試行錯誤の途中ですが、これからも自分が考える最良の環境を目指して努力していきたいです。


VS CodeのLiveShareを使ったリモートペアプログラミングの紹介


[react-native-router-flux](https://github.com/aksonov/react-native-router-flux)の小ネタです。

前回の話はこちら。

- [react\-native\-router\-flux の onRight をカスタマイズする \| I am mitsuruog](https://blog.mitsuruog.info/2019/03/rnrf-customizable-onright)

前回はアプリの NavBar の右側にあるボタン(以下、RightButton)をクリックした時に、次の画面に props を渡したいようなユースケースを想定していましたが、今回は RightButton を props の条件で出し分けしたいと思います。

次のような手順で実現できそうです。

1. PageComponent 内部で RightButton を出す
2. RightButton をタップした時に、Component 内部のタップハンドラ(private function)を実行する
3. 外部からの props の値で RightButton を出し分けする

コードは全て TypeScript です。

## PageComponent 内部で RightButton を出す

RightButton の追加方法は**いくつかある**のですが、今回は PageComponent に static な`navigationOptions`プロパティを追加して、この中で RightButton 用の Component を定義します。

> この方法というものがいくつかあって、それぞれ期待する動きをしないので辛いです。

```ts
// ...
import { NavigationScreenProps } from "react-navigation";

class Page extends React.Component<State, Props> {
  static navigationOptions = ({ navigation }: NavigationScreenProps) => {
    return {
      // ここにRightButtonのComponentを渡す
      headerRight: <Button title="+1" />,
    };
  };

  render() {
    // ...
  }
}
```

`navigationOptions`で渡されている関数の`navigation`は`react-navigation`の`NavigationScreenProps`の型を使います。これは、`react-native-router-flux`が`react-navigation`をベースとして拡張しているためです。

## RightButton をタップした時に、Component 内部のハンドラを実行する

RightButton をタップした時に、Component 内部のハンドラを実行するには`Button`Component の`onPress`を使えば可能です。しかし、`static`プロパティ内部から PageComponent 内の private function を呼び出すにはひと工夫必要でした。

`static`プロパティ内部から PageComponent の function を実行するには、props の`navigation`を通じて function の参照を渡すことで可能となります。
`componentDidMount`の中で props の`navigation.setParam`を使うことで参照を渡すことができます。

```ts
// ...
import { NavigationScreenProp, NavigationScreenProps } from "react-navigation";

export interface Props {
  navigation: NavigationScreenProp<any, any>;
}

class Page extends React.Component<State, Props> {
  static navigationOptions = ({ navigation }: NavigationScreenProps) => {
    return {
      headerRight: <Button title="+1" />,
    };
  };

  componentDidMount() {
    // ここでハンドラの参照をセットする
    this.props.navigation.setParams({ onRight: this.onRight });
  }

  // ...
}
```

渡されたハンドラの参照を次のように`navigationOptions`で使うことができます。

```diff
// ...

class Page extends React.Component<State, Props> {
  static navigationOptions = ({ navigation }: NavigationScreenProps) => {
    return {
-      headerRight: <Button title="+1" />
+      headerRight: <Button title="+1" onPress={navigation.getParam('onRight')} />
    };
  }

// ...
```

これで RightButton をタップした時に`onRight`が呼び出されるようになります。

## 外部からの props の値で RightButton を出し分けする

外部からの props も上の方法と同様に`navigation.setParam`と`getParam`を使って実現します。

今回は props で`hasButton`が渡されるとします。`componentDidMount`の中で再び`navigation.setParam`を使います。

```diff
// ...

  componentDidMount() {
    // ここでハンドラの参照をセットする
    this.props.navigation.setParams({ onRight: this.onRight });
+   this.props.navigation.setParams({ hasButton: this.props.hasButton });
  }

// ...
```

この値を`navigationOptions`の中で使います。

```diff
// ...

class Page extends React.Component<State, Props> {
  static navigationOptions = ({ navigation }: NavigationScreenProps) => {
    return {
-     headerRight: <Button title="+1" onPress={navigation.getParam('onRight')} />
+     headerRight: navigation.getParam('hasButton') ?
+       <Button title="+1" onPress={navigation.getParam('onRight')} /> :
+       undefined
    };
  }

// ...
```

これで props 経由で RightButton を出し分けすることができるようになりました。

。。。大変。

以上


react-native-router-fluxのonRightをカスタマイズする(part2)


先日、参加した[html5j パフォーマンス部 第五回勉強会 ― 改正民法債権法と非機能要求としての Web パフォーマンス](https://atnd.org/events/106358)の勉強会にて**「Synthetic Monitoring」**なる聞きなれない単語が出てきたので、学習のためこのブロクのパフォーマンスを 1 週間測定してみた話です。

勉強会の内容をみて「Synthetic Monitoring とは？」っと興味を持った方には、読むと雰囲気が伝わるのではと思います。

Synthetic Monitoring については、当日の竹洞さんの資料や動画を確認してください。

- (Slide) <https://www.slideshare.net/takehora/web-150634918>
- (Video) <https://www.youtube.com/watch?v=R44_wzrkVMw>

> 注意)
>
> - この記事の内容は、[Spelldata 代表取締役 竹洞さん](https://spelldata.co.jp/about/representative.html)に測定を協力していただき、いろいろ教授していただい内容を元にしています。しかし、私自身が曲解・誤解している部分もあると思いますので、内容は正確でない可能性があります。ご注意ください。
> - 個人ブログを 1 週間計測しただけのごく限られた条件下の話であるため、この記事の内容を Web パフォーマンス全般について語っているような形で解釈しないでください。また計測値についても鵜呑みにしないでください。ご自身の Web サイトの状態を正確に知るためには、実際に測定して専門家に分析を依頼してください。
> - ブログ書きながら画像のキャプチャを撮っているため、若干計測の時間がずれているものがあります。雰囲気を感じるには十分だと思いそのままにしています。

## 測定条件

測定した条件は次の通りです。

- 測定したページ: <https://blog.mitsuruog.info/2018/03/how-to-learn-css-1>
- 測定期間: 2019/6/21 ~ 2019/6/28
- 測定ネットワーク:
  - 4G
  - 4G エミュレート
  - Desktop
- 測定地点:
  - Tokyo: NTT
  - Tokyo: KDDI
  - OSAKA: NTT
- 測定間隔: 各測定地点 15 分間隔
- 測定方法: Catchpoint を使った Synthetic Monitoring

> 注意)
>
> - 3 タイプの測定ネットワークで測定を行なっていますが、Desktop 以外のネットワークでサイトが遅すぎて測定がタイムアウトしてしまっていたため、以降の測定値はすべて Desktop で測定した内容です。

## このブログの測定結果

### 直近 1 時間分布を見る

まずはじめに直近 1 時間のパフォーマンス推移の散布図を見てみます。メトリクスは次の 3 つです。

- Render Start (ms)
- Document Complete (ms)
- Speed Index

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/catchpoint1-1.png)

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/catchpoint1-2.png)

- Render Start (ms): 700ms~2s くらい
- Document Complete (ms): 2s~3s くらい
- Speed Index: 1,000~2,000

### 直近 24 時間分布を見る

直近 1 時間では信頼性に欠けるので、範囲を 24 時間に広げます。

Render Start の中央値が 1,298ms で Document Complete の中央値が 2,786ms なので、
残念ですが遅いサイト確定です。

いくつか**外れ値**(赤丸で括った部分)の存在が確認できます。外れ値は後ほどの Waterfall を見てみます。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/catchpoint1-3.png)

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/catchpoint1-4.png)

俯瞰して見ると、ブログの速度は次の関係が成立しそうです。

- (速い) OSAKA: NTT > Tokyo: NTT > Tokyo: KDDI (遅い)

## 単一測定点の Waterfall を見る

だいたいの傾向がわかったので、中央値あたりにある測定点の Waterfall を見てみます。

この測定点の測定データでは、Render Start が 1,800ms で Document Complete までが 3,100ms です。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/catchpoint2-1.png)

どのあたりにボトルネックがあるかというと、下の図から次のリクエストに問題がありそうです。()の中は用途です。

- ws-fe.assoc-amazon.com（Amazon アフィリエイト）
- blog.mitsuruog.info（HTML 配信）
- s3-ap-northeast-1.amazonaws.com（画像配信）
- i.creativecommons.org（画像配信）
- maxcdn.bootstrapcdn.com（FontAwesome CDN）
- rcm-fe.amazon-adsystem.com（Amazon アフィリエイト）
- Render Start から JavaScript の実行時間が 1,500ms くらいある

個別に見ていきます。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/catchpoint2-2.png)

まず HTML 配信から。

このサイトは[Netlify](https://www.netlify.com)(Free プラン)を使っているのですが、ここでの HTML 配信が遅延しているようです。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/catchpoint2-3.png)

> [Netlify Pricing](https://www.netlify.com/pricing/)を確認すると Free プランでも Netlify Edge features の Global CDN deployments が有効になっているので、単純にこの CDN が遅いだけかもしれません。
> （有料化したら別の高速化オプションがあるかもしれませんが。。。）

次に FontAwesome の CDN。遅いですね。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/catchpoint2-4.png)

続いて画像配信。このサイトの画像は S3 から直接配信しています。

S3 の場合は、画像の最初の 1 バイト目が配信されるまでは速いのですが、ファイルサイズが大きくなると急激にデータの送り出しが遅くなるケースがあるようです。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/catchpoint2-5.png)

続いて、クリエイティブ・コモンズの画像。
（こんな小さな画像の配信でこんなに遅延するとは。。。）

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/catchpoint2-6.png)

そして、Amazon アフィリエイト。
（Redirect!? 一体こいつは何をしているんだ。。。）

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/catchpoint2-7.png)

最後に JavaScript の実行時間です。1,500ms くらいあります。

> この時間は Catchpoint では測定できないので、Developer tool のプロファイルで測定・分析する必要があります。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/catchpoint2-8.png)

今日は、パフォーマンス改善の話はしないので、ボトルネックの把握だけにします。
ここまでで判明した事実として、このブログは次のボトルネックがあるようです。

- HTML 配信が遅い
- S3 からの画像配信が遅い
- FontAwesome の CDN とクリエイティブコモンズの画像配信が遅い
- Amazon のアフィリエイトが遅い
- JavaScript の実行時間が遅い

続いて代表的な外れ値の Waterfall を確認してみます。

### 外れ値(S3 遅延のケース)

まず、Render Start が一番遅延している測定点の Waterfall を確認します。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/catchpoint3-1.png)

Render Start まで 10s 掛かっています。
ボトルネックを見ると、S3 が遅延していることがわかります。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/catchpoint3-2.png)

上のボトルネックでも判明している、S3 からの画像の送り出しの部分が非常に遅延していますね。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/catchpoint3-3.png)

## 外れ値(JavaScript 実行による遅延のケース)

続いて、Document Complete が遅延している測定点を見てみます。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/catchpoint4-1.png)

Render Start から Document Complete まで 5s 掛かっていることがわかります。

ボトルネックを見ると遅延していますが、上の Render Start の中央値 1,298ms と比べると Render Start の 1,397ms というのは、そこまで外れ値でななさそうです。
（つまり、通常通りの遅延であって、ここまで異常値になった原因ではない。）

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/catchpoint4-2.png)

異常箇所はどこにあるかというと、JavaScript の実行時間にありました。

ここの分析には Developer tool でプロファイルの測定をする必要がありますが、このタイミングを捉えるのは非常に根気がいる作業であることが容易に想像できます。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/catchpoint4-3.png)

## ボトルネック通信の品質の揺らぎを見る

続いて各ボトルネックの品質がどれくらい幅があるか見てみます。これは継続的にデータを収集する Synthetic Monitoring ならではの面白さだと感じます。

ちなみにパフォーマンスにおいて品質とは**「速さ」**です。

### ボトルネック通信をピックアップして分布を見る

まず、測定した通信の中で遅いものをピックアップします。
今回は次の 3 つをピックアップしました。

- `https://blog.mitsuruog.info/2018/03/how-to-learn-css-1`
  - S3 から配信している画像の中でも特別にサイズが大きいもの(サイズは 1M)
- `https://i.creativecommons.org/l/by-sa/4.0/88x31.png`
  - クリエイティブコモンズの画像
- `https://rcm-fe.amazon-adsystem.com/e/cm`
  - Amazon の AD システムの何か？

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/catchpoint5−1.png)

まず分布をみます。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/catchpoint5−2.png)

このままでは何もわからないので、累積分布関数(Cumulative Distribution Function)をかけます。

累積分布を見ると**どれくらいの確率でどれくらいの速度が出ているか**がわかります。
下のグラフを眺めていると、途中までは速度が速く一定ですが、急に遅くなるポイントがあります。これを**「変曲点」**と呼び、品質を見る上で重要なポイントです。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/catchpoint5−3.png)

個別にみてみます。

### S3 画像配信の品質

まず分布をみます。
中央値は 238ms ですが、分布を見ると速いケースと遅いケースに二極化しているようです。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/catchpoint6−1.png)

次に累積分布をみます。変曲点は 60 パーセンタイルと 99 パーセンタイルの 2 つでした。
つまり「60%の確率で速く、残りの 39%の確率は非常に遅く、1%の確率で信じられないくらい遅い」ということです。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/catchpoint6−2.png)

このグラフのように速度のばらつきも大きいため、大きいサイズの画像を S3 から配信した場合は**品質が悪い**と言えます。

### クリエイティブコモンズと Amazon の AD システムの品質

2 つまとめて分布を見てみます。
分布を見るとクリエイティブコモンズの方が、Amazon の AD システムよりも高速なことが多いことがわかります。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/catchpoint7−1.png)

次に累積分布をみます。変曲点は共に 99 パーセンタイルでした。
つまり「99%の確率で遅く、1%の確率で信じられないくらい遅い」ということです。

このような累積分布を示す場合は、(遅いけど)**品質が良い**と言えます。
下のグラフを見ると、クリエイティブコモンズは品質が一定ですが、Amazon の AD システムは少し変動の幅があるため、クリエイティブコモンズの方が品質が良いと言えます。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/catchpoint7−2.png)

### Netlify からの HTML 配信の品質

Netlify からの HTML 配信の分布をみてみます。

> 記事を書いている間にとんでもない外れ値が出ていました。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/catchpoint8−1.png)

次に累積分布をみます。
品質は安定していますが、1 つだけ異常な測定値がありました。これは一体なんなのでしょうか。。。？

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/catchpoint8−2.png)

異常点の Waterfall を見てみます。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/catchpoint8−3.png)

なんと DNS failure。サイトに到達できてない。

今回の計測では、これの原因の推測まではできません。
しかし、1 ヶ月や 1 年などの長い周期で測定していた場合、何かの傾向(定期的なシステムメンテナンスなど)が読み解けるかもしれませんね。

### S3 から小さな画像を配信してみたらどうか？

S3 から大きい画像を配信した場合は遅延することがわかったのですが、小さな画像の場合はどうでしょうか？
小さな画像の通信をいくつかピックアップして分布を見てみます。

中央値は 25ms なので割と高速ですが、分布にばらつきがみられ品質はあまり良さそうではないです。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/catchpoint9-1.png)

累積分布を見てみます。
品質が一定ではない(気がする)。
CloudFront などの CDN から配信した場合を直接測定したことがないので、正直なんとも言えませんね。CDN を測定してみると違いがわかると思います。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/catchpoint9-2.png)

ちょっと疲れてきたので、このあたりにします。

## まとめ

自分のブログのパフォーマンスを Synthetic Monitoring で 1 週間測定してみて、通信上のボトルネックについてどれくらいの品質なのか分析してみました。

わかったこととしては、このブログは遅いが、HTML 配信や画像配信、JavaScript 実行のプロファイル分析をすることで高速化する可能性があるということです。
また、品質管理の観点では、品質は平均ではなく分散であり、累積分布をみることでどれくらい安定しているか判断できるようになることがわかりました。

継続的に同じ条件で測定を行うことで、別の視点からの比較・分析がやりやすいことがわかりました。

とはいえ、Catchpoint は個人で使うには高すぎるので、別の代替えサービスを探して測定を続けたいと思います。

### 謝辞

個人で Synthetic Monitoring を試してみようと思ったところ、どのサービスも個人で利用するためには敷居が高すぎて頓挫しているところを、「1 週間なら試しに測定してもいいよ」と言ってくれただけでなく、後日、丁寧な解説用の動画を作成してくれた竹洞さんに最大の感謝を送ります。


Catchpointでこのブログのパフォーマンスを1週間Synthetic Monitoringしてみた


JavaScript のテストフレームワーク[Jest](https://jestjs.io/en/)の小ネタです。

最近 react や react-native のプロジェクトでモジュールの参照に alias を使うことが多いのですが、Jest でこれを扱う方法について紹介です。

## alias を使ったモジュール参照

alias を使ったモジュール参照とは、プロジェクト内の特定のディレクトに別名(alias)をつけることで、`import`文の記述を簡単にすることです。

例えば、次のような相対パスでモジュールを import している箇所に alias を使ってみましょう。

```ts
// greet.ts は src/shared/services にあるとする
import { greet } from "../../../greet.ts";
```

alias を使う場合は、まず`src/shared`に`Shared`という alias をつけます。そうすると次のように相対パスを除いて書くことができます。

```ts
// Shared は src/shared を参照している
import { greet } from "Shared/services/greet.ts";
```

alias を使うメリットとしては、`import`文の記述を簡略化することもあるますが、相対パスを使った場合よりリファクタなどの変更に強いことが挙げられます。

## moduleNameMapper を使って alias を扱う

Jest で alias を扱うためには`moduleNameMapper`を使って alias と実際のパスをマッピングします。

- <https://jestjs.io/docs/en/configuration#modulenamemapper-object-string-string>

上の例の場合は次のようになります。

```js
module.exports = {
  moduleNameMapper: {
    "^Shared(.*)$": "<rootDir>/src/shared/$1",
  },
};
```

これで Jest でも、alias を使ったモジュール参照があるプロジェクトをテストすることができました。


Jestでaliasを使ったモジュール参照を扱う


TypeScript の小ネタです。

react-native には[Platform-specific extensions](https://facebook.github.io/react-native/docs/platform-specific-code.html#platform-specific-extensions)という仕組みがあります。

これはファイルを拡張子を使って各プラットフォーム(Android/iOS)向けにモジュール参照先を切り替える仕組みです。

例えば次のように各プラットフォームごとにカスタマイズされたモジュールを作成したとします。

```ts
BigButton.android.ts;
BigButton.ios.ts;
```

これを利用するときは次のように呼び出すことができます。

```ts
import BigButton from "./BigButton";
```

ところが、これを TypeScript でやろうとした場合、モジュール参照先にファイルが存在しないためエラーとなります。

```ts
// TS2307: Cannot find module './BigButton'.
import BigButton from "./BigButton";
```

今日はこれを解消する方法の紹介です。

## .d.ts を作成して回避する

回避方法としては、次のような`BigButton`の型定義ファイルを作成するだけです。

```ts
// BigButton.d.ts
import * as ios from "./BigButton.ios";
import * as android from "./BigButton.ios";

declare var _test: typeof ios;
declare var _test: typeof android;

// ここでモジュールの型情報を提供する
export * from "./BigButton.ios";
```

これでコンパイルエラーは消えました。

この仕組みで興味深いことは、`_test`の Type を再割り当てすることで、各プラットフォームのコードの差異を検知することができることです。

試しにモジュールの中身を違うものに変えてみたところ、次のように差異があることを検知することができました。

> TS2403: Subsequent variable declarations must have the same type. Variable '\_test' must be of type 'typeof import("BigButton.ios")', but here has type 'typeof import("BigButton.android")'.

## まとめ

TypeScript のコンパイラの方でサポートして欲しいという要望があったようですがクローズされてしまったようです。
当分の間は上で紹介した方法で回避するしかなさそうです。

- [Allow passing additional SupportedExtensions to support React Native \.android and \.ios module loading · Issue \#8328 · microsoft/TypeScript](https://github.com/microsoft/TypeScript/issues/8328)

今回のトリックも上の Issue からいただきました。最初に思いついた人すごいですね。


TypeScriptでreact-nativeのPlatform-specific extensionsを型安心にする


今日は Roblox でセーブポイントを作ってみます。

セーブポイントとは、プレイヤーが死んだ時に任意の場所から復活できるものです。Obby(Obstacle course)と呼ばれる障害物を超えてゴールを目指すタイプのゲームにてよく見かけます。

完成形のプロジェクト構造はこちらです。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/roblox-save-point1.png)

今回は Workspace に Part を 4 つと ServerScript が 1 つです。

## セーブポイントをマップに配置する

まず、Workspace にセーブポイントを配置します。
セーブポイントは「SpawnLocation」を使います。SpawnLocation は下ようなギアのマークが付いているブロックで、プレイヤーはこの場所からゲームに参加します。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/roblox-save-point2.png)

今回は 4 つ配置します。
わかりやすいように`Checkpoints`というフォルダに格納して、それぞれの`Name`を 1 から 4 までつけます。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/roblox-save-point3.png)

この画像では見えていないですが、すぐ横に触ると死ぬマグマ玉も置いています。

## スタート地点を設定する

プレイヤーがゲームに参加した時にどのセーブポイントから始まるかスタート地点を設定します。
今回は**①**の場所から始まるようにします。

ServerScriptService に`CheckpointScript`を作成します。

まず始めにセーブポイントのブロックを取得して、プレイヤーがゲームに参加した時に、セーブポイントの 1 つめをスタート地点に設定します。

`player.RespawnLocation`に SpawnLocation を設定すると、プレイヤーが死んだ時、設定された SpawnLocation から復活します。

```lua
local Players = game:GetService("Players")

-- セーブポイントのブロックを取得する
local checkPointFolder = game.Workspace.Checkpoints
local checkpoints = checkPointFolder:GetChildren()

local function onPlayerAdd(player)
  -- セーブポイントの1番目をスタート地点にする
  player.RespawnLocation = checkpoints[1]
end

-- プレイヤーが参加した時のハンドラ
Players.PlayerAdded:Connect(onPlayerAdd)
```

結果はどうでしょうか？

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/roblox-save-point4.gif)

4 番目のセーブポイントがスタート地点になっています。
どうやら、セーブポイントを`Name`の昇順で並び替える必要があるようです。

```lua
local Players = game:GetService("Players")

-- セーブポイントのブロックを取得する
local checkPointFolder = game.Workspace.Checkpoints
local checkpoints = checkPointFolder:GetChildren()

-- `Name`の昇順でソートする
local function sortFunction(a, b)
  return tonumber(a.Name) < tonumber(b.Name)
end
table.sort(checkpoints, sortFunction)

...
```

## セーブポイントに触れた時にスタート地点を変更する

セーブポイントに触れた時にスタート地点を変更してみましょう。
スタート地点を変更は、今のセーブポイントよりも先に進んだ場合のみ行うようにします。

まず、セーブポイントに触れた時の処理を作成して、これを全てのセーブポイントにループ文で設定します。

```lua
...

-- セーブポイントの設定処理
local function setUpCheckpoint(checkpoint)
  -- セーブポイントに触れた時の処理
  checkpoint.Touched:Connect(function(part)
    -- ここに実際の処理を書く
  end)
end

-- 全てのセーブポイントに設定する
for index, checkpoint in pairs(checkpoints) do
  setUpCheckpoint(checkpoint)
end

...
```

続いて、スタート地点を変更してみましょう。

まず、触れたのがプレイヤーかどうか判定してから、現在の復活地点を取得します。
もし触れたセープポイントが現在の復活地点より先の場合、スタート地点を変更します。

スタート地点を変更した場合にログを出力するようにしておきます。

```lua
...

-- セーブポイントの設定処理
local function setUpCheckpoint(checkpoint)

  -- セーブポイントに触れた時の処理
  checkpoint.Touched:Connect(function(part)

    -- プレイヤーかどうかを判定し、プレイヤーオブジェクトの取得する
    local humanoid = part.Parent:FindFirstChild("Humanoid")
    local player = Players:FindFirstChild(part.Parent.Name)

    if humanoid and player then
      -- 現在の復活地点を取得する
      local currentCheckPoint = player.RespawnLocation.Name
      -- セーブポイントの比較する
      if tonumber(checkpoint.Name) > tonumber(currentCheckPoint) then
        -- スタート地点を変更して、ログを出力する
        player.RespawnLocation = checkpoint
        print("RespawnLocation has been changed to " .. checkpoint.Name)
      end
    end
  end)
end

...
```

実際にセーブポイントに触れてみると、スタート地点が更新されていることがログで確認できます。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/roblox-save-point5.gif)

実際に死んでみます。

セーブポイント 3 に触れた後で、マグマ玉に触れるとセーブポイント 3 から復活することができます。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/roblox-save-point6.gif)

## まとめ

セーブポイントの作り方でした。
仕組みがわかると簡単ですね。

今日の内容だけでは、スタート地点がゲームの中に保存されていないため、プレイヤーが一度ゲームをやめるとスタート地点がリセットされてしまいます。
注意してください。


Robloxでセーブポイントを作る


今日はコインを拾うだけの簡単なゲームを作ってみましょう。

「**Debris(デブリ)**」というビルトインサービスを使って、ゲームフィールド上のランダムな場所にコインを発生させます。
Debris サービスは Roblox の中でも非常に有用なもので、これを使うことでゲームの中でアイテムやモンスターなどを自由に発生させることができます。

- [Roblox Developers: Debris](https://developer.roblox.com/api-reference/class/Debris)

完成形のプロジェクトはこちらです。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/roblox-money0.png)

## LeaderBorad を作成する

まず、今プレイヤーが持っているコインの総量を表示するための LeaderBoard を作成します。作り方はこちらを参照してください。

- [Roblox のリーダーボードを作成する | I am mitsuruog](https://blog.mitsuruog.info/2019/04/roblox-setup-leaderboard)

Script の名前は`LeaderBoardScript`として、ServiceScriptService の中に入れておきます。LeaderBoard に表示する名前は`Money`としておきましょう。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/roblox-money1.png)

## コインを作る

コインを作りましょう。Part の名前は`Money`とします。形は Cylinder か Ball を使えばいいと思います。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/roblox-money3.gif)

一度、Workspace 上でコインの Part を完成させてから、ServiceStorage に移動します。
ServiceStorage とは、Roblox のオブジェクトの格納庫のようなものです。注意点としては Server 以外からはアクセスできません。

## コインをゲームフィールド上に発生させる

では、コインをゲームフィールド上に発生させましょう。ServiceScriptService の中に`MoneyDropperScript`を作成します。

最初にコインの Part と`Debris`サービスを呼び出して使えるようにしておきます。

```lua
local money = game:GetService("ServerStorage").Money
local Debris = game:GetService("Debris")
```

続いて`while`ループの中でコインを複製してランダムな位置に配置させます。

```lua
...

while(1) do
  wait()
  -- コインを1つ複製する
  local clonedMoney = money:clone()

  -- マップの中の縦横-500〜500の中のランダムな位置に発生するようにする
  local positionX = math.random(-500, 500)
  local positionZ = math.random(-500, 500)
  -- 注意）y軸を100としているのは空から落ちてくるようにするため
  clonedMoney.Position = Vector3.new(positionX, 100, positionZ)
  clonedMoney.Parent = workspace

  -- Debrisサービスに追加することでマップ上に姿を表す
  Debris:AddItem(clonedMoney, 20)
end
```

`Debris:AddItem`の第 1 引数にはマップ上に出現させるオブジェクトを、第 2 引数にはオブジェクトの生存期間を設定します。上の例では**コインは 20 秒後に自動的に消えます。**

テスト実行するとコインが空から降ってくるようになりました。Debris サービス、超便利です。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/roblox-money4.gif)

## コインに触れたらお金が増えるようにする

最後にコインに触れたらプレイヤーのお金が増えるようにしましょう。
コインの Part(`Money`)の中に Script を作成します。名前は`MoneyScript`にしておきます。

基本的には、コインに何か触れたら実行されるイベントハンドラを作成し、触れたものがプレイヤー(`Humanoid`)だったら処理を続行させます。

```lua
local money = script.Parent

local function onTouched(part)
  local humanoid = part.Parent:FindFirstChild("Humanoid")
  if humanoid then
    -- ここに処理を書く
  end
end

money.Touched:Connect(onTouched)
```

では、コインに触れたプレイヤーのお金を増やして、回収されたコインを消滅させます。
お金は LeaderBoard の`Money`に格納されるので、LeaderBoard の値を更新する必要があります。

```lua
...

local function onTouched(part)
  local humanoid = part.Parent:FindFirstChild("Humanoid")
  if humanoid then
    -- プレイヤー名を取得する
    local playerName = part.Parent.Name
    local player = game.Players:FindFirstChild(playerName)

    -- LeaderBoardの値を更新する
    player.leaderstats["Money"].Value = player.leaderstats["Money"].Value + 5

    -- コインを消滅させる
    money:Destroy()
  end
end

...
```

テスト実行すると、コインに触れるとお金が増えていきます。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/roblox-money5.gif)

## まとめ

簡単な Roblox ゲームの作り方でした。

面白いゲームを作るには、さらに何か面白い仕掛けが必要ですが、基本的な作り方は今日紹介した通りです。例えば、コインの中にプレミアムコインや爆弾を混ぜたりしたり、集めたお金でアイテムを購入できるようにすることで、もう少しゲームっぽくなると思います。


Robloxで簡単なコイン拾いゲームを作る


Roblox でプレイヤーが触ると別の場所にテレポートするブロックを作ってみましょう。

## テレポートするブロックを作る

まず、Workspace の中に`Teleport`というフォルダを作成して、必要なもの一式を追加します。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/roblox-teleport-block4.png)

追加するものは次の通りです。

- `TeleportScript` - Lua スクリプト
- `Teleport1A` - テレポートブロック A(青色)
- `Teleport1B` - テレポートブロック B(ピンク色)

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/roblox-teleport-block5.png)

## TeleportScript の骨子を作る

TeleportScript の大まかな処理を書きましょう。

基本的にはそれぞれのブロックの`Touched`にイベントハンドラを設定して、あとで中の処理を書いていきます。

```lua
local Teleport1A = script.Parent.Teleport1A
local Teleport1B = script.Parent.Teleport1B

-- A -> B へテレポート
local function TeleportA2B(part)
end

-- B -> A へテレポート
local function TeleportB2A(part)
end

Teleport1A.Touched:Connect(TeleportA2B)
Teleport1B.Touched:Connect(TeleportB2A)
```

## テレポート処理を書く

まず「A->B」のテレポート処理を書きます。

> 「B->A」は基本的に「A->B」と同じなので割愛します。

```lua
...

-- A -> B へテレポート
local function TeleportA2B(part)
  local humanoid = part.Parent:FindFirstChild("HumanoidRootPart")
  if humanoid then
    -- プレイヤーの位置をテレポートブロックBにする
    humanoid.CFrame = Teleport1B.CFrame
  end
end

...
```

まず、`Touch`したものがプレイヤー(Humanoid)かどうか判定します。プレイヤーの場合は、プレイヤーをテレポートブロック B にテレポートさせます。

プレイヤーを移動するには`CFrame`というものを使います。`CFrame`とは Roblox ゲーム上の 3D オブジェクトの中心の座標を表すものです。

CFrame については、まだよく理解できていないので詳しい説明はできませんが、基本的には(x, y, z)軸の数値を設定することで、指定した 3D オブジェクトの中心の位置を制御することができます。

では、早速テレポートブロック A に触れてみましょう。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/roblox-teleport-block3.gif)

(え！？)

テレポートブロックに埋まってしまいました。全く動けません。

これは、テレポート先がテレポートブロック B の中心になってしまったためです。
ですので、テレポート先を少し上の方に調整する必要があります。

```lua
...

-- A -> B へテレポート
local function TeleportA2B(part)
  local humanoid = part.Parent:FindFirstChild("HumanoidRootPart")
  if humanoid then
    -- プレイヤーの位置をテレポートブロックBから高さ5上ににする
    humanoid.CFrame = Teleport1B.CFrame + Vector3.new(0, 5, 0)
  end
end

...
```

`Vector3`は(x, y, z)軸を設定するクラスです。
左から順に x 軸(横)、y 軸(高さ)、z 軸(奥行き)を設定します。今回の例だと`Vector3.new(0, 5, 0)`なので、高さだけ 5 に設定しています。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/roblox-teleport-block2.gif)

今度はうまくいきました。

> ちなみに、`Vector3.new(0, 50, 0)`に設定すると、テレポート先を上空に設定することができます。
>
> ![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/roblox-teleport-block1.gif)

## まとめ

Roblox でテレポートするブロックの作り方でした。

見慣れない`CFrame`というものが出てきました。大事な概念のようなのでマスターしておきたいです。


Robloxでテレポートするブロックを作る


（まぁ。たまには技術と関係ないこと書いてもいいかな。）

個人のライフログみたいなものです。
プログラマになる前は家具職人だったので、家にある大きめの家具は自分で作ったりしています。

今日は IKEA で買ったテーブルのリメイクです。
天板がかなり古くなってきたので買い換えようかと思ったのですが、足の部分はまだ使えそうなので、天板だけ張り替えることにしました。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/table1.jpg)

天板は、[マルトクショップ](https://shop.woodworks-marutoku.com/)のゴムの集積材(厚さ 30mm)を使います。マルトクショップは、少し前に作業机を作成した時に初めて利用したのですが、いい仕上がりの仕事する木材屋だったのでリピート買いしました。

ではまず、天板を取り外します。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/table2.jpg)

取り外してみました。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/table3.jpg)

元々天板を支えていた溝がそのまま新しい天板を支える梁として使えそうだったので、近所の DIY ショップでカットした木材をはめ込みます。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/table4.jpg)

おっと。ここで痛恨のミス。
元の天板は折りたたみ式だったので、天板を支えていた梁の部分が平行ではありませんでした。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/table5.jpg)

> そんな父の苦労も知らず、YouTube ばかり見ている娘よ、宿題さっさと済ませなさい。。。。

仕方ないので、片方の溝だけ使うことにします。
当初の計画とは違いますが、こんな感じで梁を取り付けました。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/table6.jpg)

反対側はこんな感じでビス止めしています。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/table7.jpg)

よく見ると天板と接触する面で平らじゃないので、カンナを使って平らにします。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/table8.jpg)

ここまでできたところで天板の裏面と、足の部分をヤスリで仕上げて、足の部分はほぼ完成です。

天板に足を乗せて、天板と足を繋ぐ場所を決めます。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/table9.jpg)

天板とのジョイントには「鬼目ナット」を使います。
(たぶん一度ジョイントした天板と足を離すことはないと思いますが。。。)

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/table10.jpg)

天板の裏側に鬼目ナット用の下穴を開けます。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/table11.jpg)

下穴の準備だできたら、ボルトで天板と足をジョイントします。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/table12.jpg)

これで、テーブルの天板を張り替えできました。
ここから仕上げに入ります。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/table13.jpg)

仕上げの前に、天板の角や上面を**丁寧に**やすりがけします。
続いて塗装ですが、いつも「尾山製材株式会社 木工用みつろうクリーム 200 ｇ」を使います。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/table14.jpg)

以前はオイルステインを使っていたのですが、値段が高いのと、準備片付けが面倒なので、最近はこのクリームがお気に入りです。

このクリームを布にとって木に塗り込みながら、仕上げの不十分な部分をヤスリで仕上げてまた塗る。これを繰り返すと完成です。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/table15.jpg)

重量感があってしっかりした仕上がりになりました。
(今回の木材は若干暗い色の木材が多かったかな。)

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/table16.jpg)

ゴムの集積材は価格が割安ですが、重量感があって作業机など割とハードに使う部位にいいと思います。


IKEAのテーブルの天板を張り替える


Roblox で罠を作る方法です。
「罠」とは Roblox ゲームの中でよく出てくるもので、これにプレイヤーが触れるとプレイヤーは死にます。

今回の罠は「レーザー」にします。

通常のレーザーの作り方と、点滅するレーザーの作り方を紹介します。

## レーザーを作成する

通常の罠の作り方は至ってシンプルです。Roblox の公式ページにチュートリアルがあるので、その通りやってみれば作れると思います。

- [Roblox: Coding Traps and Pickups](https://developer.roblox.com/articles/Creating-Traps-and-Pickups)

コードが次のようなものになります。`Laser`という Part を作成して、その中に Script を作成してください。

```lua
local Laser = script.Parent

local function onPartTouch(otherPart)
  local touchObject = otherPart.Parent
  local humanoid = touchObject:FindFirstChildWhichIsA("Humanoid")
  if humanoid then
    humanoid.Health = 0
  end
end

Laser.Touched:Connect(onPartTouch)
```

`Laser.Touched`のイベントハンドラの中で、触れたものがプレイヤー(`Humanoid`)である場合、`Health`を 0 にします。
これが基本的な罠の作成方法です。

## レーザーを点滅させる

ではレーザーを点滅させてみましょう。

レーザーを点滅させるには`while`ループを作成して、この中で`Laser.Transparency`を使い、レーザーを見えたり隠れたりします。

```lua
local Laser = script.Parent

...

Laser.Touched:Connect(onPartTouch)

while true do
  Laser.Transparency = 1
  wait(3)
  Laser.Transparency = 0
  wait(3)
end
```

> `Laser.Touched`を`while`ループの後ろに移動しないでください。`while`ループは無限ループとなるため、ループの後ろのコードは実行されません。

今回は 3 秒間隔で点滅するようにしました。
ただし、今のままではレーザーが消灯している場合も作動してしまい、プレヤーが触れると死んでしまいます。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/roblox-flashing-raser1.gif)

うーん。なんでだろう。。。

## レーザーが点灯している時だけ罠が作動するようにする

レーザーが点灯している時だけ罠が作動するようにするためには、まず消灯時にレーザーとプレーヤーが衝突しないようにする必要があります。

`Laser.CanCollide`を使って、レーザーが消灯時にはプレイヤーが触れても通り抜けるようにする必要があります。`CanCollide = false`にした場合、プレイヤーが触れても通り抜けるようになります。

```lua
local Laser = script.Parent

...

Laser.Touched:Connect(onPartTouch)

while true do
  Laser.Transparency = 1
  Laser.CanCollide = false
  wait(3)
  Laser.Transparency = 0
  Laser.CanCollide = true
  wait(3)
end
```

`CanCollide = false`にした場合、Part の位置を固定しないと、ゲームの世界から落下して見えなくなってしまいます。
プロパティウィンドウから Part の`Anchored`のチェックを付けておいてください。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/roblox-flashing-raser3.png)

しかし、このままではまだレーザーが消灯時にも罠が作動しています。
これは`Laser.Touched`イベントが`Laser.CanCollide = false`の場合でも発火してしまうためです。

これを避けるためには、イベントハンドラの中でレーザーの`CanCollide`の状態を判定して、点灯中の場合のみ作動させる必要があります。
これでレーザーは配置された場所から動かなくなります。

```lua
local Laser = script.Parent

local function onPartTouch(otherPart)
  -- 点灯中のみ罠が作動するようにする
  if Laser.CanCollide == true then
    local touchObject = otherPart.Parent
    local humanoid = touchObject:FindFirstChildWhichIsA("Humanoid")
    if humanoid then
      humanoid.Health = 0
    end
  end
end

Laser.Touched:Connect(onPartTouch)

...
```

これで罠が完成しました。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/roblox-flashing-raser2.gif)

## まとめ

通常の罠の作り方と、点滅する罠の作り方でした。
少しカスタマイズしようとすると途端にわからなくなりますが、Roblox の公式サイトの API リファレンスはかなり親切に書いてあるので、こまったら API リファレンス読むようにします。

- [Roblox API REFERENCE: BasePart.CanCollide](https://developer.roblox.com/api-reference/property/BasePart/CanCollide)


Robloxで点滅する罠を作る


TypeScript の小ネタ。

TypeScript で再帰的なデータ構造のデータに対して型を適用する方法です。
例えば、クローリングしてきた Web サイトの情報など。JSON の key があって、値が`string | number | boolean | Array | Object`になる可能性がある面倒なやつです。

普通に考えると、`[key: string]`の Index signature と Union Type を持つ型を使えばいいかと思うのですが、肝心の Union の型定義が再帰構造なので表現できません。

```ts
interface WebSiteData {
  // Unionの部分が再帰的なので表現できない！！
  [key: string]: string | number | boolean | Array<
    string | number | boolean | Array<
      string| number | boolean | Array<
        ...え、ちょっと待って
      >
    >
  >
}
```

まずこの問題を解決するには、JSON の値が取る型定義を最初にイメージします。名前を`JSONValueType`として、後で定義する Array や Object はこの型構造を使うことにします。

`JSONValueType`は値が`string | number | boolean | Array | Object`になる可能性があるので、型定義はだいたい次のようなものになると考えます。

```ts
// Array<JSONValueType> | Object<JSONValueType>はあとで置き換えます。
type JSONValueType =
  | string
  | number
  | boolean
  | Array<JSONValueType>
  | Object<JSONValueType>;
```

次に`Array<JSONValueType>`の型定義をします。名前は`JSONValueTypeArray`にしましょう。

定義するには`JSONValueType`型の Array を継承した interface を作成します(ちょっとトリッキーです)。定義した後は、`JSONValueType`の型定義も置き換えます。

```ts
type JSONValueType =
  | string
  | number
  | boolean
  | JSONValueTypeArray
  | Object<JSONValueType>;

interface JSONValueTypeArray extends Array<JSONValueType> {}
```

次に`Object<JSONValueType>`の型定義をします。名前は`JSONValueTypeObject`にしましょう。

こちらも定義するには`[key: string]`の Index signature を持って`JSONValueType`の値を持つ interface を定義します。
定義した後は、`JSONValueType`の型定義も置き換えます。

```ts
type JSONValueType =
  | string
  | number
  | boolean
  | JSONValueTypeArray
  | JSONValueTypeObject;

...

interface JSONValueTypeObject {
  [key: string] : JSONValueType;
}
```

これで不定形の JSON データ構造を`JSONValueTypeObject`を使って型安全に定義することができました。

```ts
const data: JSONValueTypeObject = {
  name: "mitsuruog",
  age: 20,
  alive: true,
  profile: [
    {
      profileName: "aaa",
      profileNumber: 1,
      profileBool: true,
      profileArray: [],
      profileObject: {},
    },
  ],
  address: {
    addressString: "aaa",
    addressNumber: 1,
    addressBool: true,
    addressArray: [],
    addressObject: {},
  },
};
```

参考リンク

- [recursive type definitions · Issue \#3496 · Microsoft/TypeScript](https://github.com/Microsoft/TypeScript/issues/3496)

> もう少し簡単に定義できるようにしたかったみたいですが、実現されなかったみたいですね。。。


TypeScriptで再帰的なデータ構造を型安心にする


今日は唐突に[Roblox](https://www.roblox.com)でのゲームプログラミングの話です。

## Roblox!?

> 子供たちがレゴブロックのような感覚で自作のゲームを作り、公開できるプラットフォームが「Roblox（ロブロックス）」だ。
>
> - [5000 万人の子供が遊ぶゲーム開発プラットフォーム「Roblox」](https://forbesjapan.com/articles/detail/20288)

娘と週末に Roblox で遊ぶことがあり、遊んでいる時にふっと「自分でゲームを作って公開できる」と言ったことがありました。
その時、あまり娘は理解していなかったようだったので、ちょっとどういうことか理解させて驚かせてやろうかと思い、試しに 1 つ作って娘に見せてみたら、目玉が飛び出るくらい興奮して、早速自分も作りたいという話になりました。
(たぶん、お父さんですら作れるなら、自分にもできると思っている。。。)

自分もそこまでくわしくないので、それ以来こっそり教えられるように Roblox でのプログラミングについて調べているという次第です。

ちなみに Roblox では、[Lua](https://www.lua.org/start.html)言語と、[Roblox Studio](https://www.roblox.com/create)を使って、Roblox が提供する API を使いながらゲームを作成します。

今回はリーダーボードを作成方法についての紹介です。

## リーダーボードとは

リーダーボード(LeaderBoard)とは、ゲームの中でプレイヤーの名前や得点などを表示するものです。
画面の一番見やすい場所に置いてあり、ロブロックスでは画面の右上に表示されています。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/roblox-leaderboard1.png)

## リーダーボードの作成

ではリーダーボードを作成します。
まず最初に Roblox Studio で新しいプロジェクトを作成してきます。

### リーダーボードのセットアップ

まず、右側の Explorer の中の**ServerScriptService**の中に新しい Script を作成します。名前は`PlayerSetup`としておきます。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/roblox-leaderboard2.png)

その Script の中に`onPlayerJoin`という関数を作成します。この関数は`player`というパラメータを受け取ります。

```lua
local function onPlayerJoin(player)

end
```

次に`onPlayerJoin`の中に`leaderStats`という名前の変数を作成して、`Folder`のインスタンスを設定しておきます。このフォルダーの中に全てのプレイヤーの情報が保存されます。

```lua
local function onPlayerJoin(player)
  local leaderStats = Instance.new("Folder")
end
```

先ほどの変数`leaderStats`に`Name`を設定します。`Name`は「**leaderstats**」としてください。
間違えるとリーダーボードは作成されません。そして`leaderStats`の`Parent`に`player`を設定します。

```lua
local function onPlayerJoin(player)
  local leaderStats = Instance.new("Folder")
  leaderStats.Name = "leaderstats"
  leaderStats.Parent = player
end
```

最後に`onPlayerJoin`をこのゲームと接続します。これで誰かがこのゲームに参加してきた時に、`onPlayerJoin`が実行されます。

```lua
local function onPlayerJoin(player)
  local leaderStats = Instance.new("Folder")
  leaderStats.Name = "leaderstats"
  leaderStats.Parent = player
end

game.Players.PlayerAdded:Connect(onPlayerJoin)
```

これでリーダーボードのセットアップは完了です。

### リーダーボードにプレイヤーの情報を表示する

次に、リーダーボードにプレイヤーが持っているお金(Gold)を表示してみます。

このお金を記憶するために`IntValue`という数値を記録するための変数を使います。
`onPlayerJoin`関数の中で、`gold`という名前の変数を作成し、`IntValue`のインスタンスを設定しておきます。

```lua
local function onPlayerJoin(player)
  local leaderStats = Instance.new("Folder")
  leaderStats.Name = "leaderstats"
  leaderStats.Parent = player

  local gold = Instance.new("IntValue")
end
```

リーダーボードに表示する名前を`Name`に設定します。今回の例では、「**Gold**」と表示されるはずです。

```lua
local function onPlayerJoin(player)
  local leaderStats = Instance.new("Folder")
  leaderStats.Name = "leaderstats"
  leaderStats.Parent = player

  local gold = Instance.new("IntValue")
  gold.Name = "Gold"
end
```

次に最初に持っているお金を`Value`に設定します。最初は「0Gold」にしておきましょう。

```lua
local function onPlayerJoin(player)
  local leaderStats = Instance.new("Folder")
  leaderStats.Name = "leaderstats"
  leaderStats.Parent = player

  local gold = Instance.new("IntValue")
  gold.Name = "Gold"
  gold.Value = 0
end
```

最後に gold の`Parent`を`leaderStats`に設定します。

```lua
local function onPlayerJoin(player)
  local leaderStats = Instance.new("Folder")
  leaderStats.Name = "leaderstats"
  leaderStats.Parent = player

  local gold = Instance.new("IntValue")
  gold.Name = "Gold"
  gold.Value = 0
  gold.Parent = leaderStats
end
```

これで画面の右上にリーダーボードが表示されるようになりました。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/roblox-leaderboard3.png)

## まとめ

ほぼ、ここの内容の翻訳です。

- [In-Game Leaderboards](https://developer.roblox.com/articles/Leaderboards)

Roblox のプログラミング情報は英語でもほとんど手に入らないので辛いですね。。。

まだ、わからないことが多いですが、娘に教えられるよう頑張って情報集めてみます。


Robloxのリーダーボードを作成する


TypeScript の小ネタです。

TypeScript では次のように string を Enum として定義することができるのですが、string を Enum に代入するときにエラーとなってしまうため、今まで少し使いにくいと思っていました。

今日はその認識を改めます。

```ts
enum Direction {
  North = "North",
  South = "South",
  East = "East",
  West = "West",
}

let direction: Direction;

direction = Direction.North;
direction = "North"; // Error Type '"North"' is not assignable to type 'Direction'.
direction = "AnythingElse"; // Error
```

[TypeScript Deep Dive](https://basarat.gitbooks.io/typescript/content/docs/types/literal-types.html)を読んでいたら、String Enums で Enum と string の両方に対応できる方法が載ってきたので紹介します。

- [Literal Types · TypeScript Deep Dive](https://basarat.gitbooks.io/typescript/content/docs/types/literal-types.html)

まず string[]から Enum を生成するユーティリティ関数を作成します。

```ts
function stringToEnum<T extends string>(o: T[]): { [K in T]: K } {
  return o.reduce((accumulator, currentValue) => {
    accumulator[currentValue] = currentValue;
    return accumulator;
  }, Object.create(null));
}
```

この関数は、`T`タイプの配列を受け取って、`T`の中にある要素(`K`)をキーと値にセットした Object を返します。

> reduce の初期値に`Object.create(null)`を利用しているのは、プレーンな Object をベースに Enum を生成するためです。こちらの記事がよくまとまっています。
>
> - [JavaScript でなぜ Object\.create$null$ を使うのか？ \- Qiita](https://qiita.com/tady/items/1215a801e178c98deb35)

> ちなみに`{}`を初期値として使った場合は、次のようなエラーが発生します。TypeScript 賢い！
>
> > Type '{}' is not assignable to type '{ [K in T]: K; }

次に生成した Enum(オブジェクト)から Type を生成します。

```ts
const Direction = stringToEnum(["North", "South", "East", "West"]);

// keyofでDirectionのキーを抽出して
// typeofでUnion Typeを生成する
type Direction = keyof typeof Direction;
```

これを使うことで Enum でも string でも代入することができます。

```ts
let direction: Direction;

direction = Direction.North;
direction = "North"; // Works!!
direction = "AnythingElse"; // Error
```

正確には Enum ではなく、string の Map オブジェクトを Enum っぽく使っている感じですね。


TypeScriptのString Enumsを少し便利にするTips


TypeScript の小ネタです。

次のような基本的な Array の map 処理を考えてみましょう。
TypeScript のコンパイラオプションには`strictNullChecks`を入れています。

```ts
interface User {
  id: number;
  name?: string;
}

const users: User[] = [
  { id: 1, name: "aaa" },
  { id: 2 },
  { id: 3, name: "bbb" },
];

users
  .filter((user) => Boolean(user.name))
  // Object is possibly 'undefined'... why?
  .map((user) => console.log(user.name.length));
```

`User`クラスの name は Optional なので、一度`filter`関数を通過させて undefined のものを除外しています。
しかし、TypeScript のコンパイラはしつこく`Object is possibly 'undefined'`と言ってきます。

今回は、これをどうにかしたいです。

## User-Defined Type Guards を使う

このエラーを解消するためには[Type Guards](https://www.typescriptlang.org/docs/handbook/advanced-types.html#user-defined-type-guards)を使って、コンパイラに型情報を追加で教える必要があります。

1 つめのやり方は、name が Optional ではない新しい Type を作る方法です。

```ts
...

// Userを継承した新しいTypeを作る
interface ConfirmedUser extends User {
  name: string;
}

users
  .filter((user: User): user is ConfirmedUser => Boolean(user.name))
  .map(user => console.log(user.name.length));
```

もう 1 つのやり方は、TypeScript にビルトインされている mapped-type の`Required<T>`を使います。

```ts
...

users
  .filter((user: User): user is Required<User> => Boolean(user.name))
  .map(user => console.log(user.name.length));
```

`Required<T>`を使う場合は全てのプロパティが required になるので、部分的に Optional が残る場合は、最初の`extends`で新しい Type を作るほうがいいと思います。

疑問に思ったので、ここで聞いてみた内容でした。

- [Why TypeScript compiler doesn't handle correctly nested object filtering? \- Stack Overflow](https://stackoverflow.com/questions/55337969/why-typescript-compiler-doesnt-handle-correctly-nested-object-filtering)


TypeScriptのArray.filterで'Object is possibly undefined'を消したい


[react-native-router-flux](https://github.com/aksonov/react-native-router-flux)の小ネタです。

react-native-router-flux で毎日頭を悩ませています。
うーん、なんだろう。。。初見は使いやすそうなんですが、いざ本番となるといろいろ制約があって悩ましいライブラリですね。

> Part2
> [react\-native\-router\-flux の onRight をカスタマイズする(part2) \| I am mitsuruog](https://blog.mitsuruog.info/2019/08/rnrf-customizable-onright)

今回はアプリの NavBar の右側にあるボタンをクリックした時に、次の画面に props を渡したいようなユースケースを想定しています。例えば参照画面から編集画面に移動するときなどです。
ボタンは次のイメージのような感じです。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/rnrf1.png)

この時 react-native-router-flux は`onRight`を発火するのですが、これに動的に値を渡すために少し工夫が必要でした。

## 通常の onRight の定義方法

「プロフィール」と「プロフィール編集」ページを想像してみましょう。「プロフィール」ページの編集ボタンをクリックすると「プロフィール編集」ページに移動します。この時、react-native-router-flux の`Actions`に**プロフィール ID を渡して次の画面で利用できるようにしたい**です。

次のコードは通常の`Router`設定です。
`onRight`は`Scene`と一緒に定義してあり、期待通り「プロフィール編集」しますが、プロフィール ID を値を渡すことはできません。

```ts
// AppRoute.tsx
  ...
  <Scene
    key="page_profile"
    component={Profile}
    title="プロフィール"
    onRight={() => Actions.page_profile_edit()}
    rightTitle="Edit"
  />
  <Scene
    key="page_profile_edit"
    component={ProfileEdit}
    title="プロフィール編集"
  />
  ...
```

## onRight を Component の中で定義する

`onRight`にプロフィール ID を渡すためには、「プロフィール」ページの中で`onRight`ハンドラを**上書き**して、ID を渡せるようにしなければなりません。
`onRight`は props で渡されてくる`navigation.setParams()`にて置き換えできるので、`componentWillMount`でコンポーネントが Mount された時に上書きしましょう。

```ts
// Profile.tsx
export Profile extends React.Component<ProfileProps, {}> {
  componentWillMount() {
    this.props.navigation.setParams({
      'onRight': this.onRight,
    });
  }
  private onRight = () => {
    console.log('Press onRight!!');
    // ここでActionsにプロフィールIDを渡す
    Actions.page_profile_edit({ profileId: 1 });
  }}
  ...
}
```

Router の方の`onRight`は動かないようにしておきます。

```diff
// AppRoute.tsx
  ...
  <Scene
    key="page_profile"
    component={Profile}
    title="プロフィール"
-    onRight={() => Actions.page_profile_edit()}
+    onRight={() => undefined}
    rightTitle="Edit"
  />
  ...
```

TypeScript で型付けする場合は`@types/react-navigation`の`NavigationScreenProp`を使います。

```ts
// Profile.tsx
import { NavigationScreenProp } from 'react-navigation';

interface ProfileProps {
  navigation: NavigationScreenProp<any, any>;
}

export Profile extends React.Component<ProfileProps, {}> {
  componentWillMount() {
    this.props.navigation.setParams({
      'onRight': this.onRight,
    });
  }
  ...
}
```

これで`onRight`をカスタマイズすることができました。

。。。大変。

以上


react-native-router-fluxのonRightをカスタマイズする


TypeScript を使っていると頻繁に見かけるジェネリクス(以下、Generics)。
別の言語などで同様の概念を経験したことがある人であれば理解するのに苦労しないと思うのですが、最初はやはり難しい概念だと思います。

先日同僚に Generics を使ったユーティリティの作成をおねがいしたのですが、これが良い Generics のユースケースだと思ったので、チュートリアルっぽくしてみました。

## お題

次のように配列に対して値をマージするユーティリティ関数(`merge`)を作成してください。

```ts
merge(array, newValue);
```

渡される`array`には次のような構造の`User`と`Company`の 2 つのクラスがあり、それぞれ`id`プロパティを持っています。

```ts
class User {
  id: number;
  firstName: string;
}

class Company {
  id: number;
  name: string;
}
```

id が一致するものがあれば置き換え、なければ追加してください。

## ひとまず User クラスの merge 関数を作る

いきなり Generics を使うのはハードルが高いので、ひとまず User クラス用の merge 関数を作成しましょう。

User の配列と User の値を受け取って、両者をマージして新しい User の配列を返せばいいので、ひとまず User クラス用の merge 関数の interface を考えると、次のようになります。

```ts
function merge(array: User[], newValue: User): User[] {
  // ここに中身を書く
}
```

実装の方法はいくつかありますが、ここではシンプルに`findIndex`で最初に一致したもののみ値を置き換えるようにします。

```ts
function merge(array: User[], newValue: User): User[] {
  const index = array.findIndex((item) => item.id === newValue.id);
  if (index === -1) {
    return [...array, newValue];
  } else {
    return [...array.slice(0, index), newValue, ...array.slice(index + 1)];
  }
}
```

`merge`関数は次のように正しく動作します。

```ts
const array = [
  { id: 1, firstName: "Taro" },
  { id: 2, firstName: "Hanako" },
];

// => [{ id: 1, firstName: 'Mitsuru'}, { id: 2, firstName: 'Hanako' }]
console.log(merge(array, { id: 1, firstName: "Mitsuru" }));

// => [{ id: 1, firstName: 'Taro'}, { id: 2, firstName: 'Hanako' }, { id: 3, firstName: 'Ayumu' }]
console.log(merge(array, { id: 3, firstName: "Ayumu" }));
```

上の`merge`関数を`Company`クラスでも使えるようにするためにはどうすればいいでしょうか？
複製して関数の型定義を`Company[]`にしますか？もし扱う予定の型クラスが 100 あった場合どうしましょう。。。

ここで登場するのが**Generics**です。

## merge 関数で Generics を使う

Generics とは**型を抽象化したもの**です。
今回の例では`User`と`Company`とそれと他の何かのクラスも含めたものです。名前は`T`クラスとしましょう。

> 慣例で`T`を使うことが多い気がします。

早速、上の関数の interface を Generics に置き換えてみましょう。

```ts
function merge<T>(array: T[], newValue: T): T[] {
  // merge処理の中身
}
```

これで merge 関数は「**なにかのクラス(`T`)**の配列と**なにかのクラス(`T`)**の値を受け取って、両者をマージして新しい**なにかのクラス(`T`)**の配列を返す」関数になりました。

しかし、このままでは TypeScript のコンパイラがエラーになるはずです。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/typescript-generics1.png)

「Property 'id' does not exist on type 'T'.」

当然ですね。merge 関数の中では渡されるクラスに`id`があることを前提にしていますが、`T`には`id`がありません。

「`T`には`id`がある」という制約を入れる必要があります。

## Generics に制約を入れる

「`T`には`id`がある」という制約を入れるためには、まず「`id`がある」という型を定義する必要があります。

```ts
{
  id: number;
}
```

これを`T`の制約とするには`extends`を使って、次のように「`T`は`{ id: number}`を継承している」という関係を作ります。

```ts
T extends { id: number }
```

TypeScript は「**Structural typing(構造型型付け)**」と呼ばれる、構造が同じであれば同じ型とみなす方式を取っているので、このような柔軟な型宣言が可能です。

では、最終形のコードがこちらです。

```ts
function merge<T extends { id: number }>(array: T[], newValue: T): T[] {
  const index = array.findIndex((item) => item.id === newValue.id);
  if (index === -1) {
    return [...array, newValue];
  } else {
    return [...array.slice(0, index), newValue, ...array.slice(index + 1)];
  }
}
```

使い方は次のようになります。

```ts
const userArray = [
  { id: 1, firstName: "Taro" },
  { id: 2, firstName: "Hanako" },
];

// => [{ id: 1, firstName: 'Mitsuru'}, { id: 2, firstName: 'Hanako' }]
console.log(merge(array, { id: 1, firstName: "Mitsuru" }));

// => [{ id: 1, firstName: 'Taro'}, { id: 2, firstName: 'Hanako' }, { id: 3, firstName: 'Ayumu' }]
console.log(merge(array, { id: 3, firstName: "Ayumu" }));

const companyArray = [
  { id: 1, name: "TOYOTA" },
  { id: 2, name: "SONY" },
];

// => [{ id: 1, name: 'NISSAN' }, { id: 2, name: 'SONY' }]
console.log(merge(companyArray, { id: 1, name: "NISSAN" }));

// => [{ id: 1, name: 'TOYOTA' }, { id: 2, name: 'SONY' }, { id: 3, name: 'NTT' }]
console.log(merge(companyArray, { id: 3, name: "NTT" }));
```

最近の TypeScript は型推論が優れているので通常は`merge`関数に型情報を渡す必要はありませんが、型推論ができずコンパイルエラーが出るような場合は次のように型情報を渡してください。

```ts
merge<User>(userArray, { id: 1, firstName: "Mitsuru" });
```

## まとめ

簡単なジェネリクス(Generics)を理解するためのチュートリアルでした。いかがだったでしょうか？
これから理解する人にはこれくらいの内容がちょうどいいと思います。

Generics についてはもっと踏み込むと面白いですし、ライブラリの型定義ではよく見かけるので、知っておいて損はないはずです。


TypeScriptでジェネリクス(Generics)を理解するための簡単なチュートリアル


TypeScript の小ネタです。

TypeScript で String をキーにしてオブジェクトにアクセスする場合、次のような Type を定義します。

```ts
const user: { [key: string]: string } = { name: "mitsuruog" };

console.log(user["name"]); // => mitsuruog
```

ただ、この String でアクセスする部分をもう少し型安心にしたいですね。

String のキーのセットで Type を作成して、Index Signature に適用できると型安心にできそうです。
試しに UnionType を使ってみます。

```ts
type Index = "name" | "address";

// Error: index signature parameter type cannot be a union type. Consider using a mapped object type instead.
const user: { [key: Index]: string } = { name: "mitsuruog" };
```

このままでは使えないようなので、Mapped Types を使ってみます。

```ts
type Index = "name" | "address";

// Error: Property 'address' is missing in type '{ name: string; }' but required in type '{ name: string; address: string; }'.
const user: { [key in Index]: string } = { name: "mitsuruog" };
```

今度は、オブジェクト初期化の時に全てのキーが必要になってしまったようです。なので Index を Optional にします。

```ts
type Index = "name" | "address";

const user: { [key in Index]?: string } = { name: "mitsuruog" };

console.log(object2.name);

// Error: Property 'password' does not exist on type '{ name?: string; address?: string; }'.
console.log(object2.password);
```

存在しないキーでアクセスしようとした時にコンパイラが検知するようになりました。

これで型安心になりました。

### 参考

- [Quick fix for 'unions can't be used in index signatures, use a mapped object type instead' · Issue \#24220 · Microsoft/TypeScript](https://github.com/Microsoft/TypeScript/issues/24220)
- [Index Signatures · TypeScript Deep Dive](https://basarat.gitbooks.io/typescript/docs/types/index-signatures.html)


TypeScriptのIndex Signature"{[key:string]:string}"で特定の文字だけのIndexを扱う


まぁ、よくある development/statging/production の定数切り替えです。

いくつかライブラリを選定したのですが、最終的に[react-native-config](https://github.com/luggit/react-native-config)を使うことにしました。理由は NativeModule を使っていて、双方で定数を共有したいからです。

NativeModule を使っていなければ[react-native-dotenv](https://github.com/zetachang/react-native-dotenv)でも大丈夫だと思います。

導入にあたり Native 側にも設定が必要だったので、設定するにあたりある程度の困難はあると思っていたのですが、結構大変だったのでその辺りを中心に紹介します。

## 基本的な導入方法

公式ドキュメントにもあるとおり、`npm install`して`react-native link`をすると導入自体は終わります。

```sh
npm install --save react-native-config
react-native link react-native-config
```

設定ファイルの記述方法や基本的な環境の切り替えからなどは、[dotenv](https://github.com/motdotla/dotenv)と同じなので、使ったことがある人はそれほど苦労しないはず。

次のような`.env`ファイルを準備します。

```txt
API_URL=https://myapi.com
GOOGLE_MAPS_API_KEY=abcdefgh
```

react-native 側では次のように取得します。

```js
import Config from "react-native-config";

Config.API_URL; // 'https://myapi.com'
Config.GOOGLE_MAPS_API_KEY; // 'abcdefgh'
```

Native 側については設定がもう少し必要ですが、公式ドキュメントの内容にしたがってやってみるといいと思います。
で、ここまでが良く見かける記述。Google で検索すると良く出てくるのでサラッと流します。

NativeModule を使っている場合は、さらにここからドキュメントにない設定が必要です。ここからが本番です。

## トラブルシュート

自分が遭遇したトラブルについて残しておきます。

### Android 側で BuildConfig が見つからない

Android 側で定数を受け取るサンプルで良くあるのが、`MainApplication.java`などの**アプリの PackageName と同じパッケージ**だけでやっている場合。
これだと NativeModule を使っているケースでトラブルになります。

PackageName が`jp.sample.mitsuruog`だったとして、NativeModule を`jp.sample.mitsuruog.custom.hoge`など異なるパッケージに置いたとします。

```java
package jp.sample.mitsuruog.custom.hoge;

  ...

  public HttpURLConnection getApiClient() {
    URL url = new URL(BuildConfig.API_URL); // error: cannot find symbol
  }
```

`BuildConfig`は PackageName と同じパッケージに生成されるので、package をインポートする必要があります。

```diff
package jp.sample.mitsuruog.custom.hoge;

+ import jp.sample.mitsuruog.BuildConfig;

  ...

  public HttpURLConnection getApiClient() {
    URL url = new URL(BuildConfig.API_URL); // 'https://myapi.com'
  }
```

- [React Native Android Build Error MainActivity.java:29: error: cannot find symbol](https://stackoverflow.com/a/35912176/1855830)

### swift で使うための設定

swift で使いたいですが。。。残念ながら、公式やほどんどのサンプルが Objective-c で実装されているものです。

swift で使うためには、まず Bridge ファイルに react-native-config の Header を登録します。

```diff
// Bridging-Header.h
#import "React/RCTBridgeModule.h"
+ #import "ReactNativeConfig/ReactNativeConfig.h"
```

swift では次のように使います。

```swift
import ReactNativeConfig

...

あとで足すからちょっと待って
```

### xcode でビルドでエラー

xcode 上でのエラーが消えたので、実機で試そうかと思ってビルドしたらエラー。`ReactNativeConfig`が見つからない。

...え？

原因は`react-native link`がなんらかの理由で**正しく react-native-config を設定できていない**ためでした。

まず、xcode のプロジェクトビューの`Libraries`グループの中に`ReactNativeConfig.xcodeproj`があることを確認します。もしなければ、次の手順にしたがって手動でリンクを直してください。

- [Linking Libraries · React Native](https://facebook.github.io/react-native/docs/linking-libraries-ios.html)

プロジェクトの「Build Settings > Header Search Paths」には`$(SRCROOT)/../node_modules/react-native-config/ios`を追加します。

{% img https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/react-native-config1.png 550 %}

- ['GeneratedDotEnv.m' file not found](https://github.com/luggit/react-native-config/issues/187#issuecomment-368769123)
- ['ReactNativeConfig\.h' file not found](https://github.com/luggit/react-native-config/issues/81)

## まとめ

日本語や英語の react-native-config についての記事は、どれもここまで踏み込んだ内容ではなかったので、導入は少し面倒でした。
導入した結果、複数の環境で定数を分けることができたので結果には満足しています。

が。。。

react-native の外部ライブラリの設定周り、こんなに不安定でいいのか！？

> このブログは iOS 側で複数の環境を構築する手順が載っていてわかりやすいです。
>
> - [Managing Configuration in React Native – Differential – Medium](https://medium.com/differential/managing-configuration-in-react-native-cd2dfb5e6f7b)


react-nativeで環境ごとに定数を切り替える(react-native-config)


react-native でエラーメッセージなどを表示したいので、何かライブラリなどを選定していたら、[react-native-dropdownalert](https://github.com/testshallpass/react-native-dropdownalert)が割と良さそうなので、[react-native-router-flux](https://github.com/aksonov/react-native-router-flux)と一緒に使ってみました。

コードは GitHub に置いてあります。Snack Expo で実機でもすぐ試せます。

- [mitsuruog/react-native-dropdownalert-router-sample](https://github.com/mitsuruog/react-native-dropdownalert-router-sample)
- [Snack Expo](https://snack.expo.io/@mitsuruog/cmVhY3)

## react-native-dropdownalert の基本的な使い方

基本的な使い方は DropDownAlert を表示した View の一番下に`DropdownAlert`を配置して、この`ref`を使ってメッセージを表示させる感じです。
初見、ちょっと癖があって導入に一手間必要そうだなと思いました。

```js
// ...
import DropdownAlert from "react-native-dropdownalert";

export const One = () => (
  <View style={styles.container}>
    <Text>One</Text>
    <Button
      title="Press to show the Alert"
      onPress={() =>
        this.dropdown.alertWithType("error", "Error", "Alert shows inside ;(")
      }
    />
    // コンポーネントツリーの一番最後に置くこと！
    <DropdownAlert ref={(ref) => (this.dropdown = ref)} />
  </View>
);

// ...
```

結果は。。。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/react-native-dropdownalert-demo1.gif)

NavBar の内側に表示されてしまいました。
どうやら Route 設定しているコンポーネントの外側に置く必要があるみたいです。

## DropdownAlert を NavBar の上に出す

DropdownAlert を Route 設定の外側に置くことは簡単ですが、どうやって他のコンポーネントから操作しようかと頭を悩ませていたところ、こんな Issue があって助かりました。

- [Stack Navigator · Issue \#73 · testshallpass/react\-native\-dropdownalert](https://github.com/testshallpass/react-native-dropdownalert/issues/73)

`DropDownHolder`という DropdownAlert の`ref`の参照を保存するクラスを作成して、これを他のコンポーネントから使う方式です。

シンプル。まさに目から鱗ですね。実際のコードでは`AlertHelper`としました。

```js
// AlertHelper.js
export class AlertHelper {
  static dropDown;

  static setDropDown(dropDown) {
    this.dropDown = dropDown;
  }

  static show(type, title, message) {
    if (this.dropDown) {
      this.dropDown.alertWithType(type, title, message);
    }
  }
}
```

`App.js`などの Route 設定の外側に DropdownAlert を置いて、`AlertHelper`の`setDropDown`で ref を保存しておきます。

```js
// App.js
// ...
import { AlertHelper } from "./pages/AlertHelper";

export default class App extends React.Component {
  render() {
    return (
      <View style={{ flex: 1 }}>
        <AppRoute />
        <DropdownAlert ref={(ref) => AlertHelper.setDropDown(ref)} />
      </View>
    );
  }
}
```

他のコンポーネントでは`AlertHelper`の`show`を呼び出すことでメッセージを表示することができます。

```js
// Three.js
// ...
import { AlertHelper } from "./AlertHelper";

export const Three = () => (
  <View style={styles.container}>
    <Text>Three</Text>
    <Button
      title="Press to show the Info"
      onPress={() => AlertHelper.show("info", "Info", "Looks good!!")}
    />
  </View>
);
```

結果は正しく出ましたね。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/react-native-dropdownalert-demo2.gif)

## Android の StatusBar と重なる場合の対処方法

正しく出たと思ったのですが、Android の実機で試したところ、メッセージが StatusBar と重なってしまっていました。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/react-native-dropdownalert-demo4.gif)

あー、やだやだ。クロスプラットフォーム。react-native の闇を垣間見た気がします。

色々やり方調べていたら DropdownAlert の`style`に StatusBar の height を追加して回避する方法が良さそうなので試してみました。

```diff
// App.js

// ...

export default class App extends React.Component {
  render() {
    return (
      <View style={{ flex: 1 }}>
        <AppRoute />
        <DropdownAlert
+         defaultContainer={{ padding: 8, paddingTop: StatusBar.currentHeight, flexDirection: 'row' }}
          ref={ref => AlertHelper.setDropDown(ref)}
        />
      </View>
    );
  }
}
```

- [Android statusbar showing on top of alert · Issue \#127 · testshallpass/react\-native\-dropdownalert](https://github.com/testshallpass/react-native-dropdownalert/issues/127)

これで実機でも正しく表示することができました。

### おまけ

GitHub には DropdownAlert を閉じた時に`onClose`のコールバックを受け取るコードも書かれています。興味あれば覗いてみてください。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/react-native-dropdownalert-demo3.gif)

> 最近、react-native を「`RN`」に省略したい人の気持ちがわかってきた気がします。
> 自分は頑張って「react-native」と書き続けたいと思います。


Page: 1