Help us understand the problem. What is going on with this article?

Front-End-Checklist (個人的な)補足メモ

More than 1 year has passed since last update.

Front-End-Checklist日本語訳を読んで、補足っていうか自分の知らなかったものとか、あれ?これなんだっけ??ってのを まとメモ

Head

・X-UA-Compatible

制御パラメータを利用して古いブラウザの機能をエミュレートさせることができる。
content=”IE=edge”はIEの最新バージョンの標準モードで表示するという設定。

・Description

ページの内容をあらわす概要を記述する。
検索結果のスニペットで使われる事がある。

・Canonical

複数の重複 ページが存在している場合に、 検索エンジンに優先させるべき ページを伝えることでそれ以外のページは重複 ページであることを伝える事ができる。

なぜ URLの正規化が必要か

  1. どれを インデックスに登録するか判断できない
  2. リンクポピュラリティが分散する

などがある

・Noopener

target="_blank" で外部リンクを使用する際、rel="noopener" 属性をつけて Tabnabbing 脆弱性を防ぐ。

Tabnabbing 脆弱性

スクリプトにより非アクティブのタブ上のページを偽のページに書き換え、ユーザがそのタグに移動したとき、偽のページを利用してパスワードなど情報を盗み出す。

JavaScript

・Modernizr

modernizr.jsというJavaScriptのライブラリ。
閲覧者のブラウザがどのような機能をサポートしているかをチェックして、HTMLタグにサポート状況を判別できるクラスを付与し、その結果を記録したmodernizrグローバルオブジェクトを生成してくれる。

閲覧者の使用しているブラウザごとに判別してクラスを付与して、追加されたクラスを使うことで、ブラウザの対応状況に応じたCSSを記載することができるようになる。
たとえばcanvasが利用可能な場合は「canvas」とクラス名を付与する。canvasが利用できない場合は、頭にno-がついた機能名、「no-canvas」 というクラス名を付与する。

・ESLint

JavaScript のための静的検証ツール。
コードを実行する前に明らかなバグを見つけたり、括弧やスペースの使い方などのスタイルを統一したりするのに役立つ。

特徴

  • すべての検証ルールを自由に on/off できる
  • 自分のプロジェクトに合わせたカスタムルールを簡単に作れる
  • 豊富なビルトイン ルール (4.0.0 時点で 247 個) に加えて、たくさんのプラグインが公開されている
  • ECMAScript 2015 (ES6), 2016, 2017 を標準サポートしている
  • JSX 記法 をサポートしている
  • Babel と連携することで、仕様策定中の新しい構文や Flow 型注釈にも対応できる

参考:ESLint 最初の一歩

セキュリティ

・Content Type Options

X-Content-Type-Options: nosniff
ファイルの内容からファイルの種類を決定できないようにするヘッダフィールド。
Content-typeを’text/plain’と指定した場合には指定通り
テキストとしてと表示されるようになる。
これによってクロスサイトスクリプティング(XSS)が防止できる。

・X-Frame-Options (XFO)

iFrameを使って他のサイトから自分のサイトが読み込まれないようにするヘッダフィールド。
クリックジャッキングを防ぐ。

クリックジャンキングとは

悪意のあるサイト上の特定箇所をクリックさせ、他のサイトの設定情報を変更させること。
他のサイトは、iframeを使って読み込まれた上で、視覚的に見えなくしてある。

参考:HTTPレスポンスヘッダによるセキュリティ対策

用語以外

Cookie size: もし Cookie を使用しているなら、4096 バイトを超えていないこと、20以上の Cookie を使用していないこと。

これは知らんかった...Cookie関連(キャッシュとか諸々)まだ知らんことが多い...(。ŏ﹏ŏ)

mikimhk
デザインシステム構築・アクセシビリティ向上頑張りたいUXエンジニア 好きなカラーコードは#c69
crowdworks
21世紀の新しいワークスタイルを提供する日本最大級のクラウドソーシング「クラウドワークス」のエンジニアチームです!
https://crowdworks.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした