常連

回答者

拍手喝采

自己紹介

前提として現時点でWebアプリケーションフレームワークの代替になるのかどうかの結論が欲しいです。
firebaseのサイト構築のノウハウが公式のドキュメント以外にあれば知りたいです。
googleで「firebase qiita」「firebase sample」等で検索してもあまり有用な情報が出てきません。
簡易的なWebアプリケーションフレームワーク程度のことができるのか、それ以上のことができるのか、できるとしてどれくらい簡単に速く作れるのか、どのように構築するのか、どんなデメリットや陥りやすいポイントがあるのか、などの情報を集めています。

firebaseの利用例やノウハウを知りたい

# 概要

TypeScriptでカスタムエラーの3つの実装方法を記載しました。
自分ならXXXなのでこれを選ぶ、あるいはもっといい方法があるというようなご意見をいただきたいです。

前提条件

- **Javascript(TypeScript)では極力例外を投げるのは避けるべき**とは思っている
- サポート対象ブラウザはChrome,FireFox,Safariの最新版のみ。デバイスはPC, タブレット, スマートフォン。
- TypeScriptを使用したSPA. ソースコード50000行ほど、ファイル数680 今後2倍くらいになりそう
- フロントエンド監視にはSentryを使用している
- JavascriptのErrorを拡張して,エラー種別の判別とSentryでのバグトラッキングに活かしたい(エラーコードを設けたり、エラー種別によってエラーハンドリングを変えたり)

# 実装方法

## 1. Errorをimplementsするクラスを作成する

```
class ApplicationError implements Error {
    public name = 'ApplicationError';

    constructor(public message: string, public code: ApplicationErrorCode) { }

    toString() {
        return `${this.name}: ${this.message}`;
    }
}
```

