ES6モジュールの実用ガイド

ES6モジュール

Webアプリを構築する際の大きな課題の1つは、市場のニーズに迅速に対応し、対応できることです。需要(要件)が増加すると、機能(機能)も増加します。したがって、アプリが有機的に成長するように、強固なアーキテクチャ構造を持つことが重要です。アプリ内のすべてが深く絡み合っているため、アプリがスケーリングできない状況に陥りたくありません。

拡張が容易ではなく、削除が容易なコードを記述します。
-テフ、プログラミングはひどい

この記事では、ES6モジュールを使用してシンプルなダッシュボードを作成し、フォルダー構造を改善してコードの記述を簡単にする最適化手法を紹介します。 ES6モジュールが重要である理由と、それを効果的に適用する方法を見てみましょう。

JavaScriptには長い間モジュールがありました。ただし、これらはライブラリに実装されており、言語に組み込まれていません。 ES6は、JavaScriptがビルトインモジュール(ソース)を備えているのは初めてです。

TL; DR —アーキテクチャデザインレイアウトからES6モジュールを使用してダッシュボードを作成する実用的な例をご覧になりたい場合は、セクション4にジャンプしてください。

対処方法は次のとおりです

  1. ES6モジュールが必要な理由
  2. スクリプトが手動でロードされた時代に戻る
  3. ES6モジュールの仕組み(インポートとエクスポート)
  4. モジュールでダッシュボードを構築しましょう
  5. ダッシュボードの例の最適化手法
より良いウェブ開発者になりたい、自分でビジネスを始めたい、他の人に教えたい、開発スキルを向上させたいなら、最新のウェブ言語に関する毎週のヒントとコツを投稿します。

1. ES6モジュールが必要な理由

モジュールが関連する理由について、いくつかのシナリオを見てみましょう。

シナリオ1 —車輪を再発明しない

開発者として、私たちはしばしば気づかないうちにすでに作成されたものを再作成するか、時間を短縮するためにものをコピーして貼り付けます。最終的には合計され、x個の同一のコピーがアプリ全体に散在しています。そして、何かを変更する必要があるたびに、コピーの数に応じて、それをx回行う必要があります。


たとえば、自動車工場が新しい自動車を生産するたびにエンジンを再発明しようとしている場合や、建築家が各図面をゼロから作成する場合を想像してください。これを行うことは不可能ではありませんが、取得した経験を再利用できない場合の知識のポイントは何ですか。

シナリオ2 —知識の障壁

システムが深く絡み合っており、ドキュメントが不足している場合、新旧の開発者は、アプリの動作方法や接続方法を学ぶのが困難です。


たとえば、開発者は推測することなく変更の結果を確認できるはずです。そうしないと、どこから始めればよいのか分からずに多くのエラーが発生します。解決策は、動作をカプセル化するモジュールを使用することです。デバッグプロセスを簡単に絞り込み、問題の根本をすばやく特定できます。

最近、「新しいことを常に学びたい開発者」に関する記事を、知識を向上させるためのヒントとともに執筆しました。

シナリオ3-予期しない動作

関心の分離(設計原則)を回避することにより、予期しない動作につながる可能性があります。


たとえば、誰かが車内の音量を上げて、フロントガラスのワイパーが作動したとしましょう。これは予期しない動作の例であり、アプリケーションで必要なものではありません。

つまり、内部動作を外部動作から効果的に再利用、維持、分離、カプセル化するには、ES6モジュールが必要です。それはシステムを複雑にすることではなく、システムを壊さずに簡単に拡張したり削除したりする能力を持つことです。

2.スクリプトが手動でロードされた時代に戻る

Web開発を数年間行った場合、スクリプトが正しい順序でロードされない、またはDOMツリーの要素にJSがアクセスできないなど、依存関係の競合が必ず発生します。

その理由は、ページ上のHTMLが表示順に読み込まれるためです。つまり、要素内のコンテンツの読み込みが完了するまでスクリプトを読み込むことができません。

