常連

自己紹介

シングルトンパターンで、インスタンスを１回だけ作るソースコードを見ましたが違和感があります。
例えば下記のようなクラスがあります。  

```
class Sample {
    private static instance: Sample;
    static getInstance() {
        if(! Sample.instance) {
            Sample.instance = new Sample();
        }
        return Sample.instance;
    }
}
```

２回インスタンスを生成しようとすると、１回目のみ新しくインスタンスを生成します。

```
// 最初は新しくインスタンスを作る
const sample1 = Sample.getInstance()
// 2回目はインスタンスを作らない
const sample2 = Sample.getInstance()
```

ソースの流れから```Sample```クラス自体を上書きしているのは分かります。
上書きしているので、２回目でもクラスを呼び出したら上書きされた状態なんだろうなと推測できます。　
ただ、クラス自体を上書き出来る事が理解できません。 
そもそも、クラスは何処で情報を保持しているのでしょうか？ 

```
class Sample {
    private static instance: Sample;
    static getInstance() {
        if(! Sample.instance) {
            Sample.instance = new Sample(); <-- このSampleは何処で保持されているのか？
        }
        return Sample.instance;
    }
}
```

よく、クラスをたい焼きの金型の話に例える事があります。
あくまで、クラスはテンプレートであって、それ自体にデータを持たないと思っていました。
そもそもこの考え方に間違いがあるのでしょうか？

最終的に「そう言うものだ」でも良いのですが、もしお分かりになる方がいらっしゃればご教示いただきたいです。

【TypeScript】シングルトンパターンは何故実装できるのでしょうか？

### 前提・実現したいこと

TypeScriptでtype定義している型の中にある型を取り出して利用したいです。
下記の `items` 型を使ってReact Hooksのstateの型の指定をしたいです。
下記の型定義ファイルは自動生成されたもので利用したいitems型のみコピーして貼り付けて利用しても再度上書きされるリスクや項目が変更されるリスクがあり避けたいと思っています。
参照という形で利用できれば非常に良いです。
よろしくお願い致します。

### 発生している問題・エラーメッセージ

```
プロパティ 'items' は型 '{ __typename: "ModelMovieConnection"; items: ({ __typename: "Movie"; id: string; title: string; description: string | null; thumbnailPath: string | null; contentPath: string | null; createdAt: string; updatedAt: string; } | null)[] | null; nextToken: string | null; } | null' に存在しません。ts(2339)
```

### 該当のソースコード

```TypeScript
const [movies, setMovies] = useState<ListMoviesQuery["listMovies"]["items"]>();
```

```TypeScript
export type ListMoviesQuery = {
  listMovies:  {
    __typename: "ModelMovieConnection",
    items:  Array< {
      __typename: "Movie",
      id: string,
      title: string,
      description: string | null,
      thumbnailPath: string | null,
      contentPath: string | null,
      createdAt: string,
      updatedAt: string,
    } | null > | null,
    nextToken: string | null,
  } | null,
};
```

### 試したこと

`useState<ListMoviesQuery.listMovies>();`と書いたところVS CODEのクイックフィックスから提案された修正を実行したら上記のように `useState<ListMoviesQuery["listMovies"]`と変更されました。
しかし、その更に内側のitemsを参照しようとしたところ上記のようなエラーが発生してしまいました。

### 補足情報（FW/ツールのバージョンなど）

typescript: 3.9.7
node: 12.18.0

TypeScriptでネストされたtype定義を取り出したい

[Logical nullish assignment (??=) - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_nullish_assignment)

↑こちらについて、

> ヌル合体代入演算子の短絡評価は、つまり `x ??= y` が次の式と等価であることを意味します:
> 
```js
x ?? (x = y);
```
> 
> そして、次の式とは必ずしも等価になるとは限りません：
> 
```js
x = x ?? y;
```
> 

という記述があります。（当方による勝手訳）

この後段について等価とならないケースがイメージできないので、教えてください。
セッタが評価されるかどうか、ということなのかな？　とは思ったのですが、正しいでしょうか？
その他のケースも考えられますか？

ヌル合体代入演算子（??=）のMDNの記述について

現在中学2年生で、C++を勉強しています。将来の目標はゲームプログラマーになることです。

なのですが、最近自分はゲームプログラマーに向いていないのではと思い始めています。

ずっと勉強しているのに、いつまで経ってもオリジナルのゲームを作れないままで、来年には受験を控え、部活が再開したので家にいられる時間もかなり減りました。

もちろん、これはみんなが同じように経験することなので仕方がないと思っているのですが、それでも自分と同じくらいの年齢でオリジナルのゲームを作っている方もいます。

普通、オリジナルのゲーム(SDLやOpenGLなどで作るレベルのゲーム)を作るまで成長するのに、数年かかりますか？

これを作ってみたい！というものはポンポン浮かぶのですが、「ああ。俺ってこんなレベルなんだ。」とプログラムを書いている途中で自分の実力のなさに絶望しています。

