KROWL MAGAZINE

これが常識！？イマドキのコーディング技術！

コーディング

Webサイト制作を学ぼうとしたとき、多くの人がHTML・CSS・JavaScriptという3つの技術に触れると思います。
これらを学んで簡単なサイトであれば作れる！という段階まで来るとある壁にぶつかります。
「一通り触ったけど、次に何を学べばいいんだろう？」

はじめまして。フロントエンドエンジニアのくめっち（@kume_KROWL）です。
僕は約一年前に未経験からKROWLを通じてWeb業界に入りました。
上記の疑問はその当時、僕が感じていたものなのですが
調べてもイマイチ欲しい情報が見つからなかった経験があります。

今回は当時の僕のように、ある程度Web制作の基礎を学んだ人が次に学ぶべき技術、知識を紹介したいと思います！

テキストエディタの機能をフル活用しよう

皆さん、テキストエディタは何を使っていますか？

以前、ひらやま（@ichigeorge）がBracketsの紹介記事を書いていましたが
こういったテキストエディタには便利な機能がたくさん搭載されています。
しかも、プラグインをインストールすることで便利な機能を追加し、自分の使いやすいようにカスタマイズすることができます。

その中でも最もメジャーと言っても過言ではない「Emmet」という機能は、コードを書く人なら必ず使用するべきです。

Emmetを使ってできること

HTMLの場合

例えば

<div id="wrap">
 <ul class="list">
   <li class="item"><a href=""></a></li>
   <li class="item"><a href=""></a></li>
   <li class="item"><a href=""></a></li>
 </ul>
</div>

このようなコードを記述したい場合、

div#wrap>ul.list>li.item*3>a

上記のように書いて設定したキー（デフォルトではTab）を押すだけでできてしまいます。
最初に知った時は衝撃でした。なぜこんな便利なものがあるのにみんな黙っていたのかと。

しまいにはこれです。

!

「!」一つで下記のようになります。

<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
</head>
<body>
 
</body>
</html>

もう二度とDOCTYPEなんて書きません。

しかもこれがHTMLだけではないのです。

CSSの場合

display: block;くらい書いてやってもいいですが、もっと楽をしましょう。

.hoge {
  d:b
  ta:c
}

これが

.hoge {
  display: block;
  text-align: center;
}

こうです。

d(isplay):b(lock)

t(ext-)a(lign):c(enter)

ってことですね。
もう暗号です。

最終的にはこうなります。

.hoge {
  d
}

↓

.hoge {
  display: block;
}

省略の次元を軽々しく超えてきますね。
「d」というアルファベットの秘めたる力を感じます。

恐らくですが、先述のように「display: block;」の「block」を指定しない場合、
Emmet側で設定された一番メジャーなものを自動的に表示してくれるのかもしれません。
「どうせblockだろ？」と見透かされているわけです。

他にも無数のショートカットが用意されているので、下記サイトなどを見ながら色々試して見てください！
https://docs.emmet.io/cheat-sheet/

オススメの拡張機能は他にも沢山あるのですがエディタにもよって違いがあるので色々触ってみて自分だけのエディタを作ってみてはいかがでしょうか。

メタ言語を使おう

HTMLやCSSをある程度使えるようになったら、次に覚えたいのがメタ言語です。
メタ言語とは、簡単にいうとHTMLやCSSをより便利に記述するための言語です。

今回はその中でももっとも使用頻度の高いCSSのメタ言語である「Sass」を紹介していきます！

Sassとは？

まず、Sassは厳密にいうと下記の二つの書き方が存在しています。

  • SASS記法
  • SCSS記法

今回紹介するのはSCSS記法にあたり、拡張子は.scssになります。

他にも様々なメタ言語が存在していますが、こちらのSCSS記法は元々のCSSに記述が近いこともあり、特に普及しているようです。

実際に見てみましょう！

header {
  background-color: #000;
}

header ul {
  margin: 60px 0;
}

header ul li {
  color: #fff;
}

こちらはheaderと、その子要素であるul,liタグにスタイルを指定しているCSSですね。
この3つくらいであればまだいいのですが、複数のセレクタを指定していくとその度に親要素を記述することになって面倒ですよね？

これをSassというメタ言語ではこのように記述することができます。

header {
  background-color: #000;
  ul {
    margin: 60px 0;
    li {
      color: #fff;
    }
  }
}

元々のCSSとそんなに記述が変わらず
要素が入れ子になることで、視覚的にも親子関係がわかりやすくなりました！
このように要素が入れ子になることを「ネストされる」ともいいます。

他にも、JavaScriptのように変数や関数を扱うことができます。
今回はすぐに実践できそうな機能をいくつか紹介します！

変数

$common_height: 100px;

.item {
  height: $common_height;
}
.card {
  height: $common_height;
}

↓

.item, .card {
  height: 100px;
}

共通の値はこのように変数で管理することでデザインの変更があった場合も、一箇所を変更するだけで済みます。

関数

@function half($val) {
  @return $val / 2;
}
 
.card {
  width: half(100px);
}

↓

.card {
  width: 50px;  
}

