コーディングの効率化でサイト制作を時短する3つの方法

コーダー部の🌰です。

未経験から入社して早1年が経過しました。

AIの進歩に負けぬように日々必死にエンジニア業務に食らいついています。

任せていただけるサイトの数もボリュームも少しずつ増え、案件も並行して持てるようになってきました。

今回はそんな経験をもとに「コーディングを効率化する方法」についてお伝えできればと思っています。

まだまだ若手の自分が、「コーディングの効率化」についてブログを書く背景

入社してから毎日が勉強で毎日が戦いでした。

そしてとある壁にぶつかります。「非効率」という壁です。

会社が追求するクオリティを限られた時間内でアウトプットすることができなかったんです。

制作会社では複数案件を同時進行していくことはマスト、そして一つの案件に使える時間は限られています。

クオリティを高めるにはシンプルに技術力を上げるという方法もありますが、技術力の向上には時間が必要です。

時間を捻出する為にも時間を短縮する「効率化」は必要不可欠！

先輩のサブコーダーとして経験を積みながら、効率化について模索してきました。

本記事では効率化について（まだまだですが）、1年間の実体験を元にコーディングを速くするテクニックやマインドセットをお話していきます。

制作会社にコーダーとして入社を考えている方、コーディング効率を上げたい方は是非ご覧ください。

コーディングの効率を上げる方法（エディタ編）

ショートカットキー

まずはエンジニアの相棒エディタ編

エンジニアによって使用しているエディタが異なりますが、今回は王道のVSCode（Visual Studio Code）についてご紹介していきます。

■便利なショートカット
・新しいウィンドウを開く：Ctrl + Shift + N ／ Command + Shift + N
・ファイル内検索・置換：Ctrl + F ／ Command + F
・コメントアウト：Ctrl + / ／ Command + /
・インデント前へ：Ctrl + [ ／ Command + [
・インデント後ろへ：Ctrl + ] ／ Command + ]
・選択した行の複製：Alt + Shift + ↑or↓ ／ Option + Shift + ↑or↓
・選択した文字列を選択: Ctrl + D ／ Command + D
・選択した文字列を一括選択: Ctrl + Shift + L ／ Command + Shift + L

上記はほんの一部ですが、開発で非常に役立ちます。

特に「選択した文字列を選択（単語選択）」は修正案件で大いに役立ちました。

テーブルの値や特定の文字列を一括で置換するなど活躍の場が多いので、ぜひこの機会に覚えて更なる効率化を狙ってみてください。

Emmet

そしてEmmetもコーディングを爆速で行う為にはマスト！

Emmetを使用することでHTMLやCSSを全て手入力しなくても正しく補完してくれます。

例えばリストを作成する時は、「ul>li*3」と打てば以下のように展開されます。

<ul>
　<li></li>
  <li></li>
  <li></li>
</ul>

CSSも同様です。

mt15

margin-top: 15px;

p40-20

padding: 40px 20px;

fz16

font-size: 16px;

コードの入力時間も短縮され、タイプミスも減ります。

一度ショートハンドの構文を覚えてしまえば効果絶大です。

コーディングの効率を上げる方法（ブラウザ編）

ショートカットキー

開発はウィンドウやタブの数がとても多くなるので、ブラウザ周りのショートカットキーも効率化の上で必須です。

画面キャプチャも制作進行上の疑問点をディレクター・デザイナーに分かりやすく伝える為に、使用しない日はありません。

■便利なショートカット
・新規ウィンドウ：Ctrl + N ／ Command + N
・シークレットウィンドウ：Ctrl + Shift + N ／ Command + Shift + N
・新規タブ：Ctrl + T ／ Command + T
・タブを閉じる：Ctrl + W ／ Command + W
・消したタブを元に戻す：Ctrl + Shift + T ／ Command + Shift + T
・ウィンドウ切り替え：Alt + Tab ／ Command + Tab
・画面キャプチャ：Windows + Shift + S ／ Command + Shift + 4
・クリップボードを表示：Windows + V ／ Command + Shift + V

拡張機能

大量タブの海に溺れている難民の皆さんに朗報です。

もう「あの案件のテストサイトやBacklogどこだったかな～」と放浪の旅に出る必要はありませんし、タブを何十個も開きっぱなしにする必要もありません。

「Toby for Chrome」で解決できます。（激推し！！！）

Chromeの拡張機能でタブをグルーピングできます。

カード型のUIでドラック&ドロップで気軽に編集でき、一つのウィンドウで開いている複数タブをワンクリックでまとめられる点も個人的に気に入っています。

タブ管理は上記以外の方法でも管理ができるので、自分に合った方法で効率化を図っていきましょう。

コーディングの効率を上げる方法（制作フロー編）

ヘルプを出す

これは非常に大切です。

制作を進行していくとほぼ間違いなく詰まるポイントが出てきます。

それはコーディングに関すること、案件特有のルールに関することetc…

この時に自分で解決する時間の上限を決めて、それでも解決できなければ先輩エンジニアにヘルプを出し迅速に報告すること。

この行動が制作においていかに大切か入社して身をもって体験しました。

エンジニアあるあるかもしれませんが、エラーで詰まって自力で解決できると半端ない達成感があるのでつい時間をかけがちです。

上手く解決できれば御の字ですが、大量の時間を投下した結果解決できず納期直前で「できませんでした。」では手の施しようがありません。

自分も最初は上手く頼れず、「何としても自力で解決してやる」と視野が狭くなっていました。

この行動が自分で自分の首を絞め、効率化から大きく遠ざかっていたんですよね。

当たり前ですがサイト制作は一人で成り立つものではありません。

周囲を上手に巻き込み進めていくことが、結果的に一番の時短だったと感じています。

上流工程へガシガシ進出する

前提として弊社は分業制で、ディレクター→デザイナー→コーダーの制作フローで進行しています。

コーディングは制作フローでいうと一番下流のフェーズです。

コーディングフェーズまでじっと待っているだけだと、思わぬ仕様やデザインが上がってきて苦しい思いをする可能性があります。

構成、デザインの段階からエンジニア視点での意見を発信していくことはプロジェクト全体のスムーズさにもつながりますし、個人的に学びが多いと感じました。

まとめ

ここで紹介した効率化の取り組みを実施し、少しずつですがサイト制作のスピードを上げていくことに成功しました。

まだまだ日々精進なので、おごらず謙虚にこれからもコーディングに向き合っていこうと思います。

それでは。

採用

弊社では現在Webプログラマーやシステム開発者を募集しています。

カジュアル面談も実施してますので、「まずは話聞いてみたい」という方もお気軽に！

皆様のご応募お待ちしています。

Indeed

Wantedly

WEBサイト制作のお問い合わせ、お見積り依頼、ご質問は
こちらのお問い合わせフォームよりお願いいたします

お問い合わせはこちら