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

可及的速やかにReactが絶滅しますように。

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

# ドキュメントツール

## 開発者向けドキュメント、APIリファレンス

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

200以上のAPIリファレンス、100以上のチートシートを一括ダウンロードできる。有料、Mac用。

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

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

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

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

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

Windows、Linux、MacOS用各種揃っている無料のオフラインドキュメント。

## チートシート

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

JavaScript、CSS、Go、vim等のショートカット、書式などチートシート。字が薄くて見辛い。

# 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/)

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

### [Moqups](https://moqups.com/)

使える要素が多くてモックアップ作るだけならかなり簡単。

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

CSSアニメーションまで作れてしまうが多機能すぎて使い切れなそう。

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

SketchやPhotoshopからインポートできる。

## 改良・プレゼン

### [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とほとんど同じようだ。ユーザ登録必須。

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

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を簡単にテストするクライアント。Electron。

### [Mitmproxy](https://mitmproxy.org/)

同じくパケットキャプチャ・モニタリングツール。Python。

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

MAC用。

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

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

# エディタ

## コードエディタ

注釈でVisual Studio Codeが推奨されている。

### [Atom](https://atom.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/)

AWSに吸収されてしまった。

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

ブラウザ上で動くので開発環境構築が不要。sudo権限有り。

## コード共有

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

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

HTML・CSS・JSでちょっとしたパーツを描いて公開できる。先日Qiitaに埋め込めるようになった。

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

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

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

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

### [StackBliz](https://stackblitz.com/)

オンラインでVSCが動く。Svelte対応。

### [codeSandbox](https://codesandbox.io/)

React専用。

# ブラウザツール

## ブラウザの操作

### [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、Opera、Safari、Edge、Firefoxの各API対応・対応予定状況。Mozillaサイト上にある。

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

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

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

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

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

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

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

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

### [web-platform-tests dashboard](https://wpt.fyi/)

具体的なコードとブラウザ別対応状況一覧。

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

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

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

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

ChromeでF12を押せ。

#### [Per-Panel Documentation](https://developers.google.com/web/tools/chrome-devtools/#docs)

各パネルの解説。

#### [Command Line API Reference](https://developers.google.com/web/tools/javascript/command-line/command-line-reference?hl=en)

コンソールの解説。

#### [Keyboard & UI Shortcuts Reference](https://developers.google.com/web/tools/iterate/inspect-styles/shortcuts)

キーボードショートカット。

#### [Settings](https://developer.chrome.com/devtools/docs/settings)

UIの設定。

### [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/)

403 Forbidden。

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

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

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

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

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

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

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

## 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。

### [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/)

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

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

自動ブラウザテスト。APIで呼び出しとかもできるようだ。

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

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

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

クロスブラウザテスト用クラウド。トップに出てるテストカウントが胡散臭い。

## ヘッドレスブラウザ

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

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

WebKit。

#### [PhantomCSS](https://github.com/HuddleEng/PhantomCSS)

2017/12/22以降、このプロジェクトは維持されません。

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

Gecko。

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

Node.js。

### [Headless Chromium](https://chromium.googlesource.com/chromium/src/+/lkgr/headless/README.md)

Blink。

## ブラウザ自動化

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

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

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

簡単に自動テストを書けるテストフレームワーク。Electron製。

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

テストをTypeScriptで書ける。

## ブラウザハック

### [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/)

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

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

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

## HTML Polyfill

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

IE6、iPhone3、Firefox3など古いブラウザでHTML5文法が動くようにする。

## トランスパイラ

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

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

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

Qiitaで使われてる装飾記法。

## リファレンス

### [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/)

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

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

HTMLタグのリファレンス。

### [HEAD - A free guide to elements](https://gethead.info/)

headタグ内に入る要素一覧。ブラウザ別要素やSNS毎の書き方も記載されている。

## 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)

HTMLの記述方針、コーディングスタイルガイド。

## ワークフロー

