コーディング時によく使うツール一覧

私がコーディング時によく使うツールを紹介します。

もし「こんなツールもあってよく使っているよ。」というのがあれば教えてください!

autoprefixer

Autoprefixer is a PostCSS plugin which parses your CSS and a…

nodeでautoprefixerを使っていたが、node.jsを使わないケースでこれを使いたいと感じて探したらツールも提供していた。
指定したバージョンに対応したCSSを出力してくれる便利ツール。
サポートしているブラウザやOSの設定値を入れるだけでブラウザ崩れを最小限にできる。

Placehold.jp

簡単!ダミー画像生成、モックアップ用画像作成ツール。文字やサイズ、メモを入れた仮の画像を簡単に作成できます。…

プロトタイプ作成時に、一旦ダミーのURLを設定したい時に利用。
https://placehold.jp/150×150.png
と設定すると、150×150の画像が出力されるので便利。

Can I use

言わずとも知れたツール。
cssやjavascriptの構文がどのブラウザ、OSのバージョンまで対応されているかを確認できるツール。
自分が作成したコードに対して、怪しいと思ったらまず確認する。
通常使わないコードを利用した時もチェック

W3C Markup Validation Service

W3C's easy-to-use markup validation service, based on …

HTMLのタグチェックツール。
ページを作成したら絶対これを通してから納品する。

tinypng

Free online image compressor for faster websites! Reduce the…

画像圧縮ツール。
圧縮してもあまり画像が粗くならない印象。
画質を超細かく気にするケースでなければ、まずここに入れると軽量化できる。

eslint

A pluggable and configurable linter tool for identifying and…

javascriptの構文チェックツール。
eslintをGUIでチェックできる。
nodeなど使っていないケースではここを通すと良い。
余計なエラーも出るのでそこは無視する。

Unused CSS

jitbit.com

This tool recursively crawls your website and finds unused C…

サイトURLを指定すると、使われていないCSSを抽出してくれる。
ただ、実際はこのページだけのために使っているCSSファイルな訳ないので、使えるケースは多くない。