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

  • 1376
    いいね
  • 4
    コメント

って海の向こうの人が言ってました。
私はjQueryさえあれば概ね生きていけるので全然知らないけど、
あなたは全部知ってるフロントエンドエンジニアなんだね。すごーい!

以下はFront-End Developer Handbook 2017の第三部、Front-end Developer Toolsからリンクされているツールと、その簡単な紹介です。

ドキュメントツール

Dash

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

DevDocs

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

Velocity

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

Zeal

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

SEOツール

Keyword Tool

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

Google Webmasters Search Console

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

Varvy SEO tool

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

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

SEO Tools - The Complete List

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

プロトタイピングツール

新規作成

Axure

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

Balsamiq Mockups

バルサミコ酢~

Justinmind

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

UXPin

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

改良・プレゼン

InVision

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

Conceptboard

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

myBalsamiq

バルサミコ酢~

ダイアグラム

draw.io

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

Cacoo

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

gliffy

draw.ioとほとんど同じ。

ネットワークツール

Charles

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

Chrome DevTools Network Panel

F12のこと。

Insomnia

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

Paw

MAC用。

Postman

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

エディタ

コードエディタ

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

Atom

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

Brackets

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

Sublime Text

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

WebStorm

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

Visual Studio Code

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

オンラインエディタ

Cloud9

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

Codeanywhere

ターミナルでsudoできる。

コード共有

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

CodePen

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

jsbin.com

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

jsfiddle.net

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

liveweave.com

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

Plunker

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

ブラウザツール

ブラウザの操作

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

HTML5 Please

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

HTML5 Test

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

iwanttouse.com

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

jscc.info

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

Platform Status

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

whatwebcando.today

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

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

Chrome Developer Tools (aka DevTools)

ChromeでF12を押せ。

Firefox Developer Tools

FirefoxでF12を押せ。

IE Developer tools (aka F12 tools)

EdgeでF12を押せ。

Safari Web Inspector

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

Vorlon.js

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

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

Feature.js

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

Modernizr

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

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。旧platform.js。

webshim

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

テスト

Browserling

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

BrowserStack

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

CrossBrowserTesting.com

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

Nightcloud.io

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

Sauce Labs

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

ヘッドレスブラウザ

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

PhantomJS

WebKit。

SlimerJS

Gecko。

TrifleJS

Trident。

Zombie.js

Node.js。

ブラウザ自動化

CasperJS

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

Nightmare

簡単に自動テストを書けるテストフレームワーク。
Electronでできているらしい。

TestCafe

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

ブラウザハック

browserhacks.com

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

HTMLツール

HTMLテンプレート

dCodes

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

Email-Boilerplate

HTMLメールの定型文。

HTML5 Boilerplate

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

HTML5 Bones

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

Mobile boilerplate

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

Web Starter Kit Boilerplate & Tooling for Multi-Device Development

Google製。

HTML Polyfill

html5shiv

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

トランスパイラ

HAML

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

Pug

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

Markdown

Redmine等で使われる記法。

リファレンス

Element attributes

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

Elements

HTMLタグ一覧。

HTML Arrows

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

HTML Entity Lookup

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

HTML Interfaces Browser Support

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

lint

HTMLHint

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

html-inspector

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

最適化

HTML Minifier

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

オンライン生成ツール

tablesgenerator.com

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

コーディングガイド

HTML Code Guide

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

Principles of Writing Consistent, Idiomatic HTML

HTML5のみ。

ワークフロー

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フレームワーク

PC+スマホサイト用

Base

軽量CSSフレームワーク。

Basscss

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

Bulma

Flexboxベース。

Bootstrap 3 or Bootstrap 4

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

Concise

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

Foundation

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

Material Design Lite (MDL)

Google製。

Metro UI

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

Picnic

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

Pure.css

Yahoo製。軽量。

Semantic UI

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

Skeleton

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

Spectre.css

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

tachyons

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

モバイルサイト用

Ratchet

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

CSSリセット

Eric Meyer's "Reset CSS" 2.0

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

Normalize

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

トランスパイラ

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

pleeease.io

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

PostCSS & cssnext

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

rework & myth

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

Sass/SCSS

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

Stylus

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

リファレンス

css3test.com

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

css3clickchart.com

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

cssreference.io

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

CSS Indexes - A listing of every term defined by CSS specs

W3Cの仕様書。

css4-selectors.com

CSS4のセレクタ。

css4 Rocks

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

CSS TRIGGERS...A GAME OF LAYOUT, PAINT, AND COMPOSITE

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

CSS Tricks Almanac

CSSの要素解説。

cssvalues.com

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

MDN CSS Reference

Mozillaによるリファレンス。

lint

CSS Lint

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

stylelint

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

整形

CSScomb

CSSを整形する。

CSSfmt

CSSやSCSSを整形する。

最適化

clear-css

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

cssnano

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

CSSO

重複してる内容をまとめたりと構造最適化まで行ってくれる。

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

CSS Arrow Please

矢印を描くCSS。

CSS Matic

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

Enjoy CSS

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

Flexbox Playground

flexplorer

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

patternify.com

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

patternizer.com

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

Ultimate CSS Gradient Generator

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

CSS設計手法

Atomic Design

アトミックデザイン

BEM

Block、Element、Modifier。命名規則。

ITCSS

逆三角形CSS

OOCSS

オブジェクト指向CSS

SMACSS

Scalable and Modular Architecture for CSS

SUIT CSS

コンポーネント指向CSS

rscss

アイデア集

コーディング規約

CSS code guide

CSSコーディング規約。

css-architecture

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

cssguidelin.es

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

Idiomatic CSS

日本語訳

MaintainableCSS

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

Standards for Developing Flexible, Durable, and Sustainable HTML and CSS

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

Airbnb CSS / Sass Styleguide

Saasのコーディングガイド。日本語訳

GitHubトレンド

https://github.com/trending?l=css&since=monthly

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

DOMツール

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

Bliss

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

jQuery

DOM操作の王者。

Zepto

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

cash

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

Umbrella JS

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

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互換でさらに高機能。

Math.js

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

Moment.js

日時操作。多言語対応。

Numeral.js

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

string.js

文字列操作ライブラリ。

underscore.js

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

voca

string.js対抗馬。

wait

10秒待って的なやつ。

xregexp.com

正規表現エンジン。

トランスパイラ

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

Babel

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

TypeScript

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

Flow

Facebook製TypeScript。

コード解析

Tern

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

JavaScript Compatibility Checker

jscc.info/

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

Linting/Hinting & Style Linter

eslint

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

Unit Testing

AVA

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

Jasmine

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

Mocha

非同期テスト。

Tape

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

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

Chai

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

expect.js

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

should.js

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

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

sinon.js

スタブモジュール。

Kakapo.js

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

コードフォーマッタ

esformatter

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

js-beautify

JavaScriptをオンラインで整形。

jsfmt

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

prettier

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

パフォーマンステスト

benchmark.js

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

jsperf.co

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

コードカバレッジ

Coveralls

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

Esprima

ECMAScriptの構文解析器。

istanbul

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

最適化

UglifyJS 2

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

optimize-js

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

難読化

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使ったほうがいいぜ。

staticgen.com

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

staticsitegenerators.net

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

Metalsmith

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

アクセシビリティ

ガイド

Accessibility Guidelines Checklist

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

Interactive WCAG 2.0

W3Cによる勧告。

18F Accessibility Guide

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

サイトスキャン

aXe Browser Extension

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

Chrome Accessibility Developer Tools

Google製。

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

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

よみもの

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

フレームワーク

フロントエンド

AngularJS 1 + Batarang

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

Angular 2 + angular-cli

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

Aurelia + Aurelia CLI

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

Ember + embercli + Ember Inspector

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

Polymer

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

React + create-react-app + React Developer Tools

Vue.js + vue-cli & Vue.js devtools

Riot

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

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

ionic

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

onsen.io

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

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

Adobe PhoneGap

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

AppBuilder

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

cocoon.io

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

ionic hub

ionicにリダイレクト。

kony

有償のため詳細不明。

Monaca

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

Taco

死亡確認。

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

Electron

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

NW.js

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

任意のプラットフォーム

manifoldJS

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

JavaScriptネイティブアプリ

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

NativeScript

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

React Native

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

tabris.js

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

trigger.io

有料、買い切りなし。

weex

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

リファレンス

todomvc.com

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

Frontend Guidelines Questionnaire

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

Frontend Guidelines

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

パフォーマンス

js-framework-benchmark

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

Progressive Web App

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

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

lighthouse

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

Progressive Web App Checklist

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

Scaffolding

Slush

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

Yeoman

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

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

Browsersync

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

