SitePoint編集者が厳選!フロントエンド開発者のためのとっておきチートシート、資料まとめ

2016/05/23

Louis Lazaris

FREE
0

Articles in this issue reproduced from SitePoint
Copyright © 2016, All rights reserved. SitePoint Pty Ltd. www.sitepoint.com. Translation copyright © 2016, KADOKAWA ASCII Research Laboratories, Inc. Japanese syndication rights arranged with SitePoint Pty Ltd, Collingwood, Victoria,Australia through Tuttle-Mori Agency, Inc., Tokyo

フロントエンド開発を学ぶために便利なガイドや読み物、他にも使えるWebサイトなど、いろいろな教材について最近数カ月にわたってまとめてきましたが、今回の記事ではその中でも最高レベルのものをご紹介します。

ではさっそく「お役立ち資料・ガイド」第8弾をお楽しみください。また、ここで紹介されていないものがあったらぜひ教えてくださいね。

1. Keyboard Event Viewer

キーボードのイベントでデータを閲覧できる、設定が自由なインタラクティブなツールです。UIイベント仕様にアウトラインされたイベント情報やレガシー情報を表示してくれます。

2. jQuery Quick API Reference

jQuery機能を1ページにまとめたチートシートで、バージョン1.10/2.0までのjQueryに対応しています。機能をクリックすると、該当するjQueryのドキュメントページがモーダルウィンドウで表示されます。

02

3. BugRex

「ドキュメント」というよりは、エキスパートとチャットで話せるインタラクティブなヘルプガイドと言えるかもしれません。サイト上には「The BugRexは、サポートに徹することを心から楽しむ開発者コミュニティによって運営されています。新しいコンセプトの理解、質問、バグ修正にお役立てください」というメッセージが掲載されています。

03

4. Global CSS Property Usage

SitePointによる最近のCSS調査に満足した人になら、Microsoft Edgeチームによるこちらのデータも納得のいくものとなるでしょう。100万以上のWebページを4カ月ごとに精査し、CSSプロパティの使用状況をまとめていて、しかも検索ができます。

04

5. Performance Tooling Today

ワークフローの向上、Webサイトの改善および高速化に役立つ資料が集められています。資料にはツール、記事、動画、スライド、書籍、学習コース、パフォーマンス検査などのカテゴリーがあります。

05

6. Opera Mini Tips

「フロントエンド開発機能(Opera Miniによるサポートはなし)、クラウドソースによる開発における次善の策が集められています」

06

7. Touch Keyboard Type Cheat Sheet

ECサイトの使いやすさを調査しているBaymard Instituteによる、開発者のためのタッチキーボード用フォームフィールド最適化ガイドです。たとえば、適切なタイピングの設定方法、オートコレクトオートキャピタライズなどを使用するタイミングについて解説しています。タッチ画面搭載のデバイスからページフォームのテストができるようになっています。

07

8. HTML5 チートシート

HTML5のタグやその意味を分かりやすくシンプルに理解できるチートシートです。PDFまたはPNG画像で表示できます。

08

9. Diff of HTMLs

「WHATWG版HTMLとW3C版HTML5.1の非公式な差分ビューアーです。各仕様のセクションを並べて表示できます」

09

10. メールクライアントのためのCSSサポートガイド

「世界中のモバイル、Web、デスクトップのメールクライアントのトップ10に対応したCSSサポートの完全版です」

10

11. Babelユーザーのためのハンドブック

JavaScriptコンパイラーとして人気の、James Kyleによって作成されたBabelの総合ガイドです。Babelおよび関連ツールを使うときに必要なすべての情報がまとめられています。

11

12. The A11Y Project

昔からあるプロジェクトですが、最近になってデザインが新しくなりました。「Webアクセスをよりシンプルで簡単にするコミュニティ的な取り組み」とされており、アクセシビリティに関する実用的な方法や技術、裏話、テスト、裏ワザ、支援技術に関する情報などが満載です。

12

13. Flexbox playground

Flexboxのさまざまなプロパティや値のテストが簡単にインタラクティブにできる、CodePenで作成したデモ版です。

13

14. Hypertext Transfer Protocol Version 2 (HTTP/2)

HTTP/2の推奨版スタンダード仕様です。

14

15. JS Tips

Joel LoveraによるJavaScript裏ワザ集です。もともとは裏ワザを毎日紹介する予定だったようですが、最近はメンテナンスされていない様子。それでもすぐに使える裏ワザを探すには良い資料です。

15

16. LMHT

スペイン語圏の開発者がHTML用語を理解できるように作られた、検索可能なHTMLタグのリファレンスです。タグ定義を英語およびスペイン語で聞ける音声資料も掲載されています。コンテンツはまだまだ少ないですが、投稿もできます。

16

17. ES6のまとめ350

ブログで多くのES6(ES2015)について執筆してきたNicolás Bevacquaによる、過去記事のまとめです。ES6機能をサッとチェックするのに最適です。

17

18. Say Yes to HTTPS

HTTPSとは何か、どのように機能するのか、設定方法はどうするのかなど、Web開発者がHTTPSに追いつくために使えるシンプルで実用的なガイドです。

18

19. Bigcommerce Sassコーディングガイド

SUIT CSSとMedium’s CSSに影響を受けて作られたBigcommerce’s Sassのコーディングガイドです。

19

20. WPO Stats

「ユーザーエクスペリエンスとビジネスメトリクスにおけるWebパフォーマンス最適化(WPO、訳注:Web Performance Optimization)のインパクトについての実例と実験です」

20

その他

過去の「フロントエンド開発者向けのお役立ち資料・ガイド20件」シリーズはこちらからチェックできます。

(原文:20+ Docs and Guides for Front-end Developers (No. 8)

[翻訳:加藤由佳]
[編集:Livit

Copyright © 2016, Louis Lazaris All Rights Reserved.

Louis Lazaris

Louis Lazaris

Impressive Websの開発ブロガーで、現在はSitePointのHTML・CSSエディター。フロントエンドにまつわるものならすべて大好きで、ツール中心のフロントエンド開発者向けニュースレター、Web Tools Weeklyのキュレーションもしています。

Loading...