気づかなかったかもしれないフロントエンド開発技術

「あなたが生きたいのなら、回転することができます。」これはフロントエンドプログラマーの仕事についてです。そのような専門家は、彼らの任務をうまく遂行するために、多くの問題を解決し、多くの能力を持たなければなりません。さらに、ウェブサイトが開発される主な目標を忘れないことが非常に重要です。つまり、そのサイトは、人々が日常業務の解決を簡素化するのに役立つはずです。

この投稿では、関連するプロファイルのプログラマーが知っておくべきWeb開発のさまざまな側面について説明します。可能であれば、対応する機能の使用例とその正しい使用に関する推奨事項を示す資料へのリンクを提供します。ここでは、Angular、React、Vueでの特定のメカニズムの実装に焦点を当てます。

ユーザーインターフェース

▍ページレイアウト

Webアプリケーションの構築は、ユーザーにアピールし、サイトで多くの時間を過ごすのに役立つ魅力的できちんとしたレイアウトを設計することから始まります。



そこには多くのCSSフレームワークがあります。おそらくそれらの中であなたはあなたにぴったりのものを見つけるでしょう。これらの中で最も有名なのはBootstrapであり、CSSプリプロセッサの新機能のおかげで、このフレームワークのスタイルを大幅にカスタマイズできます。そこにはさまざまなコンポーネントとコントロールがあり、それらを一貫して使用することで、一貫して設計されたサイトを作成できます。Bootstrapのバージョン5



のアルファリリースは現在リリースされています。



プロジェクトのスタイルセット（コンポーネント、パディング、コンテナなど）を自分で作成したい場合は、CSS Flexboxに注意を向けて、このWebページ要素の柔軟なレイアウトを独自のCSSフレームワークの基礎にすることができます。



CSSグリッドは、Webページのコンテンツをグリッドに配置することにより、コンテンツを整理するための異なるアプローチを採用しています。

▍応答性の高いデザイン

応答性とは、サイトのコンテンツを、それが表示されているデバイスに適合させる能力です。たとえば、スマートフォンとラップトップでは、この記事の見た目は異なります。



Webアプリケーションの応答性により、さまざまな画面に正しく表示され、コンテンツの読みやすさとユーザーエクスペリエンスが向上します。



でMDNあなたが（例えば、プリンタやモニタのために）異なるデバイス用に異なるCSSスタイルを適用する必要がある場合に、メディアクエリが使用されていることを知ることができ、同様に（例えば、異なる画面解像度のアカウント固有の特性やデバイスのパラメータを考慮してか、ブラウザビューポートの幅が異なる場合）。



CSSメディアクエリは、レスポンシブデザインをサポートするための強力なツールです。



これらは、すでに説明したCSSFlexboxまたはCSSグリッドと組み合わせて使用​​できます。CSSフレームワークを使用したい場合、それらのフレームワークは通常、対応する機能をすでに実装しています。このアプローチでは、応答性の高いページを作成するには、適切なクラスを要素に追加するだけです。画像に



適用される応答性の概念に関しては、属性を考えることができます。この属性を使用すると、デバイスの画面の特性に応じてさまざまなサイズの画像を表示できるため、サーバーからブラウザーに転送されるデータの量を減らすことができます。srcset

▍同種のコンポーネントとコントロール

ユーザーは、コンポーネントとコントロールが同じスタイルで均一に設計されているサイトを喜んで操作できます。この設計アプローチにより、ユーザーはサイトの新機能を簡単に習得でき、会社の名刺のようなものとして機能します。



既存のフレームワークとライブラリ、Angular、React、またはVueを使用してプロジェクトを開発する場合は、これらのツール用に設計されたマテリアルデザインの原則を実装するスタイルライブラリの例を次に示します。

• 角張った。強力なコンポーネントと完全なCDKを見つけることができるAngularMaterialライブラリ。
• 反応する。マテリアルデザインの原則は、マテリアルUIWebコンポーネントに実装されています。
• Vue。ここに、Vueプロジェクトのマテリアルデザイン実装であるVuetifyがあります。

▍フォームの検証とエラー処理

