Svelte Appプロジェクト：Daily Planet＆＃x27;のニュースアプリUIを構築する

Svelteは、多くの点でReactのような最新のUIライブラリに似た新しいJavaScript UIライブラリです。重要な違いの1つは、仮想domの概念を使用しないことです。 このチュートリアルでは、スーパーマンの世界の架空の新聞であるデイリープラネットに触発されたニュースアプリケーションを構築することにより、Svelteを紹介します。

キーテイクアウト

Svelteは、仮想DOMを使用していない新しいJavaScript UIライブラリであり、React、Vue、Angularなどの最も強力なフレームワークよりも高速になります。アプリを構築するときに、必要な作業を開発マシンのコンパイルタイムフェーズにシフトします。

このチュートリアルでは、スーパーマンの世界の架空の新聞であるデイリープラネットに触発されたニュースアプリケーションの構築に関する段階的なガイドを提供しています。これには、Svelteプロジェクトの初期化、ローカル開発サーバーの実行、最終的なバンドルの構築が含まれます。

このチュートリアルでは、Svelteプロジェクトを生成し、ニュースエンドポイントからデータを取得し、アプリケーションのUIの作成のためのDegitツールの使用についても説明しています。
• アプリケーションを開発した後、端末でビルドコマンドを実行することで生産バンドルを作成し、Webサイトとサーバーレス機能のクラウドプラットフォームであるZeitを使用してアプリケーションをホストできます。
Svelteについて
について
• Svelteは、ユーザーインターフェイスを構築するための新しいアプローチを使用しています。ブラウザで必要な作業を行う代わりに、アプリを構築したときに開発マシンで発生するコンパイル時間フェーズに動作するSvelteシフト。 一言で言えば、これがSvelteの仕組みです（公式ブログで述べられているように）：
svelteは

のビルド時間

で実行され、コンポーネントを非常に効率的な

命令

コードを外科的に更新するコードに変換します。その結果、優れたパフォーマンス特性を備えた野心的なアプリケーションを書くことができます。

Svelteは、仮想DOMを使用せず、変更された部分のみを外科的に更新しないため、最も強力なフレームワーク（React、Vue、Angular）よりも高速です。

Svelteコンポーネントなどの基本的な概念や、データの配列を取得して反復する方法について学びます。また、Svelteプロジェクトを初期化し、ローカル開発サーバーを実行し、最終的なバンドルを構築する方法を学びます。

前提条件

いくつかの前提条件が必要なので、次のようにこのチュートリアルを快適にフォローできます。 HTML、CSS、およびJavaScript（ES6）に精通しています 開発マシンにインストールされているnode.jsとnpm。

node.jsは公式Webサイトから簡単にインストールできます。または、NVMを使用して、システム内の複数のバージョンのノードを簡単にインストールおよび管理することもできます。

JSON APIをアプリのニュースのソースとして使用するため、無料でアカウントを作成してAPIキーに注意を払うだけでAPIキーを取得する必要があります。

始めましょう

さあ、Svelteプロジェクトを生成するためにDegitツールを使用して、Daily Planet Newsアプリケーションの構築を始めましょう。

システムにグローバルにDegitをインストールするか、NPXツールを使用してNPMから実行できます。新しい端末を開き、次のコマンドを実行します：

次に、プロジェクトのフォルダー内をナビゲートし、次のコマンドを使用して開発サーバーを実行します。

npx degit sveltejs/template dailyplanetnews

開発サーバーはhttp：// localhost：5000アドレスからリスニングされます。変更を行うと、それらは再構築され、実行中のアプリにライブロードされます。

プロジェクトのmain.jsファイルを開くと、次のコードを見つける必要があります。

<span>cd dailyplanetnews
</span><span>npm run dev
</span>

これは、Svelteアプリが、従来のAPPと呼ばれるルートコンポーネントのインスタンスを作成およびエクスポートすることにより、ブートストラップされる場所です。コンポーネントは、ターゲットを備えたオブジェクトを取得し、属性をプロップします。

ターゲットには、コンポーネントがマウントされるDOM要素が含まれ、プロップにはアプリコンポーネントに渡すプロパティが含まれます。この場合、それは

世界

<span>import <span>App</span> from './App.svelte';
</span>
<span>const app = new App({
</span>    <span>target: document.body,
</span>    <span>props: {
</span>        <span>name: 'world'
</span>    <span>}
</span><span>});
</span>
<span>export default app;
</span>

値を持つ単なる名前です。

app.svelteファイルを開くと、次のコードが見つかります。

これはアプリケーションのルートコンポーネントです。他のすべてのコンポーネントは、アプリの子供です。

svelteのコンポーネントソースファイルに.svelte拡張子を使用します。これには、コンポーネントのすべてのJavaScript、スタイル、マークアップが含まれています。

