Webサイトのコーディングでスピードあげるためにやっている4つのこと

こんにちは、株式会社Pentagonでコーダーをしているさおりです。

【こんな人に読んで欲しい】

  • Webサイトのコーディングのスピードが気になっている人
  • Webサイトのコーディングスピードをあげたいと思っている人

【この記事を読むメリット】
ツールや機能などを活用することで、コーディングのスピードを上げられます。

私なりのコーディングスピードを上げるためにやっていることを4つ紹介するので、参考になれば幸いです。

目次

① よく使うコードはスニペット登録する

Webサイトのコーディングでは、HTML・CSS・JavaSctitなどのコードをある程度使い回せます。
なので、よく使うコードに関してはスニペット登録しておくと、すぐに呼び出せてスピードアップにもつながるのでおすすめです。
私は、massCodeClipyによく使うコードを登録しています。
複数のスニペットのツールの使い分けは、下記の通りです。

massCode → HTML、CSS、JavaScriptがメイン。よく検索しているコードなどを登録しています。
Clippy → WordPressで使う <?php echo esc_url(home_url('/')); ?> などのコードを登録しています。

▼ダウンロード先
massCode
Clipy

② Emmetや自動補完の機能を使う

普段、VSCodeを使っているのですが、コードを自動補完してくれる拡張機能を入れています。
自動補完の機能のおかげで、数文字打てば候補が表示されるので、スピードアップにつながります。
また、自動補完の場合、HTMLの終了タグも補完してくれるものもあるので、タグの閉じ忘れもありません。

③英語のタイピング練習をしていた

Webサイトのコーディングでも、クラス名は英単語を使うことが多いです。
タイピングの練習をできるサイトはたくさんあるので、英語のタイピング練習をしておきましょう。
そうすれば、コーディングする時に迷わなくてすみます。

学生時代の情報系の授業でも、1ヶ月間はタイピング練習の授業があったので、無駄ではなかったと思ってます・・

④ 大きめのモニターを使う

メインはMacBookProの13インチを使っていますが、ノートPCの画面は小さいので、別でモニターをつけています。
13インチでも作業を進められなくはないですが、デザインカンプ・エディター・確認のためのブラウザを並べられないので作業効率は落ちます。
今は34インチのワイドモニターを使っていますが、大きめのモニターにすると作業効率があがるのでおすすめです。

まとめ

私なりのコーディングのスピードをあげるためにやっていることの紹介でした!
「どうやったらコーディングスピードが上がるんだろう…」と悩んでいる人の参考になれば幸いです。

採用情報はこちら
目次