教科書には載っていないコーディングする人に知っていて欲しい14のこと

ウェブ制作
はる
はる

フロントエンジニアのはるです。

今回は、コーディングをする人で入門者を脱却するために私が思う気をつけて欲しいことを紹介します。

プルリクチェックをする機会も多く、コーディングを始めたばかりの人たちにこれは知っていて欲しいなと、思うことを紹介したいと思います。

これらを気をつけることで、更新しやすいサイト制作ができます。
入門者の方は特にこの記事をきっかけに深く調べて勉強してみてください。

コーディングする人に知っていて欲しい14のこと

【1】CSSは機能・パーツ単位でファイル分割

HTML・CSSでコーディングする上で自由にclass名をつけてコーディングすると、長く運用していると、思わぬ地獄をみることがあります。それを回避するために、命名規則が必要です。SMACCやBEMなど、ありますがおすすめなのがFLOCSSです。

フォルダ構成までしっかり規則合わせてコーディングすることで、とてもみやすく管理しやすいソースコードになります。

新しいタブでプレビュー

FLOCSSとは

デザイナー・エンジニアのhilokiさん発案のCSS構成案。

FLOCSS概要: https://github.com/hiloki/flocss

【2】SCSSはネストと『&』とクラス名の分割はしないほうがいい

おすすめしない例

.hoge {
    display: block;
    &__fuga {
        display: inline-block;
    }
}

良い例

.hoge {
    display: block;
}

.hoge__fuga {
    display: inline-block;
}

エディターで、 『hoge__fuga』を探したい場合に、 『おすすめしない例』の記述方法で記述すると後から、検索しづらくなります。『良い例』なら、『.hoge__fuga』で検索すればいっぱつで見つけれます。

【3】idセレクタ は、使い回しが見込める要素には使用しない

よくない例

<div id="js-more">もっとみる</div>
let moreButton = document.getElementById('js-more');

良い例

<header id="js-header">
    <h1>サイト名</h1>
</header>

一つのページで繰り返し出現する可能性があるものには、idセレクタを利用しない。
もともと、HTMLのルールとしてid名の重複ができません。
よって、『よくない例』の様に、同じページ内で複数回登場するかもしれない要素でidセレクタを指定し、JavaScriptでの操作する記述をしてしまったりすると、複数回登場させる時にHTMLの書き換えとJavaScriptの書き換えの２つのことをやらなければなりません。
最初から、複数回登場してもいい様に作り込んでおきましょう。

header の様に、一回しか登場しない様な要素の場合は使用してもいいでしょう。JavaScriptのパフォーマンス的にもその方が良いです。

【4】CSSの『!important』使用すると幸せになれない

基本的に、!important は使用しない記述をします。
使用し始めると、!important を上書きしたい時に、 !important を頑張って指定する記述をすることになります。地獄です。

唯一使っていい場合は、外部のサービスを使い埋め込みコードなどで出力された物などを整えるためにやむおえなく使う場合のみ使ってもいいでしょう。。。

【5】class名で連番の数字を使わない

よくない例

<div class="profile-card card--2"></div>

<div class="profile-card card--1"></div>

<div class="profile-card card--3"></div>

良い例

<div class="profile-card card--tanaka"></div>

<div class="profile-card card--sato"></div>

<div class="profile-card card--suzuki"></div>

クラス名をつけて、それぞれのModifierで微調整を行いたい場合などについつい数字でやってしまいたくなりますが、それをやってしまうとのちの修正で順番が変わったりします。すると、数字が意味わからなくなり地獄です。

できる限り、固有の名前になるようにするといいでしょう。

【6】JS操作する時はjs-xxxで専用のクラス名をつける

よくない例

<div class="c-close">モーダルを閉じる</div>

<div class="c-close-icon">×</div>
let $close = $('.c-close');
$close.on('click', ()=>{
    // 処理
});

let $closeIcon = $('.c-close-icon');
$closeIcon.on('click', ()=>{
    // 処理
});

良い例

<div class="js-modal-close c-close">モーダルを閉じる</div>

<div class="js-modal-close c-close-icon">×</div>
let $modalClose = $('.js-modal-close');
$modalClose.on('click', ()=>{
    // 処理
});

装飾のクラス名とJSで操作するクラス名を分けることで、機能だけ他に移したり、複数利用ができるようになります。

【7】CSS transition propaty は必要最低限にする

よくない例

.hoge {
    transition: all .25s ease;
    opacity: 1;
    transform: translateY(0);

    &:hover {
        opacity: .5;
        transform: translateY(10px);
    }
}

