この投稿シリーズは NgateSystems.com にインデックスされています。とても便利なキーワード検索機(jī)能もあります。

最終レビュー日: 2024 年 11 月

1. はじめに

前の投稿では、完全に単純な HTML で構(gòu)成される Svelte Web アプリを作成しました。これには Javascript が含まれていなかったため、Svelte の高度な動的 HTML 生成機(jī)能は使用されませんでした。この投稿では Svelte の機(jī)能の表面をなぞるだけですが、言語の力を感じていただけるはずです。

2. 狀態(tài)と反応性

客観的に見ると、Web アプリは HTML ページ、ポップアップ、テーブル、フォーム、ボタンの複雑な階層です。この目まぐるしい視覚要素の集合は、データによって「情報」を與えられます。 テーブルは JavaScript 配列の內(nèi)容でインフレートされます。ポップアップは、フラグ フィールドの要求に応じて表示され、消えます。マウスやキーボード入力によって「突かれる」と、フォームにデータが花開きます。一言で言えば、それは複雑です。この狀況に対して、どうすれば何らかの秩序を確立できるのでしょうか?

Web アプリの任意の時點での外観を定義するデータ本體を総稱して、Web アプリの 狀態(tài) と呼びます。狀態(tài)が変化したときに効率的に反応する Web アプリを簡単に作成できるように設(shè)計されたソフトウェア開発テクノロジーに多くの努力が費(fèi)やされてきました。 Svelte のようなプラットフォームは、優(yōu)れた反応性を提供するように明確に設(shè)計されています。

狀態(tài)の定義とそのリアクティブ性の実裝に対する Svelte のアプローチを見てみましょう。

2.1 単純なリアクティブ Web アプリ

Web ページの一般的な機(jī)能は、起動時に (通常は迷惑な) ポップアップ ウィンドウが表示されますが、クリックすると必然的に消えます。 Svelte で狀態(tài)と反応性を使用してこれを Web アプリに実裝する方法を見てみましょう。

JavaScript では、使用する前に変數(shù)を定義する必要があります。たとえば、
のようなコマンド

console.log(myDataItem);

コードのどこかで、
のようなステートメントを使用して定義していない限り、エラーがスローされます。

let myDataItem;

余談ですが、このような JavaScript の一部をすぐに試すことができる「プレイグラウンド」にアクセスできると便利です。ブラウザ ページの「検査」ビューは、そのような遊び場の 1 つを提供します。ランダムなページでインスペクターを開き、メニュー バーの「コンソール」タブを選択します。あるいは、PlayCode で JavaScript コンソールを試してみることもできます。

JavaScript の let キーワードについては言いたいことがたくさんあります (「スコープ」について chatGPT に尋ねてみてください) が、Svelte では let が追加の重要性を持っています。これは、State を定義する方法だからです。 Svelte プログラムでは、let で定義された変數(shù)はプログラムの狀態(tài)の一部になります。

だから何？さて、先ほど、狀態(tài)変數(shù) (Web アプリの外観を定義する変數(shù)) は「リアクティブ」であると述べました。これは、値が変更されると、それに応じて Web アプリの外観が自動的に変更されることを意味します。 PopupVisible ブール変數(shù)を使用してポップアップの狀態(tài)を定義するとします。リアクティブ プラットフォームである Svelte は、変數(shù)の値を使用してポップアップが表示されるかどうかを判斷できるでしょうか?試してみましょう。

これが私が使用することを提案するコードです。これが何をするのかについてはすぐに説明します:

//src/routes/page.svelte - 実行する前にこの行を削除してください
<スクリプト>
    PopupVisible = true にします。

    関數(shù) togglePopup() {
        ポップアップ可視 = !ポップアップ可視;
    }
</スクリプト>

