可及的速やかにReactが絶滅しますように。
以下はFront-End Developer Handbook 2018の第三部、Front-end Developer Toolsからリンクされているツールと、その簡単な紹介です。
ドキュメントツール
開発者向けドキュメント、APIリファレンス
Dash
200以上のAPIリファレンス、100以上のチートシートを一括ダウンロードできる。有料、Mac用。
DevDocs
200以上のライブラリをオンラインで検索できる。無料。
Velocity
中身はDashと同じ。有料、Windows用。
Zeal
Windows、Linux、MacOS用各種揃っている無料のオフラインドキュメント。
チートシート
devhints.io
JavaScript、CSS、Go、vim等のショートカット、書式などチートシート。字が薄くて見辛い。
SEOツール
Keyword Tool
検索ワードを入れると関連キーワードを教えてくれる。
Google Webmasters Search Console
自分のサイトがGoogleにどう判断されてるかを調べる。
Varvy SEO tool
アクセシビリティや表示速度など、SEOに関連する問題を簡単に調べてくれる。
SEOツールを見つけるツール
SEO Tools - The Complete List
SEOツールを見つけるツール。
フロントエンドハンドブックはSEOツールを見つけるツールを見つけるツール。
プロトタイピングツール
新規作成
Axure
アプリデザインとかの雛形を簡単に作れる。
Balsamiq Mockups
バルサミコ酢～
Justinmind
スマホ向けサイトのモックアップをドラッグで簡単に作れる。
Moqups
使える要素が多くてモックアップ作るだけならかなり簡単。
proto.io
CSSアニメーションまで作れてしまうが多機能すぎて使い切れなそう。
UXPin
SketchやPhotoshopからインポートできる。
改良・プレゼン
InVision
モックアップに対しての指摘等を直接画面に書き込んで共有できる。
Conceptboard
モックアップに対しての指摘等を直接画面に書き込んで共有できる。
myBalsamiq
バルサミコ酢～
ダイアグラム
draw.io
フローチャートとかER図とかをオンラインでさくっと書ける。
Cacoo
日本語なので勧めやすい。だがユーザ登録必須なので勧めにくい。
gliffy
draw.ioとほとんど同じようだ。ユーザ登録必須。
sketchboard.io
draw.ioよりも図形寄りで、マインドマップやプレゼンテーションなど向け。
ネットワークツール
Charles
WiresharkやFiddler等と同じローカルプロキシ。
Chrome DevTools Network Panel
F12のこと。
Insomnia
REST APIを簡単にテストするクライアント。Electron。
Mitmproxy
同じくパケットキャプチャ・モニタリングツール。Python。
Paw
MAC用。
Postman
REST APIテストツールで、OAuthやLINKリクエストメソッドなど自力でやると面倒なものにも対応してる。
エディタ
コードエディタ
注釈でVisual Studio Codeが推奨されている。
Atom
使ったことないので知らない。
Sublime Text
使ったことないので知らない。
WebStorm
使ったことないので知らない。
Visual Studio Code
私はこれを使っている。
VSCあれば他のIDEいらなくね？
オンラインエディタ
Cloud9
AWSに吸収されてしまった。
Codeanywhere
ブラウザ上で動くので開発環境構築が不要。sudo権限有り。
コード共有
本格的なIDEではなく、ブラウザ上でさくっと動作確認とかするやつ。
CodePen
HTML・CSS・JSでちょっとしたパーツを描いて公開できる。先日Qiitaに埋め込めるようになった。
jsbin.com
JS開発ツール、ライブラリをワンタッチで追加できる。
jsfiddle.net
余計な機能などいらないというときに、必要最小限の装飾でさっと書き始めることができる。
StackBliz
オンラインでVSCが動く。Svelte対応。
codeSandbox
React専用。
ブラウザツール
ブラウザの操作
History.js
ブラウザの閲覧履歴のURLを書き換えたり消去したりする。
html2canvas
表示中の画面のスクリーンショットが撮れるすごいやつ。
Platform.js
OSの種類とかブラウザバージョンとかをパースしてくれる。
URI.js
URLを組み立てたりパースしたり、テキスト中のURLっぽい文字列を自動でリンクにしたりする。
ブラウザバージョンによる対応状況のチェック
Browser support for broken/missing images
画像が無かったり壊れてたときに代替表示してくれるか。
Browserscope
Acid3やcontentEditableなど各実装にどれだけ対応しているかを一覧表示。
caniuse.com
これ系でたぶん一番有名なやつ。
Firefox Platform Status - Implementation & standardization roadmap for web platform features
Chrome、Opera、Safari、Edge、Firefoxの各API対応・対応予定状況。Mozillaサイト上にある。
HTML5 Please
単に最新ブラウザがだいたい対応したらuseって出してるだけっぽい。
HTML5 Test
ブラウザ毎の対応件数を見れる。
iwanttouse.com
ブラウザバージョンによる分類ではなく、実際に影響するユーザ数の割合を見ることができる。
Platform Status
このサイトにアクセスできません。
web-platform-tests dashboard
具体的なコードとブラウザ別対応状況一覧。
whatwebcando.today
サンプルコード付きなのでわかりやすい。
ブラウザでの開発・デバッグツール
Chrome Developer Tools (aka DevTools)
ChromeでF12を押せ。
Per-Panel Documentation
各パネルの解説。
Command Line API Reference
コンソールの解説。
Keyboard & UI Shortcuts Reference
キーボードショートカット。
Settings
UIの設定。
Firefox Developer Tools
FirefoxでF12を押せ。
IE Developer tools (aka F12 tools)
EdgeでF12を押せ。
Safari Web Inspector
403 Forbidden。
Vorlon.js
クロスブラウザで動作する、ローカルプロキシ型のデバッグツール。
ブラウザ上で対応状況のチェック
Feature.js
対応状況による分岐がif(feature.webGL)1行でできる。
Modernizr
対応状況による分岐がif(Modernizr.touch)1行でできる。
Polyfills
console-polyfill
IEがconsole.log()で死ななくなる。死ななくなるだけで機能はしない。
HTML5 Cross Browser Polyfills
HTML5各種機能のバックポート用ライブラリ一覧。
fetch
Fetch APIのPolyfill。
socket.io
Node.jsでWebSocketを使えるようにする。
SockJS
旧IEとかでWebSocketを使えるようにする。
webcomponents.js
Web ComponentsのPolyfill。
webshim
Web Formsをはじめ多くの機能をサポートしている総合Polyfillツール。
ブラウザテスト
Browserling
古いOS・ブラウザでの動作を確認できる。
エミュレータではなく実物のようだ。
BrowserStack
同上だが、ローカルにあるHTMLファイルも確認できる。
CrossBrowserTesting.com
クロスブラウザテストができる、というか単に色々入ったリモートデスクトップを貸し出してるだけっぽい。
Ghost Inspector
自動ブラウザテスト。APIで呼び出しとかもできるようだ。
Nightcloud.io
自動テスト用プラットフォームのようだが、情報が全く見当たらない。
Sauce Labs
クロスブラウザテスト用クラウド。トップに出てるテストカウントが胡散臭い。
ヘッドレスブラウザ
ヘッドレスブラウザとはGUIを持たないウェブブラウザのこと。
PhantomJS
WebKit。
PhantomCSS
2017/12/22以降、このプロジェクトは維持されません。
SlimerJS
Gecko。
Zombie.js
Node.js。
Headless Chromium
Blink。
ブラウザ自動化
CasperJS
PhantomJSとSlimerJSを楽に扱えるようにするライブラリ。
Nightmare
簡単に自動テストを書けるテストフレームワーク。Electron製。
TestCafe
テストをTypeScriptで書ける。
ブラウザハック
browserhacks.com
特定のブラウザだけを識別したい場合の書き方一覧。
HTMLツール
HTMLテンプレート
dCodes
様々なHTMLパーツと、そのHTML・CSS・JSのサンプルコードが見られる。
Email-Boilerplate
HTMLメールのテンプレート。
HTML5 Boilerplate
HTML5サイト構造の雛形。
ディレクトリ構造、CSSリセット、html5shiv等の定型的な初期設定を最初から含んでいる。
HTML5 Bones
HTML5 Boilerplateと似ているが、よりコンパクト。
Mobile boilerplate
HTML5 Boilerplateと同じで、こちらはモバイルサイト用。
HTML Polyfill
html5shiv
IE6、iPhone3、Firefox3など古いブラウザでHTML5文法が動くようにする。
トランスパイラ
Pug
旧称Jade。HAMLとだいたい同じ。
Markdown
Qiitaで使われてる装飾記法。
リファレンス
Element attributes
HTMLタグに使える属性値一覧。
Elements
HTMLタグ一覧。
HTML Arrows
矢印など記号の文字コード。
HTML Entity Lookup
入力した文字と似たような文字を探してくれる。
htmlreference.io
HTMLタグのリファレンス。
HEAD - A free guide to elements
headタグ内に入る要素一覧。ブラウザ別要素やSNS毎の書き方も記載されている。
lint
HTMLHint
HTMLの誤りをオンラインでチェック。
html-inspector
HTMLの誤りをコマンドラインでチェック。
最適化
HTML Minifier
不要なスペース・改行を全部取って1行に詰め込む。
オンライン生成ツール
tablesgenerator.com
LaTeXのテーブルを簡単に作れる。
コーディングガイド
HTML Code Guide
HTML5とCSSのコーディングスタイルガイド。
Principles of Writing Consistent, Idiomatic HTML
HTMLの記述方針、コーディングスタイルガイド。
ワークフロー
Emmet
HTMLとCSSのコーディング補完。
#header>ul>li>a#linkと書くだけで<div id="header"><ul><li><a id="link" href=""></a></li></ul></div>になる。
アウトライン
HTML 5 Outliner
入れ子を段階で表示してくれるだけ？
GitHubトレンド
https://github.com/trending?l=html&since=monthly
GitHubでHTML関連リポジトリの月間ランキング。
CSSツール
CSSユーティリティ
Basscss
依存を極力少なくし、単純なclassを組み合わせてデザインしていく形式。
Skeleton
最小限の機能で400行しかないかわりに非常に軽量。
Shed
省略が強すぎてチームユースには向いてなさそう。"t-t:u"とか見ても何のことかわからん。
Tailwind CSS
PostCSS製で、デフォルトのスタイルもあるがカスタマイズも楽に行えるフレームワーク。
Tachyons
class名とCSS要素がほぼ1対1対応してるだけなのでわかりやすい。
CSSフレームワーク
Base
モバイルファーストのCSSフレームワーク。
Bulma
Flexboxベース。
Bootstrap 4
CSSフレームワーク界の大御所。
Concise
コアにはノーマライズとグリッドしか入ってなくて、それ以外は公式アドオンで追加対応。
Foundation
ドキュメントが動画だらけで鬱陶しい。
Material Design Lite (MDL)
Google製、マテリアルデザイン。
Metro UI
Windows8っぽいデザインが作れる。
Mini.css
7KBの軽量フレームワーク。
Mobi.css
モバイルファーストで2.6KBという超軽量フレームワーク。
Picnic
デフォルトでタグを装飾する。変更はSCSSで書き換え。
Pure.css
3.6KBと軽量。クラス名は全て"pure-"で始まり競合を抑えている。
Semantic UI
クラス名を自然言語に近づけたフレームワーク。
指定がclass="ui vertical animated button"。
Shoelace
次世代CSSで描かれた(リリース版はトランスパイルされてる)未来のCSSフレームワーク。
Spectre.css
比較的機能が多く、かつ軽量。
モバイル専用
Ratchet
ドキュメントがクッソ見難い。
CSSリセット
Eric Meyer's "Reset CSS" 2.0
最終更新が2011年という古代の遺物でありながら、未だに最強のCSSリセット。
Normalize
リセットではなくノーマライズ。ブラウザ間の差異吸収、HTML5対応。
sanitize.css
リセットではなく、開発者がこうあったらいいなと思ってるような初期化を行う。
トランスパイラ
pleeease.io
ベンダープレフィックスの追加、importのインライン化、minifyなどを行うCSSポストプロセッサ。
PostCSS & cssnext
PostCSSはCSSポストプロセッサを作るためのツールで、CSS構造をパースする(だけ)。
cssnextはPostCSSのプラグインで、まだブラウザに実装されていないCSSをブラウザが解釈できるCSSに変換する。
rework & myth
reworkはCSSプリプロセッサを作るためのツールで、CSS構造をパースする(だけ)。
mythは変数定義や計算などが書けるCSSプリプロセッサで、素のCSSに近く学習コストが低い。
リファレンス
CSS Cursors
CSSで使えるカーソルの一覧。
css3test.com
アクセスしたブラウザがCSS3をどれだけサポートしてるか見れる。
css3clickchart.com
CSSのソースとサンプル、ブラウザの対応状況が見れる。
cssreference.io
リファレンスガイド。
CSS Indexes - A listing of every term defined by CSS specs
W3CによるCSSの仕様書。
css4-selectors.com
CSS4のセレクタ。
css4 Rocks
css4-selectorsとだいたい同じ。
CSS TRIGGERS...A GAME OF LAYOUT, PAINT, AND COMPOSITE
CSSのプロパティ変更でどのトリガーが発動するかの一覧。
CSS Tricks Almanac
CSSの要素解説。
cssvalues.com
プロパティ名で検索して入る値と対応状況が一目で分かる。
MDN CSS Reference
Mozillaによるリファレンス。
CSS Cheat Sheet
よく使う要素のチートシート。
lint
CSS Lint
CSSのエラーをオンラインでチェック。
stylelint
CSSのエラーをコマンドラインでチェック。
整形
CSScomb
CSSを整形する。
CSSfmt
CSSやSCSSを整形し、トランスパイルもする。
最適化
clear-css
cleanの誤字が一年なおってない。
cssnano
不要なスペース等を削除し、構造最適化を行ってCSSを縮小する。
CSSO
オンラインで実行できる。
purgecss
HTML上で使われていないCSSを削除する。
オンラインで作れるCSSパーツ
CSS Arrow Please
ボックスの矢印。
CSS Matic
グラデーション、ボックス、ノイズ効果、ボックスシャドウ。
Enjoy CSS
非常に細かくエディットできるが、細かすぎて逆に使いづらい。
Flexbox Playground
404 Nof Found → 移転してる
flexplorer
Flexboxレイアウトをさくっと作れる。
patternify.com
タイルの背景を簡単に作れる。
patternizer.com
チェック柄の背景を簡単に作れる。
Ultimate CSS Gradient Generator
グラデーションパターン。プリセットが豊富。
CSS設計手法
Atomic Design
BEM
ITCSS
OOCSS
SMACSS
Scalable and Modular Architecture for CSS。
SUIT CSS
rscss
コーディング規約
CSS code guide
CSSコーディング規約。
css-architecture
8つのコーディングルール。
cssguidelin.es
スケーラブルCSSガイドライン。
Idiomatic CSS
一貫性のあるCSS。日本語訳。
MaintainableCSS
メンテナンスしやすいCSS。
Standards for Developing Flexible, Durable, and Sustainable HTML and CSS
HTMLとCSSのコーディングガイド。
Airbnb CSS / Sass Styleguide
Saasのコーディングガイド。日本語訳。
スタイルガイド
Frontify
ブラウザ上でスタイルガイドを作成できる。
SC5 STYLE GUIDE GENERATOR
SASSやPugでスタイルガイドを作成できる。
styleguide-generators
スタイルガイドジェネレータリンク集。
Catalog
Markdownでスタイルガイドを作成できる。
GitHubトレンド
https://github.com/trending?l=css&since=monthly
GitHubでCSS関連リポジトリの月間ランキング。
DOMツール
DOMライブラリ・フレームワーク
Bliss
jQueryほどではないが機能がそろっていて軽量。
jQuery
DOM操作の王者。
Zepto
ウィルス的なものに汚染されてる。
cash
jQueryからAjax系を削除しDOM操作部分だけに集中することにより軽量化した。
Umbrella JS
DOM操作、イベント、Ajaxまで揃えて3kbという超軽量ライブラリ。
DOMユーティリティ
Keypress
キーボード入力を検知するライブラリ。
Tether
ツールチップやダイアログを簡単に作れる。
clipboard.js
テキストをクリップボードにコピーする。
イベント
Keyboard Event Viewer
キーボード入力時に起きたイベントを一覧表示する。
DOMパフォーマンスツール
Chrome DevTools Timeline
ChromeのF12の使い方。
DOM Monster
サイトがどれだけ重いか調査してくれるブックマークレット。
リファレンス
Events
DOMイベント一覧。
DOM Browser Support
DOMのブラウザサポート状況一覧。
DOM Events Browser Support
DOMイベントのブラウザサポート状況一覧。
HTML Interfaces Browser Support
HTMLインターフェイスのブラウザサポート状況一覧。
MDN Document Object Model (DOM)
MDN Browser Object Model
MDN Document Object Model
MDN Event reference
Mozillaによる各リファレンス。
MSDN Document Object Model (DOM)
MicrosoftによるDOMのリファレンス。
DOM Polyfills
dom-shims
CustomEventなどのpolyfill。
Pointer Events Polyfill: a unified event system for the web platform
Pointer Eventsのpolyfill。
バーチャルDOM
jsdom
Node.jsでDOM操作する。
virtual-dom
ライブラリ内に仮想DOMを持っておき、差が出たときに必要な部分だけ再描画するという、どこかで聞いたことがあるようなライブラリ。
JavaScriptツール
JSユーティリティ
accounting.js
小数点以下、通貨など数値のフォーマット。
async
非同期リクエスト。ググラビリティ低い。
axios
ほぼjQuery.ajax()。
chance
ランダムな文字列、数値を生成するジェネレータ。
date-fns
日時操作。地雷回避用。
format.js
国際化ライブラリ。
immutable
Immutableなオブジェクトが作れる。
is.js
is.boolean()とかis.null()とかis.undefined()とか。
lodash
underscore.js互換でさらに高機能。
Luxon
ImmutableなDateTime。
Math.js
行列計算など数学関数ライブラリ。
Moment.js
日時操作。多言語対応。
Numeral.js
文字列と数値をいいかんじに相互変換する。
Ramda
関数型っぽく書けるようになる。
RxJS
リアクティブプログラミングっぽく書けるようになる。リアクティブの利点は未だにわからない。
string.js
文字列操作ライブラリ。
voca
string.js対抗馬。
wait
10秒待って的なやつ。
xregexp.com
正規表現エンジン。
トランスパイラ
要するにPHP7とかPHP8で書いたソースをPHP5に変換するみたいなもの。
Babel
ES6で書いたJavaScriptをES5に変換する。
TypeScript
JavaScriptに型やクラスなど多くの機能を追加した上位互換言語。
Flow
Facebook製TypeScript。
コード解析
Tern
JavaScriptで書かれたJavaScriptコード解析エンジン。
Linting/Hinting & Style Linter
eslint
JavaScriptの静的コード検証ツール。
ユニットテスト
AVA
並列実行、ファイル更新時に自動実行などができる自動テスト。
Jasmine
ビヘイビア駆動開発ツール。
Mocha
非同期テスト。
Tape
ググラビリティ低すぎる。
ユニットテストのアサーションライブラリ
Chai
なぜか必ずMochaとセットで出てくる。
expect.js
expect().toでなんでも書ける。
should.js
名前のわりにnotも書ける。
ユニットテスト用のモック・スタブ
sinon.js
スタブモジュール。
Kakapo.js
サーバ側をエミュレートする、バックエンドのモック。
コードフォーマッタ
esformatter
JavaScriptをコマンドラインで自動整形。
js-beautify
JavaScriptをオンラインで整形。
jsfmt
JavaScriptをコマンドラインで自動整形、および置換などもできる。
prettier
TypeScriptやSCSS等をはじめ、プラグインで他言語も対応できる。
パフォーマンステスト
benchmark.js
実行時間を簡単に計れる。
jsperf.co
benchmark.js製、結果をオンラインで確認できる。
コードカバレッジ
Coveralls
GitHubに"coverage 100%"って表示できる。
Esprima
ECMAScriptの構文解析器。
istanbul
ブラウザ、コマンドライン両対応で、カバレッジ結果の表示用HTMLも作ってくれる。
最適化
Closure Compiler
デッドコード削除、関数展開などの最適化。
UglifyJS 2
空白除去。オプションで構文解析もやってくれる。
optimize-js
!function (){}()を!(function (){})()にする。これだけで1～2割高速化するらしい。
Prepack
計算可能な部分を先に計算して高速化する。
難読化
Javascript Obfuscator
コードをかなりわかりにくくする。暗号化ではないので読めないこともない。
JScrambler
ログイン必須で詳細不明。
オンラインエディタ
es6fiddle.net
An error occurred in the application and your page could not be served.
jsbin.com
オンラインエディタ。
jsfiddle.net
オンラインエディタ。
オンライン正規表現ツール
debuggex
正規表現の構文解析ツリーを表示してくれる。
regex101
メタキャラクタを解説してくれる。
regexper
構文解析ツリーを表示・画像ダウンロードできる。
RegExr
行末の$が改行にマッチしない。
コンベンションツール
Airbnb's ESLint config, following our styleguide
AirbnbスタイルのESLintコンフィグ。
Standard - ESLint Shareable Config
一般的なESLintコンフィグ。
GitHubトレンド
https://github.com/trending?l=javascript&since=monthly
GitHubでJavaScript関連リポジトリの月間ランキング。
NPMトレンド
https://www.npmjs.com/browse/depended
npmで他のパッケージから一番依存されてるライブラリ。
静的サイトジェネレータ
こんなの使うよりGulpかnpm scriptsを使ったほうがいいぜ、と脚注に書かれている。
staticgen.com
静的サイトジェネレータのランキング、解説付き。
staticsitegenerators.net
静的サイトジェネレータのGitHubスター数ランキング。
Metalsmith
静的サイトジェネレータ。
アクセシビリティ
ガイド
A11Y Style Guide
具体的なサンプル付きのアクセシビリティスタイルガイド。
Accessibility Guidelines Checklist
チェックリスト。
Interactive WCAG 2.0
W3Cによる勧告。長すぎてつらい。
18F Accessibility Guide
WCAGを元にした詳細解説とサンプル。
サイトスキャン
aXe Browser Extension
アクセシビリティをブラウザで確認できるChrome/Firefoxプラグイン。
Chrome Accessibility Developer Tools
Google製のChromeプラグイン。
Tenon Accessibility Tool
入力したURLのアクセシビリティを確認してくれる。
WAVE Accessibility Tool
入力したURLのアクセシビリティを確認してくれる。
カラーコントラスト
Colorable
テキスト色/背景色が問題ないかブラウザ上で確認できる。
Colorable Matrix
↑がたくさん。
Color Safe
背景色を指定すると、それに使ってよい文字色を一覧表示する。
Color Ratio
CSS色でコントラスト比を確認可能。
視力
SEE (Chrome)
視覚障害をシミュレート。
Spectrum (Chrome)
色覚障害をシミュレート。
NoCoffee (Chrome)
低視力をシミュレート。
読み上げ
VoiceOver (Mac)
Macの音声読み上げ機能。
JAWS (Win)
Windows用音声読み上げ無償ソフトウェア。
NVDA (Win)
Windows用音声読み上げ無償ソフトウェア。
Window-Eyes (Win)
Windows用音声読み上げ有償ソフトウェア。
ChromeVox (Chrome extension)
Chrome OS用音声読み上げ機能。
Basic screen reader commands
Jaws、Narrator、NVDA、VoiceOverのキーボードショートカット一覧。
可読性
Expresso App
読みにくいテキストを指摘するツール。わーい！
Hemingway App
長文や複雑な文を平易化する。すごーい！
Grammarly
Chromeエクステンション。たっのしー！
Readability Score
読みやすさをスコア表示する。 ふっしぎー！
MS Office
OutlookとWordの読みやすさ機能。おもしろーい！
よみもの
Getting Started with ARIA
ARIAの解説記事。
Reframing Accessibility for the Web
Webアクセシビリティとは。
An Alphabet of Accessibility Issues
アクセシビリティいろは歌。
Practical ARIA Examples
実践的ARIAのサンプル。
MDN Accessibility Guide
Mozillaによるアクセシビリティガイド。
Enable accessibility panel in Chrome dev tools
Chrome DevToolsの使い方。
フレームワーク
初心者はまずVueから初めて次にReact、その後Angular2/Ember/Aurelia等に行くとよい。
静的サイトなど小規模な場合はフレームワークは不要 (should avoid) で、jQueryとGulpで十分である。
と脚注に書いてある。
フロントエンド
AngularJS + Batarang
AngularJSおよび開発用Chromeエクステンション。
Angular + angular-cli
Angular (Angular2) および開発用コマンドラインツール。
Aurelia + Aurelia CLI
Aureliaおよび開発用コマンドラインツール。
Ember + embercli + Ember Inspector
Emberおよび開発用コマンドラインツールとChromeエクステンション。
Polymer
コンポーネント指向フレームワーク。
React + create-react-app + React Developer Tools
Reactおよび開発用ツール。
Vue.js + vue-cli & Vue.js devtools
Vue.jsおよび開発用ツール。
Riot
ハイブリッドアプリフレームワーク
ionic
AngularJSをベースにしたHTML5モバイルアプリ開発ツール。
onsen.io
AngularJS、React、Vue等に対応したHTML5モバイルアプリ開発ツール。
ハイブリッドアプリ開発ツール
Adobe PhoneGap
AdobeによるCordovaのパッケージング。
cocoon.io
ファルシのルシがコクーンでパージ。
ionic hub
ionicにリダイレクト。
kony
有償のため詳細不明。
Monaca
ローカル環境不要で、クラウドオンリーで開発できる。
デスクトップアプリ開発フレームワーク
Electron
HTMLでMac/Windows/Linuxデスクトップアプリを作れる。
NW.js
既存Webサイトを簡単にアプリ化できる。
JavaScriptネイティブアプリ
Flutter
WebViewやブラウザエンジンを使わずに、ネイティブコードに変換して実行する。
NativeScript
TypeScriptでモバイルアプリを書ける。
React Native
Reactでモバイルアプリを書ける。
tabris.js
オンラインエディタで書いてQRコードで即確認できる。
trigger.io
月額5000円から、買い切り無し。
weex
公式サイトのフォーマットがどのアプリも似たり寄ったりなのは何故だろう。
リファレンス
todomvc.com
どのフレームワークを選べばいいかのガイド。
RealWorld example apps
比較のため、複数のフレームワークで全く同じサイトを作っている。
Frontend Guidelines Questionnaire
フロントエンドコーディングガイドラインについてのアンケート。
Frontend Guidelines
フロントエンドのコーディングガイドライン。
パフォーマンス
js-framework-benchmark
各フレームワークのパフォーマンス一覧。
Front-End Performance Checklist 2018
パフォーマンスに必要な能力・環境のチェックリスト。
ステート管理
Redux
ややこしすぎて挫折した。
Mobx
Reduxより使いやすいステート管理ツール。
mobx-state-tree
Mobxのステート管理をやりやすくする。
Cerebral
宣言的に書くステート管理ライブラリ。
freactal
Reactのステート管理ライブラリだが日本語情報皆無。
unistore
Preact作者によるPreact/Reactのステート管理ライブラリ。日本語情報はない。
Progressive Web App
lighthouse
PWAに必要な改善点を教えてくれるChromeエクステンション。
Progressive Web App Checklist
PWAに対応するためのチェックリスト。
GUI開発ツール
CodeKit
SassやTypeScriptやMarkdownやその他言語を全てまとめてコンパイルしてくれる。
Prepros
デバッガやビューア、ローカルサーバも内蔵したコンパイラ。
テンプレート・データバインディング
テンプレートエンジン
doT.js
<div>{{=obj.title}}</div>
art-template
<h1>{{title}}</h1>
Nunjuncks
<h1>{{ title }}</h1>
動的データバインディング
ractive.js
IE8以上で動く。
react.js
React。
riot
カスタムタグを作れる。
Rivets.js
MVCを分離しないテンプレートエンジン。
vue.js
Reactほど厳格ではなく、Reactよりさらに早い。
バーチャルDOM
JSX
JSXの仕様書。
UIツールキット
Webプラットフォーム
Kendo UI for jQuery
jQueryおよびJSフレームワークで使えるUIコンポーネント。
Materialize
マテリアルデザインのBootstrap。
Office UI Fabric
Officeっぽいデザイン。
Semantic UI
クラス名に英単語を用いるデザイン。
UiKit
CSSフレームワーク。
Webix
サンプルサイトのソースも公開していてわかりやすい
React専用
Ant Design
Alibaba製UIデザインライブラリ。
Material ui
マテリアルデザイン。
Semantic-UI-React
ドキュメントが見えなくなる。
ExtReact
Ext JSのReact対応版。
Fabric
Office365で使われてるUIライブラリ。
NW.jsとElectron用
Photon
ElectronのUIライブラリ。
React UI Components for OS X El Capitan and Windows 10
NW.jsとElectronに対応。
ビジュアライズ
JavaScript
d3
多種多様すぎて何でもできるグラフィックライブラリ。
sigmajs
仲良しマップがつくれる。
Widgets & Components
amCharts
色々なチャートグラフ。
AnyChart
高速で高精細、非営利無償。
C3.js
D3のグラフを使いやすくラッピング。
Chartist-jsj
グラフをアニメーションできる、SVG対応。
Chart.js
シンプルなチャート。
Epoch
リアルタイムに更新されるチャートが得意。
FusionCharts
色々なグラフが簡単に作れる、有償。
Google Charts
たぶん一番有名なやつ。
Highcharts
IE6対応、非営利無償。
ZingChart
グラフ多種、有償だがウォーターマーク表示で無償使用可能。
サービス
ChartBlocks
Datawrapper
infogr.am
plotly
オンラインチャート作成、何れもログイン必須。
グラフィックツール
汎用
Fabric.js
canvasタグをオンライン操作可能にする。
Two.js
2D図形やアニメーションを簡単に作成できる。
Canvas
EaselJS
CreateJSの一機能。canvasを自由に操作。
Paper.js
ベクタグラフィックス、ベジェ曲線などを扱う。
SVG
d3
多種多様すぎるグラフィック表示。
GraphicsJS
図形を表示、インタラクティブ操作できる。
Raphaël
IE6などのレガシーブラウザで動く。
Snap.svg
Raphaël作者による後継ライブラリ。
svg.js
軽量、高速に動作するSVGライブラリ。
WebGL
pixi.js
WebGLでアニメーションを簡単に行える。
WebGL未対応ブラウザは自動的にcanvasフォールバック。
three.js
MMDを読み込める。いみがわからない。
アニメーションツール
CS・JavaScript
Animate Plus
JavaScriptアニメーションライブラリ。
Animate
CSSアニメーションライブラリ。Animate Plusとは特に関係ないようだ。
Anime.js
複雑なアニメーションを作れる。
Animista.net
オンラインでソースを生成してくれるので便利。
Dynamics.js
物理演算っぽい動きをさくっと作れる。
GreenSock-JS
高性能なアニメーションツール。
Kute.js
高機能で高パフォーマンス、変形処理が得意なようだ。
Magic
ちょっとした効果がすぐに付けられるCSSアニメーション。
Micron.js
要素をほんのちょっと動かすだけ、というマイクロなライブラリ。
Motion
モーショングラフィックスのライブラリ。
TweenJS
シンプルで多機能なアニメーションツール。CreateJSの一機能。
Popmotion
Three.jsなど別ライブラリに値を送り込むことも可能。
Velocity.js
jQueryの$.animate()を高速化したもののようだ。
Polyfills
web-animations-js
Web Animations APIのバックポート
リファレンス
canianimate.com
アニメーションできるCSSプロパティ。
JSON
オンラインエディタ
JSONmate
JSONの作成、整形、圧縮。
json.browse()
JAMstack。
フォーマッタ
jsonformatter.org
JSONの検証、XMLやCSVへの変換。
JSON Formatter & Validator
JSONの検証。
クエリツール
DefiantJS
JSONをXPathで検索する。
JSON Mask
JSONをXPathっぽい文法で検索する。
ObjectPath
JSONを正規表現っぽい文法で検索する。
JSONモック作成
JSON Generator
変数を使ってサンプル用JSONを作れる。
Mockaroo
JSON、CSV、SQLなど複数のフォーマットでダミーデータを作成できる。
巨大なデータは有償。
オンラインJSONモック作成
FillText.com
APIをGETするだけでモック完成。
FakeJSON
ダミーのJSONを返すサービス。
Jam API
SSL証明書が期限切れ。
JSONPlaceholder
値は決まってるダミーREST APIを提供。
jsonbin.io
CREATE、UPDATE、DELETEができるREST APIサーバ。
jsonbin.org
authorizationヘッダを使ってログインするダミーREST API。
mockable.io
ダミー用にモックサーバを作れる。
mockapi.io
ログイン必須。
Mocky
動作テスト用に引数でディレイをかけられる。
RANDOM USER GENERATOR
ダミーのそれっぽいユーザ情報を取ってこれる。
APIリスト
A collective list of JSON APIs for use in web development
公開APIのリスト。
ローカル
json-server
ダミーのREST API用ローカルサーバを立てる。
スキーマ
json-schema.org & jsonschema.net
JSONのスキーマ仕様と、JSONからスキーマを作成するサイト。
{json:api}
JSON APIの仕様。
ダミー・サンプル
画像
placehold.it
任意サイズのダミー画像。
Satyr
遅延ロード、色指定なども可能なダミー画像。
Placeimg
ダミー写真を適当に表示してくれる。
Lorem Pixel
ある程度のジャンル内で写真を適当に表示してくれる。
CSS-Tricks Image Resources
写真素材サイトリンク集。
LibreStock
写真素材サイトから画像を表示・取得できる。
Unsplash
色々な効果をつけられるダミー写真。
Place Beyoncé
仕事では使えないダミー写真。
スマホ・タブレット端末
placeit.net
写真のディスプレイに画像をはめ込み合成できる。
mockuphone.com
端末のみの写真に画像をはめ込み合成できる。
テキスト
Meet the Ipsums
ダミーテキスト。
catipsum.com
ランダムテキスト。
baconipsum.com API
ベーコンが好きすぎるランダムテキスト。
ユーザデータ
uinames.com
適当にユーザデータを作ってくれる。
randomuser.me
RANDOM USER GENERATOR。
テストツール
フレームワーク
Intern
次世代のテストフレームワーク、らしい。
Jest
Facebookによる主にReact用テストフレームワーク。
majestic
Jestのデスクトップアプリ用UI。
Enzyme
airbnb製Reactテストフレームワーク。
Cheerio
jQueryっぽいシンタックスのテストフレームワーク。
ユニットテスト
AVA
未来型テストランナー。日本語訳。
Jasmine
なんでも揃ってるテストフレームワーク。
Mocha
ビヘイビア駆動テストフレームワーク。
Tape
シンプルで小規模ながら並列同時実行できるテストフレームワーク。
アサーション
Chai
expect.js
should.js
アサーションライブラリ。
スタブ
sinon.js
スパイ。
Kakapo.js
バックエンドのスタブ。
ブラウザテスト
Browserling
BrowserStack
CrossBrowserTesting.com
Nightcloud.io
Sauce Labs
クロスブラウザで動作テストを行う。
機能テスト
Cypress cypress-react-unit-test
Enzymeと同じテストを実際のブラウザで行う。
Nightwatch
Node.js上でSelenium WebDriver APIを使ってブラウザテストを自動化するフレームワーク。
WebDriver.io
Node.js上でSelenium WebDriver APIを使ってブラウザテストを自動化するフレームワーク。
ブラウザ自動化
CasperJS
Nightmare
TestCafe
ブラウザ自動化。
UIテスト
gremlins.js
モンキーテスト。
Percy
前回のスナップショットから変更されたところを図示する。
BackstopJS
スナップショットを保存して比較ができる。
PhantomCSS
このプロジェクトはもはや維持されていない。
Ghost Inspector
ブラウザ操作を自動化する。
diff.io
定期的にスクリーンショットを撮り、差分をビジュアル表示する。有償。
デッドリンク
Monkey Test It
モンキーテスト、デッドリンク検出など。
データストレージ
AlaSQL
SQLでlocalStorageやxls等にアクセスできる。
Dexie.js
IndexedDBを使いやすくするラッパ。
LocalForage
localStorage構文でIndexedDBやWebSQLにアクセスできる。
LokiJS
Mongoっぽい構文でIndexedDbにアクセスできる。
Lovefield
SQLでIndexedDBにアクセスできる。
lowdb
lodash APIでアクセスできる簡易的なDB。
Pouchdb
サーバ側のCouchDBと同期できるDB。
NeDB
Node、NW.js、Electronなどに組み込めるMongoDBっぽいDB。
RxDB
オンライン時に勝手に同期してくれるDB。
バンドルツール
15k行以下ならParcel、それ以上ならWebpack、npmパッケージならRollupを使うとよい、と脚注に描かれている。
Parcel
簡易版webpack、設定ファイルが無いかわりに細かい設定ができない。
Rollup
webpackのすごいやつ。
Microbundle
設定書かなくてもいいかんじに動くようにするRollupのラッパー。
webpack
TypeScriptとかCoffeeScriptとかその他色々なファイルをまとめてブラウザで動くJavaScriptにする。
http://www.webpackbin.com/
Fusebox
新しめのバンドルツール、デフォルトでTypescriptに対応。
Browserify
webpackのふるいやつ。
リポジトリ
NPM
Node.js用リポジトリ。
yumとかcomposerの同類。
yarn
NPMの上位互換。早い。
PNPM
npm installとかそんな頻繁に使うものでもないしどうせコマンド打ったら放置して別のことするんだから速度とか気にする必要なくね？
ホスティングサービス
汎用
AWS
Amazon Web Service。
DigitalOcean
Amazon EC2みたいなやつ。
WebFaction
日本ではあまり有名ではないようだ。
静的コンテンツ
Firebase Hosting
netlify
Surge
Forge
好きなところ選べばいいんじゃないかな。
ローカル
Localname
Mac専用。
コードホスティング
Assembla
Subversion/Perforce/Gitに対応。
Bitbucket
Gitリポジトリ。無料プランでも無制限非公開可能。
Codebase
Gitリポジトリ。非公開1プロジェクト無料。
Github
一番有名なやつ。公開プロジェクト無料。
GitLab
GitHubと同じところかと思ってた。
Unfuddle
2006年からやってる老舗のようだが日本ではマイナー。
コミュニケーションツール
Slack & screenhero
screenheroはSlackに統合された。
appear.in
ビデオチャット。会員登録もアプリインストールも不要。
Mattermost
自サーバに立てられるオープンソースのSlackクローン。
GitHub
Gitter
チャット。Githubリポジトリ単位でルームを作れる。
コンテンツマネジメント
API CMS
Contentful
JSON API専用コンテンツサーバ。
prismic.io
多言語対応のコンテンツ管理サーバ。
Headless
"Headless CMS"が一般名称すぎてググラビリティがゼロ。
セルフホスティング
Cockpit
虫みたいなのうぞうぞ動かすのやめろ。
CMS
LightCMS
日本ではマイナーなCMS。
Surreal CMS
あゆで一番好きな曲はSURREALです。
静的CMS
webhook.com
Dato CMS
siteleaf
forestry.io
どこもかしこも同じ見た目ばっかりなのは何故なのか。
BaaS
BaaS
Back&
BaaS以外にFaaS、SECaaS、iPaaSにも対応。もはや略語の意味が分からない。
Backendless
モバイル用にPUSH通知や位置情報等に対応。
Firebase
データベースのリアルタイム同期機能。
Pusher
チュートリアルが丁寧で、従うだけでアプリが何本かできる。
restdb.io
ロールベースアクセス制御のNoSQL。
MongoDB Stitch
MongoDB公式のBaaS、まだβ版。
データ
GraphQL
SQLを書けるPOSTリクエスト。
Apollo
既存コードの上にGraphQL用エンドポイントを被せるラッパー。
Relay
ReactでGraphQLを使いやすくする。
Falcor
GraphQLと同じようなもの。
RxDB
オフラインで使えてオン時に自動同期するDBアダプタ。
ユーザマネジメント
Auth0
サイトトップが何故かAdBlockで死ぬ。
AuthRocket
何故かJavaScript、RoR、PHPしかライブラリがない。
Okta
企業向けIDaaS。ポータルから各サイトにSSOできる。
検索
Algolia
サイトに設置する検索ボタンを提供するサービス。
オフラインツール
Hoodie
ローカルDBに突っ込んでおけば後で勝手にサーバに転送してくれる。
Offline.js
オフライン時のAJAXリクエストをキャプチャし、オンライン復帰時にリクエストする。
PouchDB
オフライン時にはローカルに保存し、オンライン時に自動同期するデータベース。
upup
オフラインになったときに恐竜を出さずに自動的に別のコンテンツを表示する。
セキュリティツール
コーディングツール
DOMPurify
DOM、HTML、MathMLテキストからXSSコードを排除。
XSS
HTMLテキストからXSSコードを排除。
セキュリティ
Netsparker
Webサイトをスキャンし、XSSやSQLInjection等の脆弱性をがないか調査する。
Websecurify
様々なセキュリティツールの詰め合わせ。
OWASP ZAP
OWASP製のWebアプリ脆弱性診断ツール。
リファレンス
HTML5 Security Cheatsheet
脆弱性チートシート。
ビルドツール
ビルドツール
Gulpを使う前にWhy I Left Gulp and Grunt for npm Scriptsを読むとよい、と脚注に書いてある。
Gulp
Gulp。
Opinionated Tasking/Build pipeline tools:
Brunch
より簡単な設定で高速にビルドできる。
デプロイツール
Bamboo
ビルド、テスト、デプロイを自動化。
Buddy
Web上からビルド、デプロイの操作を行える。
CircleCI
GitHubでcircleci:passingって出るやつ。
Codeship
GitHubでcodeship:passingって出るやつ。
Deploybot
GitHubにpushしたら自動でデプロイされる。
Deployhq
GitHubにpushしたら自動でFTP/SSH等の別サーバにアップしてくれる。
FTPLOY
BLOGが404。
Now
デプロイするたびに固有のURLが作成されるので、過去にすぐ戻れる。
Travis CI
GitHubでbuild:passingって出るやつ。
Semaphore
GitHubでBUILD STATUS:PASSEDって出るやつ。
Springloops
ドキュメントのリンク先がBuddyになってるんだがなんでだ？
モニタリングツール
死活監視
Monitority
サーバの反応がなかったらメールを送る。URL数無制限で無料。
すぐ死にそうだと思ったが意外と続いている。
Uptime Robot
URL50まで無料。メール、Twitter、PUSH通知などに遅れる。
汎用モニタリング
Pingdom
死活監視、応答時間や容量のチェックなど。
New Relic
パフォーマンス監視。アプリケーション、SQL、外部API呼び出しなど詳細に分析できる。
Uptrends
Chrome、IE、PhantomJSの3ブラウザでアクセスしてパフォーマンス等を比較できる。
JavaScriptエラーレポーティングツール
bugsnag
エラーが発生したらGitHubにIssueを作成したり、ログをビジュアル表示したりする。
errorception
スニペットをコピペしておくだけで、JavaScriptのエラーを収集できる。
Honeybadger
ElixirとかCrystal等の珍しい言語に対応してる。
Raygun
19言語対応、通知先も30近く設定可能。
Rollbar
公式で30+コミュニティで17言語以上対応、通知先もたくさん。
Sentry
throwするだけで勝手にSourceMapから整形してくれる。
TrackJS
console.log()の出力をキャッチする。
パフォーマンスツール
レポート
bundlephobia.com
アクセスできなかった。
GTmetrix
サイトの表示速度をAからFのランクで評価。
sitespeed.io
レスポンスタイムやレンダリング速度の測定、HTMLとして表示してくれる。
Speed Curve
計測結果のビジュアライズ表示、過去の計測結果との比較など。
Web Page Test
どのくらい快適に表示されるかをA～Fで教えてくれる。
Sonarwhal
速度以外に文法も細かくチェックされる。
Datadog
ドキュメントがちゃんとした日本語対応してる。
JavaScriptツール
imagemin
gulp-imageminの中身。
ImageOptim-CLI
ImageOptim、ImageAlpha、JPEGmini for Macをコマンドラインから使えるようにする。
スペック
performancebudget.io
読み込み時間を保つには、1ページの容量をどれくらいに抑えないといけないかを計算。
リファレンス
Jank Free
パフォーマンスを追求するための資料集。
Performance of ES6 features relative to the ES5
ES6でどれだけ早くなるかのパフォーマンス一覧。
チェックリスト
The Front-End Checklist
全89項目。
Front-End Performance Checklist 2018
全33項目。
ツールを見つけるためのツール
built with
そのWebサイトが何で作られているかを表示する。
frontendtools.com
このFront-End Dev Toolsと似たようなかんじ。
javascripting.com
JavaScriptライブラリのリスト。
登録条件はGitHubで☆80以上。
js.coach
ReactとかBabelあたり中心のJavaScriptライブラリ集。
JSter
JSwikiの精神的後継。毎月ニュースレターを発行しているので最新動向がわかる。
microjs.com
約5kb以下に限定したライブラリ集。
npms
npmライブラリのもっと細かい情報を確認できる。
stackshare.io
現在のトレンドとなっているライブラリを見れる。
Unheap
主にjQueryプラグインのライブラリ集。
bestof.js.org
GitHubの日別☆増加数ランキング。対象リポジトリはタグから取得ではなく手動追加のようだ。
感想
長い。
React自体は好きでも嫌いでもないが、信者が嫌い。
必要なのは、それぞれのツールの名前や使い方を覚えることではなく、『選択肢が存在するという事実』を知っておくことです。