プリプロセッサーやタスクランナーなど、ここ数年さまざまなツールが登場しているWebのフロントエンド開発界隈。便利なツールでワークフローを効率化をしたいけど、複雑で難しそう…。そんなWeb制作者のためにツールの使い方を紹介する入門記事を紹介します。
1. ビジュアルテストでCSSの上書き、先祖返りを防ぐ
『やばっ！CSSの先祖返りで消耗したデザイナーにはビジュアル自動化テストがおすすめ』（WPJ）
CSSの修正でいつまにか先祖返りしていたり、追加したセレクターで上書きしてしまったりと、開発中や運用中にデザインが壊れてしまうことがあります。それを防ぐのが、ビジュアルリグレッションテスト。DOMやプロパティの値をチェックするのではなく、見た目の差分を教えてくれるPhantomCSSの紹介です。
2. いまからgulpを始める人へ
『gulp.js を今一度キチンと！gulp.js 導入基礎』（HAM MEDIA MEMO）
CSSやJavaScriptの圧縮などWeb制作での面倒な作業を自動化できるツールとして定番化したgulpの使い方を解説した記事です。Node.jsのインストールから丁寧に解説されています。
3. Webpackってなに？ が分かる解説記事
『Webサイト制作に役立つイマドキのアセット作成ツール！ 』（ICS MEDIA）
JavaScriptやCSS、画像、フォントなどのアセットを「モジュール」として扱い、JavaScriptとして出力するWebpack。取っつきにくいツールですが、非常にわかりやすく解説している記事です。
4. PostCSSでCSSの記述を効率化
『PostCSSとは何か』（morishitter blog）
SassやLessなどのプリプロセッサ—に対して、いま注目されているのがポストプロセッサー。PostCSSはJavaScriptで書かれたプラグインでCSSを変換するツールで、プラグイン次第でベンダープリフィクスを自動付与したり、使用策定中のCSSプロパティやバリューをブラウザーが解釈できるコードに変換したりと、さまざまな処理ができます。概要と使い方がコンパクトにまとまっている記事です。
5. PostCSSを使いこなすためのプラグイン入門
『PostCSSならCSSプリプロセッサーをもう乗り換え続けなくて済むかもよ！』（WPJ）
PostCSSのプラグインの追加方法とおすすめのプラグインを紹介しています。コードの圧縮やプリフィクスの付与など、実用的な7選です。
6. 最新仕様の先取りで効率化
『CSSの最新仕様はこんなにすごい！ PostCSSプラグインで未来を先取り』（＠IT）
W3Cが策定中のカスタムプロパティや、まだブラウザーに実装されていないために使えないプロパティ、バリューをサポートするプラグインを紹介しています。具体的なコード例つきなので参考になるでしょう。
7. IoT案件に取り組む前に読む
『もうすぐIoT案件がやってくる!?フロントエンド開発が備えたい5つの視点』（WPJ）
最後はこちら。IoTっぽいことを体験したあと、実際の仕事に生かしたくなった開発者へ知ってもらいたいことのまとめ。おもにフロントエンド開発者とデザイナー向けの内容ですが、目を通しておくとよいでしょう。
-->まとめ
いかがでしたか？ フロントエンド開発の効率化に役立つ記事をセレクトしてみました。ぜひ、チェックしてみてください。