CodeKit

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

Prepros

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

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

テンプレートエンジン

doT.js

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

Handlebars

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

Nunjuncks

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

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

Deku

バーチャルDOM。

jquerymy.js

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

ractive.js

IE8以上に対応。

react.js

React。

riot

カスタムタグを作れる。

Rivets.js

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

vue.js

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

バーチャルDOM

JSX

JSXの仕様書。

t7

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

UIツールキット

Webプラットフォーム

Bootstrap 3 or Bootstrap 4

Bootstrap。

Kendo UI for jQuery

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

Materialize

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

Office UI Fabric

Officeっぽいデザイン。

Semantic UI

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

UiKit

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

Webix

DataTableが有償。

React専用

Ant Design

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

Material ui

マテリアルデザイン。

Semantic-UI-React

セマンティックUI。

NW.jsとElectron用

Photon

ElectronのUI。

React UI Components for OS X El Capitan and Windows 10

NW.jsとElectronに対応。

タッチデザイン

Framework7

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

Kendo UI Mobile

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

Ratchet

画面に全部入らないと表示されないっての最悪だからやめてほしい。

ビジュアライズ

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

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

グラフィックツール

General:

Fabric.js

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

Two.js

証明書が期限切れ。

Canvas

EaselJS

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

Paper.js

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

SVG

d3

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

GraphicsJS

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

Raphaël

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

Snap.svg

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

svg.js

軽量なライブラリ。

WebGL

pixi.js

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

three.js

MMDを読み込める

アニメーションツール

Animate

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

Anime

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

Dynamics.js

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

GreenSock-JS

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

Magic

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

TweenJS

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

Velocity.js

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

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

ObjectPath

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

JSONモック作成

JSON Generator

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

Mockaroo

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

オンラインJSONモック作成

FillText.com

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

Jam API

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

JSONPlaceholder

テスト用のダミー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

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

スキーマ

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

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

Karma

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

Jest

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

ユニットテスト

AVA

未来型テストランナー。日本語訳

Jasmine

Mocha

Tape

ここらへん重複。

アサーション

Chai

expect.js

should.js

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

スタブ

sinon.js

スパイ。

Kakapo.js

バックエンドのスタブ。

ブラウザテスト

Browserling

BrowserStack

CrossBrowserTesting.com

Nightcloud.io

Sauce Labs

クロスブラウザテスト。

ブラウザ自動化

CasperJS

Nightmare

TestCafe

ブラウザ自動化。

UIテスト

gremlins.js

モンキーテスト。

Percy

BackstopJS

PhantomCSS

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

Ghost Inspector

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

diff.io

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

デッドリンク

Monkey Test It

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

データストレージ

AlaSQL

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

Dexie.js

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

ForerunnerDB

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

LocalForage

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

LokiJS

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

Lovefield

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

lowdb

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

Pouchdb

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

NeDB

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

YDN-DB

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

バンドルツール

Browserify

webpackのふるいやつ。

Rollup

webpackのすごいやつ。

SystemJS

webpackの同類。

webpack

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

リポジトリ

NPM

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

yarn

NPMの上位互換。早い。

ホスティングサービス

汎用

AWS

Amazon Web Service。

DigitalOcean

Amazon EC2みたいなやつ。

Heroku

git pushしたら公開される。

静的コンテンツ

Firebase Hosting

netlify

Surge

Forge

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

プロジェクトマネジメント

Assembla

Gitリポジトリ。非公開、無料。

Bitbucket

Pricingに何も表示されない。

Codebase

Gitリポジトリ。非公開1プロジェクト無料。

Github

一番有名なやつ。公開プロジェクト無料。

GitLab

GitHubと同じところかと思ってた。

Unfuddle

2006年からやってる老舗のようだが日本ではマイナー。

コミュニケーションツール

Slack & screenhero

screenheroはペアプログラミングに使える画面共有アプリ。Slack連携。

appear.in

ビデオチャット。会員登録もアプリインストールも不要。

Mattermost

自サーバに立てられるSlackクローン。

TeamViewer

多機能リモートデスクトップ、クロスプラットフォーム。

GitHub

Gitter

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

コンテンツマネジメント

API CMS

Contentful

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

Cosmic JS

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

prismic.io

公式サイトが超うざい。

elemeno

APIベースのCMS。詳細不明。

CMS

Cushy CMS

LightCMS

Page Lime

Surreal CMS