使用頻度が高い処理は関数として定義しましょう。
特にメディアクエリを関数化するとレスポンシブ対応が一気に楽になるのでオススメです！

スタイルの継承

.button {
  padding: 20px;
  color: #fff;
  background: #000;
  font-size: 1.4rem;
}
  
.button-red {
  @extend .button;
  background: red;
}

↓

.button {
  padding: 20px;
  color: #fff;
  background: #000;
  font-size: 1.4rem;
}

.button-red {
  padding: 20px;
  color: #fff;
  background: #000;
  // .button-red に指定した「background: red」によって打ち消される
  font-size: 1.4rem;
  background: red;
}

このように他の要素のスタイルを継承することができます。
上記の例のように基本形を作って色やサイズを変える時によく使います。

Sassには、このような便利な機能がたくさんあるので、ぜひ試してみてください！

HTMLのメタ言語としては「Pug」や「EJS」というものも現場でよく使われています。
私が仕事で静的なサイト制作を行う時はだいたいPugとSassを使っています。

SassからCSSに変換してブラウザでも扱えるようにしたりと導入のハードルは少しありますが、サイト制作のスピードが劇的に上がるので、この機会に是非使ってみましょう！

CSSの命名規則を覚えよう

仕事としてサイト制作を行なっていると、他の方が記述したコードを触ることがあります。
その時にクラス名が抽象的すぎてわからないと不便ですよね？
または自分でつけたクラス名だとしても「.title」、「.item」などの範囲が広すぎる命名をしてしまい後から書き直すことになるかもしれません。

サイト制作の永遠の課題であるクラス名の命名ですが、
実は広く普及している命名規則がいくつかあり、現場ではそのルールに沿ってつけることが多いです。
個人的によくネットの情報で見かける有名なものは以下の3つになります。

  • OOCSS
  • BEM
  • SMACSS

このような命名規則を使うとクラス名がわかりやすいだけではなく、
同じような要素を他のところでも使いまわしたりとCSSをより便利に扱うことができます。
今回はその中でよく使われているBEMに触れたいと思います。

BEMというのは下記の頭文字を取ったものになり、要素をこの3つの機能に分けていきます。

  • Block
    →独立したかたまり、様々な要素をまとめている親要素
  • Element
    →Blockの構成要素
  • Modifier
    →BlockやElementの状態

これを

block__element--modifier

というように記述していきます。

…さっぱりわからないですね。もうちょっと具体的に見てみましょう。

<ul class="list">
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
</ul>

このような要素があったとします。
実際にサイトの中で使うとこんな悩みが出てくると思います。

  • itemという名前を他のところでも使いたい
  • 3つ目のitemだけ色が違う

これがBEMを用いて記述すると下記のようになります。

<ul class="list">
  <li class="list__item"></li>
  <li class="list__item"></li>
  <li class="list__item--red"></li>
</ul>

このように書けば
「list」という要素は「item」の子要素の一つで、3つ目だけ色が赤い
という情報が一目でわかります。

要素が増えた時にも対処できます。

<ul class="list">
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
</ul>
<ul class="menu">
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
</ul>

このように「menu」という要素の中にも「item」を使った場合、
どちらの「item」なのかわからなくなってしまいますが、BEMを用いて記述することでスタイリングも容易になります。

<ul class="list">
  <li class="list__item"></li>
  <li class="list__item"></li>
  <li class="list__item--red"></li>
</ul>
<ul class="menu">
  <li class="menu__item"></li>
  <li class="menu__item"></li>
  <li class="menu__item"></li>
</ul>

しかも！
この記事内でも紹介したSassなどを使うとさらに恩恵を得られます。
上の例をSassで記述すると

.list {
  &__item {
    font-size: 1.6rem;

    &--red {
      color: red;
    }
  }
}

.menu {
  &__item {
    font-size: 1.4rem;
  }
}

このようにHTMLを見なくても要素の親子関係なども理解しやすくなります。

実際の現場ではこのような命名規則をそのまま使うだけではなく、他の要素なども取り込んで使われることが多いようですが
基本を押さえておけば新しいルールにも柔軟に対応できるようになるのではないでしょうか。

まとめ

今回紹介した技術は、わからなければサイト制作ができないというものではありません。

しかし、いざ現場に入ってみると、本当に様々な技術を駆使してサイト制作に取り組んでいます。
これらを学んでおくことで、現場で即戦力として活躍できるようになるかもしれません。

理解するのに時間がかかるものもありますが、何事も触ってみなければわかるようにはなりません。
冒頭でも書きましたが私は入社前から勉強しておきたかったです。そしたらもっと楽できたのに…

KROWLではイベントや交流会、勉強会などを定期的に開催しているので
気になった方はチェックしてみてください！

KROWLで、はじめよう Web業界への転職準備

KROWLとは
未経験からWeb業界デビューするために必要なスキルや知識、経験が得られるサービスです。
専門スタッフによる転職支援も行っています。

関連記事

KROWLで、はじめよう Web業界への転職準備
KROWLとは？
ほぼ毎週木曜日 KROWL勉強会 18:00〜20:00

注目の記事