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


コーダーが抑えておきたいコーディングのツール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ライクな書き方ができるため、使いやすいです。

4. スタイルガイド

front-tools-styleguide
Webサイト上で使っているモジュールの一覧ページのことです。
これがあれば、複数人での作業や運用の効率が格段に上がることでしょう。
手打ちで頑張って作ってもいいですが、StyleDocco,KSS,Hologramといった自動生成ツールがあるので、こちらを使うのがよりいいでしょう。

ちなみに弊社では、フロントエンドチームリーダーこと林先生が自作した「FrontNote」を主に使用しています。

5. SVG・Webフォント

front-tools-webfont
SVG(Scalable Vector Graphics)は高解像度のデバイスで閲覧しても劣化しないベクター画像を表示する技術です。
また、イラストレーターで作成したアイコン画像などをSVG形式で保存し、それをWebフォント化することもできます。Webフォント化すれば色やサイズをCSSで変更できるので、扱いが楽です。

タスクランナーを用いるのが最も効率的なやり方ですが、それ以外ではIcoMoonというサービスを使う方法もあります。
こちらは操作が簡単なので慣れてない方にはオススメです。

6. CSS設計

front-tools-css
CSSをより体系立て、より構造化させて制作の効率とメンテンス性を向上させる考え方です。
時代が進むに連れて、Webサイト・アプリケーションは巨大化・複雑化してきました。そうなると、従来のCSSの書き方では対応できなくなってきたため、CSSを設計する技術が必要になってきました。

OOCSS, BEM, SMACSSなんかは特に有名なアプローチの方法論です!

7. バージョン管理システム

front-tools-ver
データを生成・編集する際の変更履歴を管理するためのツールです。最近最もよく使われるのはGitではないでしょうか。
GitHubやBitbucketなどのサービスと合わせて利用する機会が多いと思われます。
これがあれば、誤ってデータを消してしまった、他の人がいじったデータに上書きしてしまった、過去のデータを復活させたい、といったトラブルを解消できます。

ターミナルやコマンドプロンプトを用いて実行するのが一般的ですが、SourceTreeなどのアプリケーションを介したほうが操作性はいいと思います。

8. 仮想マシン

front-tools-virtual
仮想マシンを用いると、PC内に仮想環境を構築し、その中でさまざまなOSをインストールして操作することができるようになります。
例えば「Windows7のIE8でWebサイトの表示確認を行いたいが、それに該当するPCが手持ちにない」としましょう。
そんな場合でも、仮想マシンを用いれば「あなたのPC上でWindows7 OSの仮想環境を構築し、その中でIE8を立ち上げて確認する」ということが可能になります。

僕は仮想化ソフト「VirtualBox」と、仮想マシン「modern.IE」を使っています。
弊社の記事、「フロントエンド開発を裏から支えるデバッグアプリケーション4選」をご覧になると、より詳しい使い方がわかると思います。

参考にした書籍

今回の記事を書くにあたって、『現場のプロが教えるHTML+CSSコーディングの最新常識 知らないと困るWebデザインの新ルール4』を参考にさせていただきました。
今日ご紹介した内容を一気に身につけたい方は、ぜひ手にとってみてください!

まとめ

いかがだったでしょうか。
ちなみに、『現場のプロが教えるHTML+CSSコーディングの最新常識 知らないと困るWebデザインの新ルール4』には今回紹介した内容以外にも現場で使えるノウハウがいろいろ載ってます。
それでは、よきコーディングライフを!

 

【フロントエンドの情報を追うために】

フロントエンドエンジニアであり続けるために効率的に情報収集を行う方法

フロントエンドエンジニアがオススメするWeb技術の書籍5選

IT/Web業界を中心に勉強会・セミナー・イベントが探せるサービス6選

2013年厳選版!フロントエンドエンジニアがオススメするWEB系の技術書・指南書

Web制作者なら押さえておきたい「HTML5」「SEO」「SMO」に関する公式ドキュメントまとめ8選

この記事を書いた人

せいと
せいと フロントエンドエンジニア 2012年入社
最近フロントエンドエンジニアになりました。
第一回HTML5カルタ大会で優勝しました。
休日の過ごし方は、"Jazz Barでスコッチを片手に『世界の終りとハードボイルド・ワンダーランド』を読む"です。