突然ですが、みなさん。
コーディング（HTML,CSS）得意ですか？

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

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

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

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

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

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

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

注意点

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

↓筆者の環境

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

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

パソコン編

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

ショートカットキー

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

Windowsキー + V（クリップボード履歴）

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

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

■通常のコピペ作業↓

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

■Windowsキー + V を使った場合のコピペ作業

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

使い始めるには

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

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

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

具体的な作業手順

1. コピーしたいものをとりあえず全てコピーします

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+Shift+Tabで逆順に切り替えられますので合わせて覚えておきましょう。（↑動画でも使ってます）

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

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

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

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

Ctrl + F（文字検索）

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

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

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

Ctrl + U（HTMLソースの表示）

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

Escキー（キャンセル）

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

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

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

マウス操作

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

文字列のダブルクリック

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

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

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

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

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

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

エディタ編

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

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

Emmet

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

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

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

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

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

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

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

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

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

ショートカットキー

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

Alt + Shift + 上下キー（行の複製）

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

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

Alt + 上下キー（行の移動）

現在選択している行を移動させることができます。

Ctrl + Shift + K（行削除）

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

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

Shift押しながら上下キー（範囲選択）

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

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

Ctrl + D（文字選択）

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

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

Ctrl + F（文字検索）

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

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

Ctrl + Shift + F（プロジェクト全体検索）

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

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

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

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

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

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

これからはCtrl+Enterで次の行に移りましょう。

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

Ctrl + Enterの逆の動作をします。

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

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

コーディングに集中したいときなどに最適です。

Ctrl + P（ファイル検索）

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

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

Ctrl + ￥（ファイルの画面分割）

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

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

Ctrl + F4（開いているファイルを閉じる）

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

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

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

Alt + クリック（複数カーソル）

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

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

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

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

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

Ctrl + Shift + Z（前に進む）

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

拡張機能

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

Auto Rename Tag

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

htmltagwrap

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

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

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

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

Code Spell Checker

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

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

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

▼クラス名を「container」ではなく「contaienr」とスペルミスした際の図

Bracket Pair Colorizer 2

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

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

ツール編

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

Zeplin

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

▼Zeplinに書き出したデザイン上でクリックすると右サイドバーにCSS情報が出現する！

どうですか？簡単に必要な情報が取得できているのがわかるでしょうか。

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

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

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

Zeplin導入手順

1.サイトにアクセスし、以下の赤枠部分をクリックします。
Zeplin

2. 次にユーザー登録します。

3. そうすると以下の画面になりますので赤枠部分の「Windows」か「macOS」をクリックし、appをダウンロードします。

4. appがダウンロードされて起動します。以下の画面が出るかと思いますがSKIPでもOKです。

5. 起動したapp側で「create project」を選択します。

6. 「Web」を選択し、createを押します。

7. 右上で適当なプロジェクト名をつけます。（今回はHoge）

9.有効にすると右サイドバーの上部に「Zeplin」が追加されます。

10.アートボードを作成します。
PhotoshopからZeplinで書き出す際には、アートボードを作成する必要があります！！！

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

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

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

「Import」ボタンを押してしばらく待つと、Zeplinのアプリが自動で起動し、先ほど作成したプロジェクトにアートボードが追加されます。

あとは追加されたアートボードをクリックすれば冒頭で紹介した以下のようなことができるようになりますよ！

Zeplinの優れた機能

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

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

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

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

★設定の変え方

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

2.「2x」を選択して「CHANGE」をクリック

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

Sass

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

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

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

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

ボリューム的に、ここでは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なのでデザイナーさんなどの非エンジニアに優しいということです。
そして、それ以外にも素晴らしい機能がたくさんあります。（スマホも同期させてくれるとか）
これについてはここでは割愛し、次回のブログで書きたいと思います。

まとめ

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

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

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