新人SEの学習記録

14年度入社SEの学習記録用に始めたブログです。気づけば社会人3年目に突入。

学習記録:Webフロントエンド、参加記録:天下一プログラマーコンテスト

[学習記録] Webフロントエンド

内容

13章:現場で使える品質管理
  • パフォーマンス測定の重要性
    • どこにボトルネックがあるのか?
    • WebPagetest - Website Performance and Optimization Testで計測
    • 使用方法
      • サイトのURLを入力
      • Test Locationから地域を選ぶ
      • Browserでテストしたいブラウザを選択
      • Test Setting > Advanced Settigsで詳細なメニュー表示
      • Connectionでテストに使用する回線種別を選ぶ
      • Capture Videoにチェックを入れるとサイトにアクセスしてから計測終了までどのように表示されるかを動画として見れる
      • Chrome > Emulate Mobile Browser, Capture Dev Tools Timelise, Capture Network Log
      • START TESTで計測開始
    • 測定結果
      • Summary:各ポイントにおける所要時間などの概要レポート
      • Details:各リソースが取得される流れ、詳細
      • Performance Review:基本的な対策が実施されているか
      • Content Breakdown:リソース種類別のリクエスト数・ファイルサイズなどのレポート
      • Domain:ダウンロードされたリソースの配信元
      • Processing Breakdown:JavaScriptの処理の内訳や、描画処理の内訳
      • Screen Shot:テスト結果のSS
  • ドキュメンテーション
    • ドキュメントツール
      • ある一定の形式によりコメントを改定期、CUIなどで操作することによりHTMLなど見やすい形にコメント変換してくれる
      • CSS:StyleDocco, Kalei Styleguide, KSS-Node
      • JavaScript:YUIDoc, JSDoc, Docco
  • コードカバレッジ
    • コード網羅率、コードのうちどのくらいテストが網羅しているか
    • JavaScriptでは、Blanket.js, istanbul-js, JSCover, YUI Testなど
14章:セキュリティ対策の基本
  • DOM based XSS
    • DOMツリーを動的に構築、更新するフェーズで発生
    • サーバサイドからは攻撃の可能性のあるコードは出力されず、クライアントサイド側で脆弱性が生まれてしまう
    • ex) URI中のハッシュデータをJavaScriptから理容師、そのデータに基づいてHTMLを書き換える
    • 対策
      • テキストノードとして扱う:content.textContent = hogehoge;
  • ネットワーク起因の脆弱性
    • JavaScriptでバックグラウンド通信を行い、その結果をリアルタイムに反映
    • ex) アプリケーション内で、URIハッシュで指定されたファイルの中身やAPIの結果を非同期通信で取得し、表示
      • URIハッシュにURIフォーマットの文字列を渡すと、XHRは外部サイトへリクエストを送信してしまう
    • 対策
      • リクエストできるURIプロトコルを固定する、もしくは厳密に検証する

[参加記録] 天下一プログラマーコンテスト2014予選A

結果

  • A問題とB問題を解答して70点でした。
    • A問題:1から1000までの数字を辞書順ソート(1, 10, 11, 12... 100, ..., 1000, 2, ...)
      • Comparatorクラスを作った
      • 実はそんなことしなくてもString型のリストをCollections.sort()すれば辞書順ソートされるらしい。。。
    • B問題:ぶん投げRPGかぶりんのダメージ計算
      • ダメージはコマンド入力時に即計算してしまって、投げたかぶが敵に当たる時間(コンボ数増加)と戻ってくる時間を管理
      • 毎秒上記の時間をチェック>現在の手持ちかぶ数チェック>コマンド実行の流れで解けた
      • doubleからlong型への変換で微妙なずれが生じた模様なので、この辺は注意したい

感想