JavaScript
フロントエンド
エンジニア

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

可及的速やかに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

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

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

ImageOptimImageAlphaJPEGmini 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自体は好きでも嫌いでもないが、信者が嫌い。

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

  • プロトタイピングツール
  • ダイアグラム
  • ネットワークツール
  • エディタ
  • ブラウザツール
  • HTMLツール
  • CSSツール
  • DOMツール
  • JavaScriptツール
  • 静的サイトジェネレータ
  • アクセシビリティ
  • フレームワーク
  • ステート管理
  • Progressive Web App
  • GUI開発ツール
  • テンプレート・データバインディング
  • UIツールキット
  • ビジュアライズ
  • グラフィックツール
  • アニメーションツール
  • JSON
  • ダミー・サンプル
  • テストツール
  • データストレージ
  • バンドルツール
  • リポジトリ
  • ホスティングサービス
  • コードホスティング
  • コミュニケーションツール
  • GitHub
  • コンテンツマネジメント
  • BaaS
  • オフラインツール
  • セキュリティツール
  • ビルドツール
  • デプロイツール
  • モニタリングツール
  • JavaScriptエラーレポーティングツール
  • パフォーマンスツール
  • ツールを見つけるためのツール
  • 感想