BLOG

【意外と知らない?!】コーディングを速くするために知っておきたいテクニック集

2020/09/09

【意外と知らない?!】コーディングを速くするために知っておきたいテクニック集
突然ですが、みなさん。
コーディング(HTML,CSS)得意ですか?

筆者は、「得意です!」と自信をもって言えるほどではありません。汗
「どうやって再現したらいいんだ…」と、頭を悩ませ時間が溶けていくことが多いです。

しかし、コーディングでは「スピード」が求められますよね。
1ページ作成するのに何日もかかっていてはとても仕事になりません。。

ではどうしたらいいのでしょうか。

色々ありますが、最もすぐに効果が見込める方法は、コーディング(HTML,CSS)をする際に「必ず行う操作」の部分で効率化を図るということです。

「必ず行う操作」というのは、例えば以下です。

・パソコンの基本的操作
・エディタの操作
・デザインカンプから必要なデータを取得する操作

これらは、コーディングをする際に必ず行う操作ですよね。
ここに時間を割いているとコーディング全体のスピード落ちてしまうのは明らかです。

というわけで今回はこの、「必ず行う操作」を効率的にする方法をたっぷりと紹介していきます!

注意点

本題に入る前に、筆者の環境について説明しておきます。

↓筆者の環境

使っているエディタ
VsCode

使っているPC
Windows 10

※これから、いくつかVsCodeのプラグインや、エディタのショートカットを紹介しますが他のエディタだと違うこともあります。そこはご了承ください。

それでは、次から本題に入ります!!

パソコン編

パソコンの操作で筆者がよく使う操作方法についてご紹介します。

ショートカットキー

まずはショートカットキーについてです。

Windowsキー + V(クリップボード履歴)

これはぜひ覚えてほしいショートカットです。
(この「パソコン編」で一番推しているので詳しく書きます笑)

たとえば、普段、コピペする際に以下の動画のように1行ずつコピーしては貼り付けていませんか?

■通常のコピペ作業↓
Windowsキー + V(クリップボード履歴)通常のコピペ作業

3行ならまだしも、これが何行もあったらさすがに時間がかかりますよね…
そこで、Windowsキー + Vの登場です!!
これを使うと以下のようになります!

■Windowsキー + V を使った場合のコピペ作業
Windowsキー + V(クリップボード履歴) Windowsキー + V を使った場合のコピペ作業

先ほどとの違いは、コピーしたいものを全部コピーして、そのあと、コピー履歴からペーストしている点です。(すごい…!!!)

使い始めるには

この素晴らしさがわかったところで、使い始めるための手順をご紹介します。
といってもとても簡単です。

Windowsキー + Vを押して有効化
Windowsキー + Vを押すと以下のようなものが表示されるので、これを「有効」にしましょう。

Windowsキー + Vを押して有効化

これで使い始める準備が終わりました。簡単ですね。

具体的な作業手順

1. コピーしたいものをとりあえず全てコピーします
具体的な作業手順 1. コピーしたいものをとりあえず全てコピーします

2. 貼り付けたい場所にカーソルを移動させ、 Windowsキー + Vを押します
具体的な作業手順 2. 貼り付けたい場所にカーソルを移動させ、 Windowsキー + Vを押します

3. 貼り付けたいものクリックまたはEnterキーを押します

4. 手順の「2~4」を繰り返します
※注意点として、コピーできる回数は25回が上限のようです。

以上がWindowsキー + V を使ったコピペの効率化でした!

コピペして貼り付けようと思ったのに、貼り付け先で間違えて「Ctrl+C」を押してしまい、もう一度コピー元に戻ってコピーし直す。
といった、煩わしさが消えますね!

なお、Macでは「Clipy」というものを使うと同じようなことができるようになります。
Clipy

Alt + Tab(ウィンドウ切り替え)

PCで開いているウィンドウを切り替えるためのショートカットキーです。

コーディングしていると、Photoshopやエディタ、ブラウザな様々なウィンドウを開くことになりますが
それをいちいち、マウスで探すと面倒なのでAlt+Tabでやるといいですよ。

ちなみに、Alt+Shift+Tabで逆順に切り替えられますので合わせて覚えておきましょう。

Ctrl + Tab(ブラウザのタブ切り替え)

ブラウザのタブ切り替えを行うためのショートカットキーです。

Ctrl + Tab(ブラウザのタブ切り替え)

ブラウザでたくさんタブを開いているときなどに便利です。

ちなみに、Ctrl+Shift+Tabで逆順に切り替えられますので合わせて覚えておきましょう。(↑動画でも使ってます)

Ctrl + Shift + T(閉じてしまったブラウザのタブを再び表示)

