コーディングの速度はどうすれば上がる！？

コードを早く書ける様になれば、デザインの方にも時間をかけれるのではないかという事で、コーディングのスピードを上げるための紹介をします。便利なツールを使ったりすることで、今までよりも早く作業ができるようになると思います。

環境を整える

自分がサイトを構築しやすい環境にしましょう。

コーディングツールを用意する

メモ帳でもソースコードを書いたりと、コーディングは可能ですが、DreamweaverやフリーソフトのBracketsなどのコーディングツールを使うことで、コーディング速度を上げることができます。

しかし、Dreamweaverはお金がかかったり、機能性が高いため起動時間が遅かったりしてしまいます。対策としてDreamweaverだけではなく、上記で上げたフリーソフトのBracketsも用意しておくとベストだと思います。

DreamweaverやBrackets以外にもいろいろなコーディングソフトがあるため、自分にあったものを探すといいと思います。

ローカルでWEBサーバーを構築する

CGIやPHPなどサーバーサイドプログラムを使用するときには、ローカルのWebサーバがあると便利です。

Webサーバーの構築というと、関数だったりC言語だったりプログラマーが使う様なプログラミング言語を使ったりするという大変なイメージがありますが、XAMPPというソフトを使うことで簡単に構築することできます。

zen-cordingの様なEMMETを使う

emmetとは、HTMLやCSSのコーディングを効率的にしてくれるプラグインです。

zen-cordingとは、DreamweaverやBracketsの様なコーディング用のソフトに、プラグインみたいな感じでダウンロードして使用するものなのですが、使えるようになると格段にコーディング速度が上がります。

例えば、
div#content>ul#global.nav>li*3>a
という風に記述すると

という風に変換されます。

一気にコーディングできるのでとても便利です。

テンプレートを作る

HTMLとCSSに関することですが、いろいろなページを作るときに出来るだけコピー＆ペーストで対応出来るような環境にするといいです。
1つのサイトデザインで、以下のような要素は様々なところでだいたい同じデザインで使い回し出来るのではないでしょうか。

• ボタン
• 矢印などのアイコン
• h1やh2、h3などのデザイン

上記のようなものは、htmlに同じタグで記述し、common.cssなどの共通のcssに同じ要素で記述し、使い回しができるようにしましょう。

テンプレートを作ることで、以下のメリットが生まれます。

• コピペによる効率上昇
• デザイン統一が出来る
• デザインの修正が容易。テンプレートのcssを直すだけで共通のデザインが修正される

なので、テンプレートを作り作業効率をアップさせましょう。

CSSプリプロセッサを使う

CSSプリプロセッサというものは知っていますでしょうか？
使用している方も多いかもしれませんが、sassやscssなどのCSSプリプロセッサを使うと作業効率がアップします。

CSSを出力するためのCSSの様な記述をし、コンパイルすることでCSSを出力出来ます。
上記をCSSプリプロセッサといいます。

div{
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
}

例えば上記の様なcssを、scssを使うと下記のような感じになります。

@import “compass”; //1番最初に一度だけ宣言します。
div{
@include border-radius(4px);
}

上記により、行数も減らせてファイルサイズも小さくすることが出来ます。

コーディング規約を作る

簡単なものでいいのでコーディング規約を作ってみましょう。
下記に挙げる3つは個人的に結構大事だと思います。

ファイル名の付け方

• ファイル構造
• フレームワークのclass,id名の付け方

画像名の付け方

• ボタン→btn-img.png
• 背景画像→back-img.png
• メインビジュアル→mainv.png
• バナー→bnr.png

class,id名の付け方

• header→#header
• footer→#footer
• maincontents→#main

上記の様に決めておくことで情報伝達も素早くなり、速さも上がり、生産性も上がります。

画面を分割する

BracketsではHTMLとCSSを二分割にしたり、ライブプレビューも使用でき同時に見られるので、コードを書きながら表示やエラーの状態を確認・処理をしたり、HTMLを見ながらCSSコーディングができるのでとても便利です。

まとめ

コーディングし終わった後にはコードレビューをし、不具合やエラーが出ていたりしたら処理しましょう。

上記で紹介した方法以外にもたくさん、効率化する様なソフトや記事があると思います。
いろいろ試してみて効率よくコーディングしてみましょう！

マーケティングでお悩みでしたら、
Bigmacにお任せください。