フィリピンと日本をつなぐ、新しい開発。
フィリピンと日本をつなぐ、新しい開発。
2015.05.07

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

セイト

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』を参考にさせていただきました。
今日ご紹介した内容を一気に身につけたい方は、ぜひ手にとってみてください!

まとめ

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

 

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

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

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

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

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

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

  • 1
  • 2