2017年のフロントエンドエンジニアならこの程度は知ってて当然だよな？

って[海の向こうの人](https://frontendmasters.gitbooks.io/front-end-handbook-2017/)が言ってました。
私はjQueryさえあれば概ね生きていけるので全然知らないけど、
あなたは全部知ってるフロントエンドエンジニアなんだね。すごーい！

以下は[Front-End Developer Handbook 2017](https://frontendmasters.gitbooks.io/front-end-handbook-2017/)の第三部、[Front-end Developer Tools](https://frontendmasters.gitbooks.io/front-end-handbook-2017/tools.html)からリンクされているツールと、その簡単な紹介です。

# ドキュメントツール

### [Dash](https://kapeli.com/dash)

150以上のライブラリのAPIリファレンスを検索できる。有料、Mac専用。

### [DevDocs](http://devdocs.io/)

200以上のライブラリをオンラインで検索できる。無料。

### [Velocity](https://velocity.silverlakesoftware.com/)

中身はDashと同じ。
有料、Windows専用。

### [Zeal](https://zealdocs.org/)

200以上略
無料のオフラインドキュメント。

# SEOツール

### [Keyword Tool](http://keywordtool.io/)

検索ワードを入れると関連キーワードを教えてくれる。

### [Google Webmasters Search Console](https://www.google.com/webmasters/)

自分のサイトがGoogleにどう判断されてるかを調べる。

### [Varvy SEO tool](https://varvy.com/tools/)

SEOに悪いと言われてる要素がないかを簡単に判断してくれる。

## SEOツールを見つけるツール

### [SEO Tools - The Complete List](http://backlinko.com/seo-tools)

SEOツールを見つけるツール。
フロントエンドハンドブックはSEOツールを見つけるツールを見つけるツール。

# プロトタイピングツール

## 新規作成

### [Axure](https://www.axure.com/)

アプリデザインとかの雛形を簡単に作れる。

### [Balsamiq Mockups](https://balsamiq.com/)

バルサミコ酢～

### [Justinmind](https://www.justinmind.com/)

スマホ向けサイトのモックアップをドラッグで簡単に作れる。

### [UXPin](https://www.uxpin.com/)

パターンがデフォルトで何十個も用意されている。

## 改良・プレゼン

### [InVision](https://www.invisionapp.com/)

モックアップに対しての指摘等を直接画面に書き込んで共有できる。

### [Conceptboard](https://conceptboard.com/)

モックアップに対しての指摘等を直接画面に書き込んで共有できる。

### [myBalsamiq](https://www.mybalsamiq.com/)

バルサミコ酢～

# ダイアグラム

### [draw.io](https://www.draw.io/)

フローチャートとかER図とかをオンラインでさくっと書ける。

### [Cacoo](https://cacoo.com/)

日本語対応だがユーザ登録必須。

### [gliffy](https://www.gliffy.com/products/online/)

draw.ioとほとんど同じ。

# ネットワークツール

### [Charles](http://www.charlesproxy.com/)

WiresharkやFiddler等と同じローカルプロキシ。

### [Chrome DevTools Network Panel](https://developers.google.com/web/tools/chrome-devtools/profile/network-performance/resource-loading)

F12のこと。

### [Insomnia](https://insomnia.rest/)

REST APIを簡単にテストするクライアント。

### [Paw](https://paw.cloud/)

MAC用。

### [Postman](https://www.getpostman.com/)

REST APIテストツールで、OAuthやLINKリクエストメソッドなど自力でやると面倒なものにも対応してる。
Chrome拡張あり。

# エディタ

## コードエディタ

Visual Studio Codeがお勧めだお、って注釈で書かれている。

### [Atom](https://atom.io/)

使ったことないので知らない。

### [Brackets](http://brackets.io/)

使ったことないので知らない。

### [Sublime Text](http://www.sublimetext.com/)

使ったことないので知らない。

### [WebStorm](https://www.jetbrains.com/webstorm/whatsnew/)

使ったことないので知らない。

### [Visual Studio Code](https://code.visualstudio.com/)

私はこれを使っている。
VSCあれば他のIDEいらなくね？

## オンラインエディタ

### [Cloud9](https://c9.io/)

ブラウザ上で動くので開発環境構築が不要、複数環境・複数人で同時開発可能。

### [Codeanywhere](https://codeanywhere.com/)

ターミナルでsudoできる。

## コード共有

本格的なIDEではなく、ブラウザ上でさくっと動作確認とかするやつ。

### [CodePen](http://codepen.io/)

HTML・CSS・JSでちょっとしたパーツを描いて公開できる。SNS機能付き。

### [jsbin.com](https://jsbin.com/)

JS開発ツール、ライブラリをワンタッチで追加できるのが便利。

### [jsfiddle.net](http://jsfiddle.net/)

余計な機能などいらないというときに、必要最小限の装飾でさっと書き始めることができる。

### [liveweave.com](http://liveweave.com/)

CSSと画像エディタが便利。

### [Plunker](http://plnkr.co/)

ファイルを複数作成できるので、比較的規模の大きめな開発もできる。

# ブラウザツール

## ブラウザの操作

### [History.js](https://github.com/browserstate/history.js)

ブラウザの閲覧履歴のURLを書き換えたり消去したりする。

### [html2canvas](https://github.com/niklasvh/html2canvas)

表示中の画面のスクリーンショットが撮れるすごいやつ。

### [Platform.js](https://github.com/bestiejs/platform.js)

OSの種類とかブラウザバージョンとかをパースしてくれる。

### [URI.js](http://medialize.github.io/URI.js/)

URLを組み立てたりパースしたり、テキスト中のURLっぽい文字列を自動でリンクにしたりする。

## ブラウザバージョンによる対応状況のチェック

### [Browser support for broken/missing images](http://codepen.io/bartveneman/full/qzCte/)

画像が無かったり壊れてたときに代替表示してくれるかの一覧。

### [Browserscope](http://www.browserscope.org/)

Acid3やcontentEditableなど各実装にどれだけ対応しているかを一覧表示。

### [caniuse.com](http://caniuse.com/)

これ系でたぶん一番有名なやつ。

### [Firefox Platform Status - Implementation & standardization roadmap for web platform features](https://platform-status.mozilla.org/)

Chrome、Firefox、IE、Edge、Safariの各API対応・対応予定状況。Mozillaサイト上にある。

### [HTML5 Please](http://html5please.com/)

単に最新ブラウザがだいたい対応したらuseって出してるだけっぽい。

### [HTML5 Test](https://html5test.com/)

ブラウザ毎の対応件数を見れる。

### [iwanttouse.com](http://www.iwanttouse.com/)

ブラウザバージョンによる分類ではなく、実際に影響するユーザ数の割合を見ることができる。

### [jscc.info](http://jscc.info/)

JavaScriptを入力すると、どのブラウザで動かないかを確認してくれる。
最新版しかチェックしないようだ。

### [Platform Status](https://dev.modern.ie/platform/status/)

Chrome、Firefox、IE、Edge、Safari、Operaの各API対応・対応予定状況。Microsoftサイト上にある。

### [whatwebcando.today](https://whatwebcando.today/)

サンプルコード付きなのでわかりやすい。

## ブラウザでの開発・デバッグツール

### [Chrome Developer Tools (aka DevTools)](https://developers.google.com/web/tools/?hl=en)

ChromeでF12を押せ。

### [Firefox Developer Tools](https://developer.mozilla.org/en-US/docs/Tools)

FirefoxでF12を押せ。

### [IE Developer tools (aka F12 tools)](https://dev.modern.ie/platform/documentation/f12-devtools-guide/)

EdgeでF12を押せ。

### [Safari Web Inspector](https://developer.apple.com/safari/tools/)

SafariでF12……ではなくcommand + option + I。

### [Vorlon.js](http://vorlonjs.com/)

クロスブラウザで動作する、ローカルプロキシ型のデバッグツール。

## ブラウザ上で対応状況のチェック

### [Feature.js](http://featurejs.com/)

対応状況による分岐が`if(feature.webGL)`1行でできる。

### [Modernizr](https://modernizr.com/)

HTMLタグに`<html class="no-js">`のようなclassがつくので、CSSのみで分岐が可能になる。

## Polyfills

### [console-polyfill](https://github.com/paulmillr/console-polyfill)

IEがconsole.log()で死ななくなる。死ななくなるだけで機能はしない。

### [HTML5 Cross Browser Polyfills](https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills)

HTML5各種機能のバックポート用ライブラリ一覧。

### [fetch](https://github.com/github/fetch)

[Fetch API](https://fetch.spec.whatwg.org/)のPolyfill。

### [socket.io](http://socket.io/)

Node.jsでWebSocketを使えるようにする。

### [SockJS](https://github.com/sockjs/sockjs-client)

旧IEとかでWebSocket(っぽいの)を使えるようにする。

### [webcomponents.js](https://github.com/WebComponents/webcomponentsjs)

Web ComponentsのPolyfill。旧platform.js。

### [webshim](https://afarkas.github.io/webshim/demos/)

Web Formsをはじめ多くの機能をサポートしている総合Polyfillツール。

## テスト

### [Browserling](https://www.browserling.com/)

古いOS・ブラウザでの動作を確認できる。
エミュレータではなく実物のようだ。

### [BrowserStack](https://www.browserstack.com/)

同上だが、ローカルにあるHTMLファイルも確認できる。

### [CrossBrowserTesting.com](http://crossbrowsertesting.com/)

クロスブラウザテストができる、というか単に色々入ったリモートデスクトップを貸し出してるだけっぽい。

### [Nightcloud.io](http://nightcloud.io/)

自動テスト用プラットフォームのようだが、情報が全く見当たらない。

### [Sauce Labs](https://saucelabs.com/)

クロスブラウザテスト用クラウド。
AndroidやiOSアプリもテストできる。

## ヘッドレスブラウザ

ヘッドレスブラウザとはGUIを持たないウェブブラウザのこと。

### [PhantomJS](http://phantomjs.org/)

WebKit。

### [SlimerJS](http://slimerjs.org/)

Gecko。

### [TrifleJS](http://triflejs.org/)

Trident。

### [Zombie.js](http://zombie.js.org/)

Node.js。

## ブラウザ自動化

### [CasperJS](http://casperjs.org/)

PhantomJSを楽に扱えるようにするライブラリ。

### [Nightmare](https://github.com/segmentio/nightmare)

簡単に自動テストを書けるテストフレームワーク。
[Electron](http://electron.atom.io/)でできているらしい。

### [TestCafe](https://github.com/DevExpress/testcafe)

ローカルに入ってるブラウザで自動テストしてくれる。

## ブラウザハック

### [browserhacks.com](http://browserhacks.com/)

特定のブラウザだけを識別したい場合の書き方一覧。

# HTMLツール

## HTMLテンプレート

### [dCodes](http://www.dcodes.net/2/docs/index.html)

様々なHTML部品と、そのHTML・CSS・JSのサンプルコードが見られる。

### [Email-Boilerplate](https://github.com/seanpowell/Email-Boilerplate)

HTMLメールの定型文。

### [HTML5 Boilerplate](https://html5boilerplate.com/)

HTML5サイト構造の雛形。
ディレクトリ構造、CSSリセット、html5shiv等の定型的な初期設定を最初から含んでいる。

### [HTML5 Bones](http://html5bones.com/)

Boilerplateと似ているが、よりコンパクト。

### [Mobile boilerplate](https://html5boilerplate.com/mobile/)

HTML5 Boilerplateと同じで、こちらはモバイルサイト用。

### [Web Starter Kit Boilerplate & Tooling for Multi-Device Development](https://developers.google.com/web/tools/starter-kit)

Google製。

## HTML Polyfill

### [html5shiv](https://github.com/aFarkas/html5shiv)

旧IEなどでHTML5文法が動くようにする。

## トランスパイラ

### [HAML](http://haml.info/)

Ruby on Railsでよく使われるらしい。

### [Pug](https://pugjs.org/api/getting-started.html)

旧称Jade。HAMLとだいたい同じ。

### [Markdown](http://daringfireball.net/projects/markdown/)

Redmine等で使われる記法。

## リファレンス

### [Element attributes](https://html.spec.whatwg.org/multipage/indices.html#attributes-3)

HTMLタグに使える属性値一覧。

### [Elements](https://html.spec.whatwg.org/multipage/indices.html#elements-3)

HTMLタグ一覧。

### [HTML Arrows](http://htmlarrows.com/)

矢印など記号の文字コード。

### [HTML Entity Lookup](http://entity-lookup.leftlogic.com/)

入力した文字と似たような文字を探してくれる。

### [HTML Interfaces Browser Support](http://www.webbrowsercompatibility.com/html-interfaces/desktop/)

HTMLエレメントのブラウザ対応状況一覧。

## lint

### [HTMLHint](http://htmlhint.com/)

HTMLの誤りをオンラインでチェック。

### [html-inspector](https://github.com/philipwalton/html-inspector)

HTMLの誤りをコマンドラインでチェック。

## 最適化

### [HTML Minifier](http://kangax.github.io/html-minifier/)

スペースや改行を全部取って1行に詰め込む。

## オンライン生成ツール

### [tablesgenerator.com](http://www.tablesgenerator.com/)

LaTeXのテーブルを簡単に作れる。

## コーディングガイド

### [HTML Code Guide](http://codeguide.co/#html)

HTML5とCSSのコーディングスタイルガイド。

### [Principles of Writing Consistent, Idiomatic HTML](https://github.com/necolas/idiomatic-html)

HTML5のみ。

## ワークフロー

### [Emmet](http://emmet.io/)

HTMLとCSSのコーディング補完。
`#header>ul>li>a#link`と書くだけで`<div id="header"><ul><li><a id="link" href=""></a></li></ul></div>`になる。

## アウトライン

### [HTML 5 Outliner](https://gsnedders.html5.org/outliner/)

入れ子を段階で表示してくれるだけ？

## GitHubトレンド

### [https://github.com/trending?l=html&since=monthly](https://github.com/trending?l=html&since=monthly)

GitHubでHTML関連リポジトリの月間ランキング。

# CSSフレームワーク

## PC+スマホサイト用

### [Base](http://getbase.org/)

軽量CSSフレームワーク。

### [Basscss](http://basscss.com/)

他のCSSフレームワークの邪魔をできるだけしないようにしているらしい。

### [Bulma](http://bulma.io/)

Flexboxベース。

### [Bootstrap 3](http://getbootstrap.com/components/) or [Bootstrap 4](https://v4-alpha.getbootstrap.com/)

CSSフレームワーク界の大御所。

### [Concise](http://concisecss.com/)

コア機能が少ないぶん初期コストが少ない。
追加機能がほしい場合は公式で用意されているプラグインを追加する。

### [Foundation](http://foundation.zurb.com/)

Bootstrapに匹敵する規模のCSSフレームワークらしい。

### [Material Design Lite (MDL)](http://www.getmdl.io/index.html)

Google製。

### [Metro UI](http://metroui.org.ua/)

Windows8っぽいデザインが作れる。

### [Picnic](http://picnicss.com/)

JavaScriptをほぼ使っていないCSSフレームワーク。

### [Pure.css](http://purecss.io/)

Yahoo製。軽量。

### [Semantic UI](http://semantic-ui.com/)

わかりやすさを目指したCSSフレームワーク。
クラス指定が`class="ui vertical animated button"`。

### [Skeleton](http://getskeleton.com/)

最小限の機能だけにしたかわりに、非常に軽量。

### [Spectre.css](https://picturepan2.github.io/spectre/)

比較的機能が多いわりに軽量。

### [tachyons](https://github.com/tachyons-css/tachyons/)

モジュール型、読みやすさ重視で軽量。

## モバイルサイト用

### [Ratchet](http://goratchet.com/)

Androidアプリっぽい見た目のCSSフレームワーク。

## CSSリセット

### [Eric Meyer's "Reset CSS" 2.0](http://meyerweb.com/eric/tools/css/reset/)

最終更新が2011年という古代の遺物でありながら、未だに最強のCSSリセット。

### [Normalize](https://necolas.github.io/normalize.css/)

リセットではなくノーマライズ。ブラウザ間の差異吸収、HTML5対応。

## トランスパイラ

CSSプリプロセッサは、.sassとか.lessとかのよくわかんねーファイルから.cssを作るツール。
CSSポストプロセッサは、入力も出力も.cssのままだけど中身を変換するツール。

### [pleeease.io](http://pleeease.io/)

ベンダープレフィックスの追加、importのインライン化、minifyなどを行うCSSポストプロセッサ。

### [PostCSS](https://github.com/postcss/postcss) & [cssnext](http://cssnext.io/)

PostCSSはCSSポストプロセッサを作るためのツールで、CSS構造をパースする(だけ)。
cssnextはPostCSSのプラグインで、まだブラウザに実装されていないCSSをブラウザが解釈できるCSSに変換する。

### [rework](https://github.com/reworkcss/rework) & [myth](http://www.myth.io/)

reworkはCSSプリプロセッサを作るためのツールで、CSS構造をパースする(だけ)。
mythは変数定義や計算などが書けるCSSプリプロセッサで、素のCSSに近く学習コストが低い。

### [Sass/SCSS](http://sass-lang.com/)

CSSメタ言語で一番有名なやつ。

### [Stylus](https://github.com/stylus/stylus)

SCSSでもSASSでも素のCSSでも書ける、Sassの上位互換。

## リファレンス

### [css3test.com](http://css3test.com/)

アクセスしたブラウザがCSS3をどれだけサポートしてるか見れる。

### [css3clickchart.com](http://css3clickchart.com/)

CSSのソースとサンプル、ブラウザの対応状況が見れる。

### [cssreference.io](http://cssreference.io/)

リファレンスマニュアル。

### [CSS Indexes - A listing of every term defined by CSS specs](https://drafts.csswg.org/indexes/)

W3Cの仕様書。

### [css4-selectors.com](http://css4-selectors.com/)

CSS4のセレクタ。

### [css4 Rocks](http://css4.rocks/)

リンク先が全部同じなんだけど。

### [CSS TRIGGERS...A GAME OF LAYOUT, PAINT, AND COMPOSITE](http://csstriggers.com/)

CSSのプロパティ変更でどのトリガーが発動するかの一覧。

### [CSS Tricks Almanac](https://css-tricks.com/almanac/)

CSSの要素解説。

### [cssvalues.com](http://cssvalues.com/)

プロパティ名で検索できる。

### [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference)

Mozillaによるリファレンス。

## lint

### [CSS Lint](http://csslint.net/)

CSSのエラーをオンラインでチェック。

### [stylelint](http://stylelint.io/)

CSSのエラーをコマンドラインでチェック。

## 整形

### [CSScomb](https://github.com/csscomb/csscomb.js)

CSSを整形する。

### [CSSfmt](https://github.com/morishitter/cssfmt)

CSSやSCSSを整形する。

## 最適化

### [clear-css](https://github.com/jakubpawlowicz/clean-css)

clean-cssなのにclearって書かれてる。

### [cssnano](http://cssnano.co/)

スペース改行コメント等を削ってCSSを縮小する。

### [CSSO](http://css.github.io/csso/)

重複してる内容をまとめたりと[構造最適化](http://css.github.io/csso/csso.html)まで行ってくれる。

## オンラインで作れるCSSパーツ

### [CSS Arrow Please](http://cssarrowplease.com/)

矢印を描くCSS。

### [CSS Matic](http://www.cssmatic.com/)

グラデーション、ボックス、ノイズ効果、ボックスシャドウ。

### [Enjoy CSS](http://enjoycss.com/)

非常に細かくエディットできるが、細かすぎて逆に使いづらい。

### [Flexbox Playground](https://scotch.io/demos/visual-guide-to-css3-flexbox-flexbox-playground)
### [flexplorer](http://bennettfeely.com/flexplorer/)

Flexboxレイアウトをさくっと作れる。

### [patternify.com](http://patternify.com/)

タイルの背景を簡単に作れる。

### [patternizer.com](http://patternizer.com/)

チェック柄の背景を簡単に作れる。

### [Ultimate CSS Gradient Generator](http://www.colorzilla.com/gradient-editor/)

グラデーションパターン。プリセットが豊富。

## CSS設計手法

### [Atomic Design](http://atomicdesign.bradfrost.com/)

[アトミックデザイン](http://qiita.com/Mwrote/items/3eaed745185364135fa4)。

### [BEM](http://getbem.com/introduction/)

[Block、Element、Modifier](http://qiita.com/t-kusakabe/items/2dbffc6f583b15517633)。命名規則。

### [ITCSS](https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/)

[逆三角形CSS](http://qiita.com/makotot/items/2c3e99f15dca2789d403)。

### [OOCSS](http://oocss.org/)

[オブジェクト指向CSS](http://www.yoheim.net/blog.php?q=20141201)。

### [SMACSS](https://smacss.com/)

[Scalable and Modular Architecture for CSS](https://app.codegrid.net/entry/smacss-1)。

### [SUIT CSS](http://suitcss.github.io/)

[コンポーネント指向CSS](http://javascript-memo2.seesaa.net/article/414457445.html)。

### [rscss](http://rscss.io/)

[アイデア集](http://qiita.com/kk6/items/760efba180ec526903db)。

## コーディング規約

### [CSS code guide](http://codeguide.co/#css)

CSSコーディング規約。

### [css-architecture](https://github.com/jareware/css-architecture)

8つのコーディングルール。

### [cssguidelin.es](http://cssguidelin.es/)

スケーラブルCSSガイドライン。

### [Idiomatic CSS](https://github.com/necolas/idiomatic-css)

[日本語訳](https://github.com/necolas/idiomatic-css/tree/master/translations/ja-JP)。

### [MaintainableCSS](http://maintainablecss.com/)

メンテナンスしやすいCSS。

### [Standards for Developing Flexible, Durable, and Sustainable HTML and CSS](http://mdo.github.io/code-guide/)

HTMLとCSSのコーディングガイド。

### [Airbnb CSS / Sass Styleguide](https://github.com/airbnb/css)

Saasのコーディングガイド。[日本語訳](https://tech.recruit-sumai.co.jp/airbnb-styleguide/)。

## GitHubトレンド

### [https://github.com/trending?l=css&since=monthly](https://github.com/trending?l=css&since=monthly)

GitHubでCSS関連リポジトリの月間ランキング。

# DOMツール

## DOMライブラリ・フレームワーク

### [Bliss](http://blissfuljs.com/docs.html)

jQueryほどではないが機能がそろっていて軽量。

### [jQuery](http://jquery.com/)

DOM操作の王者。

### [Zepto](http://zeptojs.com/)

jQueryと概ね互換しつつ軽量化を目指したライブラリ。

### [cash](https://github.com/kenwheeler/cash/)

DOM操作部分だけに集中することにより、Zeptoよりさらに軽量になった。
そのかわりAjaxとかはない。

### [Umbrella JS](http://umbrellajs.com/)

DOM操作、イベント、Ajaxまで揃えてgzip後に3kbという超軽量ライブラリ。

## DOMユーティリティ

### [Keypress](http://dmauro.github.io/Keypress/)

キーボード入力を検知するライブラリ。

### [Tether](http://tether.io/docs/welcome/)

ツールチップやダイアログを簡単に作れる。

### [clipboard.js](http://zenorocha.github.io/clipboard.js/)

クリップボードにコピーするやつ。

## イベント

### [Keyboard Event Viewer](http://w3c.github.io/uievents/tools/key-event-viewer.html)

キーボード入力時に起きたイベントを一覧表示する。

## DOMパフォーマンスツール

### [Chrome DevTools Timeline](https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/timeline-tool)

ChromeのF12の使い方。

### [DOM Monster](http://mir.aculo.us/dom-monster/)

サイトがどれだけ重いか調査してくれるブックマークレット。

## リファレンス

### [Events](https://html.spec.whatwg.org/#events-2)

DOMイベント一覧。

### [DOM Browser Support](http://www.webbrowsercompatibility.com/dom/desktop/)

DOMのブラウザサポート状況一覧。

### [DOM Events Browser Support](http://www.webbrowsercompatibility.com/dom-events/desktop/)

DOMイベントのブラウザサポート状況一覧。

### [HTML Interfaces Browser Support](http://www.webbrowsercompatibility.com/html-interfaces/desktop/)

HTMLインターフェイスのブラウザサポート状況一覧。

### [MDN Document Object Model (DOM)](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model)
### [MDN Browser Object Model](https://developer.mozilla.org/en-US/docs/Web/API/Window)
### [MDN Document Object Model](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model)
### [MDN Event reference](https://developer.mozilla.org/en-US/docs/Web/Events)

Mozillaによる各リファレンス。

### [MSDN Document Object Model (DOM)](https://msdn.microsoft.com/en-us/library/hh772384%28v=vs.85%29.aspx)

MicrosoftによるDOMのリファレンス。

## DOM Polyfills

### [dom-shims](https://github.com/necolas/dom-shims)

CustomEventなどのpolyfill。

### [Pointer Events Polyfill: a unified event system for the web platform](https://github.com/jquery/PEP)

Pointer Eventsのpolyfill。

## バーチャルDOM

### [jsdom](https://github.com/tmpvar/jsdom)

Node.jsでDOM操作する。

### [virtual-dom](https://github.com/Matt-Esch/virtual-dom)

virtual-dom内で仮想DOMを持っておき、差が出たときに必要な部分だけ再描画するという、どこかで聞いたことがあるライブラリ。

# JavaScriptツール

## JSユーティリティ

### [accounting.js](http://openexchangerates.github.io/accounting.js/)

小数点以下など数値のフォーマット。

### [async](http://caolan.github.io/async/)

非同期リクエスト。ググラビリティ低い。

### [axios](https://github.com/mzabriskie/axios)

ほぼjQuery.ajax()。

### [chance](http://chancejs.com/)

ランダムな文字列、数値を生成。

### [date-fns](https://date-fns.org/)

日時操作。[地雷](http://qiita.com/jkr_2255/items/304b6326c7fc54e0aaa2)回避。

### [format.js](http://formatjs.io/)

国際化ライブラリ。

### [immutable](https://facebook.github.io/immutable-js/)

Immutableなコレクションが作れる。

### [is.js](http://arasatasaygin.github.io/is.js/)

is.boolean()とかis.null()とかis.undefined()とか。

### [lodash](https://lodash.com/)

underscore.js互換でさらに高機能。

### [Math.js](http://mathjs.org/)

行列計算など数学関数ライブラリ。

### [Moment.js](http://momentjs.com/)

日時操作。多言語対応。

### [Numeral.js](http://numeraljs.com/)

数値をフォーマット指定する。

### [string.js](http://stringjs.com/)

文字列操作ライブラリ。

### [underscore.js](http://underscorejs.org/)

JavaScriptで関数型プログラミングできる。

### [voca](https://vocajs.com/)

string.js対抗馬。

### [wait](https://github.com/elving/wait)

10秒待って的なやつ。

### [xregexp.com](http://xregexp.com/)

正規表現エンジン。

## トランスパイラ

要するにPHP7とかPHP8で書いたソースをPHP5に変換するってやつですよ。

### [Babel](https://babeljs.io/)

ES6で書いたJavaScriptをES5に変換する。

### [TypeScript](https://www.typescriptlang.org/)

JavaScriptに型やクラスなど多くの機能を追加した上位互換言語。

### [Flow](https://flowtype.org/)

Facebook製TypeScript。

## コード解析

### [Tern](https://ternjs.net/)

JavaScriptで書かれたJavaScriptコード解析エンジン。

## JavaScript Compatibility Checker

### [jscc.info/](http://jscc.info/)

互換性チェッカー。
でもfor-ofでも何も出ない。

## Linting/Hinting & Style Linter

### [eslint](http://eslint.org/)

JavaScriptの静的コード検証ツール。

## Unit Testing

### [AVA](https://github.com/avajs/ava)

並列実行、ファイル更新時に自動実行などができる自動テスト。

### [Jasmine](http://jasmine.github.io/)

ビヘイビア駆動開発ツール。

### [Mocha](http://mochajs.org/)

非同期テスト。

### [Tape](https://github.com/substack/tape)

ググラビリティ低すぎる。

## ユニットテストのアサーションライブラリ

### [Chai](http://chaijs.com/)

アサーションライブラリ。
なぜか必ずMochaとセットで出てくる。

### [expect.js](https://github.com/Automattic/expect.js)

アサーションライブラリ。
expect().toでなんでも書ける。

### [should.js](http://shouldjs.github.io/)

アサーションライブラリ。
名前のわりにnotも書ける。

## ユニットテスト用のモック

### [sinon.js](http://sinonjs.org/)

スタブモジュール。

### [Kakapo.js](http://devlucky.github.io/kakapo-js)

サーバ側をエミュレートする、HTTPのモックのようだ。

## コードフォーマッタ

### [esformatter](https://github.com/millermedeiros/esformatter#esformatterformatstr-optsstring)

JavaScriptをコマンドラインで自動整形。

### [js-beautify](http://jsbeautifier.org/)

JavaScriptをオンラインで整形。

### [jsfmt](http://rdio.github.io/jsfmt/)

JavaScriptをコマンドラインで自動整形、および置換などもできる。

### [prettier](https://github.com/jlongster/prettier)

ES2017、JSX、Flowもサポートされてる。

## パフォーマンステスト

### [benchmark.js](http://benchmarkjs.com/)

実行時間と分散などを計れる。

### [jsperf.co](https://jsperf.co/)

オンラインで確認できる。

## コードカバレッジ

### [Coveralls](https://coveralls.io/)

GitHubに"coverage 100%"って表示できる。

### [Esprima](http://esprima.org/)

ECMAScriptの構文解析器。

### [istanbul](https://github.com/gotwarlost/istanbul)

ブラウザ、コマンドライン両対応で、カバレッジ結果の表示用HTMLも作ってくれる。

## 最適化

### [UglifyJS 2](https://github.com/mishoo/UglifyJS2)

空白除去。オプションで構文解析もやってくれる。

### [optimize-js](https://github.com/nolanlawson/optimize-js)

`!function (){}()`を`!(function (){})()`にする。これだけで1～2割高速化するらしい。

## 難読化

### [Javascript Obfuscator](http://www.javascriptobfuscator.com/)

コードをかなりわかりにくくする。暗号化ではないので読めないことはないが、カジュアルハッキングの防止には十分。

### [JScrambler](https://jscrambler.com/)

難読化のようだがログイン必須で詳細不明。

## オンラインエディタ

### [es6fiddle.net](http://www.es6fiddle.net/)

An error occurred in the application and your page could not be served.

### [jsbin.com](http://jsbin.com/)

オンラインエディタ。

### [jsfiddle.net](http://jsfiddle.net/)

オンラインエディタ。

## オンライン正規表現ツール

### [debuggex](https://www.debuggex.com/)

正規表現の構文解析ツリーを表示してくれる。

### [regex101](https://regex101.com/)

メタキャラクタを解説してくれる。

### [regexper](http://regexper.com/)

同じく構文解析ツリーを表示する。

### [RegExr](http://regexr.com/)

行末の$が改行にマッチしない。

## コンベンションツール

### [Airbnb's ESLint config, following our styleguide](https://www.npmjs.com/package/eslint-config-airbnb)

AirbnbスタイルのESLintコンフィグ。

### [Standard - ESLint Shareable Config](https://github.com/feross/eslint-config-standard)

一般的なESLintコンフィグ。

## GitHubトレンド

### [https://github.com/trending?l=javascript&since=monthly](https://github.com/trending?l=javascript&since=monthly)

GitHubでJavaScript関連リポジトリの月間ランキング。

## NPMトレンド

### [https://www.npmjs.com/browse/depended](https://www.npmjs.com/browse/depended)

npmで他のパッケージから一番依存されてるライブラリ。

# 静的サイトジェネレータ

こんなの使うよりGulp使ったほうがいいぜ。

### [staticgen.com](https://www.staticgen.com/)

静的サイトジェネレータのランキング、解説付き。

### [staticsitegenerators.net](https://staticsitegenerators.net/)

静的サイトジェネレータのGitHubスター数ランキング。

### [Metalsmith](http://www.metalsmith.io/)

静的サイトジェネレータ。

# アクセシビリティ

## ガイド

### [Accessibility Guidelines Checklist](http://accessibility.voxmedia.com/)

アクセシビリティガイドライン。

### [Interactive WCAG 2.0](http://code.viget.com/interactive-wcag/)

W3Cによる勧告。

### [18F Accessibility Guide](https://pages.18f.gov/accessibility/checklist/)

WCAGを元にした詳細解説とサンプル。

## サイトスキャン

### [aXe Browser Extension](http://www.deque.com/products/axe/)

アクセシビリティをブラウザで確認できるChrome/Firefoxプラグイン。

### [Chrome Accessibility Developer Tools](https://chrome.google.com/webstore/detail/accessibility-developer-t/fpkknkljclfencbdbgkenhalefipecmb)

Google製。

### [Tenon Accessibility Tool](https://tenon.io/)

入力したURLのアクセシビリティを確認してくれる。

### [WAVE Accessibility Tool](http://wave.webaim.org/)

入力したURLのアクセシビリティを確認してくれる。

## カラーコントラスト

### [Colorable](http://jxnblk.com/colorable/demos/text/)

テキスト色/背景色が問題ないかブラウザ上で確認できる。

### [Colorable Matrix](http://jxnblk.com/colorable/demos/matrix/)

↑がたくさん。

### [Color Safe](http://colorsafe.co/)

文字色を指定すると、それに使ってよい背景色を一覧表示する。

### [Color Ratio](http://leaverou.github.io/contrast-ratio/)

CSS色でコントラスト比を確認可能。

## 視力

### [SEE (Chrome)](https://chrome.google.com/webstore/detail/see/dkihcccbkkakkbpikjmpnbamkgbjfdcn)

視覚障害をシミュレート。

### [Spectrum (Chrome)](https://chrome.google.com/webstore/detail/spectrum/ofclemegkcmilinpcimpjkfhjfgmhieb)

色覚障害をシミュレート。

### [NoCoffee (Chrome)](https://chrome.google.com/webstore/detail/nocoffee/jjeeggmbnhckmgdhmgdckeigabjfbddl)

低視力をシミュレート。

## 読み上げ

### [VoiceOver (Mac)](http://www.apple.com/accessibility/)

Macの音声読み上げ機能。

### [JAWS (Win)](http://www.freedomscientific.com/Products/Blindness/JAWS)

Windows用音声読み上げ無償ソフトウェア。

### [NVDA (Win)](https://www.nvaccess.org/)

Windows用音声読み上げ無償ソフトウェア。

### [Window-Eyes (Win)](https://www.aisquared.com/products/window-eyes/)

Windows用音声読み上げ有償ソフトウェア。

### [ChromeVox (Chrome extension)](http://www.chromevox.com/)

Chrome OS用音声読み上げ機能。

### [Basic screen reader commands](https://www.paciellogroup.com/blog/2015/01/basic-screen-reader-commands-for-accessibility-testing/)

Jaws、Narrator、NVDA、VoiceOverのキーボードショートカット一覧。

## 可読性

### [Expresso App](http://www.expresso-app.org/)

読みにくいテキストを指摘するツール。わーい！

### [Hemingway App](http://www.hemingwayapp.com/)

長文や複雑な文を平易化する。すごーい！

### [Grammarly](https://www.grammarly.com/)

Chromeエクステンション。たっのしー！

### [Readability Score](https://readability-score.com/text/)

読みやすさをスコア表示する。 ふっしぎー！

### [MS Office](https://support.office.com/en-us/article/Test-your-document-s-readability-0adc0e9a-b3fb-4bde-85f4-c9e88926c6aa)

Microsoft製スペルチェック。おもしろーい！

## よみもの

### [Getting Started with ARIA](http://a11yproject.com/posts/getting-started-aria/)

[ARIA](https://momdo.github.io/html-aria/)の解説記事。

### [Reframing Accessibility for the Web](http://alistapart.com/article/reframing-accessibility-for-the-web)

Webアクセシビリティとは。

### [An Alphabet of Accessibility Issues](https://the-pastry-box-project.net/anne-gibson/2014-July-31)

アクセシビリティいろは歌。

### [Practical ARIA Examples](http://heydonworks.com/practical_aria_examples/)

実践的ARIAのサンプル。

### [MDN Accessibility Guide](https://developer.mozilla.org/en-US/docs/Learn/Accessibility)

Mozillaによるアクセシビリティガイド。

### [Enable accessibility panel in Chrome dev tools](https://umaar.com/dev-tips/101-accessibility-inspection/)

Chrome DevToolsの使い方。

# フレームワーク

## フロントエンド

### [AngularJS 1](https://github.com/angular/angular.js) + [Batarang](https://github.com/angular/angularjs-batarang)

AngularJS1用のChromeエクステンション。

### [Angular 2](https://github.com/angular/angular) + [angular-cli](https://github.com/angular/angular-cli)

Angular2のコマンドラインツール。

### [Aurelia](http://aurelia.io/) + [Aurelia CLI](https://github.com/aurelia/cli)

Aureliaのコマンドラインツール。

### [Ember](http://emberjs.com/) + [embercli](https://ember-cli.com/) + [Ember Inspector](https://chrome.google.com/webstore/detail/ember-inspector/bmdblncegkenkacieihfhpjfppoconhi?hl=en)

EmberのコマンドラインツールとChromeエクステンション。

### [Polymer](https://www.polymer-project.org/1.0/)

コンポーネント指向フレームワーク。

### [React](http://facebook.github.io/react/) + [create-react-app](https://github.com/facebookincubator/create-react-app) + [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi)
### [Vue.js](http://vuejs.org/) + [vue-cli](https://github.com/vuejs/vue-cli) & [Vue.js devtools](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=en)
### [Riot](http://riotjs.com/)

ここらへんは解説するまでもないかなーと。

## ハイブリッドアプリフレームワーク

### [ionic](http://ionicframework.com/)

AngularJSをベースにしたモバイルアプリ開発ツール。

### [onsen.io](http://onsen.io/)

AngularJS、React、Vue等に対応したモバイルアプリ開発ツール。

## ハイブリッドアプリ開発ツール

### [Adobe PhoneGap](http://phonegap.com/)

AdobeによるCordovaのパッケージング。

### [AppBuilder](http://www.telerik.com/appbuilder)

Android/iOS/WindowsPhoneのクロスプラットフォーム開発。

### [cocoon.io](https://cocoon.io/)

ファルシのルシがコクーンでパージ。

### [ionic hub](http://ionic.io/)

ionicにリダイレクト。

### [kony](http://www.kony.com/products/mobility-platform)

有償のため詳細不明。

### [Monaca](https://monaca.io/)

ローカル環境不要で、クラウドオンリーで開発できる。

### [Taco](http://taco.tools/)

死亡確認。

## デスクトップアプリ開発フレームワーク

### [Electron](http://electron.atom.io/)

Mac/Windows/Linuxアプリを作れる。

### [NW.js](https://github.com/nwjs/nw.js)

既存Webサイトを簡単にアプリ化できる。

## 任意のプラットフォーム

### [manifoldJS](http://manifoldjs.com/)

複数のプラットフォームで開発、構築できる。

## JavaScriptネイティブアプリ

WebViewやブラウザエンジンを使わずに、ネイティブで実行される。

### [NativeScript](https://www.nativescript.org/)

Android/iOSのネイティブAPIを叩ける。

### [React Native](https://facebook.github.io/react-native/)

Reactでモバイルアプリを書ける。

### [tabris.js](https://tabrisjs.com/)

オンラインエディタで書いてQRコードで即確認できる。

### [trigger.io](https://trigger.io/how-it-works/)

有料、買い切りなし。

### [weex](https://weex-project.io/)

公式サイトのフォーマットがどのアプリも似たり寄ったりなのは何故だろう。

## リファレンス

### [todomvc.com](http://todomvc.com/)

どのフレームワークを選べばいいかのガイド。

### [Frontend Guidelines Questionnaire](https://github.com/bradfrost/frontend-guidelines-questionnaire)

フロントエンドコーディングガイドラインのアンケート。

### [Frontend Guidelines](https://github.com/bendc/frontend-guidelines)

フロントエンドのコーディングガイドライン。

## パフォーマンス

### [js-framework-benchmark](https://github.com/krausest/js-framework-benchmark)

各フレームワークのパフォーマンス一覧。

# Progressive Web App

PWAとは、ネイティブアプリっぽいWebアプリのことらしい。

## フロントエンドアプリフレームワーク

### [lighthouse](https://github.com/GoogleChrome/lighthouse)

PWAに必要な改善点を教えてくれるChromeエクステンション。

### [Progressive Web App Checklist](https://developers.google.com/web/progressive-web-apps/checklist)

PWAに対応するためのチェックリスト。

# Scaffolding

### [Slush](http://slushjs.github.io/#/)

Gulp下ならYeomanよりいいらしい。

### [Yeoman](http://yeoman.io/)

新しいプロジェクトを立ち上げるときの初期設定ジェネレータ。

# 汎用フロントエンド開発ツール

### [Browsersync](http://www.browsersync.io/)

ファイルの変更を感知してブラウザをリロードする。

### [CodeKit](http://incident57.com/codekit/)

SassやTypeScriptやMarkdownやその他言語を全てまとめてコンパイルしてくれる。

### [Prepros](https://prepros.io/)

デバッガやビューアも内蔵したコンパイラ。

# テンプレート・データバインディング

## テンプレートエンジン

### [doT.js](http://olado.github.io/doT/)

`<div>{{=obj.title}}</div>`

### [Handlebars](http://handlebarsjs.com/)

`<h1>{{title}}</h1>`

### [Nunjuncks](http://mozilla.github.io/nunjucks/)

`<h1>{{ title }}</h1>`

## 動的データバインディング

### [Deku](https://github.com/anthonyshort/deku)

バーチャルDOM。

### [jquerymy.js](http://jquerymy.com/)

双方向データバインディング、jQueryプラグイン。

### [ractive.js](http://www.ractivejs.org/)

IE8以上に対応。

### [react.js](https://facebook.github.io/react/index.html)

React。

### [riot](http://riotjs.com/)

カスタムタグを作れる。

### [Rivets.js](http://rivetsjs.com/)

MVCを分離しないテンプレートエンジン。

### [vue.js](http://vuejs.org/)

Reactほど厳格ではなく、Reactよりさらに早い。

## バーチャルDOM

### [JSX](https://facebook.github.io/jsx/)

JSXの仕様書。

### [t7](http://t7js.com/)

新しい構文を追加せず、ES2015だけに対応したバーチャルDOM。

# UIツールキット

## Webプラットフォーム

### [Bootstrap 3](http://getbootstrap.com/components/) or [Bootstrap 4](https://v4-alpha.getbootstrap.com/)

Bootstrap。

### [Kendo UI for jQuery](http://www.telerik.com/kendo-ui)

jQueryおよびAngular向けのUIコンポーネント。

### [Materialize](http://materializecss.com/)

マテリアルデザインのBootstrap。

### [Office UI Fabric](http://dev.office.com/fabric)

Officeっぽいデザイン。

### [Semantic UI](http://semantic-ui.com/)

クラス名に英単語を用いるデザイン。

### [UiKit](https://getuikit.com/)

ググってもSwiftのUIKitしか出てこない。

### [Webix](http://webix.com/)

DataTableが有償。

## React専用

### [Ant Design](https://ant.design/)

トップがすごい見辛いのでもういいやってなった。

### [Material ui](http://material-ui.com/)

マテリアルデザイン。

### [Semantic-UI-React](http://react.semantic-ui.com/introduction)

セマンティックUI。

## NW.jsとElectron用

### [Photon](http://photonkit.com/)

ElectronのUI。

### [React UI Components for OS X El Capitan and Windows 10](http://gabrielbull.github.io/react-desktop/)

NW.jsとElectronに対応。

## タッチデザイン

### [Framework7](http://www.idangero.us/framework7)

スマホアプリのルックアンドフィールを再現。

### [Kendo UI Mobile](http://demos.telerik.com/kendo-ui/m/index)

Knedoのモバイル用デザイン。

### [Ratchet](http://goratchet.com/)

[画面に全部入らないと表示されない](http://goratchet.com/components/)っての最悪だからやめてほしい。

# ビジュアライズ

## JavaScript

### [d3](http://d3js.org/)

多種多様すぎるグラフィック表示。

### [sigmajs](http://sigmajs.org/)

仲良しマップがつくれる。

## Widgets & Components

### [amCharts](http://www.amcharts.com/)

色々なチャートグラフ。

### [AnyChart](http://www.anychart.com/)

高速で高精細、有償。

### [C3.js](http://c3js.org/)

D3からグラフを使いやすくラッピング。

### [Chartist-jsj](https://github.com/gionkunz/chartist-js)

グラフをアニメーションできる、SVG対応。

### [Chart.js](http://www.chartjs.org/)

シンプルなチャート。

### [Epoch](http://epochjs.github.io/epoch/)

リアルタイムに更新されるチャートが得意。

### [FusionCharts](http://www.fusioncharts.com/)

色々なグラフが簡単に使える、有償。

### [Google Charts](https://developers.google.com/chart/interactive/docs/)

たぶん一番有名なやつ。

### [Highcharts](http://www.highcharts.com/)

IE6対応、非営利無償。

### [ZingChart](http://www.zingchart.com/)

グラフ多種、有償だがウォーターマーク表示で無償使用可能。

## サービス

### [ChartBlocks](http://www.chartblocks.com/)
### [Datawrapper](https://datawrapper.de/)
### [infogr.am](https://infogr.am/)
### [plotly](https://plot.ly/)

オンラインチャート作成、何れもログイン必須。

# グラフィックツール

## General:

### [Fabric.js](http://fabricjs.com/)

canvasタグをオンライン操作可能にする。

### [Two.js](http://jonobr1.github.io/two.js/#introduction)

証明書が期限切れ。

## Canvas

### [EaselJS](https://github.com/CreateJS/EaselJS)

CreateJSの一機能。
canvasを自由に操作。

### [Paper.js](http://paperjs.org/)

ベクタグラフィックス、ベジェ曲線などを扱う。

## SVG

### [d3](http://d3js.org/)

多種多様すぎるグラフィック表示。

### [GraphicsJS](http://www.graphicsjs.org/)

図形を表示、インタラクティブ操作できる。

### [Raphaël](http://raphaeljs.com/)

このサイトにアクセスできません

### [Snap.svg](http://snapsvg.io/)

Adobe IllustratorやSketch等からSVGをインポートできる。

### [svg.js](http://svgjs.com/)

軽量なライブラリ。

## WebGL

### [pixi.js](https://github.com/pixijs/pixi.js)

WebGLでアニメーションを簡単に行える。
WebGL未対応ブラウザは自動的にcanvasフォールバック。

### [three.js](http://threejs.org/)

[MMDを読み込める](https://threejs.org/examples/webgl_loader_mmd.html)。

# アニメーションツール

### [Animate](https://github.com/daneden/animate.css)

テキストや画像を気軽にアニメーションできる。

### [Anime](https://github.com/juliangarnier/anime)

比較的複雑なアニメーションが可能。

### [Dynamics.js](http://dynamicsjs.com/)

物理アニメーションをさくっと作れる。

### [GreenSock-JS](http://greensock.com/)

高性能なアニメーションツール。

### [Magic](https://github.com/miniMAC/magic)

ちょっとした効果がすぐに付けられる。

### [TweenJS](https://github.com/CreateJS/TweenJS)

シンプルで多機能なアニメーションツール。

### [Velocity.js](http://julian.com/research/velocity/)

## Polyfills

### [web-animations-js](https://github.com/web-animations/web-animations-js)

[Web Animations API](https://www.w3.org/TR/web-animations/)のバックポート

## リファレンス

### [canianimate.com](http://canianimate.com/)

アニメーションできるCSSプロパティ。

# JSON

## オンラインエディタ

### [JSONmate](http://jsonmate.com/)

JSONの作成、整形、圧縮。

### [json.browse()](https://jamstack.org/)

JAMstack。

## フォーマッタ

### [jsonformatter.org](http://jsonformatter.org/)

JSONの検証、XMLやCSVへの変換。

### [JSON Formatter & Validator](https://jsonformatter.curiousconcept.com/)

JSONの検証、フォーマッタ。

## クエリツール

### [DefiantJS](http://www.defiantjs.com/)

JSONをXPathで高速検索。

### [JSON Mask](https://github.com/nemtsov/json-mask)

XPathっぽい形でJSONから値を抽出。

### [ObjectPath](http://objectpath.org/)

正規表現っぽい形でJSONから値を抽出。

## JSONモック作成

### [JSON Generator](http://www.json-generator.com/)

簡単な書式でサンプル用JSONを作れる。

### [Mockaroo](https://www.mockaroo.com/)

JSON、CSV、SQLなど複数のフォーマットで作成できる。
巨大なデータは有償。

## オンラインJSONモック作成

### [FillText.com](http://www.filltext.com/)

APIをGETするだけでモック完成。

### [Jam API](https://www.jamapi.xyz/)

任意のサイトからJSONで要素を抽出できる。

### [JSONPlaceholder](http://jsonplaceholder.typicode.com/)

テスト用のダミーREST APIを提供。

### [jsonbin.org](https://jsonbin.org/)

authorizationヘッダを使ってログインするダミーREST API。

### [mockable.io](https://www.mockable.io/)

ダミー用にモックサーバを作れる。

### [mockapi.io](http://www.mockapi.io/)

ログイン必須。

### [Mocky](http://www.mocky.io/)

モックサーバを一瞬で作れる。

### [RANDOM USER GENERATOR](https://randomuser.me/)

ダミーのユーザ情報を作成。

## APIリスト

### [A collective list of JSON APIs for use in web development](https://github.com/toddmotto/public-apis)

公開APIのリスト。

## ローカル

### [json-server](https://github.com/typicode/json-server)

ダミーのローカルサーバを立てる。

## スキーマ

### [json-schema.org](http://json-schema.org/) & [jsonschema.net](http://jsonschema.net/)

JSONのスキーマ仕様と、JSONからスキーマを作成するサイト。

### [{json:api}](http://jsonapi.org/)

JSON APIの仕様。

# ダミー・サンプル

## 画像

### [placehold.it](http://placehold.it/)

任意サイズのダミー画像。

### [Satyr](http://satyr.io/)

遅延ロード、色指定なども可能なダミー画像。

### [Placeimg](http://placeimg.com/)

ダミー写真を適当に表示してくれる。

### [Lorem Pixel](http://lorempixel.com/)

ダミー写真を適当に表示してくれる。

### [CSS-Tricks Image Resources](https://css-tricks.com/sites-with-high-quality-photos-you-can-use-for-free/)

写真素材サイトリンク集。

### [LibreStock](http://librestock.com/)

写真素材サイトリンク集。

### [Unsplash](https://unsplash.it/)

色々な効果をつけられるダミー写真。

### [Place Beyoncé](http://placebeyonce.com/)

仕事では使えないダミー写真。

## スマホ・タブレット端末

### [placeit.net](https://placeit.net/)

端末を手に持ってる写真。

### [mockuphone.com](http://mockuphone.com/)

端末の写真。

## テキスト

### [Meet the Ipsums](http://meettheipsums.com/)

ダミーテキスト。

### [catipsum.com](http://www.catipsum.com/)

ランダムテキスト。

### [baconipsum.com](http://baconipsum.com/) [API](http://baconipsum.com/json-api/)

ベーコンが好きすぎるランダムテキスト。

## ユーザデータ

### [uinames.com](https://uinames.com/)

適当にユーザデータを作ってくれる。

### [randomuser.me](https://randomuser.me/)

RANDOM USER GENERATOR。

# テストツール

## フレームワーク

### [Intern](https://theintern.github.io/)

次世代のテストフレームワーク、らしい。

### [Karma](http://karma-runner.github.io/1.0/index.html)

単体テスト向けのテストランナー。

### [Jest](http://facebook.github.io/jest/)

スナップショットテスト。

## ユニットテスト

### [AVA](https://github.com/avajs/ava)

未来型テストランナー。[日本語訳](https://github.com/avajs/ava-docs/blob/master/ja_JP/readme.md)。

### [Jasmine](http://jasmine.github.io/)
### [Mocha](http://mochajs.org/)
### [Tape](https://github.com/substack/tape)

ここらへん重複。

## アサーション

### [Chai](http://chaijs.com/)
### [expect.js](https://github.com/Automattic/expect.js)
### [should.js](http://shouldjs.github.io/)

アサーションライブラリ。

## スタブ

### [sinon.js](http://sinonjs.org/)

スパイ。

### [Kakapo.js](http://devlucky.github.io/kakapo-js)

バックエンドのスタブ。

## ブラウザテスト

### [Browserling](https://www.browserling.com/)
### [BrowserStack](https://www.browserstack.com/)
### [CrossBrowserTesting.com](http://crossbrowsertesting.com/)
### [Nightcloud.io](http://nightcloud.io/)
### [Sauce Labs](https://saucelabs.com/)

クロスブラウザテスト。

## ブラウザ自動化

### [CasperJS](http://casperjs.org/)
### [Nightmare](https://github.com/segmentio/nightmare)
### [TestCafe](https://github.com/DevExpress/testcafe)

ブラウザ自動化。

## UIテスト

### [gremlins.js](https://github.com/marmelab/gremlins.js)

モンキーテスト。

### [Percy](https://percy.io/)
### [BackstopJS](https://github.com/garris/BackstopJS)
### [PhantomCSS](https://github.com/Huddle/PhantomCSS)

ビジュアルテスト。スナップショットを保存して比較ができる。

### [Ghost Inspector](https://ghostinspector.com/)

ブラウザ操作を自動化する。

### [diff.io](https://diff.io/)

定期的にスクリーンショットを撮り、差分をビジュアル表示する。有償。

## デッドリンク

### [Monkey Test It](https://monkeytest.it/)

デッドリンク、JavaScriptのチェックなど。

# データストレージ

### [AlaSQL](http://alasql.org/)

SQLでLocalStorageにアクセスできる。

### [Dexie.js](http://www.dexie.org/)

IndexedDBを使いやすくするラッパ。

### [ForerunnerDB](http://forerunnerdb.com/)

MongoDBっぽいJSONでIndexedDBやLocalStorageにアクセスできる。

### [LocalForage](https://localforage.github.io/localForage/)

localStorage構文でIndexedDBやWebSQLにアクセスできる。

### [LokiJS](http://lokijs.org/#/)

高速なインメモリデータベース。永続化アダプタもある。

### [Lovefield](https://google.github.io/lovefield)

SQLでIndexedDBにアクセスできる。

### [lowdb](https://github.com/typicode/lowdb)

lodash APIでアクセスできる簡易的なDB。

### [Pouchdb](http://pouchdb.com/)

サーバ側のCouchDBと同期できるDB。

### [NeDB](https://github.com/louischatriot/nedb)

Node、NW.js、Electronなどに組み込めるMongoDBっぽいDB。

### [YDN-DB](http://dev.yathit.com/ydn-db/index.html)

DocumentDBっぽい構文でIndexedDB、WebSQL、WebStorageにアクセスできる。

# バンドルツール

### [Browserify](http://browserify.org/)

webpackのふるいやつ。

### [Rollup](http://rollupjs.org/)

webpackのすごいやつ。

### [SystemJS](https://github.com/systemjs/systemjs)

webpackの同類。

### [webpack](https://webpack.js.org/)

TypeScriptとかCoffeeScriptとかその他色々なファイルをまとめてブラウザで動くJavaScriptにする。

# リポジトリ

### [NPM](https://www.npmjs.com/)

Node.js用リポジトリ。
yumとかcomposerの同類。

### [yarn](https://yarnpkg.com/)

NPMの上位互換。早い。

# ホスティングサービス

## 汎用

### [AWS](https://aws.amazon.com/websites/)

Amazon Web Service。

### [DigitalOcean](https://digitalocean.com/)

Amazon EC2みたいなやつ。

### [Heroku](https://heroku.com/)

`git push`したら公開される。

## 静的コンテンツ

### [Firebase Hosting](https://firebase.google.com/docs/hosting/)
### [netlify](https://www.netlify.com/)
### [Surge](https://surge.sh/)
### [Forge](https://getforge.com/)

好きなところ選べばいいんじゃないかな。

# プロジェクトマネジメント

### [Assembla](https://www.assembla.com/)

Gitリポジトリ。非公開、無料。

### [Bitbucket](https://bitbucket.org/)

Pricingに何も表示されない。

### [Codebase](https://www.codebasehq.com/)

Gitリポジトリ。非公開1プロジェクト無料。

### [Github](https://github.com/)

一番有名なやつ。公開プロジェクト無料。

### [GitLab](https://about.gitlab.com/)

GitHubと同じところかと思ってた。

### [Unfuddle](https://unfuddle.com/)

2006年からやってる老舗のようだが日本ではマイナー。

# コミュニケーションツール

### [Slack](https://slack.com/) & [screenhero](https://screenhero.com/)

screenheroはペアプログラミングに使える画面共有アプリ。Slack連携。

### [appear.in](https://appear.in/)

ビデオチャット。会員登録もアプリインストールも不要。

### [Mattermost](https://mattermost.org/)

自サーバに立てられるSlackクローン。

### [TeamViewer](https://www.teamviewer.com/)

多機能リモートデスクトップ、クロスプラットフォーム。

## GitHub

### [Gitter](https://gitter.im/)

チャット。Githubリポジトリ単位でルームを作れる。

# コンテンツマネジメント

## API CMS

### [Contentful](https://www.contentful.com/)

JSON API専用コンテンツサーバ。

### [Cosmic JS](https://cosmicjs.com/)

JSON API専用コンテンツサーバ。

### [prismic.io](https://prismic.io/)

公式サイトが超うざい。

### [elemeno](https://elemeno.io/)

APIベースのCMS。詳細不明。

## CMS

### [Cushy CMS](https://www.cushycms.com/)
### [LightCMS](https://www.lightcms.com/)
### [Page Lime](http://www.pagelime.com/)
### [Surreal CMS](http://www.surrealcms.com/)

何れも日本ではマイナーなCMS。

## 静的CMS

### [webhook.com](http://www.webhook.com/)
### [Dato CMS](https://www.datocms.com/)
### [siteleaf](https://www.siteleaf.com/)
### [forestry.io](https://forestry.io/)

どこもかしこも同じ見た目ばっかりだな。

# BaaS

## BaaS

### [Back&](https://www.backand.com/)

AngularJSやionicのバックエンドとして使えるようだ。

### [Firebase](https://www.firebase.com/index.html)

データベースのリアルタイム同期機能。

### [Kinvey](http://www.kinvey.com/)

SDK、ドキュメントなどが完備されていて導入しやすそう。

### [Pusher](https://pusher.com/)

なぜかサーバ側言語用のライブラリまで用意されてる。

### [restdb.io](https://restdb.io/)

ロールベースアクセス制御。

## データ

### [Horizon](http://horizon.io/)

[RethinkDB](https://yakst.com/ja/posts/4416)の会社。

### [GraphQL](http://graphql.org/)

言語仕様に[SQL入っている](http://qiita.com/bananaumai/items/3eb77a67102f53e8a1ad)RESTみたいなの。

### [Falcor](https://netflix.github.io/falcor/)

GraphQLと[同じような](http://blog.yudppp.com/posts/rest_to_falcor/)もの。

### [RxDB](https://github.com/pubkey/rxdb)

オフラインで使えて[オン時に自動同期](http://qiita.com/Quramy/items/0c45367536b614b7abf3)するDBアダプタ。

## ユーザマネジメント

### [Auth0](https://auth0.com/)

TwitterやFacebook連携が1行で書ける。有料。

### [AuthRocket](https://authrocket.com/)

何故かJavaScript、RoR、PHPしかライブラリがない。

### [Stormpath](https://stormpath.com/)

Google、Facebook、LinkedIn、GitHub、Twitter対応。

### [UserApp](https://www.userapp.io/)

ドキュメントとサンプルが豊富。

# オフラインツール

### [Hoodie](http://hood.ie/)

オフラインファースト。ググラビリティ低すぎて何も情報が出てこない。

### [Offline.js](http://github.hubspot.com/offline/docs/welcome/)

オフライン時のAJAXリクエストをキャプチャし、オンライン復帰時にリクエストする。

### [PouchDB](http://pouchdb.com/)

オフライン時にはローカルに保存し、オンライン時に自動同期するデータベース。

### [upup](https://www.talater.com/upup/)

オフラインになったときに恐竜を出さずに自動的に別のコンテンツを表示する。

# セキュリティツール

## コーディングツール

### [DOMPurify](https://github.com/cure53/DOMPurify)

DOM、HTML、MathMLテキストからXSSコードを排除。

### [XSS](http://jsxss.com/en/index.html)

HTMLテキストからXSSコードを排除。

## セキュリティ

### [Netsparker](https://www.netsparker.com/)

Webサイトをスキャンし、XSSやSQLInjection等の脆弱性をがないか調査する。

### [Websecurify](http://www.websecurify.com/)

様々なセキュリティツールの詰め合わせ。

## リファレンス

### [HTML5 Security Cheatsheet](https://html5sec.org/)

脆弱性チートシート。

# ビルドツール

## ビルドツール

Gulpを使う前に[「Why I Left Gulp and Grunt for npm Scripts」](https://medium.freecodecamp.com/why-i-left-gulp-and-grunt-for-npm-scripts-3d6853dd22b8#.jc88pwcby)を読むといいんじゃよー

### [Gulp](http://gulpjs.com/)

Gulp。

### [Broccoli.js](http://broccolijs.com/)

Gulpより早くて簡単、らしい。

## Opinionated Tasking/Build pipeline tools:

### [Brunch](http://brunch.io/)

より簡単な設定でビルドできる、らしい。

### [Mimosa](http://mimosa.io/)

規約を守ってコーディングすれば設定ファイルはほとんどいらない、らしい。

### [Lineman](http://linemanjs.com)

Gruntのラッパー。

# 開発ツール

### [Bamboo](https://www.atlassian.com/software/bamboo/)

ビルド、テスト、リリースを自動化。

### [Buddy](https://buddy.works/)

ブラウザ上で開発。フロントはReact、バックエンドはNode、PostgreSQL。

### [CircleCI](https://circleci.com/)

GitHubでPASSEDって出るやつ。

### [Codeship](https://codeship.com/)

GitHubでcodeship:passingって出るやつ。

### [Deploybot](https://deploybot.com/)

ビルド、デプロイ、ロールバックを誰でもできるように。

### [Deployhq](https://www.deployhq.com/)

デプロイ前にどうなるかプレビューが見れる。

### [FTPLOY](http://ftploy.com/)

デプロイ先がFTPオンリー。Absolutely！

### [Now](https://zeit.co/now)

デプロイするたびに固有のURLが作成されるので、過去の状態をすぐに見れる。

### [Travis CI](http://docs.travis-ci.com/)

GitHubでbuild:passingって出るやつ。

### [Semaphore](https://semaphoreci.com/)

GitHubでBUILD STATUS:PASSEDって出るやつ。

### [Springloops](http://www.springloops.io/)

ドキュメントがない。

# モニタリング

## 死活監視

### [Monitority](http://monitority.com/)

サーバの反応がなかったらメールを送る。URL数無制限で無料。
すぐ死にそう。

### [Uptime Robot](https://uptimerobot.com/)

URL50まで無料。メール、Twitter、PUSH通知などに遅れる。

# 汎用モニタリング

### [Pingdom](https://www.pingdom.com/)

死活監視、応答時間や容量のチェックなど。

### [New Relic](http://newrelic.com/)

パフォーマンス監視。アプリケーション、SQL、外部API呼び出しなど詳細に分析できる。

### [Uptrends](https://www.uptrends.com/)

Chrome、IE、PhantomJSの3ブラウザでアクセスしてパフォーマンス等を比較できる。

# JavaScriptエラーレポーティングツール

### [bugsnag](https://bugsnag.com/)

エラーが発生したらGitHubにIssueを作成したり、ログをビジュアル表示したりする。

### [errorception](https://errorception.com/)

頭にスニペットを書いておくだけで、JavaScriptのエラーを収集できる。

### [Honeybadger](https://www.honeybadger.io/)

ElixirとかGoにも対応してる。

### [Raygun](https://raygun.io/)

17言語対応、通知先も30近く設定可能。

### [Rollbar](https://rollbar.com/)

公式で22+コミュニティで17言語以上対応、通知先もたくさん。

### [Sentry](https://getsentry.com/welcome/)

エラー通知にOSやブラウザバージョンが入っていて、環境依存の問題が確認できる。

### [TrackJS](https://trackjs.com/)

console.log()の出力をキャッチする。

# パフォーマンスツール

## レポート

### [GTmetrix](https://gtmetrix.com/)

サイトの表示速度をチェック。

### [sitespeed.io](https://www.sitespeed.io/)

レスポンスタイムやレンダリング速度の測定、HTMLとして表示してくれる。

### [Speed Curve](https://speedcurve.com/)

計測結果のビジュアライズ表示、過去の計測結果との比較など。

### [Web Page Test](http://www.webpagetest.org/)

どのくらい快適に表示されるかをA～Fで教えてくれる。

## JavaScriptツール

### [imagemin](https://github.com/imagemin/imagemin)

[gulp-imagemin](http://qiita.com/hththt/items/6bdf1f0dcb0bd08812df)の中身。

### [ImageOptim-CLI](http://jamiemason.github.io/ImageOptim-CLI/)

[ImageOptim](https://imageoptim.com/mac)、[ImageAlpha](http://pngmini.com/)、[JPEGmini for Mac](http://jpegmini.com/mac)をコマンドラインから使えるようにする。

## スペック

### [performancebudget.io](http://www.performancebudget.io/)

回線とロード時間から、1ページにどれくらいの容量が使えるかを計算。

## リファレンス

### [Jank Free](http://jankfree.org/)

パフォーマンスを追求するための資料集。

### [Performance of ES6 features relative to the ES5](https://kpdecker.github.io/six-speed/)

ES6でどれだけ早くなるかのパフォーマンス一覧。

## チェックリスト

### [Front-End Performance Checklist 2017](https://www.smashingmagazine.com/2016/12/front-end-performance-checklist-2017-pdf-pages/)

全33項目。

# ツールを見つけるためのツール

### [built with](http://builtwith.com/)

そのWebサイトが何で作られているかを表示。

### [javascripting.com](http://www.javascripting.com/)

JavaScriptライブラリのリスト。
GitHubで☆80以上が必要なようだ。

### [js.coach](https://js.coach/)

ReactとかBabelあたり中心のJavaScriptライブラリ集。

### [microjs.com](http://microjs.com/)

約5kb以下に限定したライブラリ集。

### [npms](https://npms.io/)

[npm](https://www.npmjs.com/)ライブラリのもっと細かい情報を確認できる。

### [stackshare.io](http://stackshare.io/)

現在のトレンドとなっているライブラリを見れる。

### [Unheap](http://www.unheap.com/)

主にjQueryプラグインのライブラリ集。


# 感想

長い。

どこもかしこも同じ見た目なのは何故なのか。