何れも日本ではマイナーなCMS。

静的CMS

webhook.com

Dato CMS

siteleaf

forestry.io

どこもかしこも同じ見た目ばっかりだな。

BaaS

BaaS

Back&

AngularJSやionicのバックエンドとして使えるようだ。

Firebase

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

Kinvey

SDK、ドキュメントなどが完備されていて導入しやすそう。

Pusher

なぜかサーバ側言語用のライブラリまで用意されてる。

restdb.io

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

データ

Horizon

RethinkDBの会社。

GraphQL

言語仕様にSQL入っているRESTみたいなの。

Falcor

GraphQLと同じようなもの。

RxDB

オフラインで使えてオン時に自動同期するDBアダプタ。

ユーザマネジメント

Auth0

TwitterやFacebook連携が1行で書ける。有料。

AuthRocket

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

Stormpath

Google、Facebook、LinkedIn、GitHub、Twitter対応。

UserApp

ドキュメントとサンプルが豊富。

オフラインツール

Hoodie

オフラインファースト。ググラビリティ低すぎて何も情報が出てこない。

Offline.js

オフライン時のAJAXリクエストをキャプチャし、オンライン復帰時にリクエストする。

PouchDB

オフライン時にはローカルに保存し、オンライン時に自動同期するデータベース。

upup

オフラインになったときに恐竜を出さずに自動的に別のコンテンツを表示する。

セキュリティツール

コーディングツール

DOMPurify

DOM、HTML、MathMLテキストからXSSコードを排除。

XSS

HTMLテキストからXSSコードを排除。

セキュリティ

Netsparker

Webサイトをスキャンし、XSSやSQLInjection等の脆弱性をがないか調査する。

Websecurify

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

リファレンス

HTML5 Security Cheatsheet

脆弱性チートシート。

ビルドツール

ビルドツール

Gulpを使う前に「Why I Left Gulp and Grunt for npm Scripts」を読むといいんじゃよー

Gulp

Gulp。

Broccoli.js

Gulpより早くて簡単、らしい。

Opinionated Tasking/Build pipeline tools:

Brunch

より簡単な設定でビルドできる、らしい。

Mimosa

規約を守ってコーディングすれば設定ファイルはほとんどいらない、らしい。

Lineman

Gruntのラッパー。

開発ツール

Bamboo

ビルド、テスト、リリースを自動化。

Buddy

ブラウザ上で開発。フロントはReact、バックエンドはNode、PostgreSQL。

CircleCI

GitHubでPASSEDって出るやつ。

Codeship

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

Deploybot

ビルド、デプロイ、ロールバックを誰でもできるように。

Deployhq

デプロイ前にどうなるかプレビューが見れる。

FTPLOY

デプロイ先がFTPオンリー。Absolutely!

Now

デプロイするたびに固有のURLが作成されるので、過去の状態をすぐに見れる。

Travis CI

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

Semaphore

GitHubでBUILD STATUS:PASSEDって出るやつ。

Springloops

ドキュメントがない。

モニタリング

死活監視

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とかGoにも対応してる。

Raygun

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

Rollbar

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

Sentry

エラー通知にOSやブラウザバージョンが入っていて、環境依存の問題が確認できる。

TrackJS

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

パフォーマンスツール

レポート

GTmetrix

サイトの表示速度をチェック。

sitespeed.io

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

Speed Curve

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

Web Page Test

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

JavaScriptツール

imagemin

gulp-imageminの中身。

ImageOptim-CLI

ImageOptimImageAlphaJPEGmini for Macをコマンドラインから使えるようにする。

スペック

performancebudget.io

回線とロード時間から、1ページにどれくらいの容量が使えるかを計算。

リファレンス

Jank Free

パフォーマンスを追求するための資料集。

Performance of ES6 features relative to the ES5

ES6でどれだけ早くなるかのパフォーマンス一覧。

チェックリスト

Front-End Performance Checklist 2017

全33項目。

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

built with

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

javascripting.com

JavaScriptライブラリのリスト。
GitHubで☆80以上が必要なようだ。

js.coach

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

microjs.com

約5kb以下に限定したライブラリ集。

npms

npmライブラリのもっと細かい情報を確認できる。

stackshare.io

現在のトレンドとなっているライブラリを見れる。

Unheap

主にjQueryプラグインのライブラリ集。

感想

長い。

どこもかしこも同じ見た目なのは何故なのか。