ラッコWeb 
Svelteの基本的な使い方をまとめました！
みなさん、こんにちは。どんぶラッコです。
前回は Svelteのご紹介とインストール手順についてご紹介しました。
今回は実際にSvelteを触ってみながら、Svelteの基本的な使い方を学習していきましょう！
まだ Svelte のプロジェクトを作っていない方は、①概要・インストールの記事からプロジェクトを作成の後読み進めてください。
Svelteの基本文法
変数宣言・呼び出し
では、早速 src/App.svelte の中身を書き換えてみましょう。
<script>
let val = "hello!"
</script>
<main>
<p>{val}</p>
</main>結果を表示すると、「hello!」という文字が画面に表示されるはずです。
変数を宣言するときは、通常のJavaScriptと同様、 let を使えばOKです。
HTMLで変数を呼び出したいときは、 { 変数名 } の形式で呼び出します。
今回は pタグの中で {val} と記述して val変数の中身を取得しているので、画面に hello! が表示されているんですね。
また、HTMLの属性に変数を付与することもできます。
App.svelte の中身を以下のように書き換えてみてください。
<script>
let src = 'https://placehold.jp/150x150.png'
</script>
<main>
<img src={src} alt="">
<!-- 変数名と属性名が同じならこれでもOK -->
<img {src} alt="">
</main>
↑の画像が表示されていれば成功です。
属性に変数を指定するときは 属性名={変数名} で指定をします。また、属性名と変数名が同じ名前だった場合は {変数名} だけ記述すれば 属性名={変数名} と同じ意味になります。
余談ですが、 <img {src}> のように、 alt 属性の記述を外して npm run dev を実行しているターミナル画面を確認してみてください。 すると、alt 属性をつけるように警告が出ています。
このように、SvelteはSEO上必要と思われる処理についてもコンパイル時に警告を出してくれます。
コンポーネントの読み込み
では次に、コンポーネントの読み込みをします。
コンポーネントが何か？ということについてはここでは触れません。ご存知ない方は、”ある要素を表すHTML, CSS, JavaScriptなどを1つにまとめたもの” とここではざっくり捉えておいてください。
ということで、子コンポーネントを作成して App.svelte で読み込ませてみましょう。
コンポーネントを読み込む / 読み込まれる の関係を示すのに “親コンポーネント” “子コンポーネント” という言葉が使われたりします。子コンポーネントの内容を親コンポーネントで読み込む…という関係性だね！
/src ディレクトリ内に Child.svelte を作成し、下記を記入して保存します。
<p>Child Component</p>そして、次に親コンポーネントである App.svelte で Child.svelte の中身を表示してみましょう。 App.svelteを以下のように書き換えます。
<script>
import Child from './Child.svelte'
</script>
<main>
<p>Parent Component</p>
<Child />
</main>Parent Component
Child Component
という文字が画面に表示されれば成功です。
コンポーネントの読み込みを行う場合は、モジュールの読み込みと同様、 import を使って svelteファイルを読み込めばOKです。今回は import Child ... のように、 Child という名前で子コンポーネントを読み込んでいますね。
コンポーネントを使う場合は <Child /> のように、importした名前でHTMLタグのように記述すれば中身を表示してくれます。ここら辺は Vue.js, React で馴染みがある書き方ですね。
ついでに、CSSがscopoedであることも確認しておきましょう。 App.svelte に style を追記してみましょう。
<script>
import Child from './Child.svelte'
</script>
<main>
<p>Parent Component</p>
<Child />
</main>
<!-- 以下を追記 -->
<style>
p {
color: red
}
</style>書き終わったら画面を更新してみてください。
Parent Component の文字は赤くなりますが、 Child Component の文字は黒いままです。
普通に考えたら CSSで p タグに関する指示を書いているのですから、 <p>Child Component</p> も赤くなりそうですよね。
実は、SvelteではデフォルトでCSSはScopedされています。つまり、記述されたCSSは記述されたファイル内でしか有効ではないということです。
Child Component は Child.svelte に記述されているため、CSSの適用外になっていたわけですね。
HTMLの直接読み込み
先ほど、変数を読み込む場合は {変数名} と記述しますと言いましたが、この場合、変数にHTML要素を挿入しても、HTMLタグがテキストとしてそのまま表示されてしまいます。
変数に格納されたHTMLファイルをレンダリングしたい場合は、 @html プレフィックスを使いましょう。
公式から例を引用します。
<script>
let string = `this string contains some <strong>HTML!!!</strong>`;
</script>
<p>{@html string}</p>注意点としては、DOM挿入前にサニタイズ処理はされていません。ユーザから入力されたものをこの仕組みを使ってHTML表示してしまうと、悪意あるコードも表示されてしまう危険性が大なので、外部からの入力が絡む場合は必ずサニタイズ処理を実施しましょう！
この記事のまとめ
基本的な変数の宣言方法と呼び出し方とコンポーネントのインポート方法についてまとめました。次の記事では クリック時の処理やデータ追加処理など、ロジックの記述方法についてご紹介していきます！
次の記事↓↓
