最初の Web コンポーネントの作成 (Modulo.js を学ぶ - パート f)

?新規購読者およびコンポーネント開発者の皆様、ようこそ! 10 部構成の新しいチュートリアル シリーズを開始します。私の他のチュートリアルでは Modulo.js を使用して、ポケモン ダンス パーティー、レトロな押し出しテキスト エディター、ビデオ ゲーム ギャラリーなどの具体的で楽しい小さなアプリを構築しましたが、このチュートリアル シリーズは、最初から基本的な原則に基づいて構築されます。は Web コンポーネントですか?

HTML と CSS の次のステップ

HTML と CSS の基本を学んだばかりで、次のステップに進むことに興味があり、より大規模で完全な Web アプリケーションを構築したいと考えていますか?それとも、すでに Web 開発者または JavaScript プロであり、肥大化、ツール、過剰な依存関係のない、迅速で軽量な Web アプリを構築したいだけですか?

そうであれば、Web コンポーネントが最適です!これらを使用すると、コードの再利用可能な部分を作成できます。このチュートリアルを受講すると、繰り返しが多く保守が難しい HTML と CSS を修正する方法を学びます。また、最小限のツールとライブラリのみを使用するため、Node.js、NPM、または大規模な node_modules は必要ありません。また、最新のフロントエンド Web 開発のスキルを磨くこともできます。このシリーズの今後のチュートリアルでは、

スロット、shadowDOM、プロップ などの概念を学習します。 、テンプレート、状態管理など。これらは、他の一般的なフレームワークを使用するために移植可能な概念であり、Modulo のシンプルで宣言的なアプローチは、複雑なセットアップに行き詰まることなく、中心となる概念を学ぶためのより魅力的な方法になる可能性があります。

Modulo フレームワークの紹介

Modulo とは何ですか? Modulo は、JavaScript で書かれたフリー ソフトウェア/オープン ソースの小さいながらも強力な Web フレームワークです。依存関係がなく、HTML 構文を使用するため、Node.js やコンパイルを必要とせず、ページの読み込み時に自動的にセットアップできます。これは、プレーン HTML の「静的サイト」(たとえば、HTML、CSS、およびその他の静的アセットをディレクトリ内で組み立てて静的 Web ホスト上で起動する場合)、またはその他の既存の Web アプリで使用できます。このチュートリアルでは、Web コンポーネントを構築するツールとして Modulo を使用する方法について説明します。

紹介パート 1

パート 1 では、単純な「Hello World」コンポーネントを構築する方法を学びます。今後のパートでは、スタイル、プロップ、状態、リアクティブ フォーム、スロット、API などを追加する方法を学びますが、今のところは基本的なことから始めます。

基本的な HTML を超えて、 Modulo で Web コンポーネントを作成して再利用することによる CSS。

ステップ 1: モジュロを含める

Modulo を使用する前に、フレームワークをインクルードする必要があります。フレームワーク全体は、2000 行の JavaScript を含むファイル「Modulo.js」に含まれています。

これは、Modulo プロジェクトを開始するには、ブラウザとエディタ以外に文字通り依存関係が必要ないことを意味します。 したがって、空の HTML ファイルを開いて、次の非常に単純なスターター コードを開始するだけです。

<template Modulo>
    <!-- our stuff will go here eventually... -->
</template>
<script src="https://unpkg.com/mdu.js"></script>

ステップ 2: 最初のコンポーネントを定義する

これをインクルードしたので、

Modulo 定義 の作成を開始し、一般的にフレームワークを使用できます。 Modulo を作成して最初のコンポーネントを定義します。定義を作成し、その中に