<div>
    {#if ポップアップ可視}
        



<p>ここのコードは 2 つのセクションに分かれています。上部の「script」セクションは、<script></script> で定義されています。タグで、popupVisible JavaScript 変數(shù)と togglePopup() 関數(shù)を宣言します。下部の「テンプレート」セクションでは、Svelte {#if} {/if} ロジック ブロックによって「モデレート」された HTML を指定します。洗練されたコードは、<script> で定義された変數(shù)と関數(shù)を參照できます。 HTML コード生成をガイドするセクション。參照は、ロジック ブロック內(nèi)で直接使用される場合を除き、中括弧 {} で囲まれています。詳細(xì)については、基本マークアップとロジック ブロックの Svelte ドキュメントを參照してください。</p>

<p>上に表示されたコードは非常に粗雑です。 「ポップアップ」は通常、</p><div> によって定義されます。ボーダーといくつかの位置決め CSS でフォ??ーマットされたタグ。ここでは <ボタン> を使用しました。タグ - フォーム上の「submit」要素を定義するためにより一般的に使用されるもの。私がこのようにしたのは、単に、ユーザーの注意をそらす可能性のあるいくつかの専門的な事柄を避けることができるからです。わかりやすいように、「ポップアップ」ボタンを青色にしました。

<p>Post 2.1 で作成されたスケルトン svelte-dev Svelte プロジェクトのコピーがまだある場合は、このコードを使用して src/routes/page.svelte のコンテンツ全體を置き換えてみてください。プロジェクト上でターミナルを開き、以前と同じように開発サーバーを起動すると、ブラウザが起動して以下の畫面が表示されるはずです。</p>

<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173277643775221.jpg" class="lazy" alt="NgSysV.Creating a simple Reactive Svelte webapp"></p>

<p>青い四角形は「ポップアップ」です。この時點では、popupVisible 変數(shù)が true に設(shè)定されており、ページの HTML 生成を駆動する Svelte ロジックが <button> を作成するように指示されているため、起動時に表示されます。この場合はタグを付けます。</p>

<p>次に、ポップアップをクリックしてみてください。魔法！それは消えます。これは、 がポップアップを指定するタグには、要素をクリックすると togglePopup 関數(shù)が実行される onClick 句が含まれています。これにより、popupVisible 変數(shù)が false に設(shè)定されます。</p>
<p>前に、Svelte の「狀態(tài)」変數(shù)を変更すると、Svelte がページのテンプレート セクションを再実行して畫面を更新すると言いました。したがって、テンプレート セクションが再実行され、popupVisible の値が false であるため、<button> が表示されます。ポップアップを表示するコードはバイパスされ、空のページが殘ります。</p>

<p>少し時間をとって、このことを理解してください。ポスト 1.1 で紹介した原始的な DOM 操作コードをまだ使っていたら、この効果は、かなり技術(shù)的な內(nèi)容 (おそらく、かなりの量の記述) を記述することによってのみ達(dá)成できたはずです。かなり非効率な) 低レベルのコード。ここでは、変數(shù)の値を変更するだけです。 Sveltekit は、複雑な結(jié)果を<strong>自動的に</strong> (そして、安心してください、効率的に) 処理しました。 </p>

<p>つまり、Svelte は、ブラウザ畫面管理の面倒な詳細(xì)をフレームワークに任せることができる高級言語を提供します。  </p>

<p><em>'24 年 10 月、Svelte 5 は反応性定義の取り決めに一連の改良を?qū)毪筏蓼筏?。上で説明した let 構(gòu)造は、この投稿シリーズのすべてで引き続き正常に機(jī)能しますが、より複雑な要件を処理するために新しいルーン概念が利用できるようになりました。詳細(xì)については、「ルーンとは」を參照してください。</em></p>

<h4>
  
  
  2.2 データ入力
</h4>

<p>ポップアップをもう少し面白くしてみましょう。あなたが製造會社の「製品」リストを管理する仕事をしていると想像してください?，F(xiàn)在のリストを表示し、新しい製品を追加できるユーティリティが必要になります。もちろん、実際には、エントリの編集と削除もできるようにしたいと思うでしょうが、今は物事を単純にしておきます。 </p>

<p>次のコードを見てください。おそらく JavaScript の知識が必要になりますが、內(nèi)部コメントが役立つはずです。<br>
</p>

<pre class="brush:php;toolbar:false">//src/routes/page.svelte - 実行する前にこの行を削除してください
<スクリプト>
    PopupVisible = false にします。
    newProductNumber = "";
    製品を = []; にします。 // 製品オブジェクトの配列 {productNumber: productNumber}
</スクリプト>

<div>



<p>ここの「テンプレート」セクションは、popupVisible の値を確認(rèn)することから始まります。これが false の場合 (変數(shù)が "script" セクションで初期化されたばかりなので起動時に設(shè)定されます)、Web アプリは Web アプリの現(xiàn)在の "products" リスト (products 配列に格納されている productNumbers の配列) を表示します。 </p>

<p>コードが次に進(jìn)み、[別の製品を追加] ボタンが表示されます。これは、前の例で使用した奇妙なバージョンではなく、通常のボタンです。ただし、以前と同様に、関連する on:click 関數(shù)があり、この関數(shù)は PopupVisible の値を true に設(shè)定します。</p>

<p>ボタンをクリックするとどうなりますか? PopupVisible はリアクティブ変數(shù)なので、Web アプリは畫面を更新します。</p>

<p>今回は、フォームの製品表示セクションは無視され、コントロールはテンプレート セクションの 2 番目の部分に直接移動します。</p>
<p>ここでは、従來のポップアップに似たものが表示されます。これは <form> を使用します。コンテナ div 內(nèi)のタグ> newProductNumber 狀態(tài)変數(shù)の入力を収集します。  ここでは、newProductNumber をユーザーのキーボード入力と同期させるために、特別な Svelte "bind" qualifier が使用されています。ユーザーがフォームの <input> フィールドに文字を入力するたびに、newProductNumber が更新されます。</p>

<p>ユーザーが最終的にフォームの「登録」ボタンをクリックすると、その on:click 関數(shù)は完全に更新された newProductNumber を products 配列にプッシュし、popupVisible フィールドをリセットできます。</p>

<p>最後に、popupVisible はリアクティブ変數(shù)であるため、コードの「テンプレート」セクションが再実行され、ポップアップが更新された製品番號のリストに置き換えられます。</p>

<p>他にも 1 つか 2 つのことがあなたを困惑させるかもしれません。前の例では、anon:click 修飾子は Web アプリの <script> で定義された関數(shù)を參照していました。セクション。ただし、この新しいバージョンの page.svelte では、関數(shù)は <button> 內(nèi)で明示的に定義されています。フィールドの HTML 仕様。どちらのアプローチも完全に有効です。ここで使用されているバージョンはおそらく少し奇妙に見えるかもしれませんが、これは広く使用されている配置であり、関數(shù)のロジックが呼び出し時點で定義されるという利點があります。これにより、何が起こっているのかが非常に簡単にわかります。 </p>

<p>參考までに、次の式:<br>
"() => { .... }" は、「次の JavaScript ステートメントによって定義された関數(shù)があります: "{ .... }" です。多くのバリエーションがあります。chatGPT に "arrow" に関するチュートリアルを提供してもらいます。 " 関數(shù)。</p>

<p>次に、私が「スタイリング」に関してはるかに冒険的であることにも気づくでしょう。たとえば、見出しがありますが、すべてが適切に中央に配置されています (CSS の「継承」により、>

</p>
<p>しかし、背景としてはこれで十分です。実際の Web アプリを見てみましょう。新しいコードを page.svelte ファイルの現(xiàn)在のコンテンツに貼り付けて保存し、(必要に応じて) プロジェクトでターミナルを開き、npm run dev -- --open コマンドを使用して開発サーバーを再起動します。ブラウザに表示される內(nèi)容は次のとおりです::</p>

<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173277643810144.jpg" class="lazy" alt="NgSysV.Creating a simple Reactive Svelte webapp"></p>

<p>ボタンをクリックすると次のような內(nèi)容が表示されます:<br><br></p>

<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173277643952736.jpg" class="lazy" alt="NgSysV.Creating a simple Reactive Svelte webapp"></p>

<p>newProductNumber フィールドには検証がないため、數(shù)字だけでなく文字も入力できることがわかります。これは今後の投稿で修正します。それでも、[登録] ボタンをクリックすると、ポップアップが元の在庫表示ページに置き換えられ、新しい製品の「番號」がリストに追加されるのが表示されます。</p>

<p>この Svelte のスクラップは、情報システムのように見え始めています! </p>
<h3>
  
  
  3. 前へ、そして上へ
</h3>

<p>この投稿では、Svelte 言語に具體化された主要な概念を簡単に垣間見ることができました。殘念ながら、問題があります。お気づきかと思いますが、今見た「在庫」の例は、Web アプリを閉じるたびに製品リストが消えるため、事実上役に立ちません。したがって、次のステップでは、Google の <strong>Firestore</strong> データベース テクノロジーを紹介します。これにより、サーバーホスト上に<strong>永続的</strong>ストレージを作成できるようになります。 </p>

<h3>
  
  
  追記 (a): うまくいかないとき - Chrome Inspector でレイアウトの問題を調(diào)査する
</h3>

<p>ポスト 2.1 の「うまくいかないとき」では、Web アプリの開発時に遭遇する重大な問題のいくつかに対処する方法について説明しました。しかし、より高度なレベルで作業(yè)するようになった今、より洗練されたツールが必要です。このセクションでは、Web アプリの畫面レイアウトの問題や JavaScript のロジック エラーを修正するときに非常に役立つ「Chrome インスペクター」について説明します (このシリーズの後半で説明するように、その他にも多くの機(jī)能があります)。</p>

<p>Web アプリ ページ上でインスペクターを起動するには、ページを右クリックして [検査] オプションを選択します。以下はその出力の例です:</p>

<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173277644070139.jpg" class="lazy" alt="NgSysV.Creating a simple Reactive Svelte webapp"></p>

<p>このスクリーンショットには次のものがあります:</p>
<ul>
<li>上記のように、インスペクターを起動しました。 w検査ウィンドウは Web アプリ ウィンドウの下半分を隠しています。これは、検査したい Web アプリ要素の一部がインスペクターによって非表示になっている可能性があるため、不便な場合があります。これは、インスペクタ ウィンドウの上端をクリックしてドラッグすることで、そのウィンドウの「サイズを変更」することで部分的に処理されます。あるいは、メニューの右端にある三點アイコンの下にある「ドックサイド」ツールを使用して、インスペクターを畫面の橫にドッキングすることもできます。</li>
<li>インスペクターのメニューバーから「要素」タブを選択しました</li>
<li> を展開しました。 <div> HTML タグ階層內(nèi)の行が左側(cè)の検査パネルに表示され、<h1> の上にマウスが置かれます。 Web アプリの見出しを示すタグ</li>
</ul>

<p>これを自分で試してみると、見出しに色付きのグラフィックが追加されていることがわかります。これらは、テキストに追加された余白、境界線、パディングのサイズと位置を示します。右側(cè)の検査パネルには詳細(xì)が表示されます。メニューの計算タブをクリックすると、さまざまな要素の色分けと詳細(xì)なサイズを説明するグラフィックが表示されます。 「スタイル」タブをクリックすると、テキストに付加されているスタイルの詳細(xì)が表示されます。リストの最初のエントリ セットは、タグの > で明示的に設(shè)定されたスタイルを確認(rèn)します。

</p>
<p>このパネルの利點は、インスペクターを使用してスタイルの変更と追加の効果を確認(rèn)できることです。たとえば、見出しに赤いフォントを試したいとします。パネルの上部にある element.style エントリのどこかをクリックし、「color: red」と入力します。必然的に、見出しが赤に変わります。オートコンプリートを使用してさまざまな色を試すことができることに注意してください。</p>

<p>要點を詳しく説明するつもりはありませんが、この機(jī)能がレイアウトの問題を調(diào)査して修正するための正確で直感的なツールをどのように提供できるかがわかり始めているはずです。詳細(xì)については、DevTools のインスペクタに関する Google のドキュメントを參照してください。 </p>

<p>これにはかなりの時間を費(fèi)やすことを覚悟してください。 Inspector は複雑なツールであるため、自信を持って使用できるようになるまでにはしばらく時間がかかります。  しかし、これは有意義な時間を過ごすことになるでしょう。確かに、Inspector のおかげで、ソース コードの設(shè)定を盲目的に実験する數(shù)え切れないほどの時間を節(jié)約できました。インスペクターのグラフィック表示により、要素の幅、マージン、パディングのすべての非表示プロパティが表示されます。</p>

<h4>
  
  
  追記 (b): Chrome Inspector を使用してロジックの問題を調(diào)査する
</h4>

<p>インスペクターでは、ソース コードを表示し、実行を停止したい行に「ブレークポイント」を設(shè)定できるため、ロジック エラーの発見にも役立ちます。 Web アプリを更新した後 (インスペクターが開いたまま)、各ブレークポイントでフィールド値を検査できます。これは、動作中のインスペクターのスクリーンショットです:</p>

<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173277644137804.jpg" class="lazy" alt="NgSysV.Creating a simple Reactive Svelte webapp"></p>
<p>このスクリーンショットでは次のことを行いました:</p>

<ul>
<li>以前と同じようにインスペクターを起動しました。 </li>
<li>左側(cè)のパネルの上にある [ソース] タブをクリックし、ページ ビューで localhost のソース階層を展開し、src/routes 行のルートの斜體の page.svelte エントリをクリックできるようにしました。</li>
<li>右側(cè)のパネルに page.svelte のソースが表示されていることに注意し、let PopupVisible = false; をクリックします。行を選択してブレークポイントを設(shè)定します (行番號が青で強(qiáng)調(diào)表示されていることを確認(rèn)します)。</li>
<li>ブラウザのページを更新し、Web アプリに「実行を再開」ボタンと「次の関數(shù)呼び出しをステップ オーバー」ボタンを含む「デバッガで一時停止されたメッセージ」が表示されていることを確認(rèn)しました。 let PopupVisible = false; であることもわかります。行が強(qiáng)調(diào)表示されます</li>
</ul>

<p>これらすべての結(jié)果、Web アプリケーションは「コード デバッグ」モードになりました?，F(xiàn)在、Web アプリの <strong><script></strong> セクションをデバッグしていますが、これは一度しか実行されず、何をするのか正確にわかっているため、あまり意味がありません。ただし、JavaScript ソース コードでデバッガーが何を?qū)g行できるかを理解するのに役立つため、実際に動作を?qū)g行してみましょう。</p>

