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

セイト

2015.05.07

4. スタイルガイド

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

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

FrontNote -Node.js StyleGuide Generator-
http://frontainer.com/frontnote/
StyleDocco
http://jacobrask.github.io/styledocco/
KSS · Knyle Style Sheets
http://warpspire.com/kss/
Hologram — Style Documentation Build System
http://trulia.github.io/hologram/

5. SVG・Webフォント

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

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

IcoMoon – Icon Font & SVG Icon Sets
https://icomoon.io/

6. CSS設計

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

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

OOCSS – Object Oriented CSS
http://oocss.org/
BEM – Block, Element, Modifier
https://en.bem.info/
SMACSS – Scalable and Modular Architecture for CSS
https://smacss.com/ja

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

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

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

GitHub – Build software better, together.
https://github.com/
Bitbucket – Atlassian
https://bitbucket.org/
SourceTree – Atlassian
https://www.atlassian.com/ja/software/sourcetree/overview

8. 仮想マシン

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