ブラウザで一度閉じてしまったページをもう一度開くためのショートカットキーです。

せっかく見ていたページを誤って閉じてしまうことありますよね。。
そんなときはCtrl+Shift+Tを押してあげればOKです。

ちなみに、VsCodeエディタを使っている方は、同様のショートカットキーで一度閉じてしまったファイルを再び呼び戻すことが来ますよ!

Ctrl + F(文字検索)

文字検索のためのショートカットキーです。

これはエディタでも使えるので必ず覚えておきましょう。

特に、サイトの文量が多く、目的のキーワードの箇所がなかなか見つけられないときに便利です。
文字列が複数あった場合は、Enterキーを押すと順々に探してくれます。
Ctrl + F(文字検索)

Ctrl + U(HTMLソースの表示)

ブラウザで現在見ているページの生のHTMLソースを別タブで表示させるためのショートカットキーです。
HTMLだけの情報をエディタで確認するのが手間なときはこれを使うとよいでしょう。
意外に使うので覚えておいて損はないです。

Escキー(キャンセル)

何かを「キャンセル」したいときに使います。

たとえば、ファイルを別フォルダにドラッグ&ドロップで移動させようとするとします。
そして、別フォルダにドロップする時に、「よく見たらドロップさせようとしているものが別ファイルだった」とか、「ドロップ先のフォルダを間違えていた」と思ったら、ドロップする前にEscキーを押せばOKです。

いざというときに使える救世主キーなので必ず覚えましょう!

マウス操作

ここまで、ショートカットキーについてご紹介しました。
続いて、マウス操作についてご紹介します。

文字列のダブルクリック

選択したい文字列にカーソルをもっていき、適当な場所でダブルクリックすると文字の一塊を選択できます。
文字列のダブルクリック

クリック+Shift押したままもう一度クリック(範囲選択)

さきほどのダブルクリックと同じような機能ですが、複数行をコピーしたいときなどに便利です。
たとえば、以下のような複数行のテキストをコピーしたいとします。

あいうえお
かきくけこ
さしすせそ

その際に、左上から右下にドラッグしてコピーするのではなく、
まず、左上(「あ」の左)でクリックして、
次にShiftキーを押しままの状態で、右下(「そ」の右)でクリックする
と範囲選択されます。

クリック+Shift押したままもう一度クリック(範囲選択)

これはエディタでも使えるだけでなく、フォルダの複数選択やエクセルでの複数行選択などでも使えるので必ず抑えておきたいですね。

エディタ編

ここからは筆者が使っているVsCodeエディタでよく使うテクニックをご紹介します。

なお、同様の機能は他のエディタでもだいたいあるので、気になる方は是非調べてください!!!
それが面倒ならVsCodeユーザーになりましょう(笑)

Emmet

Emmetとは主にHTML,CSSを書くときに省略記法で書くことを可能にするプラグインです。
VsCodeエディタではデフォルトで搭載されているのでインストールする必要はないです。

Emmetを使うと何ができるかというと、たとえば、「ul.list>(li>a)*3」 と入力し、

Emmet

続いて、Tabキーを押せば以下のように展開されます。

Emmet

CSSにもEmmetは存在し、たとえば以下のような感じです。
Emmet

動画では、以下の操作を行っています。
Emmet

これらをEmmetなしで全て打ち込むのはとても面倒だし効率が非常に悪いですよね。

このように、Emmetはとても便利で、プロのコーダーなら誰しも使っているといっても過言ではないものです。
もし知らなかったら絶対に覚えましょう!

ちなみに、Emmetを全部覚えるのは不可能なので、自分がよく使うものを覚えるだけでOKです!

以下にEmmetのチートシートをご紹介しておきます。
コーディングしていているときに「同じ記述何回も書いてるな~」と思ったらそのエメットがあるか探して見ましょう!
エメットチートシート

ショートカットキー

ここでは筆者がVsCodeでよく使うショートカットキーをご紹介します。

Alt + Shift + 上下キー(行の複製)

これだけで行の複製ができます。

さらに、その行の複製したい方向を上下キーで指定できます。
Alt + Shift + 上下キー(行の複製)

Alt + 上下キー(行の移動)

現在選択している行を移動させることができます。
Alt + 上下キー(行の移動)

Ctrl + Shift + K(行削除)

現在選択している行を削除することができます。

Back Spaceキーでも消せますが、それとの違いは、消したあとに間隔が残らない点です。
地味ですが意外に便利です。
Ctrl + Shift + K(行削除)

Shift押しながら上下キー(範囲選択)