<p>現(xiàn)在、Web アプリケーションは最初のステートメントの実行前に停止しているため、何も役に立ちません。ただし、[次へステップオーバー] ボタンをクリックして次のステートメントに進(jìn)むと、強(qiáng)調(diào)表示が 2 行目に移動していることに注意してください。最初の行の PopupVisible フィールドにマウスを置くと、現(xiàn)在の値 (もちろん false) を示すツールヒントが表示されることに注意してください。このトリックを繰り返して、newProductNumber と製品の設(shè)定を確認(rèn)します。</p>

<p><script> で定義された Javascript 関數(shù)にブレークポイントを設(shè)定すると、インスペクターの値がより明確に表示されます。セクション。これらは関數(shù)が參照されるたびに実行され、インスペクターはこれらの進(jìn)行狀況を追跡するのに最適です。</p>

<p>殘念ながら、page.svelte ファイルの「テンプレート」セクションにブレークポイントを使用してデバッグするのはそれほど簡単ではありません。ここで、リアクティブ変數(shù)の変更後にページが再レンダリングされるたびにコードが実行されますが、ここで「ソース」タブに表示されるコード (つまり、page.svelte の元の Sveltekit コード) は、現(xiàn)在実際に実行されているものではありません。 。元のコードは、ローカル サーバーによって生成された Svelte スクリプトに置き換えられました。したがって、何が起こっているのかについての情報を入手できる範(fàn)囲は限られています。</p>