Game Makerという、C++よりかは簡単にゲームを作れるツールを使っても、解説動画の通りに進めれば最後までやり切れるのですが、そこからオリジナルの要素を加えるという課題で何時間も足止めを喰らいました。


長々と書いてしまいましたが、

・普通に勉強をしていればC++とSDLを使ったオリジナルゲームを半年くらいで作れるものなのか？
・今は受験勉強に専念して、高校生になってから勉強を始めてもいいのか？
・C++以外の言語を使ったら、こんな自分でもオリジナルのゲームを作れるのか？

を教えていただけると嬉しいです。


もし、自分がゲームプログラマーに向いていないと思ったら、思いっきり自分を突き落としてください。

その方が、モヤモヤが消えてスッキリできるので。

自分はゲームプログラマーに向いていないのか

### 質問内容

teratailヘルプには「非推奨」や「推奨していません」のキーワードが含まれる説明が散見されます。

- Q1. 質問者/回答者、どちらの立場で回答するかを教えてください
- Q2. 「非推奨」は「禁止ではない」ので「やってもよい」と思いますか(※1、※2)
- Q3. あなた自身は、「非推奨」は「禁止ではない」ので、非推奨事項に反する質問をしますか。

(※1)
「teratail運営に質問して下さい」という回答が予想されますが、私は実際に質問/回答している方の意見が重要と考えています。
teratail運営はルールを守らせることに熱心ではなく、**現場がルール**と化している風潮があると認識しています。
私は個人的意見を求めています。

(※2)
ここで聞いているのは「言語上の意味」に留まらず、「回答される方の価値観/判断基準でどう判断するか」が質問の意図となります。
「道徳上は～」や「一般には～、しかしながら、teratailでは～」等、様々な考えがあると思います。

### 質問の動機

1. 質問者に非推奨事項を指摘
2. 質問者から「禁止ではないので守らなくても良いですよね」の返答

という場面を複数回見たことから、皆さんの認識を確認したいと思いました。

### 私の回答

他人の意見を聞いて、自分の考えを述べないのは不公平なので、自己回答します。
ただし、初めから自分の回答があるとバイアスがかかってしまうことが予想される為、しばらく待ってから回答します、

### teratailの非推奨事項一覧

