こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。
昨今ではWebのフロント周りを取り巻く環境が激変しています。
Webサイト・アプリケーションが進化するに連れて構築も難しくなってきましたし、技術やツールもいろんなものが登場しました。
そこで今回は、フロントエンドエンジニアはもちろん、コーディングに携わる人なら誰でもおさえておきたい、今旬な技術やツールを紹介したいと思います。
コーディングに関わる人ならおさえておきたい必須のフロント技術＆ツール8選
1. タスクランナー
フロントコーディングに関わるあらゆるタスクを自動化してくれる頼もしいツールです。Grunt,Gulpといったツールがコレにあたります。
JadeやSass,CoffeeScriptのコンパイル、画像圧縮、バリデーションチェック、webfontのアイコン化、スプライト画像生成、スタイルガイド生成などなど……。
そうした作業をまとめて処理してくれます。
個人的にはGulpを推します。Gruntよりもタスクの書き方がシンプルでわかりやすいので、カスタマイズしやすいです。
- Grunt – The JavaScript Task Runner
- gulp.js – the streaming build system
2. CSS拡張メタ言語
CSSを効率よく書くことのできる技術です。
Sass,LESS,Stylusといったツールがあります。
変数、関数、条件分岐、for文、each文など、従来のCSSではできなかった書き方でCSSを記述することができます。
ちなみに僕はSassを使用しています。理由は周りのクリエイターや取引先で浸透しているのがSassだから。あとSassの方が日本語のドキュメント多いから、あとSassの方がWebサイトがオシャレだから……！
- Sass – Syntactically Awesome Style Sheets
- LESS – The Dynamic Stylesheet language
- Stylus – expressive, robust, feature-rich CSS preprocessor
3. テンプレートエンジン
HTMLを効率よく書くことのできる技術です。
EJS,ECT,Jadeといったツールがあります。
SassやLESS同様、プログラミングのような書き方でHTMLを記述することができます。
ちなみに僕はEJSを使用しています。以前は最も実行速度が速いらしいECTを使っていましたが（ソースは忘れました）、ECTはエラー時に該当箇所がわかりづらいという問題がありまして……。
EJSはECTほどじゃないけどjadeよりも実行速度が速いらしく（ソースは忘れました）、またエラー時には該当箇所がわかりやすく、かつJavascriptライクな書き方ができるため、使いやすいです。
- EJS – JavaScript Templates
- ECT – Fastest JavaScript template engine with CoffeeScript syntax
- Jade – Template Engine
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