データ検証は、ユーザーから何かを受け取るプロジェクトにとって最も重要なタスクです。さらに、アプリケーションがユーザーから正しいデータを受信することを妨げるものは何もありません。ネットワークの問題、サーバー上のエラー、ユーザー自身によるエラーのいずれでもありません。さまざまなフレームワーク用に構築されたユーザー入力検証ソリューションの一部を次に示します。

• 角張った。Angularは本格的なフレームワークであるため、フォーム検証用の特別なAPIを提供します。
• 反応する。React Hook Formライブラリは、おそらくReactプロジェクトで最も一般的に使用されるフォーム検証ツールです。
• Vue。Vueに対応するライブラリの名前であるvuelidateは、興味深いパンに基づいています。

ユーザー体験

▍非同期メカニズムの使用

アプリケーションへのデータのロードまたはデータの保存には、数ミリ秒、数秒、さらには数分かかる場合があります。そのため、適切なインジケーターを使用してそのような操作についてユーザーに通知し、プロジェクトでのユーザーの作業をブロックしないことが重要です。



promiseのようなJavaScriptエンジンやFetchのようなブラウザーAPIは、これらのタスクに役立ちます。

▍古いブラウザ（ポリフィル）のサポート

フロントエンド開発の世界は非常に急速に進化しています。ブラウザーについても同じことが言えます。しかし、さまざまな人々がさまざまなブラウザとそれらのさまざまなバージョンを使用しています。したがって、使用するすべてのプラットフォームでコードが正しく機能するようにするには、開発者は互換性に注意する必要があります。たとえば、古いバージョンのIEは、最新バージョンのGoogleChromeと同じJSおよびCSS機能をサポートしていません。ポリフィル



は、プロジェクトが古いブラウザで正しく機能することを保証するために使用されます。これらについては、この記事で詳しく説明しています。「ポリフィル（ポリフィラー）は、開発者が標準のブラウザー機能の中で見つけることを期待するテクノロジーの実装を提供するコード（またはプラグイン）です。」



特定のCSSルールまたは特定のJS機能が特定のブラウザバージョンでサポートされているかどうかを確認するには、Can IUseサイトを参照してください。



Angular、React、Vueでのブラウザサポートの問題の解決について話すと、状況は次のようになります。

• 角張った。Angularのドキュメントには、ブラウザをサポートするための特別なセクションがあります。
• 反応する。Create React Appで作成されたプロジェクトは、ReactDOMのように、IE 9以降のブラウザーをサポートします。このサポートは、ポリフィルの使用に基づいています。
• Vue。ここでは、レガシーブラウザのサポートの詳細がCLIドキュメントに記載されています。

▍ローカリゼーションと国際化

サイトには、世界中のユーザーを含めることができます。プロジェクトを作成するときにこの事実を考慮に入れると、サイトを見ることにしたすべての人にとってサイトの使いやすさが向上します。



ローカリゼーション（l10n、ローカリゼーション）は、W3Cで定義されているように、製品、プログラム、またはドキュメントのコンテンツを、特定のターゲット市場の言語、文化、およびその他の要件に適合させることです。



国際化（i18n、国際化）は、W3C資料に基づいて、文化、地域、または言語が異なるターゲット市場に簡単にローカライズできる製品コンテンツ、プログラム、またはドキュメントの作成と開発です。



これらの概念は両方とも相互に関連しており、さまざまな方法で実装できます。これには、たとえば、次の手法が含まれます。

• プロジェクトでサポートされている言語のリストを含むサイトのドロップダウンリストを使用する。
• （Geolocation browser APIを使用して）ユーザーの地理的位置に関する情報にアクセスし、受信したデータに従ってWebサイトを適合させます。
• URLに言語情報を指定する。たとえば、次のようになります。example.com?lang=enまたは次のようになります。example.com/enまたは次のようになりますen.example.com。

次に、Angular、React、Vueのこれらの概念について説明します。

• 角張った。Angularもまた、本格的なフレームワークであり、開発者に既製のソリューションを提供します。
• 反応する。プロジェクトの国際化タスクは、React環境で人気のあるreact-i18nextライブラリを使用して解決できます。
• Vue. vue-i18n.

▍

アクセシビリティ（a11y、アクセシビリティ）は、障害を持つユーザーのニーズに適応するサイトの機能です。



