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

ブログ

Blog
  1. ホームページ制作・運営はアウラ:ホーム
  2. ブログ
  3. コーディングのスピードを上げる方法

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

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

こんにちは、藤本です。
最近、コーディングをする機会が多く、コーディングで時間をかけ過ぎてしまうことも
しばしばあります。
そこで、コーディングのスピードを上げるための方法を調べました。
調べた方法を実践してみて、スピードが上がりそうだと感じた方法をご紹介します。

Emment

htmlとcssで、ソースコードを簡略化して書け、変換してくれるものです。
Visual Studio Codeなら、標準で機能が入っています。その他のエディターでもプラグインなどで使用できます。

htmlでは、基本は『要素(h1)』 + 『Tabキー』で変換ができます。

  • 「h1」をTabキーを押すと、見出し1タグが表示されます。
  • 「ul>li*3」でTabキーを押すと、リストタグが3つ表示されます。

cssでは、 基本は『要素(h1)』 + 『Tabキー』で変換ができます。

  • c#fffをTabキーを押すと、color: #ffffff;
  • fz16をTabキーを押すと、font-size: 16px;
  • dibをTabキーを押すと、display: inline-block;
  • p1-2-3-4をTabキーを押すと、padding: 1px 2px 3px 4px;

タイピングする回数を大幅に減らすことで全体のコーディング時間を大幅に減らすことができます。
また、肩や腕も疲れにくくなりますし、タイプミスも減ると思います!!
コーディングをするという人は、ほとんどの人が使用していると思います。

スニペット

スニペットとは、ソースコードをまとめて、テンプレートとしてエディターツールの中に保存しておけるものです。
コーディングの際によく使うソースコードの書き方があると思いますが、その時に使えます。

VisualStudioCodeのプラグイン

Prettier – Code formatter

Prettierは、コードのスタイルがバラバラで見にくい時に自分のスタイルに整理してくれるプラグインです。
自分のスタイルやコードのルールみたいなものを決めることで自分にあったスタイルで整理してくれます。
コーディングのルールに個人差があると思いますが、複数人でコーディングを行う場合にも、自分のスタイルに整理してくれるので便利です。

IntelliSense for CSS class names in HTML

HTMLのコーディング中に、CSSのクラス名を打ち込む時に、クラス名を覚えていなかったり、長いクラス名だったりする場合に補助してくれるプラグインです。
IntelliSense for CSS class names in HTMLで事前に何回も使うCSSのClassファイルを作成しておけば、HTMLのコーディング中にClass名を補助入力してくれます。

CSS Peak

CSS Peakは、HTMLコーディング中にclass名の部分に適応されているCSSをHTMLコード上で表示してくれるプラグインです。
HTMLコーディング中にCSSのclassの値を忘れた場合に毎回CSSファイルを開く必要がなく効率的にコーディング出来ます。

Path Intellisense

Path Intellisenseは、パスの補完をしてくれるプラグインです。
コードが分からない場合にヒントを出してくれます。

Color Highlight

Color Highlightは、CSSで設定しているカラーコードに、実際に色を表示してくれるプラグインです。
カラーコードに表示される色をコード上で見れるので、カラー確認がすぐできます。

CSSTree validator

CSSTree validatorは、CSSのコードをチェックしてくれるプラグインです。
コードの下線部に波線を表示してくれるので、すぐにエラー部分がわかります。
また、エラーログも表示してくれます。
CSSのエラー確認時に一目で解決でそうです。

テキスト校正くん

テキスト校正くんは、日本語の間違っている箇所をチェックしてくれるプラグインです。
タイプミスや変換ミスを防げる可能性アップです。
日本語や専門用語の間違いなどをなくすことができます。

もっとスピードを

もっとはやくコーディングがしたいと思うことは、大切かなと思います。
さらに便利な機能を使って、効率化を目指していきたいと思います。
さらに向こうへ、レッツコーディング!!、、

お電話でのお問い合わせはこちら:06-6292-8577。受付時間は平日9:30~18:30 インターネットからは24時間受付中!お問い合わせフォームはこちら
Webデザイナー、Webプログラマ募集中!