export let name;構文は、名前と呼ばれるコンポーネントプロップを作成します。変数補間 - {...} - を使用して、名前を介して渡された値を表示します。

<span><span><span><script</span>></span><span>
</span></span><span><span>    <span>export let name;
</span></span></span><span><span></span><span><span></script</span>></span>
</span>
<span><span><span><style</span>></span><span>
</span></span><span><span>    <span>h1 {
</span></span></span><span><span>        <span>color: purple;
</span></span></span><span><span>    <span>}
</span></span></span><span><span></span><span><span></style</span>></span>
</span>
<span><span><span><h1</span>></span>Hello {name}!<span><span></h1</span>></span>
</span>

普通の古いJavaScript、CSS、およびHTMLを使用するだけで、Svelteコンポーネントを作成することができます。 Svelteは、データのリストなどを介してさまざまな補間とループのために、HTMLにいくつかのテンプレート構文を追加します。

これは小さなアプリであるため、アプリコンポーネントに必要な機能を単純に実装できます。 タグでは、onmount（）メソッドを「svelte」からインポートし、API_KEY、記事、およびURL変数を定義します。 🎜>

onmountはライフサイクル方法です。公式チュートリアルがそれについて言っていることは次のとおりです

すべてのコンポーネントには、

ライフサイクル

があります。これは、作成されたときに起動し、破壊されたときに終了します。そのライフサイクル中に重要な瞬間にコードを実行できるようにするいくつかの関数があります。最も頻繁に使用するのはオンマウントです。これは、コンポーネントが最初にDOMにレンダリングされた後に実行されます。

次に、フェッチAPIを使用してニュースエンドポイントからデータを取得し、コンポーネントがDOMにマウントされているときに記事変数に記事を保存しましょう。

npx degit sveltejs/template dailyplanetnews

fetch（）メソッドはjavascriptの約束を返すため、Async/awaitの構文を使用してコードを同期し、コールバックを排除することができます。

次に、次のHTMLマークアップを追加してアプリケーションのUIを作成し、ニュースデータを表示しましょう。

各ブロックを使用してニュース記事をループし、各記事のタイトル、説明、URL、およびURLTOIMAGEを表示します。

Daily Planetのロゴと見出しは、DCコミックに触発されたこの非営利ニュース組織から借用されています。

<span>cd dailyplanetnews
</span><span>npm run dev
</span>

Googleフォントから利用可能な手書きフォントであるKalamを使用します。パブリック/index.htmlファイルを開き、次のタグを追加します。

次に、app.svelteファイルに戻り、次のスタイルを追加します。

これは、毎日のニュースアプリのスクリーンショットです：

<span>import <span>App</span> from './App.svelte';
</span>
<span>const app = new App({
</span>    <span>target: document.body,
</span>    <span>props: {
</span>        <span>name: 'world'
</span>    <span>}
</span><span>});
</span>
<span>export default app;
</span>

生産用の建物

<span><span><span><script</span>></span><span>
</span></span><span><span>    <span>export let name;
</span></span></span><span><span></span><span><span></script</span>></span>
</span>
<span><span><span><style</span>></span><span>
</span></span><span><span>    <span>h1 {
</span></span></span><span><span>        <span>color: purple;
</span></span></span><span><span>    <span>}
</span></span></span><span><span></span><span><span></style</span>></span>
</span>
<span><span><span><h1</span>></span>Hello {name}!<span><span></h1</span>></span>
</span>

アプリケーションを開発した後、ターミナルでビルドコマンドを実行することにより、生産バンドルを作成できます。

コマンドは、希望のホスティングサーバーでホストできる削除および生産対応のバンドルを作成します。 今すぐZeitを使用してアプリケーションをホストしましょう。

Zeitは、プロジェクトを.now.shまたは個人ドメインに展開するために使用できるWebサイトおよびサーバーレス機能のクラウドプラットフォームになりました。

端末に戻り、次のコマンドを実行して今すぐインストールします。

次に、パブリックフォルダーに移動して、nowコマンドを実行します：

<span><script>
</span>    <span>export let name;
</span>
    <span>import <span>{ onMount }</span> from "svelte";
</span>
    <span>const API_KEY = "<YOUR_API_KEY_HERE>";
</span>    <span>const URL = <span>`https://newsapi.org/v2/everything?q=comics&sortBy=publishedAt&apiKey=<span>${API_KEY}</span>`</span>;
</span>    <span>let articles = [];
</span>
<span></script>
</span>

それだけです！アプリケーションはクラウドに展開されます。私たちの場合、public-kyqab3g5j.now.sh。

から入手できます

このGitHubリポジトリからこのアプリケーションのソースコードを見つけることができます。

結論

