プログラミング

プログラミング

【保存版】フロントエンド開発者必見!開発に役立つ便利なメモ/ガイド/サイト16選

229 views

インターネット上でネットサーフィンをしていたり、プロジェクトに参加したりする中で、開発者向けのまとまった情報を発見することがしばしばあります。

今回は、そんな便利なWeb情報をメモとして公開しようとおもいます。

フロントエンド開発者向きのチートシートやドキュメントなどありますので、使えそうなものはぜひ活用してみてください。

 

Superhero.js

JavaScriptベースの技術に関してのノウハウが詰まった記事やビデオ、プレゼンテーションなどのコンテンツが集まっています。

1-yvglcc_jrzvchflcu7mgra

 

Open Web CSS Reference

あまり知られていない総合的なCSSプロパティと機能について参照できる情報集です。

1-kcyfrfx0h_wnuhuxqj72pg

 

OverAPI.com

困ったときのチートシートとして使われています。

1-0gev6uym6oi-zpsa1lroiw

 

The Ultimate Flexbox Cheat Sheet

Flexboxについてあまりなじみがなくてもシステムをブラッシュアップするための情報が提供されています。

1-v68z5jivuixvz2fk4gn4aq

 

Adobe Web Platform Team

Adobeの新しくデザインされたWebプラットフォームサイトで、多くの情報と事例でその新しいプラットフォームの使い方が紹介されています。SVG、CSSリージョン、フィルタ、Web拡張などのコンテンツが含まれています。加えて、Adobeがコードサンプルなどのリンクを公開しています。

1-mmkawo4h7ns1wq3ytecjva

 

HTML5 Cheat Sheet

良くデザインされたHTML5に関してのチートシートです。PNGまたはPDF形式でダウンロードして紙にコピーして活用することも容易です。

1-ygmj10guhq0h6ax1sxe4pq

 

Sass Guidelines

Sassマスターと呼ばれるHigo Giraudelは保守や拡張性に優れたSassのオピニオンリーダーで、ガイドラインを提供しています。そのガイドラインはすでに6つの言語に翻訳されています。

1-cyu-guhqpfhn76ie_fuugq

 

The Elements of HTML

HTMLとXHTMLエレメントの仕様を1ページの見やすいチャートで紹介しています。

1-z88f8jrap1mhkocdxbna7g

 

Codrops Css Reference

Sara Soueidanが提供するCSSの情報集を参照するとCodropsの全様について把握することが出来ます。

1-iy0rvkahf-nhvtmwltjyw

 

JavaScript Equality Table

3つに分かれたチャートでJavaScriptの2重、3重演算子について学ぶことが出来ます。

1-j8zca1tgaitzt_cp_khfsa

 

Screen Sizes

モバイルデバイスとラップトップなど異なる画面サイズに対応するためのノウハウリストです。

1-eqlnqgopfcd4g9mql9ghng

 

Sass Functions Cheat Sheet

Saasファンクション(色、透明度、数値、文字列など)を検索して探すことが出来ます。PDFまたはLaTeX文書としてダウンロードすることが出来ます。

1-bvq_u2fptdgbyowftcj_ka

 

ES6 Katas

ECMAScript 6を学習するためのシンプルなWebサイト。サイト上でタスクをこなしていくことで機能や使い方を学ぶことが出来る。

1-ggstwmh3nacd3lqskxsrrq

 

PostCSS.parts

検索可能なPostCSSプラグインのカタログサイトです。PostCSSでどのようなプラグインが用意されているか見渡すことが出来ます。

1-pejmagasadculgwl8mvjiw

 

jQuery Quick API Reference

1.10/2.0バージョンまで、jQueryの機能を学ぶためのWebサイトです。

1-wyr1tgxmm49j54notzar8a

 

Git Cheatsheet

@fayekhelmiが提供しているGitのチートシートです。

1-rpq9iks1zmshjptsbkxlla

 

 

 

Web開発はインターネット上に転がっている情報集を活用することで、自分の知識を広げながらスムーズに仕事を進めることが出来ます。利用できそうなものは見つかったでしょうか?

 

この記事は「Useful Docs and Guides for Front-End Developers」を翻訳・参考にしています。

関連記事

おすすめ記事