このチュートリアルでは、 ifブロックをSvelte
フレームワークで使用して、Svelteマークアップコードにフロー制御ロジックを追加する方法を説明します。
Svelteのブロックは{#block}...{/block}
構文を使用し始めるため、ブロックが{#if}...{/if}
構文を使用する場合。 また、ご覧のとおり、else
ブロックやelseif
ブロックを追加することもできます。
渡されたlightsOn
プロップがtrueと評価された場合にのみ、いくつかのマークアップを表示する最も単純な例から始めましょう。
<script>
export let lightsOn;
</script>
{#if lightsOn}
<p>I can see clearly now!</p>
{/if}
{:else}
構文を使用して、else
ブロックを追加することもできます。
<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
ブロックをいくつでも追加できます。 例を少し変更してみましょう。
<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
を開きます。
次のようになります。
ファイル構造は次のようになります。
qr-code-generator
|- node_modules
|- index.js
|- public
|- src
|- App.svelte
|- main.js
App.svelte
を開きます。 これは、コードを記述するメインファイルです。 すべてのコンテンツを削除することから始めます。
プロジェクトの構築を開始します
HTMLとCSSの部分
まず、HTMLマークアップ部分から始めて、QRコードを生成するために入力したテキストを送信するための小さなフォームを作成しましょう。
<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を書き込むこともできます。
.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;
}
上記のコードを記述した後、ページは次のようになります。
スクリプティングパート
同じApp.svelte
ファイルで、script
タグを使用してJavaScript部分を書き込むこともできます。
QR server API
を変数で初期化し、script
タグ内で上記で使用した変数も初期化します。 dataSubmit()
関数もそこで定義する必要があります。
<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コードのロジックの記述を開始しましょう。
<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
ブロック部分を追加する必要があります。
<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>
次に、もう少しスタイリングを追加します:🤓
img {
margin-top: 100px;
margin-bottom: 30px;
}
a {
font-weight: 700px;
font-size: 30px;
color: black;
}
入力ボックスにテキストを入力して[送信]をクリックすると、そのテキストを表すQRコードが表示されます。
このようなもの😍。
これで、アプリを本番環境で使用できるようになりました。 🥳🔥