って海の向こうの人が言ってました。
私は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
OOCSS
SMACSS
Scalable and Modular Architecture for CSS。
SUIT 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
PWAとは、ネイティブアプリっぽいWebアプリのことらしい。
フロントエンドアプリフレームワーク
lighthouse
PWAに必要な改善点を教えてくれるChromeエクステンション。
Progressive Web App Checklist
PWAに対応するためのチェックリスト。
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
アニメーションツール
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っぽい形でJSONから値を抽出。
ObjectPath
正規表現っぽい形でJSONから値を抽出。
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
ImageOptim、ImageAlpha、JPEGmini 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プラグインのライブラリ集。
感想
長い。
どこもかしこも同じ見た目なのは何故なのか。