- [他のサービスにも質問投稿をしたい(してしまった)- ヘルプ｜teratail（テラテイル）](https://teratail.com/help#posted-otherservice)

> ##### 他のサービスにも質問投稿をしたい（してしまった）
> teratailでは、**マルチポスト※の推奨はしていません**。
> やむを得ず複数のサイトに質問を投稿された場合は、質問内容にマルチポストをする理由を書き、他のサイトの投稿へのリンクを貼ってください。また、解決した際には必ずteratail及びすべての投稿に解決した旨と、どのように解決したかを記載してください。
> 
> また、teratail上で誤って同じ質問を複数投稿してしまった場合は、質問の削除リクエストを送ってください。
> 
> ※「マルチポスト」とは、同じ内容の文章を複数のQ&Aサイトや掲示板などへ投稿することです。

---

- [推奨していない質問｜teratail（テラテイル）](https://teratail.com/help/avoid-asking)

> ##### プログラミングに関係のない質問
> プログラミングに関して困っていることがないと思われる質問は、トピック外とみなし**推奨していません**。
> 開発仲間を募集する目的の投稿、知人同士でのクローズドなディスカッション、人生の悩み相談などがこれに当たると考えています。
> 具体的に何か困っている理由があり、解決したい問題がある場合は、その理由や何に対して解を得たいのかを明確に記入してください。

> ##### コードをください・デバッグしてください等の丸投げの質問
> 何かを作りたいのでコードを書いてほしい、学校の課題を解いてほしい等の質問は、具体的にプログラミングで困っている質問ではないと考え、**推奨していません**。
> 問題や質問は実際に調査や作業に取り組み、具体的なところで生まれると考えるためです。
> まずは実際に作業に取り組み、つまづいたところで投稿をしてみてください。
> 
> × 悪い例：「雪のアニメーションを表現するコードをください」
> ○ 良い例：「jQueryプラグインで表現した雪のアニメーション速度を調整したい」

> ##### 問題・課題が含まれていない質問
> teratailは困っている人の質問を解決するサービスです。そのため、漠然とした興味から票を募るような質問や、意見の主張をすることを目的とした投稿は**推奨していません**。
> 何か困っている理由があり、最適解を見つける為の知見を得たい場合は、その理由や何が知りたいのかを明確に記述してください。
> 
> × 悪い例：「オススメの開発環境構築方法を教えてください」
> ○ 良い例：「Dockerで開発環境を構築していて、ファイルの書き込みができません」

> ##### 意図的に内容が抹消された質問
> 解決後に編集機能を用いて、質問内容を改変し、関係のない内容にしたり、内容を削除する行為は**禁止しています**。
> 皆さんにしていただいた質問・回答は、後に他の誰かが困ったときに助けになる情報資産になると考えるからです。

> ##### 過去に投稿した質問と同じ内容の質問
> 閲覧数を増やす目的などにより、過去に投稿した質問と同じ内容の質問を新たに投稿することは**推奨していません**。
> 他に同じ問題を抱える人のヒントとなる情報が分散してしまうためです。
> 質問について新たにわかったことや試したことがあれば、すでにある質問を編集してください。

> ##### 広告と受け取られるような質問
> 個人のサービスやプロダクトなどの広告を目的とした投稿は、質問ではないため**お控えください**。
> このような投稿は問題解決の場にふさわしくないと考えますので、削除の対応をさせていただいています。

---

- [質問するときのヒント｜teratail（テラテイル）](https://teratail.com/help/question-tips)

> ##### 質問するときのヒント
> ...(中略)...
> 少しでも多くの方に問題を解決していただく為に、質問をする時のヒントをまとめました。
> **ただし、これは決してここに書かれていることを守っていない質問者を責めるためのものではありません**。
> このヒントは、質問の仕方のコツがまだ掴めていない方に対して「このポイントを押さえた質問にすればもっと良いコミュニケーションになる」というアドバイスをするためのものです。

### RFC2119

仕様書でよく参照される**RFC2119**では次のように定めています。

- [RFC 2119(対訳)必要条件レベルを示すRFCの中の使用のためのキーワード - RFCの部屋](http://www.t-net.ne.jp/~cyfis/rfc/format/rfc2119_ja.html)

> ##### 2. MUST NOT
> 「MUST NOT(してはなりません)」という単語群、「SHALL NOT(しないこと)」フレーズは、定義が**仕様の絶対の禁止令**であることを意味していてください。

> ##### 4. SHOULD NOT
> 「SHOULD NOT(するべきでありません)」または「NOT RECOMMENDED(勧められません)」という言葉は、**特定の行動が受入れ可能な、または有益でさえある時に、正当な理由が特定の状況において存在するかもしれない**ことを意味していてください、しかし、**完全な含意は、理解されていてこのラベルで説明されたどんな振舞いも実行する前に慎重に熟慮されたケースであるべき**です。

teratailヘルプの「非推奨」は「禁止ではない」ので「やってもよい」と思いますか

アプリ開発中の者です。
作りたい機能(ローカル通知)の情報がネットにも本にもなくてアップル公式ドキュメントを読んでいます。そこそこ英語は読めるのですが、その必要そうなコードの概要などを読んで「そーなんだー」という感じで全くコードが書けません。
どのように読めば様々なコードが繋がり、機能を実現できるのでしょうか？

Apple公式ドキュメントの読み方

内容が曖昧で回答に困るところもあるかと存じますが、どんな些細な事でも構いませんのでご助言いただけますと幸いです。
ICカードを用いたシステムを作りたいと思っており、仕様を検討しているのですが煮詰まっており、お知恵をいただきたいです。

sonyが発売しているPasoriを購入して仕様を確認しています。
仕様を確認していると、SDKで提供している様なのですが、特にオープンで情報が共有されていない様でした。
[https://www.sony.co.jp/Products/felica/business/products/sdk.html](https://www.sony.co.jp/Products/felica/business/products/sdk.html)

## やりたい事
WebでICカードを読み取るシステムを実装したいです。
下記のサイト様で、ご紹介している製品の様にWebで解決できるシステムを実装したいと考えています。
https://www.orangetags.co.jp/app_example.html
https://www.orangetags.co.jp/orange_post.html

## お聞きしたい事
### カードの種類は何処で調べられますか？
NFC通信リーダーで使用できるカードの種類について理解を深めたいです。
Suicaや個人情報カードは、読み取れると言う事実はわかるのですが、あのカードは何処から発行されているのでしょうか？
秋月電子の様な電子部品屋さんに何も記録されていないカードが売っていて、カードに書き込む装置等で書きこみをしているのでしょうか？
それとも、シリアル番号の様に最初から番号が決まっているのでしょうか？

### カードリーダーの規格は何処で調べられますか？
「ICカード　リーダー」で検索すると、Pasoriが出てきます。
しかし、それ以外の会社（例えば、SANWA）でもICカードリーダーを出しています。
[https://www.monotaro.com/g/02918455/](https://www.monotaro.com/g/02918455/)

おそらく、ICカードを読み込むための共通仕様があると考えているのですが、何処で調べれば良いのでしょうか？

### USBのカードリーダーの情報をブラウザで受け取るにはどんな技術を使っているのでしょうか？

前項で、目標のサイトをご共有させていただきましたが、
ブラウザからでも、ICカードリーダーを通してデータを取得すること自体は出来ると言うのはわかりました。

ただ、カードリーダーを繋いだだけでは読み込むだけでなく、ブラウザに読み込ませるためのドライバーがないと実現できないのではないかと思っています。
調べる中で、ChromeのWeb USB APIを使って実現されている方もいらっしゃいますが、単純に繋げるだけでなく、PC側で読み込める様に外部のドライバーをインストールしているのがわかりました。

PasocaのSDKや、参考サイトの仕様を見ると、IEのみとなっていたので、
カードリーダーとそのドライバーが対応していないと、ブラウザ経由でデータを取得する事が出来ないのではないかと感じています。

前述したカードリーダーの規格の話に関わってきますが、
カードリーダーをブラウザで使うための共通ドライバの様なものが存在するのでしょうか？
例えば、個人情報カードをSANWAのカードリーダーでもSoniyのPasoriでもが読み込めるのは共通なドライバーを仕様していると言えるのでしょうか？

## 実装イメージ
色々お話を聞けたので、実装のイメージが湧いてきました。

### 環境について

項目|バージョン|備考
---|---|---
PC|windows|10以上（厳密には7だと思いますが、サポート期間が近いため）
対応するICカードの規格|FeliCa、FeliCa Lite(S)|PC/SCでIDmを取得できる規格に絞りたいため
リーダー|Pasori|リーダーを絞る必要はないと思うが、PC/SCの対応、非対応があると思うため（FeliCaの時点でないかもしれませんが…）

### 概要
FeliCaでカードを通すと、通した情報（IDm）をWebサーバーに送信。
データベースを照合して該当するIDmの情報があった場合は、保存処理。

ブラウザでカードを通した人の情報をWebサーバーから取得して表示。

### 想定されるフロー
#### その１　データベースに保存
windowsアプリから送信された情報をDBに保存（ハッシュ等のIDと一緒に）。
ブラウザから定期的にサーバーにアクセスして、送信情報を取得。

![イメージ説明](003eeb0df8c065c692fcd48ad64ed6a0.png)

もしかしたら、Webサーバーに送信された情報をDBを介さず取得する方法があるかもしれませんが、
自分の知識不足で想像できるのはこの方法です。

##### 思いつくデメリット
- jsでapiを経由してデータを取得するので、仮に複数の環境で使う場合は、わかる人がやれば送信情報が外から見られる
- 定期的にアクセスするので、送信量がかなり大きくなる（Lambda等のサーバーレスでAPIを使えば落ちることはないが課金額が大きくなる）
- 毎回通信を挟むため上記の問題もあるし、リアルタイム性が失われる。

#### その２　ネイティブアプリで完結させる
windowsアプリで送信、ユーザー情報取得まで行う。
websocketサーバーを経由して取得した情報を渡す。
ブラウザで、データを表示する。

![イメージ説明](d99277ecf660b641e3ddb9be7ad2d08b.png)

ICカードを読み取る仕組みはどの様に実装すれば良いでしょうか？

### 前提・実現したいこと

●Google Apps Scriptで、「文字起こし君」を作っています。
（LINEのボットに画像を送るとOCRでテキストにして返してくれるもの）
URL：https://qiita.com/kkdmgs110/items/1f6ec0b955e8e1c9362c

●現在使用しているのは、下記三つ。
・Google Apps Script
・Google Apls　の「Cloud Vision API」
・Line Developers

書籍版だと「7-6　LINEからの画像を受け取ろう」になります。

●Line Developersでwebhook URL　を設定するとエラーが出る。

##エラーは下記の3種類。
・回避したいのはエラー1。
・残りのエラーは、関係あるのかないのか判断できなかったので併記。

### ●エラー1
　Line Developers　で　Webhook　を設定し接続確認ボタンを押すと発生。
```　
Webhookが無効なHTTPステータスコードを返しました（期待されるステータスコードは200です）
```

### ●エラー2
Google Apps Script　で　コードを実行した際、「Apps Script ダッシュボード」に出るログ
※ずっと下記エラーが出ていましたが、先ほど試したところOCR化されたテキストが正常に返っていました。原因不明ですが一応回避。
※今朝まではLine Developerのwebhookを切るとエラー回避するも、設定するとエラーが出る状態でした。
```
Stackdriver のログ
この実行に関するログはありません
最近の実行に関するログの取得で、遅延が発生している可能性があります。
```

###　●エラー3
関係ないかもしれませんが、一応。
Google Apps Scriptで「公開＞WEBアプリケーションとして導入＞更新＞ウェブ アプリケーションで最新のコードをテストします。」で進むと、下記エラー発生。
そもそも現在のコードにdoGetはないので、エラーが出るのは当然？
```
スクリプト関数が見つかりません: doGet
```
###　コード
```Google Apps Script
function doPost(e){
const url = "https://dividable.net/wp/wp-content/uploads/2019/01/sample2.png";
  const imageResponse = UrlFetchApp.fetch(url,{
    'headers': {  //HTTP Hearderの設定
      'Content-Type': 'application/json; charset=UTF-8',
    },
    'method': 'get' //ここでメソッドを指定
  })
   .getContent(); //バイナリ形式でデータ取得
  const imageBlob = Utilities.base64Encode(imageResponse); //エンコード
  const API_KEY = 'AIzaSyCW_pnXhMSrIYilyxMYdmsPjW6-jalSsqQ'; //APIキー
  const visionRequestUrl = 'https://vision.googleapis.com/v1/images:annotate?key=' +API_KEY; //URL+APIキー
  const payload = JSON.stringify({
    "requests":[
      {
        "image": {
          "content": imageBlob
        },
        "features": [
          {
            "type": "TEXT_DETECTION",
            "maxResults":1
          }
        ]
      }
    ]
  });
  const visionTextResponse = UrlFetchApp.fetch(visionRequestUrl, {
    method: "POST",
    contentType: "application/json",
    payload: payload,
  })
 .getContentText();
  const visionTextJson = JSON.parse(visionTextResponse); //JSONへ
  const visionText = visionTextJson.responses[0].fullTextAnnotation.text; //respons>fullTextAnnptation>txxtを取得
  console.log(visionText);
}

```
### 試したこと
●別PC使用　→　×
●別のGoogleアカウントでコードを再度手打ち　→　×
●書籍と入力したコードに相違がないか一字ずつ確認　→　12回見直して相違は発見できず。
●Line Developerの同アカウントで、プロパイダーリストやチャンネルを新規に作る　→　×
●Google Apps Scriptの「WEBアプリケーションとして導入」のバージョン情報を新しくし、WebhookのURL更新　→　×
●Line Developerでアクセストークン再発行　→　×
（現段階でアクセストークンの設定場所はないので、多分意味はなかった）
●別のLine Developerアカウントで試す　→　×



### 補足情報
使用書籍：独学プログラマーのためのAIアプリ開発がわかる本
（文字起こし君の作り方が載っている本です。


以上。
多分とても初歩的なところで躓いている気はするのですが、どこが問題なのかわかっておりません……。
確認不足の点や間違い、あるいは上記で不足している情報等、ございましたらご指摘いただけると助かります。

Line DevelopersでWebhookを設定すると「Webhookが無効なHTTPステータスコードを返しました（期待されるステータスコードは200です）」が返る

### GASにcurlからjson形式でPOSTしたい。

GASにcurlからjson形式でPOSTしようとしています。
エラー発生しているポイントはJSON.parse()で、与えた文字列が不正としてエラーとなってしますます。

不正な文字列は**.postData.getDataAsString();**で生成していて、内容は""がなくなってしまうところまで分かりました。


### 発生している問題・エラーメッセージ

```
エラーメッセージ
c:\>curl -XPOST https://script.google.com/macros/s/AKfycbzntxDdti4eyHkSSLFGg6X6VfG9eSt7wgWwTK7kZldVp5SJebT7/exec -H "Accept: application/json" -H "Content-type: application/json" -d '{"value":"lisz-works"}'
<!DOCTYPE html><html><head><link rel="shortcut icon" href="//ssl.gstatic.com/docs/script/images/favicon.ico"><title>エラー</title><style type="text/css">body {background-color: #fff; margin: 0; padding: 0;}.errorMessage {font-family: Arial,sans-serif; font-size: 12pt; font-weight: bold; line-height: 150%; padding-top: 25px;}</style></head><body style="margin:20px"><div><img alt="Google Apps Script" src="//ssl.gstatic.com/docs/script/images/logo.png"></div><div style="text-align:center;font-family:monospace;margin:50px auto 0;max-width:600px">SyntaxError: Unexpected token: &#39;（行 4、ファイル「コード」、プロジェクト「postのテスト」）</div></body></html>

```

### Google Apps Script(該当のソースコード)
```
function doPost(e){
  FileLogger.logging(function(){    // logファイル出力callback
    var jsonString = e.postData.getDataAsString();//← ""がない文字列となってしまう。
    var params = JSON.parse(jsonString);//←書式異常でエラーとなる。
    var value = params.value;

    Logger.log(jsonString);
    Logger.log(value);
  });
}
```
### curl　コマンドライン文字列
```
①curl -XPOST https://script.google.com/macros/s/<ID>/exec -H "Accept: application/json" -H "Content-type: application/json" -d '{\"value\":\"lisz-works\"}' 

②curl -XPOST https://script.google.com/macros/s/<ID>/exec -H "Accept: application/json" -H "Content-type: application/json" -d '{"value":"lisz-works"}' 

③curl -XPOST https://script.google.com/macros/s/<ID>/exec -H "Accept: application/json" -H "Content-type: application/json" -d '{'"value"':'"lisz-works"'}' 

④curl -XPOST https://script.google.com/macros/s/<ID>/exec -H "Accept: application/json" -H "Content-type: application/json" -d '{''value'':''lisz-works''}' 

⑤curl -XPOST https://script.google.com/macros/s/<ID>/exec -H "Accept: application/json" -H "Content-type: application/json" -d '{'value':'lisz-works'}' 

```


### 試したこと
上記①~⑤logで確認したところ、①は期待した文字列が得られましたが、同じエラーで止まってしまいます。

### 補足情報（FW/ツールのバージョンなど）
c:\>curl -V
curl 7.55.1 (Windows) libcurl/7.55.1 WinSSL
Release-Date: [unreleased]
Protocols: dict file ftp ftps http https imap imaps pop3 pop3s smtp smtps telnet tftp
Features: AsynchDNS IPv6 Largefile SSPI Kerberos SPNEGO NTLM SSL

### 追伸
非常に基本的なことであるせいか、かなり調べたのですが解決に至りませんでした。
初心者なため、PCを変えたり、再起動したりと色々試してみたのですが、問合せさせて頂きました。
知恵をお貸しいただけないでしょうか。宜しくお願い致します。

GASにcurlからjson形式でPOSTできない。

vue-cli 3.1を使っております。

こちらのモジュールをie11で使いたいです。
https://github.com/holiber/sl-vue-tree

babel-polyfilを使えばie11でも動作するという風にこちらに書いてあります。
しかしこのbabel-polyfilの使い方がいまいち分かりません。

"yarn add @babel/polyfill"をしてから

```typescript
//main.ts
//ここに入れてみました
import "@babel/polyfill"

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount('#app');
```

```typescript
//App.vue
//vue createコマンドで初期に作られるAbout.vueに書いております。

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <SlVueTree v-model="treeModel">

    </SlVueTree>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

//sl-vue-tree
import SlVueTree from "sl-vue-tree-original";


@Component({
  components: {
    SlVueTree
  }
})
export default class About extends Vue {

  public treeModel = [
    {
        "title": "Item1",
        "isLeaf": true
    },
    {
        "title": "Item2",
        "isLeaf": true
    },
    {
        "title": "Folder1",
        "isExpanded": true,
        "children": [
            {
                "title": "Item3",
                "isLeaf": true
            },
            {
                "title": "Item4",
                "isLeaf": true
            },
            {
                "title": "Folder2",
                "children": [
                    {
                        "title": "Item5",
                        "isLeaf": true
                    }
                ]
            }
        ],
        "isSelected": true
    },
    {
        "title": "Item6",
        "isLeaf": true
    }
];

  }
}
</script>
```

ie11でうまく動きませんでした。
main.tsの頭でimportしてみたのですが
もしこのimportが正しいならば他の所に私のミスがあるのかもしれません。

ie11での、sl-vue-tree + vue-cli3.1 @babel/polyfillのimport方法

nodebbというアプリをデプロイしました。

私のサイトがhttp://example.comとしたら、
http://example.com:4567 に表示させたり、nginxをいじってポートナンバーを消して
http://example.com　に表示させたりする事まではできました

しかし、http://example.com/nodebb という下位ページに表示させたいのですがこれがうまくいきません。
下記にコードを貼り付けます。どのような助言も助かります。どうかよろしくお願いします。

```
config.json
{
    "url": "http://example.com/nodebb",
    "secret": "secret",
    "database": "mongo",
    "port": 4567,
    "mongo": {
        "host": "127.0.0.1",
        "port": "27017",
        "username": "nodebb",
        "password": "pass",
        "database": "nodebb"
    }
}
```

```
nginx.conf
location / {
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_set_header Host $http_host;
    proxy_set_header X-NginX-Proxy true;
    proxy_pass http://127.0.0.1/nodebb:4567;
    proxy_redirect off;
    # Socket.IO Support
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
}
```

デプロイしたnodeアプリを、トップではなく下位ページに表示させたい

現在ジモティーのような求人・不動産・売買等が個人間でできるサイトをDjangoを用いて開発しています。現段階では完成は程遠いものの全体でみると５０％程度はできあがってきたというところです。

しかし最近になってReactによるフロントエンド開発について知る機会があり非常に興味をもちました。というのもフロントエンドに関してjQueryで直接DOMをいじるという状況が生じてしまい、できればこれを避けたいと思っていた矢先、Reactを使えばjQueryを用いずにDOMをいじることなく、かつリッチな表現が可能になるということを知ったためです。

そこでいろいろと検索をかけて、今まで触れることのなかったDjango REST Frameworkも使ったAPIの作り方や、JWT、またReact+Reduxも用いた簡単な掲示板の作り方をYoutubeで見たりしていました。

しかしここでSSRについて知ってしまいました。サーバーサイドレンダリングをしない限りSEOや初期表示速度に大きな影響が出るということについてです。

Googleに関しては今はインデックスしてくれることや、そもそもSSRはしなくていい等、これについても様々な情報をチェックしました。（したつもりです。。。）

そこでみなさまに質問があります。以下の選択肢の中でどれを選択するのがベターでしょうか？

①Reactを用いずにそのまま開発して、そのまま本番で運用しながら必要があればReactに移行する。
②フロントエンドは全てReact+Reduxで開発して、SSRは必要ならばあとから対応させる。

現状で私に与えられた選択肢は上記の２つだと思います。

本音を言うと、Reactを用いて開発したいです。jQueryでゴニョゴニョするのが今まで違和感でしかなかったので。でもその場合、②のSSRについての課題が生じるわけですが、そもそもSSRをあとから導入することなんて可能ですか？Reactについてまだあまり詳しくないので詳細まではわからないのですが、SSR導入は初期段階から念頭にいれて設計するものですか？それともあとからでも導入しようと思えばできるものですか？

あともしReactを用いた開発を行うのであればバックエンドとフロントエンドは完全に分離したいので、Djangoのテンプレートやルーターを用いたハイブリッドな仕様は避けたいと思っています。

長々とすみません。言いたいことがうまくまとまっていませんがどうかご教授お願いします。

Reactを用いるべきかどうか教えてください

現在google forｍを使用してタイムカードとして利用しています。
回答はスプレッドシートに自動的に集計されていますが、このスプレッドシート内に月が変わるごとに新しいシート（「2017.04」といった具合）を自動生成することは可能でしょうか？
ご存知の方入らっしゃいましたらご教授いただければ助かります。

GAS フォームからの回答 月別にシートをわけたい

### 前提・実現したいこと

vscodeでの開発をしています。
```typescript
// fugafuga.ts
interface Hoge {
  [key: string]: number
}
export const fuga: Hoge {
  fuga0: 0,
  fuga1: 1
}
```
このコードのinterface、Hogeは動的にプロパティを設定できるようにしました。

オブジェクトfugaにHogeを実装しまして、適当なプロパティをセットします。

このときfugaを再度呼び出したときfugaのプロパティに対してインテリセンスを効かせたいです。

### 発生している問題・エラーメッセージ
![![イメージ説明](18d471d98c20d0bf7b21ad4b58fd5e1e.png)](8c3eeca93b3e2de3ee3bb8aaa77f55dd.png)

画像のようにインテリセンスが効きません。

### 試したこと

interfaceからtypeに変更してみましたがだめでした。

### 補足情報（FW/ツールのバージョンなど）

typescript 2.9.2
vscode 1.29.1

typescriptで動的interfaceを実装した変数を呼び出した際、インテリセンスを効かせたい。

### 前提・実現したいこと

ここに質問の内容を詳しく書いてください。
Cropper.jsで画像をトリミングするシステムを作っています。
トリミングのデータ取得方法について質問させて頂きます。
宜しくお願い致します。

### 発生している問題・エラーメッセージ
該当のソースコードで次の２つの問題が発生しています。
・トリミング対象の画像が表示されないこと。
・トリミング時にサイズが取得できないこと。

### 該当のソースコード
最終的にはinputに「src,横,縦,幅,高さ」というデータを入力したいと考えています。
しかし先述の２つの問題が発生し、躓いている状態です。
```html
<link  href="//cdnjs.cloudflare.com/ajax/libs/cropper/3.1.6/cropper.min.css" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/cropper/3.1.6/cropper.min.js"></script>

<div class="target">
    <img src="https://dummyimage.com/600x400/000/fff">
</div>

<input type="text">

<script type="text/javascript">
$(function(){

  /*
  Cropperのデータ取得
  */
  cropData = $('.target img').cropper("getData");

  /*
  送信データ作成
  */
  
  //画像URL取得
  var Src = $('.target img').attr('src');
  
  //Cropper実行時
  $('.target img').cropper({
  
    //Cropperサイズ取得
    crop: function(e) {
      var X = Math.floor(cropData.x);
      var Y = Math.floor(cropData.y);
      var W = Math.floor(cropData.width);
      var H = Math.floor(cropData.height);
      var Result = Src+','+X+','+Y+','+W+','+H;
    }
    
    //送信データ作成    
    $('input').val(Result);   
    
  });
  
});
</script>
```

### 試したこと

検索した内容についていくつか試しましたが、私の例と違うためにうまくアレンジできませんでした。
### 補足情報（FW/ツールのバージョンなど）
「Cropper.js」
https://fengyuanchen.github.io/cropperjs/

画像トリミングの「Cropper.js」利用にあたって画像サイズ取得がうまくできません。

pm2を使ってyarn run build && startを実行しバックグラウンドで動かしてサービス化できるようにしたいです。

pm2をインストールして
https://github.com/zeit/next.js/issues/109

こちらを参考に
```
yarn run build
pm2 start yarn --name "next" -- start
```
を実行したのですが
```
yarn run v1.12.3
warning From Yarn 1.0 onwards, scripts don't require "--" for options to be forwarded. In a future version, any explicit "--" will be forwarded as-is to the scripts.
$ /projects/プロジェクト名/node_modules/.bin/pm2 start yarn start
[PM2] Starting /tmp/yarn--1543114192773-0.8311723089869016/yarn in fork_mode (1 instance)
[PM2] Done.
[PM2][ERROR] script not found : /projects/プロジェクト名/start
script not found : /projects/プロジェクト名/start
┌──────────┬────┬─────────┬──────┬──────┬────────┬─────────┬────────┬─────┬────────────┬──────┬──────────┐
│ App name │ id │ version │ mode │ pid  │ status │ restart │ uptime │ cpu │ mem        │ user │ watching │
├──────────┼────┼─────────┼──────┼──────┼────────┼─────────┼────────┼─────┼────────────┼──────┼──────────┤
│ yarn     │ 0  │ N/A     │ fork │ 6042 │ online │ 0       │ 0s     │ 0%  │ 788.0 KB   │ root │ disabled │
└──────────┴────┴─────────┴──────┴──────┴────────┴─────────┴────────┴─────┴────────────┴──────┴──────────┘
 Use `pm2 show <id|name>` to get more details about an app
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
```
こうしてエラーが出てしまいます。どなたか原因分かりますでしょうか？

react pm2の使い方が分からない

### 実現したいこと

Vue.js(webpackテンプレート)・Netlify・ButterCMSでSPAのブログを作っています。
([Vue.jsの公式に載っている構成](https://jp.vuejs.org/v2/cookbook/serverless-blog.html)をNetlifyに乗せる形です)
環境変数に設定したButterCMSのAPI tokenが上手く取得できなくて困っています。

### 前提および背景
- API tokenは元々`config/dev.env.js`および`config/prod.env.js`に記載していた
- (この状態ならローカルでrunしたときは上記のファイルからAPI tokenを取得できている)
- ただし、これらの情報はcredentialであるため、Github上にアップロードする時は`YOUR API KEY`に置き換えている
- 補足:NetlifyはGithubの`master`を直接ホスティングするため、API tokenを含むファイルをpushしないとNetlifyでホスティングしたときに読めない

### 発生している問題・エラーメッセージ
- Netlifyでホスティングするに当たって、Build Environment variablesに環境変数を設定出来るため、ここにAPI tokenを設定してデプロイしたが、アプリケーションがNetlifyで設定した環境変数を読めていない
- tokenのクエリストリングが`&auth_token=YOUR+API+KEY`になってしまっているため、APIを叩いても`unauthorized`で返ってくる

### ソースコード
[こちらのリポジトリ](https://github.com/canisterism/blog_201811/tree/master)にソースを置いています。以下必要と思われる分だけ抜粋します。

API呼び出しをしている部分：`src/Index.vue`
```javascript
<template>
.
.
.
</template>
<script>
import Butter from "buttercms";
var butter = Butter(process.env.VUE_APP_BUTTER_API_KEY);
export default {
  name: "index",
  data: function() {
    return {
      posts: []
    };
  },
  created: function() {
    this.fetchPosts();
  },
  methods: {
    fetchPosts: function() {
      var vm = this;
      butter.post
        .list({ page: 1, page_size: 10 })
        .then(function(res) {
          vm.posts = res.data.data;
        })
        .catch(function(err) {
          console.log(err);
        });
    }
  }
};

</script>
```

GitHubにあげている`prod.env.js`(GitHubに上げた時点でtokenは伏せている)
```javascript
'use strict'
require('dotenv').config();

module.exports = {
  NODE_ENV: '"production"',
  VUE_APP_BUTTER_API_KEY: '"464a98d163b954e9ac9ee91798f56547b0e48eb4"'
}
```

### 考えていること
- どうすればNetlifyに設定した環境変数が読めるのか?
.
- 「Netlifyに環境変数を設定した」と言っているが、`Build Environment Variables`であるため、これはビルド時に使用するためだけのもので、アプリケーション内でAPIを叩くなどのときに使用するものではないのでは?
- 仮にそうだとすると、NetlifyでホスティングするときにCredentialは隠せないのではないか?
.
- ローカルで`export VUE_APP_BUTTER_API_KEY=ababababababab`(仮の値です)を実行し、ローカルで`npm run dev`を実行しても読めない(読む方法がわからない)ので、そもそもマシン毎の環境変数にAPI tokenを設定することが間違っている?
- こちらの場合でも上と同じで、ではどうやって安全にAPI tokenをGithub上に置いてホスティングすればよいのか?

### 補足情報（FW/ツールのバージョンなど）
[Butter CMS API Reference](https://buttercms.com/docs/api/)

### まとめ
以上となります。VueもwebpackもNetlifyも触り始めた段階で前提から違っている可能性もありますが、ご存知の方がいらっしゃれば教えていただけると幸いです。よろしくお願いいたします。