このチュートリアルでは、Svelteを使用してシンプルなニュースアプリを作成しました。また、Svelteとは何か、NPMのDegitツールを使用してSvelteプロジェクトを作成する方法も見ました。

すべてのSvelte機能について学ぶための詳細なチュートリアルについては、公式ドキュメントを参照できます。 ニュースアプリを構築するためにSvelteを使用することの重要な利点は何ですか？それはDOMを直接操作します。ニュースアプリを構築するとき、Svelteはいくつかの利点を提供します。まず、よりシンプルでクリーンなコードを提供するため、開発者がコードを理解して維持しやすくなります。第二に、Svelteアプリは非常にパフォーマンスがあります。 Svelteはビルド時に実行されるため、アプリコンポーネントをDOMを更新する非常に効率的な命令コードに変換します。これにより、読み込み時間が短くなり、ユーザーエクスペリエンスがスムーズになります。最後に、SvelteはReactやVueのようにコンポーネントベースであるため、複雑なユーザーインターフェイスを簡単に作成できます。 > Svelte Newsアプリに新しい記事を追加するには、記事の新しいコンポーネントを作成し、関連する親コンポーネントにインポートすることが含まれます。新しいコンポーネントでは、記事のコンテンツと著者や公開日などの関連するメタデータを定義できます。コンポーネントが作成されたら、インポートステートメントを使用して親コンポーネントにインポートできます。次に、記事を表示したい場合の親コンポーネントのレンダリング方法に追加できます。 Svelte Newsアプリには、検索コンポーネントを作成し、検索入力を追跡するための状態管理を追加することが含まれます。 Svelteの組み込み反応性機能を使用して、検索入力に基づいて表示された記事を更新できます。検索入力が変更されたら、記事のリストをフィルタリングして、検索入力に一致する記事のみを含めることができます。各記事にカテゴリプロパティを追加することで、Svelteアプリを実現できます。このプロパティを使用して、選択したカテゴリに基づいて記事をフィルタリングできます。カテゴリのリストを表示するカテゴリコンポーネントを作成できます。カテゴリが選択されている場合、表示された記事を更新して、選択したカテゴリの記事のみを含めることができます。 Svelte Newsアプリは、FireBase認証サービスやJWT（JSON Web Tokens）を使用したバックエンドサーバーの使用など、さまざまな方法を使用して実行できます。ユーザーがログイン資格情報を入力できる認証コンポーネントを作成する必要があります。フォームの提出時に、これらの資格情報は、検証のために認証サービスまたはバックエンドサーバーに送信されます。資格情報が有効な場合、ユーザーは認証され、アプリへのアクセスが許可されます。Svelte Newsアプリのレスポンシブを作成するには、CSSメディアクエリを使用して画面サイズに基づいてアプリのレイアウトを調整します。 Svelteを使用すると、JavaScriptやHTMLコードと同じファイルにCSSコードを書き込むことができ、コンポーネントのスタイルを容易にします。さまざまな画面サイズのさまざまなスタイルを定義して、すべてのデバイスでアプリの見た目を確実に確認できます。アプリは、Firebaseクラウドメッセージングなどのサービスを使用して実行できます。アプリをサービスに登録し、[プッシュ通知の受信を処理するために必要なコードをアプリに追加する必要があります。これには通常、プッシュイベントのためにリッスンし、受信したときに通知を表示するサービスワーカーをアプリに追加することが含まれます。 Svelte Newsアプリのコメントセクションでは、コメントコンポーネントを作成し、コメントを追跡するための状態管理を追加することが含まれます。 Svelteの組み込みの反応性機能を使用して、ユーザー入力に基づいてコメントを更新できます。ユーザーがコメントを送信すると、コメントのリストに追加して表示されたコメントを更新できます。 Svelte Newsアプリには、いくつかの戦略が含まれます。まず、Svelteの組み込みツールを使用して、コードの分割とレイジーロードを使用して、現在のビューに必要なコードのみをロードできます。第二に、画像やその他の静的資産を最適化して、ファイルサイズを削減できます。最後に、サービスワーカーを使用してアプリの資産をキャッシュし、キャッシュから提供して、負荷時間を短縮できます。アプリは、NetlifyやVercelなどの静的サイトホスティングサービス、またはGoogle CloudやAWSなどのクラウドプラットフォームを使用するなど、さまざまな方法を使用して実行できます。 NPM Run Buildコマンドを使用して、プロダクション用のアプリを構築する必要があります。これにより、コンパイルされたアプリでパブリックフォルダーが作成されます。このフォルダーは、ホスティングサービスまたはクラウドプラットフォームにアップロードできます。

以上がSvelte Appプロジェクト：Daily Planet＆＃x27;のニュースアプリUIを構築するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。