### [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ツール

## CSSユーティリティ

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

依存を極力少なくし、単純なclassを組み合わせてデザインしていく形式。

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

最小限の機能で400行しかないかわりに非常に軽量。

### [Shed](http://tedconf.github.io/shed-css/)

省略が強すぎてチームユースには向いてなさそう。"t-t:u"とか見ても何のことかわからん。

### [Tailwind CSS](https://tailwindcss.com/)

PostCSS製で、デフォルトのスタイルもあるがカスタマイズも楽に行えるフレームワーク。

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

class名とCSS要素がほぼ1対1対応してるだけなのでわかりやすい。

## CSSフレームワーク

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

モバイルファーストのCSSフレームワーク。

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

Flexboxベース。

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

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

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

コアにはノーマライズとグリッドしか入ってなくて、それ以外は公式アドオンで追加対応。

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

ドキュメントが動画だらけで鬱陶しい。

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

Google製、マテリアルデザイン。

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

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

### [Mini.css](https://minicss.org/)

7KBの軽量フレームワーク。

### [Mobi.css](http://getmobicss.com/)

モバイルファーストで2.6KBという超軽量フレームワーク。

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

デフォルトでタグを装飾する。変更はSCSSで書き換え。

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

3.6KBと軽量。クラス名は全て"pure-"で始まり競合を抑えている。

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

クラス名を自然言語に近づけたフレームワーク。
指定が`class="ui vertical animated button"`。

### [Shoelace](https://shoelace.style/)

次世代CSSで描かれた(リリース版はトランスパイルされてる)未来のCSSフレームワーク。

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

比較的機能が多く、かつ軽量。

## モバイル専用

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

ドキュメントがクッソ見難い。

## 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対応。

### [sanitize.css](https://github.com/jonathantneal/sanitize.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に近く学習コストが低い。

## リファレンス

### [CSS Cursors](http://csscursor.info/)

CSSで使えるカーソルの一覧。

### [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によるCSSの仕様書。

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

CSS4のセレクタ。

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

css4-selectorsとだいたい同じ。

### [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によるリファレンス。

### [CSS Cheat Sheet](https://adam-marsden.co.uk/css-cheat-sheet/)

よく使う要素のチートシート。

## 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の誤字が一年なおってない。

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

不要なスペース等を削除し、構造最適化を行ってCSSを縮小する。

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

オンラインで[実行できる](http://css.github.io/csso/csso.html)。

### [purgecss](https://github.com/FullHuman/purgecss)

HTML上で使われていないCSSを削除する。

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

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

ボックスの矢印。

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

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

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

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

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

404 Nof Found → [移転してる](https://demos.scotch.io/visual-guide-to-css3-flexbox-flexbox-playground/demos/)

### [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)

一貫性のある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/)。

## スタイルガイド

### [Frontify](https://frontify.com/)

ブラウザ上でスタイルガイドを作成できる。

### [SC5 STYLE GUIDE GENERATOR](http://styleguide.sc5.io/)

SASSやPugでスタイルガイドを作成できる。

### [styleguide-generators](https://github.com/davidhund/styleguide-generators)

スタイルガイドジェネレータリンク集。

### [Catalog](https://docs.catalog.style/)

Markdownでスタイルガイドを作成できる。

## 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/)

ウィルス的なものに汚染されてる。

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

jQueryからAjax系を削除しDOM操作部分だけに集中することにより軽量化した。

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

DOM操作、イベント、Ajaxまで揃えて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)

ライブラリ内に仮想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互換でさらに高機能。

### [Luxon](https://moment.github.io/luxon/)

ImmutableなDateTime。

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

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

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

日時操作。多言語対応。

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

文字列と数値をいいかんじに相互変換する。

### [Ramda](http://ramdajs.com/)

関数型っぽく書けるようになる。

### [RxJS](http://reactivex.io/rxjs/)

リアクティブプログラミングっぽく書けるようになる。リアクティブの利点は未だにわからない。

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

