みなさんは、コーディングするスピードは早いですか？
突然こんな質問されても「うーん…どうだろう」と思う方が多いのではないでしょうか。
コーディングの速さも立派なスキルです。
「コーディングできます」と言ってもあまり作業スピードが遅ければプロの世界で通用しません。
なので、今回はコーディングスピードを上げる方法を紹介します。
コーディングスピードが上がれば、費用対効果が高くなり、効率的に稼ぐことができます。
コーディングで特に大事な3つの要素
コーディングするときあなたはどのようなことを意識していますか？
コーディングするときに意識するべき、重要な要素は以下の3つです。
・コーディングスピード
・デザイン通りのコーディング
・メンテンス性の高いコーディング
今回、紹介するのはコーディングスピードです。
具体的な方法を紹介します。
Emmet
Emmetは、「Visual Studio Code」「Sublime Text」「Atom」「Brackets」などメジャーなエディタで使用できる拡張機能です。
コーディングの記述量を減らすことができ、作業時間を大幅に短縮できます。
Emmet公式ホームページ：https://emmet.io/
コーダーの方には、必須の機能といえる拡張機能です。
具体的な使い方を説明します。
HTMLを記述する
まずは、EmmetでHTMLを記述しましょう。
まずはhタグを記述します。
「h1」と記述して、タブキーをクリックしてください。
<h1><//h1>
このように表示されたと思います。
次は「h1〜h6」を試しましょう。
<h1><//h1> <h2><//h2> <h3><//h3> <h4><//h4> <h5><//h5> <h6><//h6>
もちろん、短縮して記述できるのは「hタグ」だけではありません。
次は、「ulタグ」と「liタグ」を記述しましょう。
「ul」と記述して、タブキーをクリックしてください。
<ul></ul>
このように、表示されます。
次は、この「ulタグ」の中に「liタグ」を入れましょう。
「ul>li」と記述して、タブキーをクリックしてください。
<ul> <li></li> </ul>
このように、記述されたと思います。
「>」を使えば、子要素として記述することが可能です。
次は、「ulタグ」の中の「liタグ」の数を増やしましょう。
「ul>li*6」と記述して、タブキーをクリックしてください。
<ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>
このように、記述されたと思います。
「*」を使えば、数字で指定した数だけ子要素を記述することが可能です。
「()」を使えば、以下のように記述できます。
「ul>(li>a)*6」と記述して、タブキーをクリックしてください。
<ul> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> </ul>
「liタグ」の中に「aタグ」を入れることができました。
グローバルメニューなどをコーディングするときに便利な方法です。
しかし、これ以外にもこのように記述することができます。
「ul>li*6>a」と記述して、タブキーをクリックしてください。
<ul> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> </ul>
上で紹介した記述方法をとは異なりますが、結果は同じです。
また、「+」を使うことで隣接要素を記述できます。
「dl>dt+dd」と記述して、タブキーをクリックしてください。
<dl> <dt></dt> <dd></dd> </dl>
このように、「+」を使うことで隣接要素を記述できます。
隣接要素を複数記述したい場合は、「()」で括ることで記述できます。
「dl>(dt+dd)*6」と記述して、タブキーをクリックしてください。
<dl> <dt></dt> <dd></dd> <dt></dt> <dd></dd> <dt></dt> <dd></dd> <dt></dt> <dd></dd> <dt></dt> <dd></dd> <dt></dt> <dd></dd> </dl>
「{}」を使うことでテキストを入力できます。
「ul>li*6>a{グローバルリンク}」と記述して、タブキーをクリックしてください。
<ul> <li><a href="">グローバルリンク</a></li> <li><a href="">グローバルリンク</a></li> <li><a href="">グローバルリンク</a></li> <li><a href="">グローバルリンク</a></li> <li><a href="">グローバルリンク</a></li> <li><a href="">グローバルリンク</a></li> </ul>
また、「$」を使うことでテキストを入力できます。
「ul>li*6>a{リンク$}」と記述して、タブキーをクリックしてください。
<ul> <li><a href="">リンク1</a></li> <li><a href="">リンク2</a></li> <li><a href="">リンク3</a></li> <li><a href="">リンク4</a></li> <li><a href="">リンク5</a></li> <li><a href="">リンク6</a></li> </ul>
「id名」と「class名」などはEmmetではこのように記述できます。
・id名：div#idname
・class名：div.classname
「div#idname」と記述して、タブキーをクリックするとこのようになります。
<div id="idname"></div>
また、「div.classname」と記述して、タブキーをクリックするとこのようになります。
<div id="classname"></div>
Emmetは、、htmlテンプレートをすぐに記述することも可能です。
「!」と記述して、タブキーをクリックするとこのようなHTMLのテンプレートが記述されます。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html>
また、「html:5」と記述して、タブキーをクリックするとこのようなHTMLのテンプレートが記述されます。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html>
「!」と「html:5」を記述して、タブキーをクリックしても結果は同じです。
「!」の方が記述量が少ないのでおすすめです。
CSSを記述する
次は、CSSの記述方法を学びましょう。
まず、EmmetにおけるCSSの特徴について説明します。
EmmetにおけるCSSの特徴は以下の2つです。
・「-」(ハイフン)で構成されているプロパティは、それぞれの頭文字を入力すれば自動的に記述される
・「-」(ハイフン)を先頭に入力すると、ベンダープレフィックスが自動的に記述される
文字で説明しても理解するのは、難しいと思います。
実際にコードを見て、学びましょう。
「padding」「margin」を適用するときは、このように記述してください。
・padding：「p指定する数字」
・margin：「m指定する数字」
「p10」と記述して、タブキーをクリックするとこのように記述されます。
padding: 10px;
「m10」と記述して、タブキーをクリックするとこのように記述されます。
margin: 10px;
「top・right・bottom・left」はこのように記述します。
padding-top: 10px;//「pt10」と入力
padding-right: 10px;//「pr10」と入力
padding-bottom: 10px;//「pb10」と入力
padding-left: 10px;//「pl10」と入力
margin-top: 10px;//「mt10」と入力
margin-right: 10px;//「mr10」と入力
margin-bottom: 10px;//「mb10」と入力
margin-left: 10px;//「ml10」と入力
また、このように記述することでそれぞれに値を指定できます。
padding: -10px 20px 30px 40px;//p10-20-30-40
margin: -10px 20px 30px 40px;//m10-20-30-40
padding: 10px 20px;//p10-20
margin: 10px 20px;//m10-20
padding: 0 auto;//p0-auto
margin: 0 auto;//p0-auto
単位も指定することが可能です。
フォントサイズを例に単位の説明をします。
「px・em・rem・%」の指定は、このようになります。
・px：指定なしでピクセルに変換される
・em：「e」と入力して変換される
・rem：「r」と入力して変換される
・%：「p」と入力して変換される
実際のコードは、このようになります。
font-size: 16px;//「fz16」と入力
font-size: 16em;//「fz16e」と入力
font-size: 16rem;//「fz16r」と入力
font-size: 16%;//「fz16p」と入力
他にもこのような記述方法があります。
・bg#000→background: #000000; ・c#000→color: #000000; ・dib→display: inline-block; ・w100→width: 100px; ・bd+→border: 1px solid #000; ・bdrs10→border-radius: 4px; ・tac→text-align: center; ・tf→transform: ・trs→transition: ・psr→position: relative; ・psa→position: absolute;
また、Emmetはベンダープレフィックスにも対応しています。
「box-shadow」の場合、このように記述します。
//-bxsと記述
-webkit-box-shadow: inset hoff voff blur color;
box-shadow: inset hoff voff blur color;
「box-sizing」の場合、このように記述します。
//-bxと記述
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
//-bxcと記述
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
「transition」の場合、このように記述します。
//-transと記述
-webkit-transition: prop time;
-o-transition: prop time;
transition: prop time;
「border-RADIUS」の場合、このように記述します。
//-dbrsと記述
-webkit-border-bottom-left-radius: ;
-moz-border-bottom-left-radius: ;
-ms-border-bottom-left-radius: ;
-o-border-bottom-left-radius: ;
//-bdrs10と記述
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
などなどEmmetには、様々なスニペットが登録されています。
他にもスニペットが用意されているので、一度確認してください。
Emmetスニペット一覧：https://docs.emmet.io/cheat-sheet/
また、Emmetに登録されているスニペットは、カスタマイズすることも可能です。
スニペットのカスタマイズは、「snippets.json」ファイルで設定できます。
Sassを使う
CSSをより効率的に記述するには、Sassを使うのがおすすめです。
Sassとは、「Syntactically Awesome Stylesheets」の略称です。
「メタ言語」とも呼ばれますが、CSSをより効率的に記述できるようにした拡張版だと考えてください。
Sassを使うことで、作業効率が上がるだけではありません。
変数や関数を使用することで、見やすくなり保守性が高くなります。
Sassの使い方について説明します。
Sassの使い方
実際にSassの使い方を説明します。
まずは、Sassを使うための下準備から始めましょう。
まずは、任意(デスクトップやダウンロードなど)の場所にフォルダを作成してください。
そのフォルダの中に以下のファイルとフォルダを作成します。
・index.html(ファイル)
・css(フォルダ)
・scss(フォルダ)
さらに、「cssフォルダ」と「scssフォルダ」の中に以下のファイルを作成してください。
・cssフォルダの中に「main.css」ファイルを作成する
・scssフォルダの中に「main.scss」ファイルを作成する
ここまでできたら、次はコマンドでの操作になります。
Macの方はターミナル、Windowsの方はコマンドプロンプトを開いてください。
次に現在使用しているファイルの階層まで移動しましょう。
コマンドによる階層移動は「cd」コマンドでおこないます。
デスクトップにフォルダを作成した場合、このようなコマンドになります。
cd /Desktop/(フォルダの名前)
移動できたら、現在の階層が正しいのか知るために「pwd」コマンドを入力しましょう。
pwd
このコマンドを入力すると現在の階層が表示されます。
次は、sassのコードをcssに変換するためのコマンドを入力します。
以下のコマンドを入力してください。
sass --style expanded --watch scss:css
このようなコマンドを入力すると、自動的にsassファイルに記述したコードをcssのコードに変換されます。
ここまでできたら下準備は完了です。
実際にコードを見て、sassの使い方を理解しましょう。
sassを利用する1つのメリットとして、コードの冗長化を防ぐことができます。
例えば、親子関係の要素をcssで記述するとこのようになります。
CSS
.wrap {
width: 960px;
}
.main {
margin: 0 auto;
}
.main p {
font-size: 1.6rem;
}
.main h2 {
font-size: 2.4rem;
font-style: bold;
}
.main h3 {
font-size: 2rem;
font-style: bold;
}
.main .under_line {
text-decoration: underline;
}
このように「.main」という記述が重複しています。
cssでは、子要素にスタイルを適用する場合、親要素を同時に書くのが一般的です。
しかし、これでは「.main」というコードを記述する分時間が掛かります。
sassを利用すれば、そのような時間を短縮することが可能です。
例として以下のコードを見てください。
SASS
.wrap{
width: 960px;
}
.main{
margin: 0 auto;
p{
font-size: 1.6rem;
}
h2{
font-size: 2.4rem;
font-style: bold;
}
h3{
font-size: 2rem;
font-style: bold;
}
.under_line{
text-decoration: underline;
}
}
sassは、入れ子形式で記述します。
このように記述することで、親要素を記述しなくても子要素にスタイルを適用することが可能です。
上のsassコードを自動変換すると1つ上で紹介したcssと同じコードになります。
入れ子開式で記述できるだけでもとても便利ですが、sassには便利な機能が他にも搭載されています。
作業効率を上げるために必須の機能を紹介するので、ぜひ参考にしてください。
子セレクタと隣接セレクタの指定
sassでは子セレクタと隣接セレクタは、このように記述します。
SASS
.section{
font-size: 1.6rem;
> h2{
font-size: 2.4rem;
color: #333;
}
+ info{
font-size: 1.8rem;
margin-bottom: 1rem;
}
}
「+」「>」は1つスペース空けることで、自動的にスタイルが適用されます。
上のコードを自動変換したcssコードがこれです。
.section {
font-size: 1.6rem;
}
.section > h2 {
font-size: 2.4rem;
color: #333;
}
.section + info {
font-size: 1.8rem;
margin-bottom: 1rem;
}
親セレクタの参照
sassで親セレクタを参照する方法は、&(アンバサンド)を使用します。
&(アンバサンド)をこのように記述すると親セレクタを参照できます。
SASS
a{
text-decoration: none;
&:hover{
text-decoration: underline;
}
}
.pageNav{
li{
width: 50%;
}
&.prev{
float: left;
}
&.next{
float: right;
}
}
上のコードを自動変換するとこのようになります。
CSS
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.pageNav li {
width: 50%;
}
.pageNav.prev {
float: left;
}
.pageNav.next {
float: right;
}
変数
sassではプログラミングのように変数を使用できます。
変数を使用することで、コードの記述量をグッと減らせます。
変数名の前に「$」をつけることで、変数を作成することが可能です。
それでは、実際にsassのコードを見てみましょう。
SASS
$white: #FFFFFF;
$black: #000000;
$red: #FF0000;
$blue: #0000FF;
$yellow: #FFFF00;
.header{
color: $white;
}
.nav{
color: $black;
}
.main{
color: $red;
}
.section{
color: $blue;
}
.footer{
color: $yellow;
}
.header {
color: #FFFFFF;
}
.nav {
color: #000000;
}
.main {
color: #FF0000;
}
.section {
color: #0000FF;
}
.footer {
color: #FFFF00;
}
importを使ったファイル分割
sassは、importを使ったファイル分割が可能です。。
「import」を使って読み込みたいファイルのパスを記述します。
また、読み込ませたいファイルの名前の先頭には「_」をつけます。
実際のコードを見てみましょう。
SASS
@import "/base/_base"; @import "/base/_reset";
このように記述すること外部にあるcssファイルを読み込むことができます。
mixin
mixinはプログラミングの関数にあたるような機能です。
複数のスタイルを定義しておき、他の場所で呼び出せます。
実際のコードを見てみましょう。
SASS
@mixin section_ttl_set{
margin-bottom: 1rem;
font-size: 3rem;
color: #222;
text-align: center;
}
.section_ttl{
@include section_ttl_set
}
上のコードを変換すると、以下のようになります。
CSS
.section_ttl {
margin-bottom: 1rem;
font-size: 3rem;
color: #222;
text-align: center;
}
設計図は紙に書く
「レイアウト・id名・class名」などは、一度紙に書くのがおすすめです。
頭の中で設計を考えていても、途中であいまいになったり、上手く整理できていないこともあります。
頭を整理する意味でも紙に書きましょう。
その際、細部まで丁寧に記述する必要はありません。
おおまかに、間違いのないように書いてください。
まとめ
いかがでしたか？
今回は、コーディングスピードを上げる3つのコツについて説明しました。
基本的には、「Emmet」「Sass」を使うことで作業時間を大幅に短縮できます。
また、id名やclass名などの命名規則などを自分であらかじめ決めておくことで、命名に迷う必要がなくなり時間短縮につながります。
色々な方法を試してください。