Webコーダーとしての指標の1つに「コーディングの速さ」があるかと思います。わたしは1年前にコーダーをメインの職にしようと決意してから、速さという指標を伸ばすために色々と取り入れて試してきました。
この記事では、Webサイトを作成する上のでコーディング速度を上げるために行っている（取り入れている）7つの方法をご紹介いたします。ぜひ、できそうなところから試していただけると嬉しいです！
※ エディタはVSCodeを使っています。もしかすると他のエディタでは使い方が違う説明になっているかもしれませんが、あらかじめご理解いただけますと幸いです。
はにわまんまだまだ試行錯誤中です、、コーディングスピードの向上に終わりはありません！
コーディング速度（スピード）を上げる7つの方法
自分が1年間いろいろ取り入れてきた中でコーディングスピードの向上に役立っていると思うツールや考え方をまとめています。
テンプレート化
コーディングは「型」がだいたい決まっていますよね。
例えば以下のような感じです。
- ヘッダー
- メインビジュアル
- メインコンテンツ
- サイドメニュー
- フッター
こういうのはあらかじめ自分用のテンプレートとして作っておくと最初の準備が楽になります。「このデザインのヘッダーならこれ使おう」「LP風ならこのテンプレート」「ブログ系ならこのテンプレート」みたいな感じです。
コーディング案件を対応していく中で、自分がコーディングしやすい「型」ができてくると思います。1度使ったコードをそれっきりにするのではなく、今後のためにテンプレート化して残して使い回せるようにしておくと、未来の自分が楽できたりします。
これはHTML、CSS、JavaScript、WordPressのすべてにおいて同様のことが言えます！
Emmet
display: block;の15文字をdbの2文字で入力できるようになるのがEmmetです。
HTML、CSSともに補助が付いていて、めちゃくちゃ使いますね・・・。たぶん今はEmmetがないとコーディングできません。それくらい便利な機能です。
ほとんどのエディタに導入できると思いますので、お使いのエディタで調べて触ってみてください！
スニペット
スニペットとは、エディターツールの中に保存しておけるパーツ部分のテンプレートだとイメージしていただければと思います。よく使うコーディングの書き方ってあると思います。
例えば、わたしだと以下のようなCSSとか…。スニペットを使えば、例えば「abv」→ Enterとタイピングすれば以下のコードが展開されるようにすることができます。
position: absolute;
top: 50%;
left: 8px;
transform: translateY(-50%);このケースだと、3文字で66文字分の出力ができるわけで、こういった少しずつの積み重ねが時短に繋がるのかなと思います。
ちなみにVSCodeのスニペットだと以下のように登録できます。
Sass（CSS設計）
SassはCSSを管理しやすくしたものという認識でいいかと思います。
個人的には以下のようなメリットが大きいと感じています。
- 変数が使える
- 入れ子の構造で見やすい
- 機能ごとのまとまりで管理しやすい
ページごとでファイル分けしたり、機能ごとでファイル分けしたりとすることで、CSSファイル自体がごちゃごちゃになるってことがまずありません。修正や加筆したい時はどのファイルに書かれているかはすぐに分かります。
Sassを使うメリットはとにかく管理しやすくなることです。
SassファイルからCSSに出力するための、コンパイルの知識（わたしはGulpを使っています）が必要になるので、導入の敷居がちょっと高いですが、、、覚えると手放せなくなるので、ぜひ取り入れてみてほしいと思います！
Sassの書籍は圧倒的に以下がおすすめです。
Gulp
Gulpは、コーディングのあらゆる面で補助的な役割を（ほぼ）自動で行ってくれます。
- Sassを自動でコンパイル
- ベンダープレフィックの付与
- ファイルを保存したタイミングでブラウザも更新
- 画像を圧縮
- ファイルの圧縮
こちらも1度使えるようになると手放せなくなるツールですが、Sass以上に導入のハードルが高いです笑
ただ、間違いなく便利でコーディングが楽になるので、環境構築にチャレンジしてみる価値は大いにあります。
画像の圧縮に関しては以下で大いに勉強させていただきました。
正規表現
今回紹介する中では一番覚える優先順位は低いかもしれません。正規表現は主にテキストの置換で使います。
イメージとしては、「型」から「型」への置換って感じでしょうか。手でポチポチ変えるよりも、一発でパッと書き換えることができるので、使えると楽になるかもしれません。
自動整形（Lint + Prettier）
Prettierに出会った時はマジで感動しました。ルールを指定するとコードを自動で整形してくれるのがPrettierです。
しかも、整形するだけでなく、ルールから逸れて間違って記述している箇所の修正もしてくれます。
ルールは何で決めるかと言うと、Lintと呼ばれる文法チェックツールですね。わたしの場合はCSSとJavaScript、PHPは、保存（Ctrl + S）と同時に自動で整形されるようになっています。
こんな至れり尽くせりなツールを使わない手はありません！
ただし、導入ハードルは今回紹介した中では一番高いと思いますので、、頑張ってください・・・。
コーディング速度の前に大事なこと
コーディングではどうしてもテキストエディタだけに目がいきがちですが、実はその外側の操作スピードも大事だと思ったりしています。
タイピング速度を上げる
デスクワークにおいて、タイピングのスピードが一番時短に繋がるのかと思っています。なぜなら打つ回数が圧倒的に多いから。100文字を5秒で打てる人と60秒かかる人では、コーディングの時短うんぬんしても、それほど早くならないと思います。
コーディングはEmmetやスニペットで楽できても、基本的にタイピングです…。
なので、スピードの一番の下支えになるのはキードードのタイピングスピードだと思います。
（わたしはめっちゃ誤字するし、遅いので課題です・・・）
パソコンを使いこなす
そして、パソコン自体のスピードですね。調べ物をする時に、ブラウザのURLの欄にマウスでジリジリ持っていってクリックするのか、Ctrl + Lで入力エリアに飛んで入力するのかでは、ちょっとの差かもしれませんが、早くなると思います。
タブの移動をマウスでポチポチするのか、Ctrl + Tabで移動するのか、などなど。こういう少しの時短の積み重ねの連続が効率化の基本だと思います。
ぜひ日頃から「もっとパソコンの操作早くできないかな」と考えながら作業すると気づかぬ間に少しづつ早くなっているはずです。
Windowsだと、一部ですが以下のようなショートカットなど使えるようになっていると、少し早く仕事ができるようになるかと思います。
おわり
コーディング速度を上げるための７+２の方法でした。
おさらいすると、以下の７つになります。
- テンプレート化
- Emmet
- スニペット
- 正規表現
- Sass（CSS設計）
- Gulp
- 自動整形（Lint + Prettier）
Sass以降から、環境構築のハードルが上がりますね・・・。ただし使えるようになると見える景色が変わることは確実です。ぜひ、どこかのタイミングで導入を検討してみてください！
そして、タイピングやパソコン操作（ショートカットキー）といったところも日頃から意識して取り組むと、気づいたら「あれ、早くなっているかも」って思える日がくるかもしれません。
効率化は少しの時短の積み重ねの連続だと思います。日々、少しだけでも早くなっていきましょう！