文字列操作ライブラリ。

### [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コード解析エンジン。

## Linting/Hinting & Style Linter

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

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

## ユニットテスト

### [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)

サーバ側をエミュレートする、バックエンドのモック。

## コードフォーマッタ

### [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)

TypeScriptやSCSS等をはじめ、プラグインで他言語も対応できる。

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

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

実行時間を簡単に計れる。

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

benchmark.js製、結果をオンラインで確認できる。

## コードカバレッジ

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

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

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

ECMAScriptの構文解析器。

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

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

## 最適化

### [Closure Compiler](https://developers.google.com/closure/compiler/)

デッドコード削除、関数展開などの最適化。

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

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

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

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

### [Prepack](https://prepack.io/)

計算可能な部分を先に計算して高速化する。

## 難読化

### [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かnpm scriptsを使ったほうがいいぜ、と脚注に書かれている。

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

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

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

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

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

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

# アクセシビリティ

## ガイド

### [A11Y Style Guide](http://a11y-style-guide.com/style-guide/)

具体的なサンプル付きのアクセシビリティスタイルガイド。

### [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製のChromeプラグイン。

### [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)

OutlookとWordの読みやすさ機能。おもしろーい！

## よみもの

### [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の使い方。

# フレームワーク

初心者はまずVueから初めて次にReact、その後Angular2/Ember/Aurelia等に行くとよい。

静的サイトなど小規模な場合はフレームワークは不要 (should avoid) で、jQueryとGulpで十分である。

と脚注に書いてある。

## フロントエンド

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

AngularJSおよび開発用Chromeエクステンション。

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

Angular (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)

Reactおよび開発用ツール。

### [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)

Vue.jsおよび開発用ツール。

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

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

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

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

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

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

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

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

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

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

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

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

ionicにリダイレクト。

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

有償のため詳細不明。

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

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

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

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

HTMLでMac/Windows/Linuxデスクトップアプリを作れる。

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

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

## JavaScriptネイティブアプリ

### [Flutter](https://flutter.io/)

WebViewやブラウザエンジンを使わずに、ネイティブコードに変換して実行する。

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

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

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

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

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

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

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

月額5000円から、買い切り無し。

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

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

## リファレンス

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

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

### [RealWorld example apps](https://github.com/gothinkster/realworld)

比較のため、複数のフレームワークで全く同じサイトを作っている。

### [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)

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

### [Front-End Performance Checklist 2018](https://www.dropbox.com/s/8h9lo8ee65oo9y1/front-end-performance-checklist-2018.pdf?dl=0)

パフォーマンスに必要な能力・環境のチェックリスト。

# ステート管理

### [Redux](https://redux.js.org/)

ややこしすぎて挫折した。

### [Mobx](https://mobx.js.org/)

Reduxより使いやすいステート管理ツール。

### [mobx-state-tree](https://github.com/mobxjs/mobx-state-tree)

Mobxのステート管理をやりやすくする。

### [Cerebral](https://github.com/cerebral/cerebral)

宣言的に書くステート管理ライブラリ。

### [freactal](https://github.com/FormidableLabs/freactal)

Reactのステート管理ライブラリだが日本語情報皆無。

### [unistore](https://github.com/developit/unistore)

Preact作者によるPreact/Reactのステート管理ライブラリ。日本語情報はない。

# Progressive Web App

### [lighthouse](https://developers.google.com/web/tools/lighthouse/)

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

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

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

# GUI開発ツール

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

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

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

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

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

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

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

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

### [art-template](https://aui.github.io/art-template/)

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

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

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

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

### [ractive.js](https://ractive.js.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の仕様書。

# UIツールキット

## Webプラットフォーム

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

jQueryおよびJSフレームワークで使える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/)

CSSフレームワーク。

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

サンプルサイトのソースも公開していてわかりやすい

## React専用

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

Alibaba製UIデザインライブラリ。

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