ウェブサイトのアクセシビリティは見過ごされがちです。障害のあるユーザーがプロジェクトにアクセスできるようにするために、プロジェクトで使用されるユーザーエクスペリエンスの形成へのアプローチを修正する必要がある場合があり、プロジェクトの大幅な再設計が必要になる場合があります。いずれにせよ、すべてのユーザーのニーズを考慮することが重要です。特に、プロジェクトコードを少し変更するだけでも、通常のサイトを使用するのが難しいと感じるユーザーにとって、サイトの使いやすさが大幅に向上する可能性があることを考慮すると重要です。



Webプロジェクトをアクセス可能にするために、さまざまな手法を適用できます。これらには次のものが含まれます。

• image属性を使用しますalt。
• サイトのページのコンテンツの説明を設計するためのARIA属性の適用
• テキストのサイズを変更する機能のサポート。
• ハイコントラストモードをご利用いただけます。
• キーボード、特にキーTABと矢印キーを使用したサイトナビゲーションのサポート。

a11yproject.com プロジェクトは、これらの概念を標準化するというアイデアを実装しています。このイニシアチブは尊敬に値します！主要なJSフレームワークとライブラリも、アクセス可能なサイトの開発をサポートするために努力しています。

• 角張った。このフレームワークのドキュメントには特別なセクションがあります。アクセス可能なプロジェクトの開発は、AngularCDKレベルでサポートされています。
• 反応する。アクセシビリティについては、Reactライブラリのドキュメントでも説明されています。特別なライブラリ-react-a11yもあります。ただし、このライブラリはサポートされなくなったため、注意して使用し、react-axライブラリに置き換える予定であることに注意してください。
• Vue。vue-a11yプラグインは、Vueでアクセス可能なプロジェクトを開発するのに役立ちます。vuetifyライブラリを作成する際には、アクセシビリティに関する考慮事項も考慮されました。

▍通知

サイトの訪問者と連絡を取り合うために、ブラウザのAPI通知を使用できます。その助けを借りて、あなたは何か新しいものがサイトに現れたことをユーザーに知らせることができます。

データのロードと処理

▍信頼できるデータの単一のソース

2015年に人気を博したアプリの状態管理ツールは、今ではほとんどすべてのWebプロジェクトになくてはならないものです。アプリケーションの状態管理の分野では多少の混乱がありますが、通常、特殊なソリューションを使用することは、アプリケーションデータを一元化するためのシンプルで効果的な方法です。すべての状態管理ツールは、フラックスパターンに基づいています。





FluxパターンのNgRx実装（ソース--ngrx.io）



これらのツールは、同じエンティティに異なる名前を使用します。たとえば、NgRxがセレクターと呼ぶものは、Vuexではゲッターと呼ばれます。Angularがレデューサーと呼ぶものは、Vueではミューテーションと呼ばれます。



Angular、React、Vueで使用される状態管理ツールは次のとおりです。

• 角張った。「Angularのリアクティブ状態管理」：NgRx。
• 反応する。ここでは、もちろん、Reduxが使用されます。
• Vue。Vuexは、Vueアプリケーションの状態を管理するために使用されます。

▍データのダウンロード

データをアプリケーションにロードするには、さまざまな方法があります。これらの中で最も一般的なのは、WebAPIに向けられたHTTP要求の使用です。ブラウザには、データの読み込みを整理するように設計されたFetch APIがありますが、主要なフレームワークとライブラリ用に、独自のソリューションが開発されています。

• 角張った。Angularのドキュメントでは、rxjsとオブザーバーベースのアプローチの使用を推奨しています（ここではオブザーバブルまたはサブジェクトが使用されます）。
• 反応する。Reactのドキュメントでは、FetchAPIを使用してデータをロードすることを推奨しています。
• Vue。Vueコミュニティは、Axiosライブラリの使用を好みます。データ読み込みメカニズムのこの実装は、promiseに基づいています。

Webアプリケーションにデータをロードするメカニズムについて話すとき、GraphQLは言及する価値があります。このテクノロジーにより、フロントエンドアプリケーションでデータをロードするときに使用されるアプローチが変わりました。それを適用するとき、「クライアントはクエリ言語を使用して必要なものを決定します。」GraphQLを使用すると、リモートデータソースから必要なものを正確に取得できます。



関心のあるフロントエンドツールのGraphQL実装は次のとおりです。

