こんにちは。やまぐちなな（@nana_winter_web ）です。
「もっと速くコーディングしたい！」と思うこと、ありますか？
その理由は人それぞれだと思いますが、数年前に比べてコーディングが速くなった気がするので、何を変えたのか、何が変わったのかを書いてみました。
Web（フロントエンド）系を例に書いていますが、その他のプログラミングでも一部応用できると思います。
一部の方法は概要のみの紹介なので、気になった方法があれば検索してみてください。
使いやすいツールを使う
使いにくいツールより、使いやすいツールのほうが疲れにくくなりますし、高機能なツールであれば時短ができたりします。
良いキーボードを使うなども疲れにくくなるし、入力もしやすくなって良さそうです。早く600円のキーボードから卒業したい。
テキストエディター
メモ帳歴が結構長かったのですが、高機能なテキストエディターに変えてからコーディングが速くなりました。
メモ帳よりも、コーディング用に作られたテキストエディターのほうが使いやすいです。
- 入力補助がある
- 色がつくので見やすい
- 閉じタグやクォーテーションの自動入力があるのでありがちなミスが減る
- 拡張機能などで機能の追加ができる（入れすぎ注意）
などなど、テキストエディターの良いところはたくさんあるので、ぜひ使って良さを実感してください。
おすすめのテキストエディター
- Visual Studio Code（VS Code）
- Atom
わたしがメインで使っているのは、VS Codeです。
これ以外でも、Textなど色々あるので一度使って試してみると良いと思います。
使い心地は好みですが、起動と動作が速いものがおすすめ。
Emmetを使う
道具に含まれるのかわかりませんが、Emmetを使うようになってから、コーディングが速くなりました。
Emmetは、HTMLタグを属性付きで展開したりできるものです。
たとえば、HTMLにpと入力してTabなどのキーを押すと<p></p>と展開できたり、CSSにdbと入力してTabなどのキーを押すとdisplay: block;と展開できます。
SCSSやPugなどのプリプロセッサを使う
変数が使えたり、静的サイトでパーツの共通化ができたり使いこなすと何かと便利。
利用できるようにするための準備は必要ですが、それを上回る便利さです。
制作時はもちろん、「コーポレートカラーが変わりました」とか「共通のパーツに内容を追加してください」などの変更にも強くなります。
Google、人を頼る
行き詰まったときには一人で考え込むのではなく、他の視点を取り入れると良いです。
シンプルなものであれば、Googleで「〇〇 作り方 CSS」などで検索してみると解説記事が見つかります。
中には微妙なコードが紹介されていることもあるので、ある程度の見極めは大切です。
身近にコーディングできる人がいれば「〇〇さんなら、どうやってコーディングしますか？」と聞いてみるのも良いと思います。
Twitterなどでつぶやいてみるのも良いかも。
検索したり、聞いて終わりではなく、一度行き詰まったことと解決法を忘れないようにすると次に同じ問題が起こった時に早く解決できます。
ブラウザチェックをこまめにする
チェックのしすぎは良くないですが、こういうコードはいつも崩れるなというときに、崩れやすいブラウザ（IEやSafariなど）でチェックすると修正の手間が減って最終的に時短につながります。
完成してから修正するよりも時間に余裕があるので気分的にも楽になります。
新しくて、短いコードも良いですが、時には多少長くなってしまっても崩れやすいコードを避けて、古いコードを使うことで結果的に速くなることもあります。
テンプレート化する
毎回、doctype宣言から書くのは手間がかかります。
なので、テンプレートを保存しておくフォルダーを作って、その中にいつも書くコードを保存しておき、コーディングするときはそこからファイルをコピーすると時短になります。
静的サイト用のテンプレートやWordPressのテーマなど、用途別に作ってあります。
コーポレート用やLP用などで分けるのも良さそう。
慣れ
ここまで、色々書いてきましたが、ほぼすべての悩みを解決してくれるものは「慣れ」です。
このデザインは、こうやってコーディングしたらできるなとか、この書き方だとIEで崩れるからこっちの書き方がいいなとか、慣れたら大体わかるようになります。
早く慣れたいときは
実務だけだと慣れるのに時間がかかる場合や、もっと早く慣れたいという場合は、公開されているサイトをソースコードを見ずに1からコーディングしてみると良いです。
ソースコードを見たくなる気持ちはわかりますが、我慢してコーディングしてみてください。
実際に利用されているコード以外にも書き方はある場合が多いです。
元サイトのコードと自分で書いたコードを以下のような項目で比較すると今後に活かせます。
- 保守性に違いはあるのか
- 各ブラウザで見て表示に違いはあるか
最後に
基本的なことが速く作れると、アニメーションなどの微調整に時間をかけるなどのクオリティアップや、次の案件に着手したりできます。
デザインによってもコーディングのスピードは変わるので、比較が難しいところですが過去の自分と比較しつつ、クオリティを落とさずにスピードアップできると良いですね。
