ISARA

【iSARA6期/Day 8】CSS設計と保守性を考えたコーディング

2019年12月5日

バンコクのノマドエンジニア育成講座『iSARA』5期生で、フリーランスWEBエンジニアのへぼちゃんずです。

5期の講座にはなかった6期の現地講座をまとめます。

» プログラミングスクール「iSara」に興味のある人が最初に見るべきブログ

Day 8 - 1コマ目は『知らないとまずい！？いいコード、悪いコード ケーススタディ with CSS設計思想』です。

TOTO
TOTO
形にはなってるけど自分のコードが良いか悪いかわからない
GIGLIO
GIGLIO
CSS設計っておいしいの？

講師は、しょーご(@samuraibrass)さんです。

しょーごさんはiSARA3rd卒業から1年半フリーランスとして活動されていますが、

技術面（コーディング）で契約を切られたことはないそうです。

この講座で学べるのは「実務経験1年の人も意外に抜けてる知識」です。

駆け出しコーダーの方はもちろん、すでに案件を獲得されている方も必読です！

この記事を読むメリット

  • WEB制作会社と対等に話せる知識が得られる
  • 大規模サイトの設計力が身につく
  • コーディング面でのSEO対策もカバーできる
  • ディレクターやデザイナーにも必須の知識が体系的にまとめられている

そしてこれが、しょーごさんの初めての講座になります。

CSS設計と保守性を考えたコーディング【iSARA6期/Day 8】

いいコード、悪いコード ケーススタディ with CSS 設計思想

  1. 【HTML】いいコード、悪いコード
  2. 【CSS】いいコードを書くためのCSS設計思想入門

【HTML編】

  • linkタグまとめてますか？
  • scriptは<head>より</body>の上ですよ？
  • meta descriptionをページ毎に設定してますか？
  • div地獄に堕ちてませんか？
  • レイアウト3兄弟つかってますか？
  • h（見出し）タグのルール理解してますか？

linkタグまとめてますか？

<head>
　<link rel="stylesheet" href="css/style.css">
　<link rel="stylesheet" href="css/about.css">
　<link rel="stylesheet" href="css/company.css">
　<link rel="stylesheet" href="css/contact.css">
</head>

↑のようにページ毎にcssを読み込んでいる人はstyle.cssにまとめましょう。

scriptは<head>より</body>の上ですよ？

<!-- No Good -->
<head>
　<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
　<script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.1.3/iscroll.min.js"></script>
</head>
<!-- Good -->
　<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
　<script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.1.3/iscroll.min.js"></script>
</body>

head内で読み込んでいるあいだWEBページは表示されなくなります。

ユーザーは3秒待ってくれないので、離脱率が上がり、SEO的にもNGです。

致し方ない時はローディングアニメーションを使いましょう。

meta descriptionをページ毎に設定してますか？

<head>
  <title>iSara[イサラ]｜バンコクのノマドエンジニア育成講座</title>
  <meta name="keywords" content="プログラミング,ノマド">
　<meta name="description" content="iSara[イサラ]とは「稼ぐこと」にフォーカスしたエンジニア育成講座（実質０円）です。iSaraで「基本的なプログラミングスキル」は教えません。基礎的なプログラミングスキルは無料で学べる時代。iSaraでは、基礎知識学習は事前課題とチャットサポートのみ。さぁ、稼ぐスキルを身に着けましょう。"/>
</head>

meta descriptionとは、検索結果のタイトルの下に表示されるそのサイトや記事の説明（概要）文のことです。

SEO対策以外にもユーザーへのPRが目的です（設定しないとクリック率が下がる）。

表示される文字数はPCで120文字前後、スマホで70文字前後です。

ページ毎に設定するのが基本です（ページ毎に設定するんですね…！ by 実務経験1年）。

WordPressサイトなら「All in One SEO Pack」や「カスタムフィールド」を使うことによって実装できます。

ちなみに、meta keywordsはSEO的にはもうなくて良いものですが、制作会社からの指示書にはまだ指定の記載があります。

div地獄に堕ちてませんか？

<div class="article">
 <div class="article-wrapper">
  <h2>記事のタイトル</h2>
  <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト<p>
 </div>
</div>

divは意味を持たないブロックです。

多用するとGoogleがコンテンツを正しく理解できない恐れがあります。

では上記のようなケースでは何タグを使うべきでしょうか。

レイアウト3兄弟つかってますか？

  1. section → ブロックの塊ごとに区切る
  2. article → 記事ブロックを囲む
  3. aside → サイドバーや広告など（ページの内容と直接関係ない要素）を囲む

いずれにも当てはまらなそうならdivを使うという認識でOKです。

レイアウト3兄弟なんてキャッチーにネーミングされたら忘れませんね！

ここまでの内容は、しょーごさん本人がQiitaにまとめてくださいました！

あなたのコード、一面divになってません？🥺【セクショニングコンテンツを攻略せよ】 - Qiita

googleはdivの意味を理解できない（そもそもdivに意味はない）クローラーに正しくコンテンツを認識してもらうため、きちんとセクショニングコンテンツを利用せよ 今回の趣旨は簡単に言うと、上記の通りです

h（見出し）タグのルール理解してますか？

  • h1〜h6まで順番に使う
  • フォントの大きさ等デザインの都合で使わない
  • h1は1回だけ使える（h2〜h6は何回使ってもOK）
  • h1タグで広い範囲を囲むのはNG
  • h1でimgタグを囲っても良い

ロゴをh1タグで囲むケースが多いと思いますが、ロゴってだいたい画像です。

そんな時は以下のようにimgタグをh1タグで囲ってあげればOKです。

その際、altに会社名やブランド名を入れます。