• 角張った。アポロアンギュラー
• 反応する。反応-アポロ
• Vue.js。vue-apollo

▍ローカルデータストレージ

ローカルデータストレージは、ユーザーのコンピューター上のデータのストレージです。データは、cookieを使用するだけでなく、localStorageおよびを使用して保存できますsessionStorage。

▍ウェブワーカー

Webワーカーは、新しいブラウザーAPIによって導入されたテクノロジーです。これにより、JavaScriptコードをバックグラウンドで実行できるため、メインスレッドの負荷が軽減され、Webページコードのパフォーマンスに影響を与えることはありません。



Webワーカーは、Angular、React、およびVueに適用できます。

• 角張った。このトピックのAngularドキュメントには特別なセクションがあります。
• 反応する。ここにある特別なReactフックがあります。
• Vue。Vueアプリケーションでは、Webワーカーはvue-workerライブラリを使用すると便利です。

ネットワーキングとパフォーマンス

▍アプリバンドルサイズ

スマートフォン市場の成長は、Web開発の世界に革命をもたらしました。さて、ウェブサイトを作成するときは、まずモバイルユーザーのニーズを考慮する必要があります。Webプロジェクトで作業するときに、モバイルデバイスがロードする必要のあるデータの量が少ないほど良いです。下のグラフによると、2016年には、モバイルインターネットの使用量がデスクトップの使用量を上回りました。





世界的なインターネットの使用（出典-broadbandsearch.net）



これは、最近のWebプロジェクトのバンドルサイズがどれほど重要であるかを不確かな言葉で教えてくれます。モバイルユーザーのリソースを節約するために、ダウンロードするファイルのサイズはできるだけ小さくする必要があります。私たちにとって幸いなことに、メインのフロントエンドツールとそれらへのアドオンの開発者は、プロジェクトを開発するときにこれを考慮に入れています。アプリケーションバンドルのサイズを小さくすると、パフォーマンスも向上します。

• 角張った。Angularアプリバンドルは、webpack-bundle-analyzerで簡単かつ便利に調べることができます。さらに、Angular CLIにはstats-json、バンドルの作成後にレポートを生成できるオプションがあります。
• React. Create React App , .
• Vue. Vue, Angular, report, .

▍- -

Service Workerは、Webブラウザーで実行され、アプリケーションデータのキャッシュを管理するスクリプトです。これは、通常のWebサイトをプログレッシブWebアプリケーション（PWA）に変換するために使用されるメカニズムの1つです。HTTPSを使用して通常のWebサイトのようにPWAを操作できますが、プログレッシブWebアプリにはいくつかの特別な機能があります。このような機能には、たとえば、専門のアプリケーションストアに公開せずにモバイルデバイスにアプリケーションをインストールしたり、インターネットにアクセスせずにアプリケーションをサポートしたりすることが含まれます。



Angular、React、Vueでサービスワーカーを使用できます。

• 角張った。Angularは、サービスワーカーを使用するためのメカニズムを提供します。
• 反応する。これは、Create ReactAppを使用してPWAを開発する方法に関するチュートリアルです。
• Vue。VueでPWAを作成する機能は、CLIレベルでサポートされています。

▍サーバーレンダリング

サーバーサイドレンダリング（SSR）は、Angular、React、Vueに基づくアプリケーションの開発に革命をもたらしている一連のテクノロジーです。SSRを使用すると、HTMLがサーバー上で生成され、ブラウザーに送信されます。その後、静的HTMLマークアップが動作状態になり、Webアプリケーションはクライアントで完全に使用できるようになります。サーバーレンダリングを使用する場合、いくつかの目標があります。

• SEOサイトの改善。
• ブラウザでのサイトの表示の高速化。

調査中のフロントエンドツールのSSRソリューションは次のとおりです。

• 角張った。AngularUniversalを使用しました。
• 反応する。Reactアプリケーションのサーバー側レンダリングには、Next.jsが使用されます。
• Vue。Vueアプリケーションのサーバー側レンダリングは、NuxtJSフレームワークを使用して実行されます。

▍静的サイトジェネレータ

Jamstackの 使用が増えるにつれ、Static Site Generator（SSG）は非常に人気のあるテクノロジーになりました。Jamstackアプリケーションは、ブラウザに対応し、基本的にWebサーバーを必要としないタイプのWebアプリケーションです（これらの資料は、CDNから直接クライアントに提供できます）。このようなサイトの詳細については、上記のリンクをたどってください。ここでは、SSGの主な長所のみを示します。