たとえば、document.getElementById( "id-name")を使用してタグ内の要素にアクセスしようとして、その要素がまだロードされていない場合、未定義エラーが発生します。スクリプトが適切にロードされるようにするために、deferとasyncを使用できます。前者は各スクリプトが表示された順序でロードされるようにし、後者は使用可能になるたびにスクリプトをロードします。

このような問題を解決する昔ながらの方法は、要素の直前にスクリプトをロードすることでした。

しかし、長期的にはスクリプトの数が増え、バージョンと依存関係の競合を維持しようとすると、10個以上のスクリプトになる可能性があります。

関心事の分離

一般に、上記のようにスクリプトをロードすることは、パフォーマンス、依存関係、および保守性の観点からは良い考えではありません。 index.htmlファイルにすべてのスクリプトをロードする責任を負わせたくありません。何らかの構造とロジックの分離が必要です。

解決策は、ES6の構文、インポートおよびエクスポートステートメントを利用することです。これは、物事を分離し、必要なときにのみ利用できるようにする、エレガントで保守可能なアプローチです。

インポートおよびエクスポートステートメント

exportキーワードは、どこかで何かを利用可能にする場合に使用され、importは、どのエクスポートが利用可能になったかにアクセスするために使用されます。

大まかなルールは、何かをインポートするには、まずエクスポートする必要があるということです。

そして実際に何をエクスポートできますか?

  • 変数
  • オブジェクトリテラル
  • クラス
  • 機能
  • ++

上記の例を単純化するために、すべてのスクリプトを1つのファイルにラップできます。

次に、app.jsスクリプトをindex.htmlにロードします。しかし、最初に、それを機能させるために、type = "module"(ソース)を使用して、モジュールの操作にインポートとエクスポートを使用できるようにする必要があります。

ご覧のとおり、index.htmlが1つのスクリプトを担当するようになりました。これにより、メンテナンスとスケーリングが容易になります。つまり、app.jsスクリプトは、アプリケーションのブートストラップに使用できるエントリポイントになります。

注:必要なスクリプトを除き、app.jsなどの1つのファイルにすべてのスクリプトを読み込むことはお勧めしません。

importステートメントとexportステートメントの使用方法を確認したので、実際にモジュールを操作するときの動作を見てみましょう。

3. ES6モジュールの仕組み

モジュールとコンポーネントの違いは何ですか?モジュールは、アプリケーションで再利用できる小さな独立したユニット(コンポーネント)のコレクションです。

目的は何ですか?

  • カプセル化動作
  • 使いやすい
  • メンテナンスが簡単
  • 拡張が簡単

はい、開発が容易になります!

それでは、実際にコンポーネントとは何ですか?

コンポーネントは、変数、関数、クラスなどです。つまり、exportステートメントでエクスポートできるものはすべてコンポーネントです(または、ブロック、ユニットなどと呼ぶことができます)。

コンポーネントとは

それでは、実際にモジュールとは何ですか?

前述のように、モジュールはコンポーネントのコレクションです。複数のコンポーネントが通信する場合、または統合された全体を形成するために一緒に表示する必要がある場合は、おそらくモジュールが必要です。

モジュールとは

すべてを再利用可能にするという課題

電気工学の分野で30年以上の経験を持つプリンシパルエンジニアが言ったように、すべてが再利用されるわけではなく、時間、コストのためにすべてが再利用されることは期待できません。物事が100%再利用されることを期待するよりも、ある程度再利用する方が良いです。

一般に、アプリ内ですべてを再利用可能にする必要はありません。一部のものは、一度だけ使用することを意図しています。経験則として、2回以上必要な場合は、モジュールまたはコンポーネントを作成することをお勧めします。