複数行を選択したいときにつかいます。
マウスドラッグで範囲選択するのと同じような感覚です。

筆者はよく、コピーしたい複数行をShift押しながら上下キーで選択し、Alt + Shift + 上下キーでそれを複製するということをしています。
以下がその作業風景です。↓
Shift押しながら上下キー(範囲選択)

Ctrl + D(文字選択)

同じ文字列を順次選択することができます。

以下では、「class=”hoge”」を順次選択して削除し、「foo」を順次選択して「hoge」に変えている様子です。↓
Ctrl + D(文字選択)

Ctrl + F(文字検索)

指定した文字列が、現在編集しているファイル内に存在するか検索するときに使います。

これはエディタに限らず、ブラウザでも使えるテクニックなので暗記必須です。
検索したい文字列が複数あった場合は、Enterキーを押すと順々に探してくれます。

Ctrl + Shift + F(プロジェクト全体検索)

プロジェクトフォルダ内の全ファイルで、指定した文字列が存在するかどうか検索したいときに使います。
※プロジェクトフォルダという単語を聞きなれない方は、その部分を無視して読んでください。

Ctrl+Fとの違いは、Ctrl+Fが現在編集しているファイル内で文字列検索するのに対し、
Ctrl+Shift+Fは、プロジェクトフォルダ内の全ファイルを対象に検索する点です。

Ctrl + Shift + F(プロジェクト全体検索)

これを使う機会はたくさんありますが、たとえば、「ファイル数が多く、探している文言が記載されているファイルがどれなのかわからない」といったときに便利です!

Ctrl + Enter(任意の場所でも次の行にカーソルを移動できる)

カーソルがどの場所にあっても、次の行に瞬時に移ることができます。

これを使わない場合、いちいち行の末尾までカーソルを移動させてEnterキーを押しますよね。
でも、これは意外に面倒です。

これからはCtrl+Enterで次の行に移りましょう。
Ctrl + Enter(任意の場所でも次の行にカーソルを移動できる)

Ctrl + Shift + Enter(任意の場所でも直前の行にカーソルを移動できる)

Ctrl + Enterの逆の動作をします。
Ctrl + Shift + Enter(任意の場所でも直前の行にカーソルを移動できる)

Ctrl + B(サイドバー表示・非表示切り替え)

左側にあるサイドバーの表示・非表示を切り替えることができます。

コーディングに集中したいときなどに最適です。
Ctrl + B(サイドバー表示・非表示切り替え)

Ctrl + P(ファイル検索)

Ctrl+Pを押すと、以下のようなモーダル(?)が開くので、ここに自分が開きたいファイル名を打ち込めば検索にヒットします。
あとはそれをクリックするか、Enterキーを押せばファイルが開かれます。
Ctrl + P(ファイル検索)

ファイル数が多いプロジェクトでとても重宝しますよ!

Ctrl + ¥(ファイルの画面分割)

現在開いているファイルを画面分割して表示させることができます。

筆者は、左側にhtmlファイル・右側にcssファイルのようにしてコーディングしたりします。
色々と使い道はあるので自分にあったスタイルを見つけてみるといいかもしれません。
Ctrl + ¥(ファイルの画面分割)

Ctrl + F4(開いているファイルを閉じる)

これはファイルを閉じる際に使います。
さきほどのCtrl + ¥ と合わせて使ったりしますね。

Ctrl + Shift + T(閉じてしまったファイルを再び開く)

これはパソコン編で登場しましたが、一度閉じてしまったファイルを再度開くことができます。
間違えてファイルを閉じてしまった、といった場合に便利です。

Ctrl + Shift + T(閉じてしまったファイルを再び開く)

Alt + クリック(複数カーソル)

好きな場所にカーソルを任意に増やすことができます。

以下の動画は、Alt+クリックで任意の場所にカーソルを増やし、上記で紹介したCtrl+Shift+Kで行削除しています。
Alt + クリック(複数カーソル)

Altを押しながらマウスをドラッグ(複数範囲選択)

複数行を、行をまたいで別々の場所で選択したいときに便利です。

以下の動画は、Altを押しながらマウスをドラッグして任意の場所を複数選択し、上記で紹介したCtrl+Shift+Kで行削除しています。
Altを押しながらマウスをドラッグ(複数範囲選択)

Ctrl + Shift + Z(前に進む)

Ctrl + Zが「前に戻る」であるのに対して、その逆の動作をします。

拡張機能

ここからは、VsCodeで筆者が入れている便利な拡張機能を厳選して紹介します!
※紹介するものと似たような拡張機能はおそらく他のエディタにもありますので探してみてください。

Auto Rename Tag

