フロントエンドのガイドライン
HTML、CSS、およびJavaScriptコードを設計、フォーマットするためのルールとガイドライン。 その目標は、コードの品質を改善し、コラボレーションとインフラストラクチャサポートを促進することです。翻訳者から
改めて皆様にあいさつを申し上げます。私の名前はマキシム・イワノフです。そして今日、あなたに役立つ翻訳を準備しました。 ベルギーの開発者であるBenjamin De Cock（Benjamin De Cock）は、HTML、CSS、JSを記述するためのベストプラクティスとしての地位を確立するコード設計のガイドラインをいくつか収集しました。 もちろん、多くの推奨事項があります。たとえば、 Googleからの優れたガイドラインがあります 。おそらく他にも何かがありますが、少なくともそれらのいくつかに従うと、コードが改善されることを期待できます。 場合によっては、これらのガイドラインに従うことは有用ではありませんが、まったく逆です。 一般的に、それはすべてあなたの経験とケースのビジョンに依存します。初心者の場合、おそらく他の人が書いていることを評価するのがより有益であり、社会ではそれが真実であると考えられます。誰だと思いますか。 それでは始めましょう。HTML
CSS
Javascript
- 性能
- 外部からの独立
- ネイティブ
- 強制比較
- サイクル
- 引数
- 適用方法の使用
- bindメソッドの使用
- 高階メソッド
- 歌
- キャッシング
- 変数
- 条件
- イテレータ
- 連想配列としてのオブジェクト
- カレー
- 読みやすさ
- コードの再利用
- 依存関係
HTML
意味論
HTML5は、ドキュメントまたはコンテンツの正確な意味記述を目的とした十分な数の要素を提供します。 したがって、語彙が上手くいっていることを確認してください。
<!-- --> <div id="main"> <div class="article"> <div class="header"> <h1>Blog post</h1> <p>Published: <span>21st Feb, 2015</span></p> </div> <p>…</p> </div> </div> <!-- --> <main> <article> <header> <h1>Blog post</h1> <p>Published: <time datetime="2015-02-21">21st Feb, 2015</time></p> </header> <p>…</p> </article> </main>
コードで使用する要素のセマンティクスを必ず理解してください。 これらのセマンティック要素に中立のままでいる場合、セマンティック要素を不適切に使用したり、間違った場所で使用したりするのは非常に悪いことです。
<!-- --> <h1> <figure> <img alt=Company src=logo.png> </figure> </h1> <!-- --> <h1> <img alt=Company src=logo.png> </h1>
簡潔さ
簡単にコードを書いてみてください。 XHTMLから流れる古い習慣を忘れてください。
<!-- --> <!doctype html> <html lang=en> <head> <meta http-equiv=Content-Type content="text/html; charset=utf-8" /> <title>Contact</title> <link rel=stylesheet href=style.css type=text/css /> </head> <body> <h1>Contact me</h1> <label> Email address: <input type=email placeholder=you@email.com required=required /> </label> <script src=main.js type=text/javascript></script> </body> </html> <!-- ( ) --> <!doctype html> <html lang=en> <meta charset=utf-8> <title>Contact</title> <link rel=stylesheet href=style.css> <h1>Contact me</h1> <label> Email address: <input type=email placeholder=you@email.com required> </label> <script src=main.js></script> </html>
読みやすさ
コードの可読性は二次的であってはなりません。 もちろん、サイトを確実に改善するために最適化（WCAG）の専門家である必要はありませんが、今すぐ、コードの改善に役立つ小さなものをすぐに修正することができます。
-alt属性を正しく使用する
-名前（リンク）と要素（ボタン）を接続し、意味で名前を付けます（ <div class = button> -これは残虐行為です）
-情報として、花の名前に依存しないでください
-特定のラベルとフォーム要素を明示的にバインドします
<!-- --> <h1><img alt="Logo" src="logo.png"></h1> <!-- --> <h1><img alt="My Company, Inc." src="logo.png"></h1>
文書の言語
言語定義と文字エンコーディングはオプションですが、HTTPヘッダーにリストされている場合でも、常にドキュメントレベルで宣言することをお勧めします。 優先文字エンコードはUTF-8です。
<!-- --> <!doctype html> <title>, .</title> <!-- --> <!doctype html> <html lang=ru> <meta charset=utf-8> <title>, .</title> </html>
有効性
コンテンツにスクリプトの読み込みを追加する正当な理由がない場合は、ドキュメントの最後にスクリプトを書き込もうとするため、スクリプトはページのレンダリングをブロックしません。 非常に重いスタイルシートがある場合は、それらをいくつかに分割して個別にロードし、プライマリコンテンツがすぐにレンダリングされるようにします。 もちろん、ファイルが多いほど、HTTPリクエストが多く、2つのリクエストが1つよりも遅くなりますが、この場合、目的のコンテンツの表示速度が重要な要素になります。
<!-- --> <!doctype html> <meta charset=utf-8> <script src=analytics.js></script> <title>Hello, world.</title> <p>...</p> <!-- --> <!doctype html> <meta charset=utf-8> <title>Hello, world.</title> <p>...</p> <script src=analytics.js></script>
CSS
セミコロン
セミコロンは純粋に技術的なルール区切り記号ですが、CSSは常にセミコロンを終了演算子として扱います。
/* */ div { color: red } /* */ div { color: red; }
ボックスモデル
ブロックモデルは、ドキュメント全体で同じであることが理想的です。 グローバルルール* {box-sizing：border-box; }これは正常ですが、特定の要素のブロックモデルを変更できないことに注意してください。
/* */ div { width: 100%; padding: 10px; box-sizing: border-box; } /* */ div { padding: 10px; }
ストリーム
要素なしで実行できる場合は、要素の標準の動作を変更しないでください。 ドキュメントストリームでアイテムをクラシック表示に保ちます。 たとえば、画像の下のスペースを削除しても、その表示には影響しません。
/* */ img { display: block; } /* */ img { vertical-align: middle; }
同様に、メインスレッドなしでできる場合は、メインスレッドからアイテムをプルしないでください。
/* */ div { width: 100px; position: absolute; right: 0; } /* */ div { width: 100px; margin-left: auto; }
ポジショニング
CSSで要素を配置するには多くの方法がありますが、以下のプロパティに限定してください。 優先順に：
display: block; display: flex; position: relative; position: sticky; position: absolute; position: fixed;
セレクター
DOMに関連付けられているセレクターの組み合わせを最小限に抑えます。 場合によっては、3つの構造セレクター（疑似クラス、子孫、およびコンビネーター）を介して検索するよりも、検索する要素に追加のクラスを追加した方が良い場合があります。
/* */ div:first-of-type :last-child > p ~ * /* */ div:first-of-type .info
セレクターのオーバーロードを避けます。
/* */ img[src$=svg], ul > li:first-child { opacity: 0; } /* */ [src$=svg], ul > :first-child { opacity: 0; }
特異性
オーバーライドできない値とセレクターは使用しないでください。 idの使用を最小限にし、ルールを避けます！重要
/* */ .bar { color: green !important; } .foo { color: red; } /* */ .foo { color: red; } .foo.bar { color: green; }
オーバーライド
セレクタースタイルをオーバーライドすると、デバッグが困難になります。 可能であればこれを避けてください。
/* */ li { visibility: hidden; } li:first-child { visibility: visible; } /* */ li + li { visibility: hidden; }
継承
とにかくスタイルを継承できるセレクターの定義を複製しないでください。
/* */ div h1, div p { text-shadow: 0 1px 0 #fff; } /* */ div { text-shadow: 0 1px 0 #fff; }
簡潔さ
コードを簡潔にします。 まったく必要のない場所で複数のプロパティを使用しないようにしてください。
/* */ div { transition: all 1s; top: 50%; margin-top: -10px; padding-top: 5px; padding-right: 10px; padding-bottom: 20px; padding-left: 10px; } /* */ div { transition: 1s; top: calc(50% - 10px); padding: 5px 10px 20px; }
英語の指定
できれば英語の数学を使用してください。
/* */ :nth-child(2n + 1) { transform: rotate(360deg); } /* */ :nth-child(odd) { transform: rotate(1turn); }
ベンダープレフィックス
レガシープレフィックスを使用しないでください。 本当に使用する必要がある場合は、この場合、標準の前に追加します。
/* */ div { transform: scale(2); -webkit-transform: scale(2); -moz-transform: scale(2); -ms-transform: scale(2); transition: 1s; -webkit-transition: 1s; -moz-transition: 1s; -ms-transition: 1s; } /* */ div { -webkit-transform: scale(2); transform: scale(2); transition: 1s; }
アニメーション
アニメーションよりもトランジションを使用することが望ましい場合があります。 不透明度と変換を優先してプロパティをアニメートすることは避けてください。
/* */ div:hover { animation: move 1s forwards; } @keyframes move { 100% { margin-left: 100px; } } /* */ div:hover { transition: 1s; transform: translateX(100px); }
単位
無次元の値を使用します。 すべてを相対単位で計算する場合は、 remを使用してみてください。 ミリ秒よりも秒を使用することをお勧めします。
/* */ div { margin: 0px; font-size: .9em; line-height: 22px; transition: 500ms; } /* */ div { margin: 0; font-size: .9rem; line-height: 1.5; transition: .5s; }
カラーモデル
透明性が必要な場合は、 rgbaを使用します 。 それ以外の場合は、常に16進形式を使用します。
/* */ div { color: hsl(103, 54%, 43%); } /* */ div { color: #5a3; }
描画
CSSを使用してリソースを簡単に再生できる場合は、httpリクエストを避けてください。
/* */ div::before { content: url(white-circle.svg); } /* */ div::before { content: ""; display: block; width: 20px; height: 20px; border-radius: 50%; background: #fff; }
カーキ色
それらを使用しないでください。
/* */ div { // position: relative; transform: translateZ(0); } /* */ div { /* position: relative; */ will-change: transform; }
Javascript
性能
読みやすく、表現力豊かで、正しいコードは、パフォーマンスよりも重要です。 実際、JavaScriptがパフォーマンスのボトルネックになることはありません。 画像圧縮、httpリクエストとネットワークアクセスの最適化、DOMツリーの再計算などに注意することをお勧めします。 この記事の推奨事項の少なくとも1つを覚えている場合は、それに依存してください。
/* ( ) */ const arr = [1, 2, 3, 4]; const len = arr.length; var i = -1; var result = []; while (++i < len) { var n = arr[i]; if (n % 2 > 0) continue; result.push(n * n); } /* */ const arr = [1, 2, 3, 4]; const isEven = n => n % 2 == 0; // const square = n => n * n; // : (param1, param2, …, paramN) => expression const result = arr.filter(isEven).map(square);
読むには ：
1. Babeljs（ES5の例）： 悪い vs 良い
2. 矢印関数と反復配列メソッド
外部からの独立
無料の機能を作成してみてください。 すべての関数とメソッドは、理想的には二次的な性質のものではなく、外部データに依存する必要があり、その結果、新しいオブジェクトを返し、既存のオブジェクトを変更しないでください。
/* */ const merge = (target, ...sources) => Object.assign(target, ...sources); merge({ foo: "foo" }, { bar: "bar" }); // => { foo: "foo", bar: "bar" } /* */ const merge = (...sources) => Object.assign({}, ...sources); merge({ foo: "foo" }, { bar: "bar" }); // => { foo: "foo", bar: "bar" }
読むには ：
1. Babeljs（ES5の例）： 悪い vs 良い
2. 残留パラメーター
ネイティブ
可能な限り標準的な方法に依存してください。
/* */ const toArray = obj => [].slice.call(obj); /* */ const toArray = (() => Array.from ? Array.from : obj => [].slice.call(obj) )();
読むには ：
1. Babeljs（ES5の例）： 悪い vs 良い
2. 配列のようなオブジェクト
強制比較
余分な比較は意味をなさないため、避けてください。
/* */ if (x === undefined || x === null) { /* ... */ } /* */ if (x == undefined) { /* ... */ }
読むには ：
1. nullおよび未定義との比較
サイクル
ループを使用しないでください。ループを使用すると、可変オブジェクトを使用する必要があります。 Array.prototypeメソッドに依存します。
/* */ const sum = arr => { var sum = 0; var i = -1; for (;arr[++i];) { sum += arr[i]; } return sum; }; sum([1, 2, 3]); // => 6 /* */ const sum = arr => arr.reduce((x, y) => x + y); sum([1, 2, 3]); // => 6
読むには ：
1. Babeljs（ES5の例）： 悪い vs 良い
2. 配列内のすべての値の合計
Array.prototypeメソッドを使用できない場合は、再帰を使用してください 。
/* */ const createDivs = howMany => { while (howMany--) { document.body.insertAdjacentHTML("beforeend", "<div></div>"); } }; createDivs(5); /* */ const createDivs = howMany => [...Array(howMany)].forEach(() => document.body.insertAdjacentHTML("beforeend", "<div></div>") ); createDivs(5); /* */ const createDivs = howMany => { if (!howMany) return; document.body.insertAdjacentHTML("beforeend", "<div></div>"); return createDivs(howMany - 1); }; createDivs(5);
再帰を使いやすくする一般的なループ関数を次に示します。
読むには ：
1. Babeljs（ES5の例）： 悪い （ または ）vs 良い
2. insertAdjacentHTML（）はinnerHTML（）を操作するよりも高速です
引数
引数をオブジェクトとして忘れてください。 残余パラメーターは、常に最良のオプションです。
1.渡された名前は、関数が入力で何を期待するかについてのより良いアイデアを提供します
2.残差パラメーターは配列であり、使いやすいです。
/* */ const sortNumbers = () => Array.prototype.slice.call(arguments).sort(); /* */ const sortNumbers = (...numbers) => numbers.sort();
読むには ：
1. Babeljs（ES5の例）： 悪い vs 良い
2. 引数へのアクセス
適用方法の使用
apply（）メソッドを忘れてください。 代わりに、分布演算子（関数呼び出し）を使用してください。
const greet = (first, last) => `Hi ${first} ${last}`; const person = ["John", "Doe"]; /* */ greet.apply(null, person); /* */ greet(...person);
読むには ：
1. Babeljs（ES5の例）： 悪い vs 良い
2. 配布オペレーター
bindメソッドの使用
より慣用的なアプローチがある場合は、bind（）を使用しないでください。
/* */ ["foo", "bar"].forEach(func.bind(this)); /* */ ["foo", "bar"].forEach(func, this);
/* */ const person = { first: "John", last: "Doe", greet() { const full = function() { return `${this.first} ${this.last}`; }.bind(this); return `Hello ${full()}`; } } /* */ const person = { first: "John", last: "Doe", greet() { const full = () => `${this.first} ${this.last}`; return `Hello ${full()}`; } }
読むには ：
1. Babeljs（ES5の例）： 悪い vs 良い
2. bind（）およびJavaScriptのイテレーター
高階メソッド
ネストされた関数は、必要のない場所では避けてください。
/* */ const result = [1, 2, 3].map(num => String(num)); // => ["1", "2", "3"] /* */ const result = [1, 2, 3].map(String); // string
読むには ：
1. Babeljs（ES5の例）： 悪い vs 良い
2. 関数を使用して数字の配列を表示する
歌
複数のネストされた関数呼び出しを避けます。 代わりに構成を使用してください。
const plus1 = a => a + 1; const mult2 = a => a * 2; /* */ mult2(plus1(5)); // => 12 /* */ const pipeline = (...funcs) => val => funcs.reduce((a, b) => b(a), val); const addThenMult = pipeline(plus1, mult2); addThenMult(5); // => 12
読むには ：
1. Babeljs（ES5の例）： 悪い vs 良い
キャッシング
大きなデータ構造を使用するコストのかかる操作は、キャッシュしない限り許されません。
/* */ const contains = (arr, value) => Array.prototype.includes ? arr.includes(value) : arr.some(el => el === value); contains(["foo", "bar"], "baz"); // => false /* */ const contains = (() => Array.prototype.includes ? (arr, value) => arr.includes(value) : (arr, value) => arr.some(el => el === value) )(); contains(["foo", "bar"], "baz"); // => false
読むには ：
1. Babeljs（ES5の例）： 悪い vs 良い
2. ある行が別の行の内側にあるかどうかを判断し、配列の要素の値もチェックします
変数
letの代わりにconstを使用し、 varの代わりにletを使用します。
/* */ var me = new Map(); me.set("name", "Ben").set("country", "Belgium"); /* */ const me = new Map(); me.set("name", "Ben").set("country", "Belgium");
読むには ：
1. Babeljs（ES5の例）： 悪い vs 良い
2. 定数 、 let演算子 、および連想配列について少し
条件
IIFEのコンセプト（即座に実行されるファンクター）にコミットし、条件で戻り値を使用します（if、else if、else、switch）。
/* */ var grade, result = 50; if (result < 50) grade = "bad"; else if (result < 90) grade = "good"; else grade = "excellent"; // grade = "good"; /* */ let result = 50; const grade = (() => { if (result < 50) return "bad"; if (result < 90) return "good"; return "excellent"; })(); // grade = "good";
読むには ：
1. Babeljs（ES5の例）： 悪い vs 良い （ または ）
2. すぐに呼び出される関数
イテレータ
for ...を避ける
const shared = { foo: "foo" }; const obj = Object.create(shared, { bar: { value: "bar", enumerable: true } }); /* */ for (var prop in obj) { if (obj.hasOwnProperty(prop)) console.log(prop); // => bar } /* */ Object.keys(obj).forEach(prop => console.log(prop));
ループとメソッドの違いは、ループにプロトタイプチェーンのプロパティがリストされることです。
読むには ：
1. Babeljs（ES5の例）： 悪い vs 良い
2. hasOwnPropertyを使用してプロパティの存在を確認し 、オブジェクトの プロパティをバイパスする
連想配列としてのオブジェクト
オブジェクトは合法的に使用できますが、原則として、連想配列（ Map ）の方がより強力で強力です。 疑わしい場合は、 Mapを使用してください。
/* */ const me = { name: "Ben", age: 30 }; var meSize = Object.keys(me).length; meSize; // => 2 me.country = "Belgium"; // meSize++; meSize; // => 3 /* */ const me = new Map(); me.set("name", "Ben"); me.set("age", 30); me.size; // => 2 me.set("country", "Belgium"); me.size; // => 3
読むには ：
1. Babeljs（ES5の例）： 悪い vs 良い
2. フォームキーの値を保存するためのコレクション：値
カレー
カリー化は、多くの開発者にとって強力ですが、異質なパラダイムです。 虐待しないでください。
/* */ const sum = a => b => a + b; sum(5)(3); // => 8 /* */ const sum = (a, b) => a + b; sum(5, 3); // => 8
読むには ：
1. Babeljs（ES5の例）： 悪い vs 良い
2. カレーと例
読みやすさ
スマートトリックを使用してコードの意図を隠さないでください。
/* */ foo || doSomething(); /* */ void function() { /* IIFE */ }(); /* */ const n = ~~3.14; /* */ if (!foo) doSomething(); /* */ (function() { /* IIFE */ }()); /* */ const n = Math.floor(3.14);
読むには ：
1. 完全なコードと厳しい現実について
コードの再利用
多くの小さくて再利用可能な関数を作成することを恐れないでください、それらは非常に便利です。
/* */ let last = arr[arr.length - 1]; /* */ const product = (a, b) => a * b; const triple = n => n * 3; /* */ const first = arr => arr[0]; // => first(arr); const last = arr => first(arr.slice(-1)); // => last(arr); /* */ const product = (a, b) => a * b; const triple = product.bind(null, 3);
読むには ：
1. Babeljs（ES5の例）： 悪い vs 良い
依存関係
仕組みがわからない場合は、サードパーティのコードの依存関係を最小限に抑えます。 簡単に再現可能ないくつかのメソッドのライブラリ全体をダウンロードする必要はありません。
/* */ var _ = require("underscore"); _.compact(["foo", 0])); _.unique(["foo", "foo"]); _.union(["foo"], ["bar"], ["foo"]); /* */ const compact = arr => arr.filter(el => el); const unique = arr => [...Set(arr)]; const union = (...arr) => unique([].concat(...arr)); compact(["foo", 0]); unique(["foo", "foo"]); union(["foo"], ["bar"], ["foo"]);
読むには ：
1. Babeljs（ES5の例）： 悪い vs 良い
2. JavaScriptモジュールパスとアンダースコアライブラリのドキュメント