常連

注目の的

社会貢献

Typescript で型をextends したいとき、見ている限り2種類の書き方があるようです

書き方1

```typescript
interface BtnProps = {
  foo: boolean;
  hoge: number;
  ...
}

type myProps = BtnProps & React.ButtonHTMLAttributes<HTMLButtonElement>
```

書き方2

```typescript
interface BtnProps extends BaseBtnProps {
  foo: boolean;
  hoge: number;
```

Q1. 書き方の違いにはどういう意味がありますか?
Q2. どういうときにどちらを使えばいいですか?

よろしくお願いします

props interface の拡張のしかた

### 前提・実現したいこと

Expoを利用したアプリをApple Storeに出したいと考えています。
現在開発中のアプリは自作のAPIサーバーと通信して結果を表示したり、Google Mapを利用しています。
開発中は以下の例の様にそれぞれ通信を行う場所にURLやapi keyをベタがきしていましたが、
ストアに出すアプリはセキュリティの面でも正しい方法での管理に移行したいと考えています。

### 該当のソースコード
```javascript
// redux/api.js

const SAMPLE_URL = <サーバーのURL>  // 別の場所で管理したい。
const SAMPLE_API_KEY = <APIのKEY> // 別の場所で管理したい。

export const getSampleData = () => async dispatch => {
  try {
    const response = await fetch(SAMPLE_URL, {
      headers: {
        "x-api-key": SAMPLE_API_KEY,
      },
    });
    const responseJson = await response.json();
    dispatch({
       type: "REQUEST_SUCCESS",
       payload: {
        sampleData: responseJson
       }
    })
  } catch (error) {
    dispatch({
      type: "REQUEST_ERROR"
    })
  }
}
```

###　こうしたら良いのではと考えている方法。
1. .envファイルで管理する。
「react native hide api key」でググったら出てきた方法。
ただしreactの情報しか出てこない。
2. expo.constants.manifest.extraで管理する。
app.jsonに記入するため、ソースを公開するようなアプリでは利用できない？

### 補足情報（FW/ツールのバージョンなど）
expoのversion
- expo sdkVersion 33.0.0

よろしくお願いします。

ReactNativeアプリ(Expoを利用)でサードパーティのAPI Keyをどこに保存するべきか。

### 前提・実現したいこと

「!clean <削除したい数>」と打つとその数だけ最新のメッセージから削除できるようにしたいです

### 該当のソースコード

```JavaScript
if(message.content.startsWith('!clean ')) {
    var counts3 = message.content.replace(/^!clean /, '');
    for(var count3 = message.content.replace(/^!clean /, ''); count3 > 0; count3 --) {
    message.delete(count3);
    }
    message.channel.send(
    {embed: {
      title: 'メッセージを' + counts3 + '件削除しました',
      color: 7506394
    }});
  }
```

### 試したこと

「!clean 5」と打つと「!clean 5」っていうメッセージしか消されません。
それと、「メッセージを5件削除しました」というメッセージは出ます。

###補足情報

ここに書きました⤵︎
https://glitch.com/edit/#!/tomato-project?path=main.js:33:3
23行目からです

Discordで指定した数だけ最新のメッセージから削除したいです

### 前提・実現したいこと

react-calendar-timelineを使用してサンプルコードを書いているのですが、
このComponentはカレンダー部分でピンチイン・ピンチアウトすると、カレンダーの時間軸がzoom されるようになっています。


実現したい動きは、
①カレンダー部分でピンチイン・ピンチアウトすれば、カレンダーの時間軸がzoomされる。この時ブラウザのzoomは作動しない。
②カレンダー以外の部分でピンチイン・ピンチアウトすれば、ブラウザのzoomが動作する。

例えば、このcodepenのサンプルだとcodepenの部分はブラウザの拡大縮小が動作し、カレンダー上ではカレンダーの拡大縮小が動作します。
まさにこのような動きを実現したいです。
1.カレンダーのところでピンチイン・ピンチアウトしてみてください。
2.カレンダーじゃないところでピンチイン・ピンチアウトしてみてください。
https://codepen.io/xmityaz/pen/wGZRoq




### 発生している問題・エラーメッセージ
しかしスマートフォンやiPadでピンチイン・ピンチアウトすると、
ブラウザの拡大縮小がカレンダーの時間軸のzoomと同時に動いてしまい、zoomがしずらくなってしまいます。

### 該当のソースコード

