Modulo チュートリアルが戻ってきました!

皆さんこんにちは！夏休みの後、Modulo チュートリアルに戻ってきました。さらに多くのチュートリアルを準備中ですので、楽しみにしていてください。とはいえ、次のトピックに関する特定のアイデアがある場合は、必ずコメント欄でお知らせください。

私の最後のチュートリアルは、30 行未満の HTML Web コンポーネント コードで構成される、API 駆動のポケモン ダンス パーティー コンポーネントに関する非常に迅速で楽しい「HTML のみ、JS なし」チュートリアルでした。以前のチュートリアルの一部は、プライベート状態とパブリック状態の管理に関するこのより高度なチュートリアルなど、もう少し本格的なものでした。少し無味乾燥に聞こえるかもしれませんが、それは幸運です。なぜなら、今日のチュートリアルはもう 1 つの楽しいチュートリアルであり、もう 1 つの人気のあるビデオ ゲームについてのものだからです...ゼルダ: ブレス オブ ザ ワイルド!

もちろん、いつものように、このチュートリアルで学んだテクニックはあらゆる API に適用できるので、読み続けて API 主導のギャラリーについてさらに学びましょう!

ハイラル コンペンディアム API の使用方法

このチュートリアルは 100%、素晴らしい Aarav Borthakur の無料で MIT ライセンスを取得し、寛大にホストされている Hyrule Compendium API のおかげです。これは、ファンが管理する楽しいデータベースと、ゼルダ: ブレス オブ ザ ワイルド フランチャイズ情報を取得するための API であり、メディア。ここで入手可能な「Monsters」エンドポイントを使用します: https://botw-compendium.herokuapp.com/api/v3/compendium/category/monsters

スクリーンショット

今すぐ 30 秒以内にお試しください: ???先に進みたいですか？最後までスクロールし、39 行の HTML コードをローカル HTML ファイルにコピーし、ブラウザで開きます。 Modulo には依存関係がなく、ローカル HTML ファイルに埋め込まれて実行されるため、非常に簡単です!

データから始める

静的データとそれを表示するテンプレートを含む、たった 6 行のコードから始めましょう:

このスニペットには、返された Hyrule Compendium API の staticdata.data プロパティをダンプする、非常に単純な 1 行の

そのスニペットを実行してみてください。結果のデータが表示されますか? for ループ.

画像ギャラリーの作成

属性 .data に Objects の Array が含まれていることがわかりました。それをループしてギャラリーを生成しましょう:

これにより、多くの img タグが生成されます。各タグには、元の JSON Array 内の Objects の「image」プロパティに割り当てられた src= と、{% for %} が割り当てられます。 template-tag は、配列内のすべての項目 (各 index などは言うまでもありません。たとえば、 0)。さらに練習するために、Modulo.js チュートリアルのパート 4 に for ループのインタラクティブな例が多数含まれています。

ステートとスクリプトの作成

次に行うべき最も重要なことは、新しい Script タグを作成することです。これを使用して、単純な 1 行の JavaScript 関数を作成できます。

これは、Modulo 使用時のスクリプト作成の中核となるテクニックです。JavaScript を使用して状態を変更できる関数を作成します。この場合、「後で使用するためにこのモンスターを保存する」という非常に単純な操作が実行されます。より正確には、状態変数「selected」を指定されたペイロードに割り当てます。このようにして、状態変数「selected」は、API から選択されたモンスターの一種の「隠し場所」になります。

クリックイベントの付加

さて、パズルのもう 1 つのピースを追加しましょう。それは、クリック イベントのアタッチです。以下を参照してください：

これは、イベント添付構文 (@click:=、この例では
) を使用して行われました。 この画像をクリックすることで選択しているモンスターを渡すことができるペイロード属性。イベントとスクリプト タグは、JavaScript を初めて使用する場合 (およびそうでない場合でも) 混乱を招く可能性があるため、スクリプト コンポーネント パーツの使用例とイベントの付加例については、このページの例をよく読んでください。

クリックイベントの付加

最後に、モンスターが選択されたときに条件付きでモンスター情報をレンダリングしましょう:

{% if state.selected %}
    
{{ state.selected.name|capfirst }}
    

    
{{ state.selected.description }}
{% else %}
    
Welcome to Hyrule Monster Guide!
    
← Select a monster to learn more
{% endif %}

これにより、最初は「ようこそ」メッセージが表示されます (state.selected が null で始まるため)。その後、誰かがモンスターの画像をクリックするとすぐに、state.selected 変数は null ではなくなり、
代わりに、内容は h1 タグと p タグで書式設定され、いくつかの調整が適用されて表示されます (|capfirst は最初の文字を大文字にします)。

- 埋め込み可能なスニペット

それをすべて組み合わせて、すべてを display: グリッドにラップして横並びレイアウトにし、overflow: auto を左側の div にスクロールバーとして配置します。最後に、2 番目の div にいくつかの最終的な CSS 微調整 (パディング、マージン、線形グラデーション) を追加すると、どこにでも埋め込むことができる次の結果が得られます。

{% staticdata.data のモンスターの場合 %} {% 終了の %}

{% if state.selected %}

{{ state.selected.name|capfirst }}

{{ state.selected.description }}

{％ それ以外 ％}

ハイラル モンスター ガイドへようこそ!

←詳細を確認するにはモンスターを選択してください

{% endif %}

メイン> テンプレート> 状態> 静的データ> 関数選択(ペイロード) { state.selected = ペイロード; } スクリプト> コンポーネント> テンプレート> モンスターガイド>

このチュートリアルを楽しんでいただければ幸いです。もしそうなら、このような続きをフォローしてください!