フロントエンド のバックアップソース(No.3)

• バックアップ一覧
• 差分 を表示
• 現在との差分 を表示
• バックアップ を表示
• フロントエンド へ行く。
  • 1 (2019-08-02 (金) 22:26:27)
  • 2 (2019-08-02 (金) 23:22:26)
  • 3 (2019-08-03 (土) 14:36:16)

*概要 [#z1d83c54]
-ユーザが直接見る画面の設計




ウェブ開発がバグったときのデバッグ情報は、以下で得ることができる。
- F12の左上のエラー←重要！！！！！！！！！！！！フロントエンド側でキャッチできるログ
- Stackdriverのログ←サーバサイドのログ。



placekittenというサイトがあって、横幅縦幅を指定してかわいい猫の画像をダウンロードできる



Vue
「ヴュー・ドット・ジェイエス」と読みます。
JavaScript フレームワークの一つで、主に、MVC(Model View Controller)モデルの View 層を扱います。



tokenをデコードしたあとのclaimsは、もしそれが不正ならばNone, そうでなければmap<string, string>が返ってきて、sub=uid, isser, audien ce, issued-at time, expiration timeなどの情報が得られる。特にsubが重要で、これがアクセスしてきたユーザのuidなのでキーとして安全に利用可能

フロントエンドでユーザが得るgetIdToken
expireしていなければ…って書いてあるということはおそらくサーバから撮ってきて、ローカルに保存しているのだろうと思う。
Returns a JSON Web Token (JWT) used to identify the user to a Firebase service.
Returns the current token if it has not expired. Otherwise, this will refresh the token and return a new one.





認証トークンの送信はRFC 7235で規定されている Authorization ヘッダを使うと良いです。Basic認証とかDigest認証で使うやつですね。 実は Basic や Digest の他にRFC 6750で Bearer というスキームが登録されています。単一の文字列を ...
クライアントがトークンを HTTP リクエストに含めて送信し、サーバはトークンを検証してリソースへのアクセスを許可したい
Authorization: Bearer トークン ヘッダでトークンを送る API あるよね、ああいうやつ
疑問
Authorization: Bearer ヘッダは OAuth と関係しているらしいけど、ログインに OAuth を使わない API でも使っていい？→良い。RFC 6750には汎用的なHTTP認可に使って良いと書いてある
bearer が何を意味するのか？を考えたことはなかったんですが、言われてみると気になります。
辞書を引くと
・運ぶ人[もの],運搬人
・持参人
などという意味があるようです。



FirebaseのAPI keyなどをハードコードしたくない場合
webpackの機能を使って API_KEY などを環境変数から流し込む方法もあります
https://qiita.com/shora_kujira16/items/95216245ecf06c4cd16d

   $('#logged-in').hide();
    $('#logged-out').show();
でdivを全部見せたり消したりを制御することができる











locationはJavascriptのオブジェクト。変数もあるしメソッドもある。たとえば、JSからリダイレクトみたいなことをしたい場合は、
例えば、http://example.comへ遷移したい場合、
location.href = 'http://example.com';
とするか、
location.assign('http://example.com');
とします。両者の違いですが、location.href property vs. location.assign() methodによると速度的な違いからlocation.href = '...'を使う方が良いとする人が多いようです。
また、上の2つの方法はページ遷移がブラウザの履歴に残るため、遷移後に戻るボタンで元のページヘ戻ることができますが、
location.replace('http://example.com');
とした場合、ブラウザの履歴に残らないため、戻るボタンで元のページヘ戻ることができません。

この記事では、３種のクラス内関数について説明します。
- 通常のメソッド（インスタンスメソッド）person1.self_introduction()、もしくはPerson.self_introduction(person1)のようによびだす。前者とと後者は完全に同じ
- staticmethod（静的関数） これはインスタンスに依存しない関数。なのでclassないぶのdefであってもselfを第一引数にする必要はない
- classmethod


theadタグは、表の中でも見出しの部分になるやつ。wikiとかでも表の一番はじめの列にhってつけけどあれと同じこと。

JSを使うと、div id = "notes-containier"となっている部分を変数のように扱って事由に変更することができる！


yukicoderはこんな間じで削除を押すとproblem-idと対応させてポップアップが出るようになっている
<a class="deleter" href="#" data-problem-id="1979" data-title="天秤とニセモノの硬貨"><i class="fa fa-trash-o"></i>削除</a>



*HARファイル [#ze2d3c0e]
-HARファイルは実際のところ裏はJSON
朝昼晩で比較して、どこのネットワークが遅くなっているのかを確認するなどする。
自動で朝昼夜比較するとか、スマホとPCで比較するとかしてパフォーマンスを比較する方法がある
なお、Auditソフトなどを使うことでJSまとめろとかgzip で遅れとかキャッシュさせろとか使ってないCSSどうにかしろとかいろいろ言ってくれう