学習svelte 3包コンポーネントすべての物事を

それは1分であった!私は、Svelteについて書くことが幸せです;今日はコンポーネントについて、コンポーネントベースの開発が効率的である理由、およびSvelteコンポーネントの作成と使用方法についてお話したいと思います.
昔、ウェブサイトのファイル構造はこのように見えました.

public/
    html/
        index.html
        blog.html
        contact.html
    css/
        style.css
        blog.css
    js/
        index.js
        contact.js
assets/
    img/
            portrait.jpeg
            favicon.png

Webフロントエンドのためのこの構造は、マークアップ(HTML)、スタイリング(CSS)、および論理(JavaScript)がそこに存在するべきであることを意味する「あなたの懸念を切り離す」ことを目的とします.これはブラウザが私たちのコードをどのように見ているかということです.しかし、このシナリオによって作成された開発経験はいくつかの問題を引き起こします.例えばNAVバーを見てみましょう.あなたがこのファイル構造を使用しているウェブサイトをつくっていたならば、あなたはこのように若干のHTMLを書きます..

<nav>
    <ul>
        <li><a href="index.html"> Home </a></li>
        <li><a href="blog.html"> Blog </a></li>
        <li><a href="contact.html"> Contact </a></li>
    </ul>
</nav>

次に、適切なCSS＆JSファイルを参照しながら、あなたは、サイト上のすべてのページにこのNavバーをコピー+ペーストする必要があります.あなたが新しいプロジェクトを始めているとき、これは大丈夫な経験であるかもしれません、しかし、あなたが50 +ページを持っているとき、そして、クライアントがナビゲーションに何か新しいものを加えたいと思うとき、3年はラインを下ろしますか?あなたは、間違いなく単純なタスクを達成するために必要な作業を想像することができます.これはコンポーネントベースの開発が重要になるところです我々は、サイト/アプリを介して再利用可能なコードを行います.あなたはこのパターンが開発(特にウェブのために)に現れるのを見るでしょう、そこで、我々は1つの場所でコードを書き、再利用するか、またはプロジェクトを通してそれを参照したいです.
NAVバーの例では、必要な各ページにインポートされるナビゲーションコンポーネントを持っています.そして、このコンポーネントに変更を加えると、その変更はコードベースで反映されます.ブリリアント!コンポーネントの使用の出現を見るために、Svelteでコンポーネントをどのように作り、使用できるかを見てみましょう.
ここに私たちに提供される例がありますSvelte tutorial 'ネストされたコンポーネント'について.
ここでは、我々の主なアプリケーションのコンポーネントを';アプリという名前があります.Svelte '

<script>
    import Nested from './Nested.svelte';
</script>
<style>
    p {
        color: purple;
        font-family: 'Comic Sans MS', cursive;
        font-size: 2em;
    }
</style>

<p>This is a paragraph.</p>
<Nested />

我々のSvelteコンポーネントをインポートするEMS構文を使用していることに注意してください.ESMについてもっと学ぶことができますhere
あなたが使っているならばSvelte Template , アプリ.Svelteは我々のアプリの生活のメインファイルです.上の例では、' nested 'というコンポーネントをインポートし、以下のテンプレートに表示します.Svelteのスコープのスタイリングは、CSS私たちのアプリケーションコンポーネントで表示されませんスタイルは、我々の入れ子になったコンポーネント内にある段落タグをスタイルしません.今私たちのコンテンツを編集する<Nested />コンテンツは、コンポーネントが参照されるところでどこでも変更されます.すごい!我々は、コードを繰り返すの問題を排除しました.我々の最初の例に戻るには、今すぐに作成することができます<Nav />私たちのsvelteアプリ全体効率的に再利用することができますコンポーネント.
次回は、我々の間でデータを共有するために小道具を活用しながら、我々は本当に創造的な方法でsvelteコンポーネントを使用する方法について説明します.