Svelteでifブロックを使用する

投稿日: 2022-04-20 2022-04-20

このチュートリアルでは、 ifブロックをSvelteフレームワークで使用して、Svelteマークアップコードにフロー制御ロジックを追加する方法を説明します。

Svelteのブロックは{#block}...{/block}構文を使用し始めるため、ブロックが{#if}...{/if}構文を使用する場合。また、ご覧のとおり、elseブロックやelseifブロックを追加することもできます。

渡されたlightsOnプロップがtrueと評価された場合にのみ、いくつかのマークアップを表示する最も単純な例から始めましょう。

SomeComponent.svelte

<script>
  export let lightsOn;
</script>

{#if lightsOn}
  <p>I can see clearly now!</p>
{/if}

{:else}構文を使用して、elseブロックを追加することもできます。

SomeComponent.svelte

<script>
  export let lightsOn;
</script>

{#if lightsOn}
  <p>I can see clearly now!</p>
{:else}
  <p>It's too dark in here! 🌑</p>
{/if}

elseif

{:else if condition}構文を使用して、elseifブロックをいくつでも追加できます。例を少し変更してみましょう。

SomeComponent.svelte

<script>
  export let pickedColor;
</script>

{#if pickedColor === 'green'}
  <p>I agree with you! 💚</p>
{:else if pickedColor === 'blue'}
  <p>Even better! 💙</p>
{:else if pickedColor === 'purple'}
  <p>Ok then! 💜</p>
{/if}

また、上記の例では、elseブロックをifブロックの最後のアイテムとして追加して、いずれの条件も当てはまらない場合にマークアップを追加することもできます。

次に、ifブロックを使用してマークアップを非表示または表示する簡単なアプリの例を見てみましょう。この例は、新しいSvelteプロジェクトを初期化する方法についての良い思い出にもなります。

Svelteプロジェクトのセットアップとifブロックの使用について十分に理解できたと思われる場合は、その部分をスキップしてください。

サンプルアプリ

ifブロックに関する知識を説明し、理解しやすくするために、このQRコードジェネレーターAPIを使用して、小さくてシンプルなQR code generatorアプリを作成します。

それでは、このミニプロジェクトから旅を始めましょう🚣‍。

プロジェクトの設定

Nodeがない場合は、推奨バージョンをインストールしてください。
新しいプロジェクト用のフォルダを作成します

次に、ターミナルを開き、次のコマンドを入力します。

$ npx degit sveltejs/template qr-code-generator
$ cd qr-code-generator
$ npm install

ここで、プロジェクトが正しくセットアップされているかどうかを確認するには、次のコマンドを実行します。🙈

$ npm run dev

次に、ブラウザでlocalhost:5000を開きます。

次のようになります。

View after setting up svelte project

ファイル構造は次のようになります。

qr-code-generator
  |- node_modules  
  |- index.js
  |- public
  |- src
    |- App.svelte
    |- main.js

App.svelteを開きます。これは、コードを記述するメインファイルです。すべてのコンテンツを削除することから始めます。

プロジェクトの構築を開始します

HTMLとCSSの部分

まず、HTMLマークアップ部分から始めて、QRコードを生成するために入力したテキストを送信するための小さなフォームを作成しましょう。

App.svelte

<div class="wrapper">
  <h1>QR CODE GENERATOR</h1>
  <form on:submit|preventDefault={dataSubmit}>
    <input bind:value={inputText}
            class="textInput"
            type="text"
            placeholder="Enter any text or url..." />
    <input class="btn" type="submit" value="Submit" />
  </form>
</div>

ここで、dataSubmitは、後でJavaScriptの部分で説明する関数です。 on:submitはネイティブのonsubmit()に似ており、フォームのsubmitイベントのイベントハンドラーとして使用されます。ハンドラー関数にボイラープレートコードを追加する必要がないように、preventDefault修飾子も使用していることに注目してください。

bind:value={inputText}は、入力値とinputText変数の間の双方向バインディング用です。

styleタグを使用して、同じApp.svelteファイルにCSSを書き込むこともできます。

App.svelte

.wrapper {
  max-width: 700px;
  margin: 0 auto;
}

.textInput {
  width: 70%;
  height: 40px;
  color: #484848;
  border-width: 1.5px;
  border-style: solid;
  border-color: black;
  padding: 3px;
  font-weight: 700;
}

.btn {
  border-radius: 3px;
  background-color: black;
  color: whitesmoke;
  font-weight: 700;
  cursor: pointer;
}

上記のコードを記述した後、ページは次のようになります。

View after writing some html

スクリプティングパート

同じApp.svelteファイルで、scriptタグを使用してJavaScript部分を書き込むこともできます。

QR server APIを変数で初期化し、scriptタグ内で上記で使用した変数も初期化します。 dataSubmit()関数もそこで定義する必要があります。

App.svelte

<script>
let inputText = "";
let API_URL = "https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=";
function dataSubmit(e) {
  // logic will go here
}
</script>

次に、ユーザーがテキストを入力したかどうかを示す変数を作成し、QRコードのロジックの記述を開始しましょう。

App.svelte

<script>
let inputText = "";
let textPresent = false;
let API_URL = "https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=";
function dataSubmit(e) {
  if (inputText !== "") {
    textPresent = true;
    API_URL += inputText;
  }
}
</script>

ブロックの場合は入力してください

次に、テキストを入力したときに生成されたQRコードを表示するために、HTMLとifブロック部分を追加する必要があります。

App.svelte

<div  class="wrapper">
  <h1>QR CODE GENERATOR</h1>
  <form on:submit={dataSubmit}>
    <input class="textInput"
           type="text"
           placeholder="Enter any text or url..."
           bind:value={inputText} />
    <input class="btn" type="submit" value="Submit" />
  </form>

  {#if textPresent}
    <img src={API_URL} /><br>
    <a href={API_URL} download>Download</a> 
  {/if}
</div>

textPresentがtrueの場合、ifブロック内のマークアップが表示され、DOMに含まれます。

それ以外の場合はブロック

ifステートメントの条件がtrueと評価されない場合は、elseブロックを使用して、他の何かを表示することもできます。

<div  class="wrapper">
  <h1>QR CODE GENERATOR</h1>
  <form on:submit={dataSubmit}>
    <input class="textInput"
           type="text"
           placeholder="Enter any text or url..."
           bind:value={inputText} />
    <input class="btn" type="submit" value="Submit" />
  </form>

  {#if textPresent}
    <img src={API_URL} /><br>
    <a href={API_URL} download>Download</a> 
  {:else}
    <p>No QR code yet! ☹️</p>
  {/if}
</div>

次に、もう少しスタイリングを追加します：🤓

App.svelte

img {
  margin-top: 100px;
  margin-bottom: 30px;
}

a {
  font-weight: 700px;
  font-size: 30px;
  color: black;
}

入力ボックスにテキストを入力して[送信]をクリックすると、そのテキストを表すQRコードが表示されます。

このようなもの😍。

Generated QR Code of alligator.io

これで、アプリを本番環境で使用できるようになりました。 🥳🔥

getdocs

13036