NgSysV.シンプルな Reactive Svelte Web アプリの作成

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

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

1. はじめに

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

2. 状態と反応性

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

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

状態の定義とそのリアクティブ性の実装に対する Svelte のアプローチを見てみましょう。

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

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

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

console.log(myDataItem);

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

let myDataItem;

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

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

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

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

//src/routes/page.svelte - 実行する前にこの行を削除してください

    PopupVisible = true にします。

    関数 togglePopup() {
        ポップアップ可視 = !ポップアップ可視;
    }
スクリプト>

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



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

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

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

<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173277643775221.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="NgSysV.Creating a simple Reactive Svelte webapp"></p>

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

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

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

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

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

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

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

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

<pre class="brush:php;toolbar:false">//src/routes/page.svelte - 実行する前にこの行を削除してください

    PopupVisible = false にします。
    newProductNumber = "";
    製品を = []; にします。 // 製品オブジェクトの配列 {productNumber: productNumber}
スクリプト>

<div>



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

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

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

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

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

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

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

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

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

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

<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173277643810144.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="NgSysV.Creating a simple Reactive Svelte webapp"></p>

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

<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173277643952736.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="NgSysV.Creating a simple Reactive Svelte webapp"></p>

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

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

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

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

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

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

<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173277644070139.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="NgSysV.Creating a simple Reactive Svelte webapp"></p>

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

<p>他のすべてが失敗し、テンプレート セクション内の変数の値を確認する必要がある場合、変数 "x" の "console.log" に相当するものは </p>
<p>x の値は {x です}</p>ステートメント。

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

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

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


          </div>

            
        </li>
</ul>
</form>
</div>