svelte

第一回 Svelteチュートリアル解説 Introduction編

皆さんこんにちは!本日からSvelteチュートリアルの解説をしていきます

この記事はこんな人におすすめ

  • HTML, CSS, JavaScriptを少しでも触ったことがある人
  • Svelteをこれから始める人

またこの記事を読むことで、Svelteの書き方や基礎知識を得ることができます

はじめに

Svelteチュートリアル(https://svelte.jp/tutorial/basics)は環境構築不要で、実際に書きながら学習することができます

初心者さんが最初につまずく環境構築が不要なことはありがたいですね

もしSvelteの環境構築をしたいよって方はこちらの記事を見てみてください。5分ほどで完了します↓

【超簡単!】Svelteの環境構築 環境構築っていうとすごく難しそうなイメージがありませんか? でも安心してください!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>

HTML tags: HTMLタグの文字列をレンダリングする

<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について少しでも理解が深まったのなら嬉しいです

「ここが分かりにくかった」や「もっとこうした方が見やすい」など意見がありましたら遠慮なくおっしゃっていただけると嬉しいです

以上 バイバイ:)

ABOUT ME
りゅうちゃんこ
社会人1年目のりゅうちゃんこです! □趣味 ・プログラミング ・カラオケ ・読書 ・温泉