フロントエンド開発には、ユーザーが表示して操作する Web サイトまたはアプリケーションの視覚的でインタラクティブな側面の作成が含まれます。 フロントエンド コードが最適化され、保守可能であり、業界標準に準拠していることを確認することは、シームレスなユーザー エクスペリエンスを作成するために不可欠です。フロントエンド プロジェクトで作業する際に留意すべきいくつかのベスト プラクティスを次に示します。 : セマンティック HTML タグを使用すると、コードのアクセシビリティと読みやすさが向上します。たとえば、 タグを使用してヘッダーを表す代わりに、 タグを使用できます。これにより、コンテンツの意味が増し、スクリーン リーダーが解釈しやすくなります。 セマンティック HTML タグ div header  <div class="header"> <h1>Welcome to my website</h1> </div>  <header> <h1>Welcome to my website</h1> </header> : SASS や LESS などの CSS プリプロセッサーを使用すると、通常の CSS では利用できない高度な機能やテクニックを CSS で使用できます。たとえば、変数、ミックスイン、およびネストされたルールを使用して、スタイルをより整理し、保守しやすくすることができます。 CSS プリプロセッサー /* Css */ .btn { color: #ffffff; background-color: #000000; font-size: 16px; border-radius: 5px; } /* Sass */ $primary-color: #000000; $secondary-color: #ffffff; $font-size: 16px; $border-radius: 5px; .btn { color: $secondary-color; background-color: $primary-color; font-size: $font-size; border-radius: $border-radius; } : CDN は、ユーザーの地理的な場所に基づいてコンテンツを配信するサーバーのネットワークです。 CDN を使用すると、ユーザーとサーバー間の距離が短くなるため、パフォーマンスが向上します。また、ファイルのキャッシュも可能です。 js、CSS、画像にコンテンツ配信ネットワーク (CDN) を使用する  <script src="/scripts/jquery.js"></script>  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script> を最適化すると、Web サイトのパフォーマンスと速度を向上させることができます。これは、画像の圧縮、適切な画像ファイル形式の使用、画像の遅延読み込みなどの手法によって実行できます。 画像やその他のアセットを最適化する: 画像やその他のアセット <img src="compressed-image.jpg" alt="A compressed image" loading="lazy"> : レスポンシブ画像は、さまざまな画面サイズやデバイスに合わせて適切にスケーリングされた画像です。これは、 タグの 属性と 属性を使用して行うことができます。 レスポンシブ画像 img srcset sizes <img srcset="image-small.jpg 500w, image-medium.jpg 1000w, image-large.jpg 1500w" sizes="(max-width: 500px) 500px, (max-width: 1000px) 1000px, 1500px" src="image-large.jpg" alt="An image" > : ベクター グラフィックは、ピクセルではなくポイントとパスによって定義される画像であり、品質を損なうことなく任意のサイズにスケーリングできます。これにより、特にさまざまなサイズで表示されるグラフィックの場合に、より効率的に使用できます。 ベクター グラフィック <svg width="200" height="200"> <circle cx="100" cy="100" r="50" fill="#000000" /> </svg> : 画像スプライトは複数の小さな画像を含む単一の画像であり、CSS の プロパティを使用して表示できます。これにより、画像のロードに必要な HTTP リクエストの数が減り、パフォーマンスが向上します。 画像スプライトを使用する background-position .icon1 { background-image: url('icons.png'); background-position: 0 0; } .icon2 { background-image: url('icons.png'); background-position: -20px 0; } アクセシビリティ原則 アクセシビリティの原則を順守することで、Web サイトをより包括的で、障害を持つ人々にとって使いやすくすることができます。これは、画像に代替テキストを提供する、適切な見出し構造を使用する、適切なフォーム ラベルを追加するなどの手法によって実現できます。 は、可視ラベルを持たない要素にラベルを提供します。これは、テキスト ラベルのないボタンやアイコンなどの要素に役立ちます。 aria-label <button aria-label="Search"><i class="search"></i></button> は、必須のフォーム フィールドを示します。 属性を使用して、フォーム フィールドが必須であることを示すことができます。これは、フォームを送信するためにフィールドに入力する必要があることをユーザーと支援技術に警告するのに役立ちます。 aria-required aria-required <label for="name">Name</label> <input type="text" id="name" name="name" required aria-required="true"> 属性により、要素を支援技術から隠すことができます。これは、重要な情報を伝えない装飾要素に役立ちます。 aria-hidden <img src="decorative.jpg" alt="" aria-hidden="true"> により、折りたたみ可能な要素の状態を示すことができます。 属性を使用して、ドロップダウン メニューなどの折りたたみ可能な要素が現在展開されているか折りたたまれているかを示すことができます。これは、要素の現在の状態をユーザーと支援技術に警告するのに役立ちます。 aria-expanded aria-expanded <button aria-expanded="false" aria-controls="menu">Menu</button> <ul id="menu" aria-hidden="true"> <li>Option 1</li> <li>Option 2</li> <li>Option 3</li> </ul> コンテンツの更新を発表する 。 属性を使用して、要素のコンテンツが非同期的に更新される可能性があることを示すことができます。これは、新しいメッセージや通知など、支援技術に対するコンテンツの更新をアナウンスするのに役立ちます。 aria-live aria-live <div id="notifications" aria-live="polite"> <p>You have 1 new message</p> </div> 使用すると、要素の説明を提供できます。 属性を使用して、現在の要素の説明を提供する要素を指定できます。これは、フォーム フィールドやその他のインタラクティブな要素に追加のコンテキストや指示を提供するのに役立ちます。 aria-describedby aria-describedby <label for="email">Email address</label> <input type="email" id="email" name="email" aria-describedby="email-description"> <p id="email-description">Please enter your email address</p> JavaScript で最適化する JavaScript は強力で柔軟なプログラミング言語ですが、リソースを大量に消費する言語でもあります。したがって、JavaScript コードが効率的に実行され、Web サイトやアプリケーションの全体的なパフォーマンスに影響を与えないように、JavaScript コードを最適化することが重要です。 JavaScript のパフォーマンスを最適化するためのヒントをいくつか紹介します。 : 不要な空白、コメント、その他の不要な文字を削除すると、JavaScript ファイルのサイズを縮小し、読み込み時間を短縮できます。 コードを縮小する : Babel や TypeScript などの JavaScript コンパイラは、コードをより効率的な形式に変換して最適化するのに役立ちます。 JavaScript コンパイラ : メイン スレッドは、ユーザー インタラクションの処理とページのレンダリングを担当するため、実行時間の長いタスクやリソースを大量に消費するタスクでメイン スレッドをブロックしないようにすることが重要です。代わりに、Web ワーカーまたは非同期関数を使用して、これらのタスクを他のスレッドにオフロードすることを検討してください。 メイン スレッドのブロックを回避する 分割を使用すると、JavaScript コードを必要に応じてロードできる小さなチャンクに分割できます。これにより、最初にロードして解析する必要があるコードの量が減るため、パフォーマンスが向上します。 Webpack や Rollup などのツールを使用して、コード分割を実装できます。 コード を使用すると、必要になるまでコンテンツの読み込みを遅らせることができます。これにより、最初にロードする必要があるデータの量が減るため、パフォーマンスが向上します。 API を使用して遅延読み込みを実装できます。 遅延読み込み IntersectionObserver // Lazy loading with IntersectionObserver const observer = new IntersectionObserver((entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { // Load content observer.unobserve(entry.target); } }); }); document.querySelectorAll('[data-lazy]').forEach((element) => { observer.observe(element); }); を使用すると、データをブラウザに保存できるため、サーバーから再度取得する必要なく再利用できます。これにより、実行する必要があるネットワーク要求の数が減るため、パフォーマンスが向上します。 を使用してキャッシュを実装できます。 キャッシュ Cache API if ('caches' in window) { caches.open('my-cache').then((cache) => { cache.add('/data.json').then(() => { console.log('Data added to cache'); }); }); } : パフォーマンス監視ツールを使用すると、Web サイトのパフォーマンスを追跡し、潜在的な問題を特定できます。これにより、Web サイトのパフォーマンスを最適化し、ユーザー エクスペリエンスを向上させることができます。一般的なツールには、Lighthouse や SpeedCurve などがあります。 パフォーマンス監視ツール : ESLint として、コードのエラーをチェックして改善を提案し、コードの一貫性を確保し、ベスト プラクティスに従っていることを確認します。 Linting ツール 結論 フロントエンド開発には、Web サイトのパフォーマンスとユーザー エクスペリエンスの向上に役立つさまざまなプラクティスとテクニックが含まれます。 従うことができるベスト プラクティスには、画像やその他のアセットの最適化、アクセシビリティ原則の順守、JavaScript の最適化などがあります。これらのベスト プラクティスに従うことで、優れたユーザー エクスペリエンスを提供する高品質でパフォーマンスの高い Web サイトを構築できます。

このオーディオは、ストーリーの元の言語で制作されています。

長すぎる; 読むには

Making security fun one episode at a time

フロントエンド開発のベストプラクティス

長すぎる; 読むには

Yan Tsishko

About Author

ラベル

Languages

この記事は...

フロントエンド開発のベスト プラクティス

長すぎる; 読むには

Yan Tsishko

About Author

ラベル

Languages

この記事は...

関連ストーリー

フロントエンド開発のベストプラクティス