最初は、何かを再利用可能にするのは簡単に聞こえるかもしれませんが、環境からコンポーネントを取り出し、別のコンポーネントで動作することを期待することを忘れないでください。しかし、多くの場合、完全に再利用できるようにその一部を変更する必要があり、それを知る前に、2つの新しいコンポーネントを作成しました。

Antoineは、再利用可能なJSコンポーネントを作成するための3つの重要なルールを説明した記事を執筆しました。彼がチームにVueJSを提示したとき、経験豊富な同僚は次のように述べています。

理論上は素晴らしいことですが、私の経験では、これらの派手な「再利用可能な」ものは決して再利用されません。

アイデアは、ボタン、入力フィールド、チェックボックスなど、すべてを再利用する必要はないということです。再利用可能なものを作成する作業全体にはリソースと時間が必要であり、多くの場合、発生しないシナリオを考え直すことになります。

Stack OverflowのCEO、Joel Spolskyは次のように述べています。

人々が実際に持っている50%良いソリューションは、あなたが研究室で絶え間なく磨きをかけているため、誰も持っていない99%のソリューションよりも多くの問題を解決し、長く生き残ります。配送は機能です。本当に重要な機能。製品にはそれが必要です。

4.モジュールを使用してダッシュボードを構築しましょう

モジュールがどのように機能するかについての基本的な理解ができたので、JSフレームワークを操作するときに遭遇する可能性が最も高い実用的な例を見てみましょう。レイアウトとコンポーネントで構成されるアーキテクチャ設計に従って、シンプルなダッシュボードを作成します。

例のコードはここにあります。

ステップ1 —必要なものを設計する

ほとんどの場合、開発者はコードに直接ジャンプします。ただし、設計はプログラミングの重要な部分であり、多くの時間と頭痛の種を節約できます。設計は完璧ではなく、正しい方向に導くものであることを忘れないでください。

したがって、これはアーキテクチャ設計に基づいて必要なものです。

  • コンポーネント:users.js、user-profile.js、およびissues.js
  • レイアウト:header.jsおよびsidebar.js
  • ダッシュボード:dashboard.js

すべてのコンポーネントとレイアウトがdashboard.jsに読み込まれ、その後、index.jsにdashboard.jsがブートストラップされます。

ダッシュボードの建築設計

では、なぜレイアウトとコンポーネントのフォルダーがあるのでしょうか?

レイアウトは、静的テンプレートなど、一度必要なものです。ダッシュボード内のコンテンツは変更される場合がありますが、サイドバーとヘッダーは同じままです(これらはレイアウトと呼ばれます)。レイアウトには、エラーページ、フッター、ステータスページなどがあります。

componentsフォルダーは、一般的なコンポーネント用であり、おそらく2回以上再利用します。

モジュールを扱うときは、しっかりとした接地構造を持つことが重要です。効果的にスケーリングするために、フォルダには、物を見つけてデバッグしやすいように、適切な名前を付ける必要があります。

後で、必要なコンポーネントとレイアウト用のフォルダースペースが必要な動的インターフェイスの作成方法を説明します。

ステップ2 —フォルダー構造のセットアップ

前述のように、ダッシュボード、コンポーネント、レイアウトの3つのメインフォルダーがあります。

-ダッシュボード
-コンポーネント
-レイアウト
index.html
index.js(エントリーポイント)

そして、フォルダー内の各ファイルで、クラスをエクスポートします。

-ダッシュボード
    dashboard.js
-コンポーネント
    issues.js
    user-profile.js
    users.js
-レイアウト
    header.js
    sidebar.js
index.html
index.js(エントリーポイント)

ステップ3 —実装

フォルダ構造はすべて設定されているため、次に行うことは、各ファイルにコンポーネント(クラス)を作成してからエクスポートすることです。コードの規則は、残りのファイルでも同じです。すべてのコンポーネントは単なるクラスであり、「xコンポーネントがロードされる」コンソールです。xはコンポーネントがロードされたことを示すためにコンポーネントの名前です。

ユーザークラスを作成し、次に示すようにエクスポートします。

