コーディング時間かかるなぁ
もっとコーディング早くなる方法ないかな…
コーディングスピード上げて時給単価上げたい
11個のコーディングスピードを上げる方法を解説します。
コーディングスピードを上げる方法
Sassを導入して管理しやすいCSS
Sassはcssを拡張して管理しやすくするスタイルシートです。
Sassを導入すると、書くコードの量が圧倒的に減ります。
そしてなんと言っても管理がしやすくなるため、
修正する時間も短縮することができます。
Sassは学習コスパがいいです。
簡単にすぐ習得できるのに、便利なので活用しない手はないです。
【Sassで覚えるべきことはたった３つ】
・ネスト
・mixin
・変数
この３つ覚えるだけで、Sassはかなり便利に使いこなせます。
Sassで覚えるべきこと３つと、
・Sass導入方法
・CSSに反映する方法
まとめてドットインストールですぐ習得できます。
class名で迷わないCSS設計
class名に迷うとかなり時間が取られます。
迷う時間を無くすために、
CSS設計手法のFLOCSSなどを採用して、
あらかじめ割り当てられているclass名を使うといいです。
例えば、
.l-header 「l」はlayoutのことで、header全体を指しています。
.l-header__list layout headerのリスト(ul)部分を指しています。
.c-btn 「c」はcomponentのことで、ボタン(btn)の設定を指しています。
さらに、FLOCSSなどのCSS設計は多くの人が採用しているため、
複数人で編集を行う大規模サイトでの管理に適しています。
フレームワークでより早くサイト構築
フレームワークで有名なものにBootstrapがあります。
HTMLにあらかじめBootstrapが用意しているclass名を使用することで、
CSSを書かなくてもスタイルを当てられます。
さらにBootstrapの魅力はレスポンシブデザインが簡単にできることです。
<div class="container mt-5">
<div class="row">
<div class="col-md-4 bg-primary">
1列目
</div>
<div class="col-md-4 bg-danger">
2列目
</div>
<div class="col-md-4 bg-warning">
3列目
</div>
</div>
</div>HTMLにBootstrapのclass名をつけただけで
レスポンシブデザインが完成してしまいます。（早い…）
このclass名はたくさん用意されているので覚える必要はありません。
必要に応じて公式サイトから引っ張るような感じで大丈夫です。
コードをスニペットに登録
よく使うコードや、コード量が多いものはスニペットに登録すると便利です。
簡単にコードを登録することができ、
必要な時にショートカットで貼り付けるだけです。圧倒的にコーディングが早くなります。
【おすすめのスニペット】
VSCode
エディタのVSCodeには、スニペット機能があります。
VSCodeを使用している方は、他のものを導入しなくてもエディタについているのでそのまま使えます。
Alfred
有料でMac限定なのですが、スニペットとしてとても人気のアプリです。
スニペット機能だけでなく、履歴が３ヶ月分残ることや、bookmark機能など、さまざまな高機能がついています。
Alfred公式サイト
Clipy
無料で、またまたMacアプリなのですが、
すごくシンプルで使いやすいスニペットです。
テキストも登録できるので、メールの定形文など入れておくと便利です。
Clipy公式サイト
コーディングのテンプレを用意しておく
headやheader, footer, navなど
よく使うものをあらかじめ書いておき、それをテンプレートにしておくと便利です。
過去に製作したものは、テンプレとしてとっておきましょう。
コーディング前の全体像を把握
コーディングを始める前に、全体像を把握するために一旦紙に書くというのはおすすめです。
このように紙にブロックごとに書き出して、
class名などをあらかじめ決めて書きます。
書いてる時は、 「ここの画像はHTMLではなくCSSで表示させよう」など、
どんなコードを使って実装するかをイメージしながら書くといいです。
コーディング中に悩むことが少なくなって、完成スピードが早くなります。
エディタのEmmetを活用する
Emmetとは、略したコードを書くだけで、
元の長いコードを入力することが出来るツールです。
このように、略したコードを書きEnterを押すと
いちいち全部書かなくてもコードを書くことができます。
早く、ミスも減るので覚えるとコーディングスピードが圧倒的に早くなります。
このツールは、VSCodeにデフォルトで入っている機能ですので、
準備なく使い始められます。
置換を活用する
VSCodeでは、command+Dで同じテキストやcodeを１つずつ、複数選択することができます。
これと上手に使い分けたいのが、置換機能です。
修正する箇所は、置換を使ってなるべく一括で修正をします。
けど、微妙にここは置き換えたくない。という箇所は、
command+dなどを使って微修正をします。
漏れがなくなるので、置換を使えるところは置換を使って効率よく修正、変換をします。
タイピング速度を上げる
コーディングの速度を上げる前に、タイピング速度を上げることも大切です。
Emmetやスニペットを使っても、やはりタイピングが早ければ、コーディング自体も早くなります。
パソコンのショートカットを使いこなす
パソコンのショートカットキーも上手く使いこなせるとスピードが上がります。
マウスを移動させるより、ショートカットキーを活用する方が早いです。
自動でコードをwebに表示する拡張機能
コーディングはコードを書いた後、その都度ブラウザを再読み込みして表示確認をします。
このブラウザの読み込みを自動で行う「Live Server」というVSCodeの拡張機能があります。
コードを入力したり、書き換えた時点で自動でブラウザが再読み込みされますので、
マウスを動かして、ショートカットキーを使ってリロードして…という手間が省けます。
まとめ
コーディングスピードを上げる方法はたくさんあります。
出来ることから取り入れれば、コーディングスピードは確実に早くなります。
少しずつ、コーディングスピードを上げて時給単価を上げましょう！