数ヶ月前のことです。 私は1年間のWebアプリケーション開発プロジェクトに参加し、多くの開発者がWebアプリケーションのフロントエンド開発におけるベストインダストリアルプラクティスを十分に理解していないことを実感しました。 私自身も、いくつかのプラクティスに気づいていませんでした。 そこで、Web アプリケーションを開発する際に従うべきベスト プラクティスについて、私が知っていること、学んだことを共有するために、この記事を書くことにしました。

この記事では、フロントエンド開発のベスト プラクティスに焦点を当てます。私の経験では、フロントエンド コードの品質が優れた Web アプリの最も決定的な要因ですが、ほとんどの開発者はこれらの実践に従って個々の部品を開発しません。 フロントエンドの開発者がこれらのプラクティスに従わないと、コードの管理が本当に難しくなり、デザイン全体に一貫性がなくなり、Webアプリの速度にも悪影響が出ます。

この記事では、プロジェクトのフロントエンド アーキテクチャの構築、フロントエンド コードの記述、およびデプロイの準備において従うべきベスト プラクティスについて説明します。 それでは、始めましょう。

プロジェクトに着手したら、まず、フロントエンド コードのアーキテクチャを適切に構造化することです。 そして、これらは、プロジェクトの各フロントエンド開発者が従うべきベスト プラクティスです。

Structuring the style code

styles フォルダ内に、Web アプリケーションに応じて configurations、base、layout、components、および pages の個別のフォルダーを作成する。 Web アプリケーションで使用されるすべての HTML テキスト タグ（h1、h2、…など）のサイズと色を定義するために、別のタイポグラフィー ファイルを使用します。 色は変数ファイルで定義し、適切な名前の変数に色を割り当て、Webサイト全体に色を適用する必要がある場合は、これらの変数を使用する必要があります。

then you can import these files into the main style file.以下の画像のように作成したフォルダー内にこれらのスタイル ファイルを含めます。

JS コードの構造化

基本的に、JavaScript の構造化とは、ファイルを分割して、自分の JavaScript と他の場所から来たものを分離することを意味します。 プラグイン、ベンダー、およびスクリプトは、JS ファイルを分割できる主な 3 つのフォルダーです。 Plugins には、jQuery プラグインのような Web アプリのあらゆる場所で使用する便利なコードピース、vendor には、slick ライブラリのような Frameworks やライブラリのようなサードパーティの JavaScript コード、そして scripts フォルダには、Web アプリ論理のために記述するスクリプトが含まれます。