本当はもっとやりたいことがある|デジハリ
本当はもっとやりたいことがある|デジハリ
2015.05.07

コーダーが抑えておきたいコーディングのツール8選

せいと

こんにちは。フロントエンドエンジニアのせいとです。

昨今ではWebのフロント周りを取り巻く環境が激変しています。
Webサイト・アプリケーションが進化するに連れて構築も難しくなってきましたし、技術やツールもいろんなものが登場しました。
そこで今回は、フロントエンドエンジニアはもちろん、コーディングに携わる人なら誰でも抑えておきたい、今旬な技術やツールを紹介したいと思います。

コーディングに関わる人なら抑えておきたい必須のフロント技術&ツール8選

1. タスクランナー

front-tools-taskrunner
フロントコーディングに関わるあらゆるタスクを自動化してくれる頼もしいツールです。Grunt,Gulpといったツールがコレにあたります。
JadeやSass,CoffeeScriptのコンパイル、画像圧縮、バリデーションチェック、webfontのアイコン化、スプライト画像生成、スタイルガイド生成などなど……。
そうした作業をまとめて処理してくれます。

個人的にはGulpを推します。Gruntよりもタスクの書き方がシンプルでわかりやすいので、カスタマイズしやすいです。

2. CSS拡張メタ言語

front-tools-meta
CSSを効率よく書くことのできる技術です。
Sass,LESS,Stylusといったツールがあります。
変数、関数、条件分岐、for文、each文など、従来のCSSではできなかった書き方でCSSを記述することができます。

ちなみに僕はSassを使用しています。理由は周りのクリエイターや取引先で浸透しているのがSassだから。あとSassの方が日本語のドキュメント多いから、あとSassの方がWebサイトがオシャレだから……!

3. テンプレートエンジン

front-tools-template
HTMLを効率よく書くことのできる技術です。
EJS,ECT,Jadeといったツールがあります。
SassやLESS同様、プログラミングのような書き方でHTMLを記述することができます。

ちなみに僕はEJSを使用しています。以前は最も実行速度が速いらしいECTを使っていましたが(ソースは忘れました)、ECTはエラー時に該当箇所がわかりづらいという問題がありまして……。
EJSはECTほどじゃないけどjadeよりも実行速度が速いらしく(ソースは忘れました)、またエラー時には該当箇所がわかりやすく、かつJavascriptライクな書き方ができるため、使いやすいです。

  • 1
  • 2