良い例

// 限定する
.hoge {
    transition: opacity .25s ease, transform .25s ease;
    opacity: 1;
    transform: translateY(0);

    &:hover {
        opacity: .5;
        transform: translateY(10px);
    }
}
// または　上書き
.hoge {
    transition: all .25s ease;
    transition-property: opacity, transform;
    opacity: 1;
    transform: translateY(0);

    &:hover {
        opacity: .5;
        transform: translateY(10px);
    }
}

transition のプロパティー指定は、『all』にせず、個別に指定することで余計な意図しないアニメーションを減らしパフォーマンス向上をさせることができます。

よく、ブレイクポイントの切り替えタイミングで意図せずアニメーションが適応されてしまっている場合があります。

【8】JSでのアニメーションは極力避け、 状態管理のクラス名をつけてCSSでアニメーションで役割を分ける

例

let $close = $('.js-close');
$close.on('click', ()=>{
    $close.addClass('is-hide');
});
.close {
    transition: opacity .25s ease;
    opacity: 1;

    &.is-hide {
        opacity: 0;
    }
}
// 正確にはこれはまずいけど簡略化するため

JS では 状態管理のクラス名 『is-xxx』を付与したり外したりするだけにする。
クラスがついたらCSSでアニメーションをさせ、CSSとJSの役割分担をできるだけ分ける。

JSにCSSを書かなくなる、ことでアニメーションはCSSだけみれよくなる。

【9】アニメーションがもっさり・画像がボケてる時は、 whill-change を試す

「画像をtransformで変形した場合などに縁がボケる。」
「特定要素のアニメーションでカクツキがある」

そんなときに、will-change プロパティをしていすることで、コンピューターにグラフィック処理を明示させることができます。

でも多用すると、逆効果の場合もあるのでここは綺麗にさせたい！ってところで使ってあげます。

will-change - CSS: カスケーディングスタイルシート | MDN
CSS の will-change プロパティは、どのような要素の変更が予測されているかブラウザーに助言します。ブラウザーは要素が実際に変更される前に、最適化をセットアップすることができます。この種の最適化は、実際に変化が求められる前に、潜...
developer.mozilla.org

【10】リクエスト数を意識するとgoogle lighthouse の点数が上がる

WordPressのテーマをいろいろ研究してると高得点をとるために、CSSをインラインで読み込みリクエスト数を減らし点数を上げているテーマを見たりします。

うまくリクエストを減らすと表示速度に影響させることができる場合があります。

他にも 画像ではなく インラインSVGをうまくつかったり、LazyLoadもその一つで、画像のリクエストを後回しにするテクニックです。意識をすると改善できるポイントが見えてきます。

【11】JS外部読み込みをhead内に書くときはブロッキングに注意

JavaScriptの外部読み込み時に、HTMLタグのhead 内に書くときは async defer を使い、Webページの描画のブロッキングしないように意識しましょう。async defer は対応ブラウザに注意し利用してください。わからなければ </body> の前に書くのが無難です。

参考になりそうな記事: Qiitaの記事

【12】JSでdom取得して処理するものに対して、 そのdomがなかった場合の処理のスキップの記述もしておく

例

// jQuery
let addText = () => {
    let $text = $('.js-text');
    
    if (!$text[0]) {
        // 要素がないなら以下を処理しない
        return;
    }
    
    // 複雑な処理
    // 実行させる必要がない処理
  }
  
  addText();

そのDOMがなかったときの、スキップ処理を記述しておくことで意図しないタイミングでJavaScriptエラーが起こらないようにすることができる。

【13】リンクのクリックできる範囲に注意 aタグにパディングで気を遣う

See the Pen by blanket11 (@blanket11hal) on CodePen.

aタグ部分にpaddingをつけ、クリック範囲を広げてあげる気遣いをわすれない。
クリック範囲に余白がないと、クリックがしづらいので注意。

【14】つねに複製しても耐えられる作りにする(コンポーネント化の意識)

常に、要素が繰り返し使われることを意識し、色々な箇所で使いまわせる様に初めから作ることを意識しましょう。

また、特定要素が消えた時にもうまいこと成立するようにすることも大事です。

Webサイトは生きいるので、あらゆる変化に対応した作りに最初からしておくと後々の変更時が楽になります。

まとめ

新人フロントエンジニアなどに、伝えたいことをざっとまとめてみました。
日々仕事をしていて染み込みすぎてこれ以外に意識していることがあるかもしれません。気づいた時に追記していきたいと思います。

タイトルとURLをコピーしました