ペアとなっているタグの名前を変更した際に、閉じタグの方も勝手に変えてくれるというものです。
拡張機能 Auto Rename Tag

htmltagwrap

選択範囲を任意のHTMLタグで囲むことができます!(めちゃくちゃ使います!

例えば、「HTMLのここ、もう一つ別のdivタグで囲みたいな」ってことはよくあると思います。
そんなときに、囲みたい部分を範囲選択してAlt+Wを押すとHTMLタグで囲むことが可能です!

さらに、上で紹介したAuto Rename Tagを入れていれば、タグ名を変更した際に閉じタグも自動で変わってくれます!

↓以下の動画はその一連の流れを録画したものです。
Auto Rename Tag htmltagwrap

Code Spell Checker

スペルが正しいかどうかチェックし、間違っていた場合に教えてくれる拡張機能です!

コードを書いていると「なんでCSS効かないんだ!」とか「なんでJS効かないんだ!」とかありますよね。
そして、散々時間を浪費した挙句、「スペルミスが原因だった」 なんてことは初心者あるあるです汗

しかし、これを入れておけばスペルミスがあれば自動的に波線が引かれるので瞬時に気づくことができますよ!

▼クラス名を「container」ではなく「contaienr」とスペルミスした際の図
拡張機能 Code Spell Checker

Bracket Pair Colorizer 2

この拡張機能は、一致するカッコを色で識別できるようにします。
コードが長くなった際などに可読性が上がるので便利ですね。
▼.parentは黄色、.childは紫色、.grandchildは水色に波括弧がハイライトされている
拡張機能 Bracket Pair Colorizer 2

ただ、注意点として、1ファイルが何千行とながいCSSファイルを編集している場合、このプラグインが原因でEmmetの展開がとても遅くなることがあります。
そんなときは、このプラグインをそのプロジェクトだけOFFにしてみましょう。

ツール編

ここでは筆者がコーディング時に特に重宝している便利なツールを紹介します!

Zeplin

まずは「Zeplin」をご紹介します。
Zeplinを使うと、コーディングをする際に必要なデザインデータをサクサク取得できるようになります。
例えば以下のような感じです。

▼Zeplinに書き出したデザイン上でクリックすると右サイドバーにCSS情報が出現する!
Zeplin
どうですか?簡単に必要な情報が取得できているのがわかるでしょうか。

デザイナーさんからもらったデザインデータはまだまだPhotoshopが多かったりしますが、
デザインによってはPhotoshopを開くととても重く、幅を図ったりテキストをコピーするだけで
動作が重くなりコーディングがはかどらないことが多々あります。

そんな時にこれを導入すると、余白のサイズを図ったり、テキストをコピーしたり、色を調べたりするのがとてもサクサク行えるようになりますよ!!!

さて、このZeplinの導入の仕方ですがいくつかステップがあります。

Zeplin導入手順

1.サイトにアクセスし、以下の赤枠部分をクリックします。
Zeplin
Zeplin導入手順 1.サイトにアクセスし、以下の赤枠部分をクリックします。
2. 次にユーザー登録します。
Zeplin導入手順 2. 次にユーザー登録します。
3. そうすると以下の画面になりますので赤枠部分の「Windows」か「macOS」をクリックし、appをダウンロードします。
Zeplin導入手順 3. そうすると以下の画面になりますので赤枠部分の「Windows」か「macOS」をクリックし、appをダウンロードします。
4. appがダウンロードされて起動します。以下の画面が出るかと思いますがSKIPでもOKです。
Zeplin導入手順 4. appがダウンロードされて起動します。以下の画面が出るかと思いますがSKIPでもOKです。
5. 起動したapp側で「create project」を選択します。
Zeplin導入手順 5. 起動したapp側で「create project」を選択します。
6. 「Web」を選択し、createを押します。
Zeplin導入手順 6. 「Web」を選択し、createを押します。
7. 右上で適当なプロジェクト名をつけます。(今回はHoge
Zeplin導入手順 7. 右上で適当なプロジェクト名をつけます。(今回は<b>Hoge</b>)” width=”1918″ height=”840″ class=”aligncenter size-full wp-image-16758″ /><br />
8.Photoshopでデザインデータを開き、Zeplinを有効にします。(Zeplinのappをダウンロードした時点で自動的に有効になっている場合もあります)<br />
<img src=
9.有効にすると右サイドバーの上部に「Zeplin」が追加されます。
Zeplin導入手順 9.有効にすると右サイドバーの上部に「Zeplin」が追加されます。
10.アートボードを作成します。
PhotoshopからZeplinで書き出す際には、アートボードを作成する必要があります!!!

手順は、対象のレイヤーを全選択(※)して右クリック→レイヤーからアートボードを作成を選択することで作成できます。
※レイヤーの全選択はCtrl + Alt + A(Macの場合はcommand + Alt + A)

アートボードを作成すると「Zeplinにエクスポートできる準備が整いましたよ」といった感じで黄色いボタンが出てきます。

Zeplin導入手順 10.アートボードを作成します。

11.Zeplin書き出し完了!
ここでまでくれば終わったも同然です。
まず、先ほどの「Export selected artboards to Zeplin」と書かれた黄色いボタンをクリックすると以下の画面になるので、「Import」ボタンを押します。
Zeplin導入手順 11.Zeplin書き出し完了!

Import」ボタンを押してしばらく待つと、Zeplinのアプリが自動で起動し、先ほど作成したプロジェクトにアートボードが追加されます。
Zeplin導入手順 11.Zeplin書き出し完了!

あとは追加されたアートボードをクリックすれば冒頭で紹介した以下のようなことができるようになりますよ!
Zeplin導入手順 11.Zeplin書き出し完了!

Zeplinの優れた機能

Zeplinの機能はサイズを図ったり、色を取得できるだけではありません!!

実は、サイズの調整が可能です…!!!

つかいどころは、スマホのデザインカンプがRetina対応で2倍サイズになっているときです。

「Web,1x」となっているところを「2x」にすれば半分のサイズにしてくれるので、いちいちコーダーが計算してコーディングする手間や計算ミスがなくなりますよ!

★設定の変え方

1.マウスをピンク丸枠部分にもっていくと、鉛筆マークがでるのでそれをクリックする
Zeplinの優れた機能

2.「2x」を選択して「CHANGE」をクリック
Zeplinの優れた機能

これだけです。簡単ですね!

Sass

SassはCSSの拡張言語です。
これを使うと、CSSを書くのがとても早くなるのでオススメします。

とはいえイメージがわかない方もいると思うので以下の動画を見てみましょう。

Sass

なんとなくわかりましたかね?

「style.scss」というファイルにSCSS記法という記法で記述した後、Ctrl+Sで保存すると、
style.cssに良く見慣れたCSSの形に変換(コンパイル)されているのがわかります。

Sass

ボリューム的に、ここではSassの詳しい説明は省きますが、Sassには便利な色々な機能があります。

たとえば、引き数にpx値を与えてあげれば自動で計算してくれる関数を自作することができたり、
色やフォントサイズを変数に格納して管理できたりできます。

Sassを使う際には.scssファイルを、.cssファイルにコンパイルをしなければいけないのですが、そのコンパイルをする方法はいくつかあります。
今回私は、「Prepros」というGUIコンパイラを使いました。

それ以外にもエディタの拡張機能を入れればコンパイルできる方法もあります。
VsCodeの拡張機能であれば「Live Sass Compiler」を入れてあげればOKです。

コンパイルするためには?

実は、Gulpというタスクランナーを使用してコンパイルする方法が一般的です。
なぜなら、コンパイル時に画像を自動圧縮してくれたり、CSSにベンダープレフィックスを自動付与してくれたり、ブラウザを自動的にリロードしてくれたりするからです。
(Live Sass Compilerでも設定をいじるとベンダープレフィックス自動付与が可能です。)

このように、.scssファイル→.cssファイルのコンパイル以外に、様々な処理を自動化できるのがGulpをつかうメリットです。

しかし、Gulpの環境構築は挫折率が高いです笑
初心者の方は必ずこの環境構築でつまずきます。

そこで、Preprosの登場です。

これのメリットは、Gulpでやりたいことが同じように実現できるのと、なによりGUIなのでデザイナーさんなどの非エンジニアに優しいということです。
そして、それ以外にも素晴らしい機能がたくさんあります。(スマホも同期させてくれるとか)
これについてはここでは割愛し、次回のブログで書きたいと思います。

VsCodeでSassを使い始めたい方は以下の記事が参考になります
「Live Sass Compiler」の設定方法 – VScodeでSassを書く

Sassについてもっと詳しく知りたい方は以下の本がおすすめです
Web制作者のためのSassの教科書

まとめ

コーディングのスピードを速くする方法を、大きく「パソコン編」「エディタ編」「ツール編」の3つに分けてご紹介しました!

なかなかボリューム感MAXになってしまいましたが「パソコン編」と「エディタ編」に関しては基本的に抑えておきたい事項が詰まっていますのでそこだけは必ず抑えてもらえると嬉しいです。

今回紹介したものを早速明日から取り入れて、コーディング以外に時間がとられないように心がけましょう!!