<h1><a href="#"><img src="img/isara.png" alt="iSARA"></a></h1>

【CSS/Sass編】

  • 【Sass】ネストは孫まで&class命名する
  • なぜCSS設計が大事なのか
  • 四大原則
  • 四大設計思想
  • コーダー with CSS

【Sass】ネストは孫まで&class命名する

.oya {
	position: relative;

	.ko {
		position: absolute;
		top: 50%;
		left: 50%;
		
		.mago {
			text-align: center;
		}
	}
}

Sassの入れ子は3つまでを基本としましょう。

ネストが深くなると可読性が悪くなり、保守性にも問題があります。

また、タグを直接指定せずclass命名しましょう。

タグは変更に弱い（h2 → h3に変えるなど）、classなら別の場所にも使えます。

なぜCSS設計が大事なのか

  • メンテナンス性 → サイトは作って終わりではない
  • 大規模サイト対策 → 命名規則がないとクラス名がかぶる
  • 複数人でのコーディング → 制作会社によってはコーディング規約が決められている

メンテナンス性

サイトは作ってからがスタートなので、必ず更新・改修することになります。

他人はもちろん自分が見ても役割がわかるクラス名が理想です。

大規模サイト対策

ページ数が増えるほど、クラス名がバッティングしておかしな挙動を起こします。

特にトップページの一覧から、その下層ページに飛ぶ場合などsection名が同じなので、かぶりがちですよね。

また、命名規則があることによって「クラス名」や「画像名」を考える時間をなくせるので、コーディングスピードが上がります。

複数人でのコーディング

細かなコーディング規約が決められている制作会社もあるので、CSS設計を知ることで

  • 制作会社と対等に話せる
  • 受注できる案件の幅も広がる

といったメリットがあります。

四大原則

  1. 予測しやすい → クラス名を見て役割・挙動がわかる
  2. 再利用しやすい → 共通パーツを使いまわしてコードを短く、スピードを上げる
  3. 保守しやすい → 他人が見ても、自分で見てもわかるコード
  4. 拡張しやすい → 新しい機能を盛り込みやすい

CSS設計で最重要なのは

『共通コンポーネントを意識すること』

この考えはデザインにも共通する概念です。

コードを書き出す前に、共通部品を洗い出しましょう。

四大思想

  1. BEM（Block-Element-Modifier） - 利用率38%
  2. OOCSS（構造と見た目の分離） - 利用率15%
  3. SMACSS - 利用率15%
  4. FLOCSS（前者3つの良いとこ取り）

BEMが一番メジャーですが、そのBEMの命名規則をベースとした

あの、はにわまん(@haniwa008)さんが採用するCSS設計が「FLOCSS」です。

サイバーエージェントのエンジニアである谷拓樹さんが設計したもので、本も執筆されています。

Web制作者のためのCSS設計の教科書

posted with ヨメレバ
谷拓樹 インプレス 2014年08月
楽天ブックス
楽天kobo
Amazon
Kindle

FLOCSSを使って破綻しにくいCSS設計を！ | HPcode

CSS設計をしっかり行うことで破綻のしにくく再利用しやすい、保守性の高いCSSを書くことができるようになります。CSS設計の手法は有名なものがいくつかあるのですが、自分が（今のところ）好きなのはFLOCSSです。 → FLOCSSの公式ドキュメント この記事では、FLOCSSの基本的な考え方と自分の解釈の仕方について紹介していけたらと思います。

コーダー with CSS

  • 1〜3ヶ月目 → まずは形にすることが大事
  • 3ヶ月目〜 → CSS設計やSEOを意識したコーディング
  • 2年目〜 → FLOCSSやBEMなど案件毎に使い分ける

継続して案件をもらえる方程式

顧客満足度 - 事前期待値 > 0

最後に、しょーごさんが『継続して案件をもらえる方程式』を教えてくれました。

相手の期待を超える成果物を、相手の想定より早く納品する。

特にフリーランスは、労働時間 = 対価ではないので

圧倒的な価値を提供した者の勝ち

というiSARAの考えやGiveの精神にも通じます。

他にも発注者の視点に立つと、スキル面以外での『人間性』が大事とも仰っていました。

  • 相手に負担をかけないコミュニケーション → 質問はまとめて（何往復もさせない）
  • 自責に落とし込む → たとえ相手が悪くても、その結果を招いたのは自分自身

ライブコーディングYouTube動画とXDデザインカンプnote

そんなTHE・エンジニアのしょーごさんが『ライブコーディング動画』と、

『XDデザインカンプnote』をリリースされました！

  • XDで作られたデザインカンプからのコーディング
  • それを元に自分で考えてSPデザインをコーディング
  • それをしょーごさん自らが確認してくれる
  • さらにポートフォリオにしてオッケー！

という超実践的なサービスです。

「class命名」「Emmet」「Sass」「Gulp」…

『まずは形にすること』の次のステップにこのライブコーディング動画は超有益なはずです！！

コーディング練習用のXDデザインカンプ配布します｜Shogo｜note

実務未経験の方がポートフォリオとして提出できるレベル感のデザインカンプを作成しました。 もともとはyoutubeでライブコーディングを撮影するためにデザインを作成したのが始まりで、どうせなら配布しようと思い、そこから更にデザインに手を加え今回配布に至りました（アコーディオンとフォーム、記事一覧を追加）。

おわり

詳しくはオフレコですが、iSARA恒例しょーごさんの"フリーランス失敗談"も聞けました。

『クライアントに泣きながら電話した』という逸話はぜひ、しょーごさんに電話で聞いてください。笑

人気記事【全46本】プログラミングスクール『ISARA』ブログまとめ

-ISARA