エクスポートステートメントを処理する場合、さまざまなオプションがあります。そのため、個々のコンポーネントをエクスポートすることも、コンポーネントのコレクションをエクスポートすることもできます。たとえば、クラスをエクスポートする場合、クラスの新しいインスタンスを作成することにより、内部で宣言されたメソッドにアクセスできます。

さて、ステップ1のアーキテクチャ図を見ると、ユーザープロファイルコンポーネントがヘッダーレイアウトによってカプセル化されていることがわかります。つまり、ヘッダーレイアウトを読み込むと、ユーザープロファイルコンポーネントも読み込まれます。

各コンポーネントとレイアウトにはエクスポートされたクラスがあるため、次のようにダッシュボードファイルにインポートします。

ダッシュボードファイルで実際に何が行われているのかを理解するには、ステップ1で図面を再検討する必要があります。つまり、各コンポーネントはクラスであるため、新しいインスタンスを作成してオブジェクトに割り当てる必要があります。次に、オブジェクトを使用して、メソッドloadDashboard()に示すようにメソッドを実行します。

現在、loadDashboard()メソッドを実行していないため、アプリは何も出力しません。動作させるには、次のようにファイルindex.jsにダッシュボードモジュールをインポートする必要があります。

そして、コンソールは以下を出力します:

ロードされたES6コンポーネント

示されているように、すべてが機能し、コンポーネントが正常にロードされます。先に進み、2つのインスタンスを作成してから、次のようなこともできます。

上記の出力は同じですが、新しいインスタンスを作成する必要があるため、結果が2回取得されます。

ダッシュボードの2つの一意のインスタンス

一般に、これにより、他のモジュールに干渉することなく、必要なファイル内のモジュールを簡単に保守および再利用できます。コンポーネントをカプセル化する新しいインスタンスを作成するだけです。

ただし、前述のように、目的は、インポートおよびエクスポートステートメントを使用してモジュールおよびコンポーネントを操作する方法のダイナミクスをカバーすることでした。

ほとんどの場合、JSフレームワークを使用する場合、通常、ダッシュボードのコンテンツを変更できるルートがあります。現在、レイアウトなどのすべてのものは、loadDashboard()メソッドを呼び出すたびにロードされますが、これは理想的なアプローチではありません。

5.ダッシュボードの例の最適化手法

モジュールがどのように機能するかについての基本的な理解が得られたので、多数のコンポーネントで構成される大規模なアプリケーションを扱う場合、アプローチは実際にはスケーラブルでも直感的でもありません。

動的インターフェイスと呼ばれるものが必要です。これにより、必要なコンポーネントのコレクションを作成し、簡単にアクセスできます。 Visual Studio Codeを使用している場合、IntelliSenseは使用可能なコンポーネントと、既に使用したコンポーネントを示します。つまり、エクスポートされたコンポーネントを確認するために、フォルダ/ファイルを手動で開く必要はありません。

したがって、20個のコンポーネントを持つモジュールがある場合、各コンポーネントを1行ずつインポートする必要はありません。単に必要なものを手に入れたいだけなのです。 C#、PHP、C ++、Javaなどの言語の名前空間を使用したことがある場合、この概念は本質的に似ていることに気付くでしょう。

達成したいことは次のとおりです。

示されているように、コードの行が少なくなり、コンテキストを失わずに宣言型にしました。どのような変更が行われたか見てみましょう。

動的インターフェイス(バレルとも呼ばれる)を作成する

動的なインターフェイスにより、必要なもののコレクションを作成できます。お気に入りのツールでツールボックスを作成するようなものです。言及する重要なことの1つは、動的なインターフェイスをすべてのフォルダーに追加するのではなく、多くのコンポーネントで構成されるフォルダーに追加することです。

インポートを大幅に簡素化し、見やすくします。あまりにも多くのバレルファイルを持ちたくないのは、生産性が低下し、通常は解決が難しい場合がある循環依存関係の問題につながるためです。
-エイドリアン・ファシウ

