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

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

セイト

セイト

こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。

昨今では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ライクな書き方ができるため、使いやすいです。

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。

Webサイト制作の実績・料金を見る

この記事のシェア数

セイト
セイト Ex-President & VPoE at LIG Philippines. / 堀口 セイト

現在はミネルバ大学院に在籍しつつ、SNS総フォロワー数11万人を誇るエンジニアコンサルタントとして活躍中。 初代ポケモンで最初に選ぶならゼニガメ。でも本当に好きなのはフシギダネ。

このメンバーの記事をもっと読む