```javascript
import React  from 'react';
import ReactDOM  from 'react-dom';


import Timeline from 'react-calendar-timeline'
// make sure you include the timeline stylesheet or the timeline will not be styled
import 'react-calendar-timeline/lib/Timeline.css'
import moment from 'moment'

const groups = [
    { id: 1, title: 'group 1' },　{ id: 2, title: 'group 2' },　{ id: 3, title: 'group 3' },
    { id: 4, title: 'group 4' },　{ id: 5, title: 'group 5' },　{ id: 6, title: 'group 6' },
    ];

const items = [
    {id: 1, group: 1, title: 'item 1', start_time: moment(), end_time: moment().add(1, 'hour')},
    {id: 2, group: 2, title: 'item 2', start_time: moment().add(-0.5, 'hour'),end_time: moment().add(0.5, 'hour')},
    {id: 3, group: 1, title: 'item 3', start_time: moment().add(2, 'hour'), end_time: moment().add(3, 'hour')}
]

ReactDOM.render(
    <div>
        <div>aaaaaaaaaaaa</div>
        <div>aaaaaaaaaaaa</div>
        <div>aaaaaaaaaaaa</div>
        <div>aaaaaaaaaaaa</div>
        <div>aaaaaaaaaaaa</div>
        Rendered by react!
        <div>
            <Timeline
                groups={groups}
                items={items}
                defaultTimeStart={moment().add(-12, 'hour')}
                defaultTimeEnd={moment().add(12, 'hour')}
            />
        </div>

    </div>,
    document.getElementById('root'));
```

```javascript
import React  from 'react';
import ReactDOM  from 'react-dom';


import Timeline from 'react-calendar-timeline'
// make sure you include the timeline stylesheet or the timeline will not be styled
import 'react-calendar-timeline/lib/Timeline.css'
import moment from 'moment'

const groups = [
    { id: 1, title: 'group 1' },　{ id: 2, title: 'group 2' },　{ id: 3, title: 'group 3' },
    { id: 4, title: 'group 4' },　{ id: 5, title: 'group 5' },　{ id: 6, title: 'group 6' },
    ];

const items = [
    {id: 1, group: 1, title: 'item 1', start_time: moment(), end_time: moment().add(1, 'hour')},
    {id: 2, group: 2, title: 'item 2', start_time: moment().add(-0.5, 'hour'),end_time: moment().add(0.5, 'hour')},
    {id: 3, group: 1, title: 'item 3', start_time: moment().add(2, 'hour'), end_time: moment().add(3, 'hour')}
]

ReactDOM.render(
    <div>
        <div>aaaaaaaaaaaa</div>
        <div>aaaaaaaaaaaa</div>
        <div>aaaaaaaaaaaa</div>
        Rendered by react!
        <div>
            <Timeline
                groups={groups}
                items={items}
                defaultTimeStart={moment().add(-12, 'hour')}
                defaultTimeEnd={moment().add(12, 'hour')}
            />
        </div>

    </div>,
    document.getElementById('root'));
```

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="theme-color" content="#000000">
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <title></title>
</head>
<body style="width: 100%">
<noscript>
    You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
</body>
</html>
```

### 試したこと

1.user-scalable=noをつけてみる。
→　これはうまくいきませんでした。ブラウザの拡大縮小も禁止できず。
```html
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
```

2.カレンダーからのTouchMove、TouchStartイベントをキャンセルする。
これもうまくいきませんでした。
```jsx
ReactDOM.render(
    <div>
        <div>aaaaaaaaaaaa</div>
        <div>aaaaaaaaaaaa</div>
        <div>aaaaaaaaaaaa</div>
        Rendered by react!
        <div
            onTouchMove={(e) => {
                e.stopPropagation();
                e.preventDefault();
            }}
            onTouchStart={(e) => {
                e.stopPropagation();
                e.preventDefault();
            }}
        >
            <Timeline
                groups={groups}
                items={items}
                defaultTimeStart={moment().add(-12, 'hour')}
                defaultTimeEnd={moment().add(12, 'hour')}
            />
        </div>

    </div>,
    document.getElementById('root'));
```

### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

ピンチイン・ピンチアウトで特定の要素だけブラウザの拡大縮小を禁止したい

これから，OpenCVを使って画像処理を学びたいと考えています．
OpenCVに関する本を自分で調べてみたのですがレビューがあまり見つからず，
どの本がOpenCVの入門に最適か決められませんでした．
そこで，OpenCVを学ぶのにオススメの本，サイトを教えていただきたいです．
PythonとC++についての知識はある程度あります．
よろしくお願いいたします．