コーディングのスピードを上げる為の6つの方法

今より少しでもコーディングを早くできれば、細かいデザインや機能にも時間をかけて取り組めそう…という事で今回はコーディングのスピードを上げるためにできる事を紹介します。便利なツールを使ったり、ちょっとやり方を変えるだけでより早くコーディングができるようになると思います!


1. コーディング手順を簡略化する

コーディングの手順を簡略化

これは自分のコーディング能力を高めて手順を省く、便利なツールを使って手間を省くという事です。例えば私は昔このような手順でコーディングを進めていました。

  1. CSSのレイアウトをノートに書き出す
  2. レイアウト部分(ヘッダー・メイン・サイド・フッター)のHTMLマークアップ
  3. CSSでレイアウト部分のスタイリング
  4. 表示確認
  5. うまく表示できない箇所の修正
  6. ヘッダー内のHTMLマークアップ
  7. CSSでヘッダー内のスタイリング
  8. 表示確認
  9. うまく表示できない箇所の修正
  10. 6~9のように各部分のマークアップ・スタイリング・確認・修正
  11. 全部できたら他ブラウザーでの確認・修正

上の画像のように最初の「CSSのレイアウトをノートに書き出す」でIDやクラスの名前を決めておき、レイアウトをメモしておくと全体像が把握しやくなるので、初心者さんにはおすすめです。が、慣れてきたらメモを見ず、頭の中で組み立てていくと効率よく作業できます。また、画面分割機能を使ってコーディングと表示確認を同時に行うといちいちブラウザー画面に戻って確認する手間が省けるので、コーディングをより早く行えます。現在は下記のような手順でコーディングをすすめています。

  1. 全てのHTMLマークアップ
  2. 画面を分割し、表示確認をしながらCSSで一気にスタイリング
  3. 他ブラウザーでの確認・修正

コーディング手順の回数が劇的に減りました。これで全体的なコーディングのスピードを上げる事ができるでしょう。それではそれぞれの項目で、スピードを上げるために下記の方法を試してみてください。

2. Zen-Codingを使用する

ZenコーディングはHTMLやCSSをショートカットで簡略化してコーディングができるライブラリです。オーサリングソフト・エディタにプラグインとして導入して利用できます。Zenコーディングの詳しい使い方は「知らない人は損してる?コーディングが3倍速くなるZen-Codingを導入してみた」がわかりやすいです。

例えばこのように入力して…

div#header>ul#nav>li*4>a

展開させると…

<div id="header">
    <ul id="nav">
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
    </ul>
</div>

一気にコーディングできちゃいます。便利ですね!

3. コーディングの画面を分割する

Codaのインターフェイスデザイン

過去記事「DreamweaverからCodaに変えました」にあるように、私はCodaを使ってコーディングしています。CodaではHTML・CSSやプレビュー画面などを分割し、同時に見る事ができるので、コーディングをしながら表示確認をしたり、HTMLを見ながらCSSコーディングができてとっても便利です!DreamWeaverでもライブビュー機能で2分割できます。CodaはMac専用ソフトですが、Komodo Editというソフト(Win, Mac, Linux)でも画面分割機能がついている…らしいです。試してないのですが。

4. よく使うコードを登録する

よく使うコードを登録する

DreamWeaverやCodaでは頻繁に利用するコードを登録する事ができます。一度登録しておけば次回使う時はクリックするだけでそのコードを挿入する事ができます。例えば私は覚えていないCSS3系のコード、WordPressのループやQuery Post類をポンポン登録しています。そういった機能がないオーサリングソフト・エディタを利用している人はEvernote等にメモしておけばコピペするだけで使えるので便利です。

5. Firebugを使用する

Firebugを使用する

画面分割機能のついたオーサリングソフトを利用していない方はブラウザーで表示確認をしながらコーディングをすすめる必要があります。その場合でもブラウザーの拡張機能「Firebug」を使えばより簡単に確認・修正が行えます。ChromeやSafariではデフォルトでWebインスペクタがついていますが、私はだんぜんFirebugをおすすめします。基本的な使い方は「意外と知られていない機能が多い!?Firebugの使い方」が参考になります。

6. オンラインスニペット集を利用する

オンラインスニペット

使えるコードを集めたWebサイトも多数あります。どうコーディングするのかわからない…なんて時に眺めてみるといいかもしれません。

その他のスピードアップについて書かれた記事

上記で紹介した方法以外に、素敵な効率化ツールやサイトがたくさんあります!こちらの記事を参考にしてみてください。

私なりのやり方・思ったことばかりなので、他にもこうすると早くなるよ!という意見があったらぜひご紹介下さい!

シェアする

コメント

ニュースレター

Web制作の最新情報やWebクリエイターボックスからのお知らせ、中の人の近況等を定期的にお送りいたします。 ぜひご登録ください!もちろん無料です! :)