<p><em>レンダリング プロセスとページを作成する理由について詳しく知りたい場合。 svelte ファイルはインスペクターで次のように動作します。Post 4.4 の最後まで少し飛ばしてください。ただし、複雑なので注意してください!</em></p>

<p>私の経験では、通常、Sveltekit ステートメントにブレークポイントを設(shè)定して、再レンダリング中にたどったパスを追跡できます。ただし、これらにはフィールド値は表示されません。</p>
<p>ただし、埋め込み関數(shù)にブレークポイントを設(shè)定すると便利です。たとえば、products.push({productNumber: newProductNumber}); にブレークポイントを設(shè)定してみてください。 「登録」ボタンの行。 <button> のブロック全體が「」であることに注意してください。コードが強(qiáng)調(diào)表示され (灰色で)、これが「匿名関數(shù)」であることを思い出させます (これについては、chatGPT を取得して説明してください)。ここで Web アプリを再実行し、<script> の場合と同じようにブレークポイントがどのように動作するかを観察します。セクション。 Web アプリに newProductNumber 123 を登録するように要求し、[登録] ボタンをクリックすると、Web アプリがブレークポイント行で停止していることがわかります。 「次の関數(shù)呼び出しをステップ オーバー」して、products.push({productNumber: newProductNumber}); の上にマウスを置きます。ライン。 products 配列に単一の値 123 が含まれていることがわかります。</button></p>

<p>他のすべてが失敗し、テンプレート セクション內(nèi)の変數(shù)の値を確認(rèn)する必要がある場合、変數(shù) "x" の "console.log" に相當(dāng)するものは <p>x の値は {x です}</p>ステートメント。</p>

<p>「デバッガーで一時停止」行のボタンはインスペクターのメニューバーに複製されており、ネストされた関數(shù)を橫斷できるようにする「次の関數(shù)にステップイン」ボタンが追加されていることに注意してください。 </p>

<p>すぐにお気づきかと思いますが、ブレークポイント設(shè)定は webapp ファイルに保持されます。ブレークポイントを設(shè)定した行は、もう一度クリックするとオフに切り替わります。畫面右側(cè)にあるインスペクターの「ブレークポイント」パネルでファイルのエントリを「右クリック」すると、すべてのブレークポイントを削除するためのマスタートグルが表示されます。 </p>

<p>最後に。 Web アプリが重大な問題に遭遇して「クラッシュ」した場合、インスペクターを開くと、メニュー バーの右端に赤い「エラー數(shù)」が表示されることに注意してください。この問題が発生すると、インスペクターの「コンソール」タブで問題の詳細(xì)を確認(rèn)できます。</p>


          </div>