フロントエンド開発を学ぶために便利なガイドや読み物、他にも使えるWebサイトなど、いろいろな教材について最近数カ月にわたってまとめてきましたが、今回の記事ではその中でも最高レベルのものをご紹介します。
ではさっそく「お役立ち資料・ガイド」第8弾をお楽しみください。また、ここで紹介されていないものがあったらぜひ教えてくださいね。
1. Keyboard Event Viewer
キーボードのイベントでデータを閲覧できる、設定が自由なインタラクティブなツールです。UIイベント仕様にアウトラインされたイベント情報やレガシー情報を表示してくれます。
2. jQuery Quick API Reference
jQuery機能を1ページにまとめたチートシートで、バージョン1.10/2.0までのjQueryに対応しています。機能をクリックすると、該当するjQueryのドキュメントページがモーダルウィンドウで表示されます。
3. BugRex
「ドキュメント」というよりは、エキスパートとチャットで話せるインタラクティブなヘルプガイドと言えるかもしれません。サイト上には「The BugRexは、サポートに徹することを心から楽しむ開発者コミュニティによって運営されています。新しいコンセプトの理解、質問、バグ修正にお役立てください」というメッセージが掲載されています。
4. Global CSS Property Usage
SitePointによる最近のCSS調査に満足した人になら、Microsoft Edgeチームによるこちらのデータも納得のいくものとなるでしょう。100万以上のWebページを4カ月ごとに精査し、CSSプロパティの使用状況をまとめていて、しかも検索ができます。
5. Performance Tooling Today
ワークフローの向上、Webサイトの改善および高速化に役立つ資料が集められています。資料にはツール、記事、動画、スライド、書籍、学習コース、パフォーマンス検査などのカテゴリーがあります。
6. Opera Mini Tips
「フロントエンド開発機能（Opera Miniによるサポートはなし）、クラウドソースによる開発における次善の策が集められています」
7. Touch Keyboard Type Cheat Sheet
ECサイトの使いやすさを調査しているBaymard Instituteによる、開発者のためのタッチキーボード用フォームフィールド最適化ガイドです。たとえば、適切なタイピングの設定方法、オートコレクトやオートキャピタライズなどを使用するタイミングについて解説しています。タッチ画面搭載のデバイスからページフォームのテストができるようになっています。
8. HTML5 チートシート
HTML5のタグやその意味を分かりやすくシンプルに理解できるチートシートです。PDFまたはPNG画像で表示できます。
9. Diff of HTMLs
「WHATWG版HTMLとW3C版HTML5.1の非公式な差分ビューアーです。各仕様のセクションを並べて表示できます」
10. メールクライアントのためのCSSサポートガイド
「世界中のモバイル、Web、デスクトップのメールクライアントのトップ10に対応したCSSサポートの完全版です」
11. Babelユーザーのためのハンドブック
JavaScriptコンパイラーとして人気の、James Kyleによって作成されたBabelの総合ガイドです。Babelおよび関連ツールを使うときに必要なすべての情報がまとめられています。
12. The A11Y Project
昔からあるプロジェクトですが、最近になってデザインが新しくなりました。「Webアクセスをよりシンプルで簡単にするコミュニティ的な取り組み」とされており、アクセシビリティに関する実用的な方法や技術、裏話、テスト、裏ワザ、支援技術に関する情報などが満載です。
13. Flexbox playground
Flexboxのさまざまなプロパティや値のテストが簡単にインタラクティブにできる、CodePenで作成したデモ版です。
14. Hypertext Transfer Protocol Version 2 (HTTP/2)
HTTP/2の推奨版スタンダード仕様です。
15. JS Tips
Joel LoveraによるJavaScript裏ワザ集です。もともとは裏ワザを毎日紹介する予定だったようですが、最近はメンテナンスされていない様子。それでもすぐに使える裏ワザを探すには良い資料です。
16. LMHT
スペイン語圏の開発者がHTML用語を理解できるように作られた、検索可能なHTMLタグのリファレンスです。タグ定義を英語およびスペイン語で聞ける音声資料も掲載されています。コンテンツはまだまだ少ないですが、投稿もできます。
17. ES6のまとめ350
ブログで多くのES6（ES2015）について執筆してきたNicolás Bevacquaによる、過去記事のまとめです。ES6機能をサッとチェックするのに最適です。
18. Say Yes to HTTPS
HTTPSとは何か、どのように機能するのか、設定方法はどうするのかなど、Web開発者がHTTPSに追いつくために使えるシンプルで実用的なガイドです。
19. Bigcommerce Sassコーディングガイド
SUIT CSSとMedium’s CSSに影響を受けて作られたBigcommerce’s Sassのコーディングガイドです。
20. WPO Stats
「ユーザーエクスペリエンスとビジネスメトリクスにおけるWebパフォーマンス最適化（WPO、訳注：Web Performance Optimization）のインパクトについての実例と実験です」
その他
- Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification
- Your guide to the (sometimes overwhelming!) React ecosystem.
- The SQL style guide
- CSS Refresher Notes
過去の「フロントエンド開発者向けのお役立ち資料・ガイド20件」シリーズはこちらからチェックできます。
- 20 Docs and Guides for Front-end Developers (No. 1)
- 20 Docs and Guides for Front-end Developers (No. 2)
- 20 Docs and Guides for Front-end Developers (No. 3)
- 20 Docs and Guides for Front-end Developers (No. 4)
- 20 Docs and Guides for Front-end Developers (No. 5)
- 20 Docs and Guides for Front-end Developers (No. 6)
- 20 Docs and Guides for Front-end Developers (No. 7)
（原文：20+ Docs and Guides for Front-end Developers (No. 8)）
［翻訳：加藤由佳］
［編集：Livit］