• 速度：静的サイトジェネレーターは、プロジェクトのビルド中にサイトページを作成しますが、これらのページがクライアントから要求されたときではありません。
• セキュリティ：SSGを使用すると、ハッカー攻撃の標的となることが多いコンテンツ管理システム（CMS、コンテンツ管理システム）を放棄できます。
• スケーリングの簡素化：SSGを使用するWebプロジェクトは、どこからでもクライアントに転送できるファイルのコレクションです。これにより、そのようなファイルをCDNに保存するのがはるかに簡単になります。その結果、静的サイトは非常に適切にスケーリングされることがわかりました。
• 開発プロセスの簡素化：SSGプロジェクトはバックエンドとデータベースを必要としません。これにより、開発者は簡単になります。

Angular、React、Vue用のSSGソリューションがあります。

• 角張った。スカリー。
• 反応する。Gatsby（React GraphQL +）、Next.js。
• Vue。Gridsome、Nuxt。

その他のSSGプロジェクトには、11ty、Hugo、Jekyllが含まれます。

分析

▍ユーザーの行動の監視とA / Bテスト

サイトでのユーザーの行動を観察することは任意ですが、そのようなデータを所有することはWebプロジェクトの改善に大きく貢献します。ユーザーがサイトをどのように操作するかに関する情報を収集するように設計された特別なクラスのツールがあります。これらのツールを使用すると、サイト開発者はユーザーのニーズをより適切に検討し、A / Bテストを通じて、最も適切な代替案を選択するのに役立ちます。サイトの機能、サポートするユーザーの行動パターン、デザインについて話します。



ユーザーの行動とA / Bテストを監視するためのいくつかのソリューションを次に示します。

• Google Analytics（GA）。Angular、React、およびVueでGAを使用するためのガイドがあります。
• Kameleoon. — A/B- -.

▍ -

高性能のWebアプリケーションを一度に開発することは困難です。ただし、たとえば、読み込みを高速化するように最適化されたアプリケーションは、低速バージョンよりもユーザーからより肯定的な感情を生成します。サイトを分析し、改善のための推奨事項を提供するさまざまなプロジェクトがあります。例-GoogleからのPageSpeedInsights。



Google Chrome開発者ツールの中には、サイトのパフォーマンスを分析するための非常に価値のあるツールであるLighthouseがあります。 100ポイントのスケールを使用して、5つの基準（パフォーマンス、アクセシビリティ、ベストプラクティス、SEO、PWA）でサイトを評価します。分析後、サイトを改善するための推奨事項を含むレポートが生成されます。





Lighthouseを使用したサイトの分析



Chrome開発者ツールの中にあるもう1つのパフォーマンスアナライザーは、未使用のJSおよびCSSコードを検索できる[カバレッジ]パネルです。このようなコードをプロジェクトから除外することで、バンドルのサイズを減らすことができます。これにより、サイトの読み込みが高速化されます。これは、モバイルデバイスで特に顕著になります。

▍SEO

検索エンジンの最適化であるSEOは、Google、Bing、DuckDuckGoなどの検索エンジンでサイトのランキングを上げるために必要なことです。適切に最適化されたサイトがより見やすくなります。実際、Web開発の世界では、「SEOスペシャリスト」という特別な立場さえあることが非常に重要です。



Angular、React、VueでSEOについて話すと、次のようになります。

• Angular. , Angular- Angular Universal-.
• React. SEO React-. — React-.
• Vue. Vue-.

フロントエンド開発は広大で絶えず変化する専門分野であることに同意します。実際、誰かがすべてを知っていてできる普遍的な開発者になろうとすると、それを達成することは非常に困難であり、彼には非常に長い時間がかかります。さらに、各Webプロジェクトには独自のニーズと優先順位があります。そのため、プロジェクトの作業の開始時に最も重要なものを決定する必要があります。これにより、散らばることなく、最も必要なものだけを選択して調査し、プロジェクトの目標に対応するようにプロジェクトのアーキテクチャを計画することができます。



どのような新しいフロントエンド開発テクノロジーが最も有望だと思いますか？