出典 [TypeScript実践プログラミング: p195](https://books.google.co.jp/books?id=8m5qBgAAQBAJ&lpg=PP1&dq=isbn%3A4798139807&hl=ja&pg=PA195#v=onepage&q=ApplicationError&f=false)

### メリット

- アプリケーションの例外とJSの例外が分別できる

    > 引用:
    > ネイティブのError 型は聖域として扱い、この種の例外を決してスローしないようにしよう。
    > カスタム例外をApplicationError クラスのサブクラスとして作成すれば、本当に例外的な状況においてコードの外側で使用するためにError型を取っておくことができる。

### デメリット

- スタックトレースが取れない
- 子クラスを作るたびにnameを書かないといけない(何らかの方法で解決できるのかもしれないが自分は分からない)

## 2. Errorをextendsするクラスを作成する

```
class FooError extends Error {
    constructor(m: string) {
        super(m);

        // Set the prototype explicitly.
        Object.setPrototypeOf(this, FooError.prototype);
    }

    sayHello() {
        return "hello " + this.message;
    }
}
```

出典 [Extending built-ins like Error, Array, and Map may no longer work](https://github.com/Microsoft/TypeScript-wiki/blob/master/Breaking-Changes.md#extending-built-ins-like-error-array-and-map-may-no-longer-work)

### メリット

- スタックトレースが取れる

### デメリット

- `Object.setPrototypeOf` を忘れたり誤ったりすると`instance instanceof FooError`がfalseになる
- TypeScript, Javascriptの仕様変更によって壊れる可能性が1より高い(実際にTypeScript2.1で壊れた)

## 3. Errorをカスタムするのではなく,throwをカスタムしてすべてErrorを使用する

```
/**
 * フレームワークエラーを発生させます。
 *
 * @private
 * @param code {Number} エラーコード
 * @param msgParam {Any[]} フォーマットパラメータ
 * @param detail {Any} 追加のデータ(内容はAPIごとに異なる)
 */
function throwFwError(code, msgParam, detail) {

        .....

	if (code) {
		e.code = code;
	}
	if (detail) {
		e.detail = detail;
	}

	throw e;
}
```

出典 [hifive - HTML5企業Webシステムのための開発プラットフォーム - hifive](https://www.htmlhifive.com/)

### メリット

- 全てのエラーはErrorなのでインターフェースが統一されている
- codeがenumであればdiscriminated unionsによって型の推論ができる

### デメリット

- TypeScriptだとグローバルのError型定義を拡張しなければならない
- 使用する側が気を付けなければならない

TypeScriptでカスタムエラークラスを作成する方法について

C#で開発を行っておりますが、
可読性以外の観点からenumを使う利点って、なんでしょうか？

enumのメリットデメリット、使いどころ

###前提・実現したいこと
Vue.jsで自作した子コンポーネントを親から複数箇所で呼び出しています。
そのうちの1つでだけ値の入力後に独自の処理を行いたいため、
親から子に対してコールバック関数を渡したいです。

コンポーネントの中身はテキストボックスにコードを入れると名称を取得してきて隣に表示するというものです。
コールバックで行いたいのは、名称以外の値も一緒に変更するという処理です。
一緒に変更したい値が18個ぐらいあるので、変更したい側に書くよりコード変更時に処理したいと思っています。

Vue.jsのサイトを見るとpropsの型にFunctionが有ったので渡せるのでは？と思っていたのですが、
色々試してみても文字列になってしまいます。
どうやって関数自体を渡せばいいのでしょうか。

###該当のソースコード
※コンポーネントのソースが長いので、関数が渡せるかどうか試しているテストコードを載せています。
子コンポーネント
```js
var child =  {
    props:{
        testFnc : Function
    },
    template: "<input type='text' v-on:change='onChange' />",
    methods:{
        onChange:function(){
            this.testFnc("aaaa")
        }
    }
}
```
親側
```js
window.onload = function(){
	new Vue({
		el:'#vue_contents',
		methods:{
			setTest: function(msg){
				alert(msg);
			}
		},
		components : {
　          'child':child
		},
	});
}
```
呼び出すところ
```html
<child test-fnc="{{setTest}}"></child>
```
this.testFncに何が入っているかデバッグツールで覗くと「{{setTest}}」が入っています。

###試したこと
１．呼び出しのところにv-bindを付けないと文字列になるという記載を見つけて
```html
<child v-bind:test-fnc="{{setExtendInfo}}"></child>
```
にしてみました。
結果、ページ全体が表示されなくなりました。

２．関数を変数に入れて変数名を渡してみました。
```js
var test = function(){
  alert("呼べてますか…？");
}
```
無駄な抵抗で呼び出し側でもダブルクォーテーションを取ってみる。
```html
<child test-fnc=test></child>
```
文字列「test」が渡されました…。

３．そもそも親側でwatchしてコールバックを書いてみる
親のデータとバインドしていたので、親側でデータをwatchしてみました。
```js
 watch:{
   testdata:function(newVal, oldVal){
      alert("ここがコールバックになる予定");
   }
 },
```
呼ばれることは呼ばれましたが、1文字入力するごとに呼ばれてしまいます。
入力するコードが長さが決まっていないという仕様なので、入力値の長さでチェックすることもできません。

４．3案でフォーカスが当たっている間は処理しないようにしてみる
暫定でコードを入れるテキストボックスにid="testdata"と名付けました。
```js
 watch:{
   testdata:function(newVal, oldVal){
      if (document.activeElement.id === "testdata") {
          return;
      }
      alert("ここがコールバックになる予定");
   }
 },
```
alertが呼ばれることはありませんでした。
よく考えたら最後の文字が入力されたときに呼ばれてもフォーカスはまだ当たりっぱなしなので、当たり前でした…。

###補足情報(言語/FW/ツール等のバージョンなど)
言語：Vue.js 2.2.4

Vueで親から子に関数を渡す方法

タイトルの通り、AngularJSを採用しているサイトをウェブスクレイピングしたいです。

環境は
Golang
"github.com/PuerkitoBio/goquery"
を使います。
(Goやgoqueryでなくても構わないのですが。)

サイトに対してGETリクエストをし、返ってきたレスポンスボディ(HTML)を使ってスクレイピングしたいです

普通に
```
doc, _ := goquery.NewDocumentFromResponse(レスポンス)
```
とすると、AngularJSで生成される要素が取れません

AngularJSを採用しているサイトに対するウェブスクレイピングは不可能なんでしょうか

AngularJSを採用しているサイトをウェブスクレイピングする方法はありますか？

現在、モバイルからGoogleで「あったか　グッズ」と検索すると、結果が表示されるのですが、

```ここに言語を入力
https://www.google.co.jp/search?q=%E3%81%82%E3%81%A3%E3%81%9F%E3%81%8B+%E3%82%B0%E3%83%83%E3%82%BA&rlz=1C1GGRV_enJP752JP754&oq=%E3%81%82%E3%81%A3%E3%81%9F%E3%81%8B%E3%80%80%E3%82%B0%E3%83%83%E3%82%BA&aqs=chrome..69i57j0l5.17724j0j9&sourceid=chrome&ie=UTF-8
```

Naverまとめの記事の画像一覧がカルーセルで表示されています。（トップニュースとは別です。）

必要条件としての構造データはどのようなものになるでしょうか。ご存じの方がいればお教えください。

google検索結果に記事の画像一覧を表示する構造データは？

例としてweb広告を上げさせていただきます

web広告はクリック時に単価が発生する仕組みですが、利用するクライアント(広告の表示されたサイト利用者)が仮に

ipアドレスを書き換えて広告をクリックするシステムを作った場合

どのように対策を取ればいいか教えていただきたいです。


考えてみた甘いセキュリティを上げますと、サーバサイドでクリックした利用者の情報を一時的に格納し、一定時間内に特定の回数以上クリックされた場合、ハッキング行為とみなしレスポンスを返さない

とゆうものがありますが、格納しておくべきユーザーの情報とゆうのがいまいち解っていません 

ハッカーでもこれだけは書き換え出来ない、、とゆう情報を知っているセキュリティ知識の有る方教えていただきたいです。

Webリンクのハッキングクリック対策について

マイナンバーカードの電子証明書を使ってログインするシステムを作りたいですが、どこから、どうやって始まるかさっぱり分かりません。

###やりたいことは
カードリーダにマイナンバーカードをかざして、ログインすることです。
できればpythonでやりたいです。

マイナンバーカードのシステムについてネットに情報が少ないか分かりませんが、なかなかみつけなくて、ご存知の方、少しでもいいので、教えてください。