皆さんこんにちは！本日からSvelteチュートリアルの解説をしていきます
この記事はこんな人におすすめ
- HTML, CSS, JavaScriptを少しでも触ったことがある人
- Svelteをこれから始める人
またこの記事を読むことで、Svelteの書き方や基礎知識を得ることができます
目次
はじめに
Svelteチュートリアル(https://svelte.jp/tutorial/basics)は環境構築不要で、実際に書きながら学習することができます
初心者さんが最初につまずく環境構築が不要なことはありがたいですね
もしSvelteの環境構築をしたいよって方はこちらの記事を見てみてください。5分ほどで完了します↓
では早速見ていきましょう
Basics: Hello world!を表示する
この項目では「Hello World!」を表示します
コードはたった一行です
<h1>Hello world!</h1>
このようにSvelteは非常にシンプルで簡単に書くことができます
HTMLを書いたことがある方は分かると思いますが、この一行はHTMLのコードです
hはhedding(見出し)の略称で、h1~h6まで種類があり
h1が一番大きい見出しで、数字が小さくなるにつれて見出しが小さくなっています
HTML以外でもCSS, JavaScriptを1つの画面に書くことが可能です
Adding Data: 変数を用いてHello WORLD!を表示する
この項目では変数を用いて「Hello WORLD!」を表示します
<script>
let name = 'world';
</script>
<h1>Hello {name.toUpperCase()}!</h1>
scriptタグで囲むことで、JavaScriptのコードを書くことができます
let name = 'world';この一行は変数 name を宣言して、worldという文字列を代入しています
<h1>Hello {name.toUpperCase()}!</h1>toUpperCase() は文字列を大文字に変換する関数で、world は WORLDへと変換されます
またHTMLにJavaScriptの変数を表示させるには、 {} の中に変数名を入れることで実現できます
toUpperCase のドキュメント↓
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/toUpperCase
Dynamic attributes: gif動画を表示させる
この項目ではgif動画を表示させます
<script>
let src = '/tutorial/image.gif';
let name = 'Rick Astley';
</script>
<img {src} alt="{name} dances.">
gif動画のURLや相対パスを img タグの中に入れることで、gif動画を表示させることができます
gif動画以外にも写真も表示させることが可能です
Styling: CSSでフォントや色を変更する
この項目では、CSSを用いたフォントの色や字体を変更する
<p>This is a paragraph.</p>
<style>
p {
color: purple;
font-family: 'Comic Sans MS', cursive;
font-size: 2em;
}
</style>
style タグの中にCSSを書くことができる
ここでは色を紫、書体をComic Sans MS’、フォントサイズを2emに設定しています
とても可愛らしいフォントですね
Nested components: 別コンポーネントを表示する
<script>
import Nested from './Nested.svelte';
</script>
<p>This is a paragraph.</p>
<Nested/>
<style>
p {
color: purple;
font-family: 'Comic Sans MS', cursive;
font-size: 2em;
}
</style><p>This is another paragraph.</p>
Nested.svelteファイルに書かれている文字列を、App.svelteに表示させる
別のコンポーネントを呼び出すには、呼び出したいコンポーネントをインポートし、コンポーネント名をタグ名とすることで表示できます
「コンポーネント」というのは、HTMLのコードをSvelteファイルに記述することで再利用を可能にする機能の事です
これを使用することにより重複コードを減らし、可読性を高めることができます
もっとかみ砕いて説明すると
「中華料理屋でチャーハンを頼むこと≒コンポーネントを呼び出すこと」です
どういうことかというと、お店でチャーハンを頼むとチャーハンを提供してくれます
レシピを知らなくても、「チャーハンください」というだけで目の前にチャーハンがやってきます
一方コンポーネントも </Nested> を呼び出すだけでNested.svelteに書かれた文字列や機能を実行することができます
Nestedコンポーネントの機能を知らなくてもです
よって「中華料理屋でチャーハンを頼むこと≒コンポーネントを呼び出すこと」の公式が成り立ちます
またコンポーネントの名前は他のHTMLタグと区別するため、必ず最初の文字が大文字である必要があります
- pタグの場合：<p>
- imgタグの場合：<img>
- Nestedの場合：<Nested>
<script>
let string = `this string contains some <strong>HTML!!!</strong>`;
</script>
<p>{@html string}</p>
通常ならば「this string contains some <strong>HTML!!!</strong>」と出力されます
しかしHTMLタグとして出力したい場合は、@html修飾子を付けることで反映されます
まとめ
いかがでしたか？
Svelteについて少しでも理解が深まったのなら嬉しいです
「ここが分かりにくかった」や「もっとこうした方が見やすい」など意見がありましたら遠慮なくおっしゃっていただけると嬉しいです
以上 バイバイ:)
