フロントエンド開発の時によく使用するサービス一覧【コード整形・ダミーデータなど】
フロントエンドの開発時にESLintやPrettierなどのnpmパッケージを使うほど大きなプロジェクトではない（もしくは使うことができない）環境でも簡単に使用できるwebサービス一覧です。
コード変換
Prettier
jsのコードの整形を行なってくれるサービス。
TypeScript
TypeScriptのコードをJavaScript, .d.tsなどに変換を行ってくれるサービス。
Autoprefixer CSS online
dispaly: gridなどベンダープレフィックスの追加を行なってくれるサービス。
下の画像の Browserslist の部分の変更を行うことで対応のバージョンなどを変更することができる。
HTMLのコード整形ツール
HTMLのコードの変換を行なってくれるサービス。
CSSのコード整形ツール
CSSのコードの変換を行なってくれるサービス。
JavaScriptのコード整形ツール
JavaScriptのコードの変換を行なってくれるサービス。
css2stylus
cssからstylusの変換を行なってくれるサービス。
css2sass
cssからsass, scssの変換を行なってくれるサービス。 真ん中の青い矢印からSASS, SCSSの選択を行う。
Stylus Supremacy
stylusのコード整形を行なってくれるサービス。
html2pug
HTMLのコードをpugに変換を行なってくれるサービス。
BABEL
既存のES6などで書かれたJavaScriptをES5などに変換を行なってくれるサービス。
コードチェック
stylelint
cssのコードが適切に書かれているかの判定を行なってくるサービス。
ESLint
JavaScriptのコードが適切に書かれているの判定を行なってくれるサービス
ブラウザ・デバイスなどのチェック
CSS Media Queries Test
現在アクセスしているブラウザの横幅・高さ・hoverが適応しているかなどを見ることができるサービス。
UAParser.js
現在アクセスしているブラウザの種類・OS・Deviceを見ることができるサービス。
Browserslist
2020/10/27時点では停止中
上記のBABELやAutoprefixerなどを使う時に対象ブラウザで指定することができるサービス。 コマンドで調べたい場合、「Short-term solution」の部分にも記載されているが
$ npx browserslist "last 1 version, >1%"
で調べることができる。
2020/10/27時点でのlast 1 version, >1%の一覧は以下になります。
$ npx browserslist "last 1 version, >1%" and_chr 85 and_ff 79 and_qq 10.4 and_uc 12.12 android 81 baidu 7.12 bb 10 chrome 86 chrome 85 chrome 84 edge 86 edge 85 firefox 81 firefox 80 ie 11 ie_mob 11 ios_saf 14 ios_saf 13.4-13.7 ios_saf 13.3 ios_saf 12.2-12.4 kaios 2.5 op_mini all op_mob 59 opera 71 safari 14 safari 13.1 samsung 12.0
ダミーデータ
Placehold.jp
画像のサイズ・色などを指定して、仮の画像を作成することができるサービス。
ダミーテキストジェネレータ
文字サイズを指定して、仮の文章を作成することができるサービス。