動的なインターフェースを作成するために、各フォルダーのルートにあるindex.jsという名前のファイルを作成し、必要なファイルまたはコンポーネントのサブセットを再エクスポートします。 TypeScriptでも同じ概念が機能します。index.tsのように、タイプを.jsから.tsに変更するだけです。

index.jsは、ルートフォルダースペースにアクセスしたときに最初にロードされるファイルです。これは、HTMLコンテンツを起動するindex.htmlと同じ概念です。つまり、 '。/ components / index.js'からimport {component}を明示的に記述する必要はありませんが、代わりに './componentsから{component}をインポートします。

動的なインターフェースの外観は次のとおりです。

動的インターフェイスを使用することで、アクセスするルートレベルが1つ少なくなり、コードも少なくなります。

実行時に新しいインスタンスを作成します

dashboard.jsの4つのインスタンスを削除し、代わりに実行時にすべてのコンポーネントがエクスポートされるときにインスタンスを作成しました。オブジェクトの名前を決定する場合は、デフォルトの新しいDashboard()をエクスポートしてから、中括弧なしでdashViewをインポートできます。

示されているように、新しいインスタンスを作成する必要なくメソッドを直接呼び出すことができ、コードの記述も少なくなります。ただし、これは個人的な好みであり、アプリと要件の実際の使用例は自由に決定できます。

最後に、すべてのコンポーネントとレイアウトを1つのメソッドで読み込みます。

結論

コンポーネントをインポートおよびエクスポートする方法の簡単な例を示すことから始めましたが、その後、(ほとんど)私が知っているすべてを共有する必要性を感じました。この記事が、アプリを構築する際にES6モジュールを効果的に処理する方法と、関心の分離(設計原則)の観点から重要なことについての洞察を提供してくれることを願っています。

要点:

  • ES6モジュールを使用すると、外部の動作によるコンポーネントの変更を簡単に再利用、保守、分離、カプセル化できます。
  • モジュールはコンポーネントのコレクションです
  • コンポーネントは個々のブロックです
  • 時間とリソースが必要になるため、すべてを再利用可能にしようとしないでください。ほとんどの場合、再利用しません。
  • コードに飛び込む前にアーキテクチャ図を作成する
  • コンポーネントを他のファイルで使用可能にするには、まずエクスポートしてからインポートする必要があります
  • index.js(TypeScript index.tsと同じ概念)を使用することで、動的インターフェイス(バレル)を作成して、必要なものにすばやくアクセスし、少ないコードと少ない階層パスでアクセスできます。
  • export let objectName = new ClassName()を使用して、実行時に新しいインスタンスをエクスポートできます。

幸いなことに、状況は変化しており、コンポーネントベースで再利用可能なパラダイムに向かっています。問題は、プレーンなJSコードだけでなく、HTML要素も実用的で直感的な方法でどのように再利用できるかです。 ES6モジュールとWebコンポーネントを組み合わせることで、パフォーマンスの高いスケーラブルなアプリを構築するために必要なものが得られるようです。

ここでは、ウェブエコシステムについて書いたいくつかの記事と、個人的なプログラミングのヒントやコツを紹介します。

  • AngularとReactの比較
  • 混oticとした心は混oticとしたコードにつながる
  • 常に新しいことを学びたい開発者
  • これらのコアWebコンセプトを学ぶ
  • これらの重要なJavaScriptメソッドでスキルを向上させます
  • カスタムbashコマンドを作成してプログラムを高速化

毎週公開するMediumで見つけることができます。または、Twitterで私をフォローすることもできます。ここでは、関連するWeb開発のヒントとトリックを個人的な開発ストーリーとともに投稿しています。

この記事を楽しんで、もっとこのようなものが必要な場合は、拍手(❤)して、友人や同僚と共有してください。良いカルマです。