Svelteを使ってみる（２）

Svelteを使ってみる（１） - hinosita's diary で、「Svelte」の導入と簡単なコンパイルの行い方をやってみたので、公式ドキュメント的には次はComponet APIの説明ですね。

各APIの概要と説明は Learn Svelte を読んで頂だければよいかと思うのですが、各APIを実際に動作させるとどうなるかを見ていこうかと。

こちらのAPIはコンポーネントのdataオブジェクトの値を追加したり、更新したりするAPIですね。

let component = new HelloWorld({
  target: document.querySelector('main'),
  data: {
    name: '太郎',
    answer: 42
  }
});

このような感じで、dataオブジェクトがあったとします。

component.set({
  answer2: '50'
});

ブラウザの開発モードのコンソールからこのコマンドを打つと、dataオブジェクトが以下のようになります。

data: {
  name: '太郎',
  answer: 42,
  answer2: 50
}

answer2: 50 という値が追加されているのがわかります。取得できるか以下のコマンドで確認できます。 componet.get は後ほど説明します。（値を取得するAPIなんですけど。

data: {
  name: '太郎',
  answer: 42,
  answer2: 50
}

既存のkeyに対して、set APIを呼ぶと値の更新になります。

component.set({
  name: '一郎'
});

console.log('answer 変数の初期値');
  const observer = component.observe('answer', answer => {
    console.log(`the answer is ${answer}`);
});

このコードだと、answer の値が更新される度に、console.logが出力されます。

const listener = component.on('thingHappened', event => {
  console.log(`A thing happened: ${event.thing}`);
});

これだけでは、このイベントは実行されません。次の fire というAPIでイベント発火させます。

component.fire('thingHappened', {
  thing: 'this event was fired'
});

コンポーネントを削除と、削除した際の後処理を行えるAPIです

component.on('teardown', () => {
  alert( 'goodbye!' );
});

こちらのサンプルコードだと、コンポーネントが削除され、ブラウザのアラートが表示されます。

このあたりのAPIのサンプルをgithubにあげておりますので、こちらを見ていただければなんとなくイメージできるかと。私が各APIがどのように動くかを確認するために、サッと書いたコードなので、ほとんどconsoleにしか結果が出ないのですが…