マテリアルデザイン。

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

ドキュメントが見えなくなる。

### [ExtReact](https://www.sencha.com/products/extreact/#app)

[Ext JS](https://www.sencha.com/products/extjs/)のReact対応版。

### [Fabric](https://developer.microsoft.com/en-us/fabric)

[Office365](https://www.office.com/?omkt=ja-jp)で使われてる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に対応。

# ビジュアライズ

## 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/)

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

# グラフィックツール

## 汎用

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

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

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

2D図形やアニメーションを簡単に作成できる。

## 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://dmitrybaranovskiy.github.io/raphael/)

IE6などのレガシーブラウザで動く。

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

Raphaël作者による後継ライブラリ。

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

軽量、高速に動作するSVGライブラリ。

## 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)。いみがわからない。

# アニメーションツール

## CS・JavaScript

### [Animate Plus](https://github.com/bendc/animateplus)

JavaScriptアニメーションライブラリ。

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

CSSアニメーションライブラリ。Animate Plusとは特に関係ないようだ。

### [Anime.js](http://animejs.com/)

複雑なアニメーションを作れる。

### [Animista.net](http://animista.net/)

オンラインでソースを生成してくれるので便利。

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

物理演算っぽい動きをさくっと作れる。

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

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

### [Kute.js](http://thednp.github.io/kute.js/)

高機能で高パフォーマンス、変形処理が得意なようだ。

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

ちょっとした効果がすぐに付けられるCSSアニメーション。

### [Micron.js](https://webkul.github.io/micron/)

要素をほんのちょっと動かすだけ、というマイクロなライブラリ。

### [Motion](http://mojs.io/)

モーショングラフィックスのライブラリ。

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

シンプルで多機能なアニメーションツール。[CreateJS](https://createjs.com/)の一機能。

### [Popmotion](https://popmotion.io/)

Three.jsなど別ライブラリに値を送り込むことも可能。

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

jQueryの`$.animate()`を高速化したもののようだ。

## 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)

JSONをXPathっぽい文法で検索する。

### [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するだけでモック完成。

### [FakeJSON](https://fakejson.com/)

ダミーのJSONを返すサービス。

### [Jam API](https://github.com/dinubs/jam-api)

SSL証明書が期限切れ。

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

値は決まってるダミーREST APIを提供。

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

CREATE、UPDATE、DELETEができる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)

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

## スキーマ

### [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/)

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

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

Facebookによる主にReact用テストフレームワーク。

#### [majestic](https://majestic.debuggable.io/)

Jestのデスクトップアプリ用UI。

#### [Enzyme](https://github.com/airbnb/enzyme)

airbnb製Reactテストフレームワーク。

#### [Cheerio](https://github.com/cheeriojs/cheerio)

jQueryっぽいシンタックスのテストフレームワーク。

## ユニットテスト

### [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/)

クロスブラウザで動作テストを行う。

## 機能テスト

### [Cypress cypress-react-unit-test](https://github.com/bahmutov/cypress-react-unit-test)

Enzymeと同じテストを実際のブラウザで行う。

### [Nightwatch](http://nightwatchjs.org/)

Node.js上でSelenium WebDriver APIを使ってブラウザテストを自動化するフレームワーク。

### [WebDriver.io](http://webdriver.io/)

Node.js上でSelenium WebDriver APIを使ってブラウザテストを自動化するフレームワーク。

## ブラウザ自動化

### [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/)

モンキーテスト、デッドリンク検出など。

# データストレージ

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

SQLでlocalStorageやxls等にアクセスできる。

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

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

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

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

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

Mongoっぽい構文でIndexedDbにアクセスできる。

### [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。

### [RxDB](https://pubkey.github.io/rxdb/install.html)

オンライン時に勝手に同期してくれるDB。

# バンドルツール

15k行以下ならParcel、それ以上ならWebpack、npmパッケージならRollupを使うとよい、と脚注に描かれている。

### [Parcel](https://parceljs.org/)

簡易版webpack、設定ファイルが無いかわりに細かい設定ができない。

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

webpackのすごいやつ。

#### [Microbundle](https://github.com/developit/microbundle)

設定書かなくてもいいかんじに動くようにするRollupのラッパー。

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

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

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

### [Fusebox](https://fuse-box.org/)

新しめのバンドルツール、デフォルトでTypescriptに対応。

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

webpackのふるいやつ。

# リポジトリ

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

Node.js用リポジトリ。

yumとかcomposerの同類。

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

NPMの上位互換。早い。

### [PNPM](https://pnpm.js.org/)

npm installとかそんな頻繁に使うものでもないしどうせコマンド打ったら放置して別のことするんだから速度とか気にする必要なくね？

# ホスティングサービス

## 汎用

### [AWS](https://aws.amazon.com/websites/)

Amazon Web Service。

### [DigitalOcean](https://digitalocean.com/)

Amazon EC2みたいなやつ。

### [WebFaction](https://www.webfaction.com/)

日本ではあまり有名ではないようだ。

## 静的コンテンツ

### [Firebase Hosting](https://firebase.google.com/docs/hosting/)

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

### [Surge](https://surge.sh/)

### [Forge](https://getforge.com/)

好きなところ選べばいいんじゃないかな。

## ローカル

### [Localname](https://localname.io/)

Mac専用。

# コードホスティング

### [Assembla](https://www.assembla.com/)

Subversion/Perforce/Gitに対応。

### [Bitbucket](https://bitbucket.org/)

Gitリポジトリ。無料プランでも無制限非公開可能。

### [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クローン。

## GitHub

### [Gitter](https://gitter.im/)

チャット。Githubリポジトリ単位でルームを作れる。

# コンテンツマネジメント

## API CMS

### [Contentful](https://www.contentful.com/)

JSON API専用コンテンツサーバ。

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

多言語対応のコンテンツ管理サーバ。

### [Headless](https://www.headless.rest/)

"Headless CMS"が一般名称すぎてググラビリティがゼロ。

## セルフホスティング

### [Cockpit](https://getcockpit.com/)

虫みたいなのうぞうぞ動かすのやめろ。

## CMS

### [LightCMS](https://www.lightcms.com/)

日本ではマイナーなCMS。

### [Surreal CMS](http://www.surrealcms.com/)

あゆで一番好きな曲はSURREALです。

## 静的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/)

BaaS以外にFaaS、SECaaS、iPaaSにも対応。もはや略語の意味が分からない。

### [Backendless](https://backendless.com/)

モバイル用にPUSH通知や位置情報等に対応。

### [Firebase](https://www.firebase.com/index.html)

データベースのリアルタイム同期機能。

### [Pusher](https://pusher.com/)

チュートリアルが丁寧で、従うだけでアプリが何本かできる。

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

ロールベースアクセス制御のNoSQL。

### [MongoDB Stitch](https://www.mongodb.com/cloud/stitch)

MongoDB公式のBaaS、まだβ版。

## データ

### [GraphQL](http://graphql.org/)

[SQLを書ける](http://qiita.com/bananaumai/items/3eb77a67102f53e8a1ad)POSTリクエスト。

#### [Apollo](http://www.apollodata.com/)

既存コードの上にGraphQL用エンドポイントを被せるラッパー。

#### [Relay](https://facebook.github.io/relay/)

ReactでGraphQLを使いやすくする。

### [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/)

サイトトップが何故かAdBlockで死ぬ。

### [AuthRocket](https://authrocket.com/)

何故かJavaScript、RoR、PHPしかライブラリがない。

### [Okta](https://developer.okta.com/)

企業向けIDaaS。ポータルから各サイトにSSOできる。

## 検索

### [Algolia](https://www.algolia.com/)

サイトに設置する検索ボタンを提供するサービス。

# オフラインツール

### [Hoodie](http://hood.ie/)

ローカルDBに突っ込んでおけば後で勝手にサーバに転送してくれる。

### [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/)

様々なセキュリティツールの詰め合わせ。

### [OWASP ZAP](https://www.owasp.org/index.php/OWASP_Zed_Attack_Proxy_Project)

OWASP製のWebアプリ脆弱性診断ツール。

## リファレンス

### [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。

## Opinionated Tasking/Build pipeline tools:

### [Brunch](http://brunch.io/)

より簡単な設定で高速にビルドできる。

# デプロイツール

### [Bamboo](https://www.atlassian.com/software/bamboo/)

ビルド、テスト、デプロイを自動化。

### [Buddy](https://buddy.works/)

Web上からビルド、デプロイの操作を行える。

### [CircleCI](https://circleci.com/)

GitHubでcircleci:passingって出るやつ。

### [Codeship](https://codeship.com/)

GitHubでcodeship:passingって出るやつ。

### [Deploybot](https://deploybot.com/)

GitHubにpushしたら自動でデプロイされる。

### [Deployhq](https://www.deployhq.com/)

GitHubにpushしたら自動でFTP/SSH等の別サーバにアップしてくれる。

### [FTPLOY](http://ftploy.com/)

BLOGが404。

### [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/)

ドキュメントのリンク先がBuddyになってるんだがなんでだ？

# モニタリングツール

## 死活監視

### [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とかCrystal等の珍しい言語に対応してる。

### [Raygun](https://raygun.io/)

19言語対応、通知先も30近く設定可能。

### [Rollbar](https://rollbar.com/)

公式で30+コミュニティで17言語以上対応、通知先もたくさん。

### [Sentry](https://getsentry.com/welcome/)

throwするだけで勝手にSourceMapから整形してくれる。

### [TrackJS](https://trackjs.com/)

console.log()の出力をキャッチする。

# パフォーマンスツール

## レポート

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

アクセスできなかった。

### [GTmetrix](https://gtmetrix.com/)

サイトの表示速度をAからFのランクで評価。

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

レスポンスタイムやレンダリング速度の測定、HTMLとして表示してくれる。

### [Speed Curve](https://speedcurve.com/)

計測結果のビジュアライズ表示、過去の計測結果との比較など。

### [Web Page Test](http://www.webpagetest.org/)

どのくらい快適に表示されるかをA～Fで教えてくれる。

### [Sonarwhal](https://sonarwhal.com/)

速度以外に文法も細かくチェックされる。

### [Datadog](https://www.datadoghq.com/)

ドキュメントが[ちゃんとした日本語](https://docs.datadoghq.com/ja/)対応してる。

## 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でどれだけ早くなるかのパフォーマンス一覧。

## チェックリスト

### [The Front-End Checklist](https://frontendchecklist.io/)

全89項目。

### [Front-End Performance Checklist 2018](https://www.dropbox.com/s/8h9lo8ee65oo9y1/front-end-performance-checklist-2018.pdf?dl=0)

全33項目。

# ツールを見つけるためのツール

### [built with](http://builtwith.com/)

そのWebサイトが何で作られているかを表示する。

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

このFront-End Dev Toolsと似たようなかんじ。

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

JavaScriptライブラリのリスト。

登録条件はGitHubで☆80以上。

### [js.coach](https://js.coach/)

ReactとかBabelあたり中心のJavaScriptライブラリ集。

### [JSter](http://jster.net/)

[JSwiki](http://jswiki.org/)の精神的後継。毎月ニュースレターを発行しているので最新動向がわかる。

### [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プラグインのライブラリ集。

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

GitHubの日別☆増加数ランキング。対象リポジトリはタグから取得ではなく手動追加のようだ。

# 感想

長い。

React自体は好きでも嫌いでもないが、信者が嫌い。

必要なのは、それぞれのツールの名前や使い方を覚えることではなく、『選択肢が存在するという事実』を知っておくことです。