超現場ブログ

Technique,Design and Events

コーディングのスピードを上げる便利ツール

Twitter Facebook Google+ はてブ

title

新サイトに変わり初投稿です。札幌でWebスクール講師をさせてもらっている山本です。

改めてよろしくお願いします。詳しいプロフィールはリンクからご確認下さいw

 

さて、みなさんはコーディングする時にもっと早く書きたいと思ったことの1度や2度や3度や4度あると思います。

色々な方法があると思いますが、僕が行っている手法をご紹介しようと思います。

  1. いきなりコーディングを始めないで、まずは脳内コーディング。頭のなかでどうやってCSS組もうか考えます。
  2. 脳内でイメージが決まったらコーディングを開始します。そして、コーディングは1パーツごとにCSSで装飾するのではなく、ある程度一気に書いてしまいます。そのための事前脳内コーディングです。
  3. CSSを使って装飾していきます。もちろん脳内コーディングで思うように行かない箇所は当然あると思うので、そこは微調整♪
  4. 表示確認〜微調整の繰り返し
  5. 完成♪

このようにコーディングを行っています。HTMLとCSSをまず行ったり来たりするだけでも時間がかかるので、まずはHTMLを一気に書く。その後CSSで一気に装飾するという進め方です。
昔は、パーツごとに綺麗に仕上げながら作っていたのですが、一気にHTML書いてからCSS装飾をするほうがなれたら早いです。

ただ、この進め方には当然慣れも必要です。授業でも少しずつで良いから、HTMLを一気に書いてみましょうなんてたまにやっていますが、コーディングの良い訓練にもなりますよ。
まずは簡単なページからで良いので、HTMLを全部書いてからのCSSを全部書くという練習やってみてください。

これは考え方のスピードアップです。
次に物理的にスピードアップをする方法。

 

■■■emmetというツールを使う■■■

emmet(エメット)って何?と、初めて耳にする方もいると思います。

これはお使いのテキストエディタ(全てのエディタに対応しているわけではありません)の拡張機能として提供されているツールです。

上記URLから対応しているソフト一覧が見れますよ。

例えば

header#header>nav#g-nav>ul>li*4>a>

と入力して、エディターごとに割り当てられた展開用のキー(MacのCODAというソフトはctrl+e)を押すと・・・

emmetを使うとこうなります

ドーン!とこのようなコードが一発で出来てしまうのですね。素敵です♪

他にも

  • よく使うコードはソフトウェアに登録しておく
  • そもそものタッチタイピングのスピードを向上させる

など、コーディングを早くするために出来る事は色々あります。ぜひじぶんのやれそうなとこから1つずつやってみてはいかがでしょうか♪

それでは暦通りのお休みの方も、有給使って大型の休みにした方も充実したGWをお過ごしくださいませ

ご質問・ご相談の方はこちら

ご質問・ご相談ですか?

どんなことでもお気軽にご相談ください。

ご質問・ご相談はこちら

Copyright © 超現場主義 All rights reserved.