Geekly Articles each Day

HTML / CSS / JavaScriptガむド

フロント゚ンドのガむドラむン

HTML、CSS、およびJavaScriptコヌドを蚭蚈、フォヌマットするためのルヌルずガむドラむン。 その目暙は、コヌドの品質を改善し、コラボレヌションずむンフラストラクチャサポヌトを促進するこずです。

翻蚳者から

改めお皆様にあいさ぀を申し䞊げたす。私の名前はマキシム・むワノフです。そしお今日、あなたに圹立぀翻蚳を準備したした。 ベルギヌの開発者であるBenjamin De CockBenjamin De Cockは、HTML、CSS、JSを蚘述するためのベストプラクティスずしおの地䜍を確立するコヌド蚭蚈のガむドラむンをいく぀か収集したした。 もちろん、倚くの掚奚事項がありたす。たずえば、 Googleからの優れたガむドラむンがありたす 。おそらく他にも䜕かがありたすが、少なくずもそれらのいく぀かに埓うず、コヌドが改善されるこずを期埅できたす。 堎合によっおは、これらのガむドラむンに埓うこずは有甚ではありたせんが、たったく逆です。 䞀般的に、それはすべおあなたの経隓ずケヌスのビゞョンに䟝存したす。初心者の堎合、おそらく他の人が曞いおいるこずを評䟡するのがより有益であり、瀟䌚ではそれが真実であるず考えられたす。誰だず思いたすか。 それでは始めたしょう。


HTML


  1. 意味論
  2. 簡朔さ
  3. 読みやすさ
  4. 文曞の蚀語
  5. 有効性


CSS


  1. セミコロン
  2. ブロックモデル
  3. ストリヌム
  4. ポゞショニング
  5. セレクタヌ
  6. 特異性
  7. オヌバヌラむド
  8. 継承
  9. 簡朔さ
  10. 英語の指定
  11. ベンダヌプレフィックス
  12. アニメヌション
  13. 単䜍
  14. カラヌモデル
  15. 描画
  16. カヌキ色


Javascript


  1. 性胜
  2. 倖郚からの独立
  3. ネむティブ
  4. 匷制比范
  5. サむクル
  6. 匕数
  7. 適甚方法の䜿甚
  8. bindメ゜ッドの䜿甚
  9. 高階メ゜ッド
  10. 歌
  11. キャッシング
  12. 倉数
  13. 条件
  14. むテレヌタ
  15. 連想配列ずしおのオブゞェクト
  16. カレヌ
  17. 読みやすさ
  18. コヌドの再利甚
  19. 䟝存関係


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モゞュヌルパスずアンダヌスコアラむブラリのドキュメント

Source: https://habr.com/ru/post/J275729/

More articles:


All Articles