Svelte (初心者用)ひまわりの生育日記アプリをつくる レイアウト作成編

前回環境構築を行いましたが、今回からは簡単なWebアプリケーションをSvelteで作成していきたいと思います。

作るのはひまわりの生育を記録するアプリです。

機能

まずは、以下の最低限の機能を実装していきます。

  • 日付、天気、草丈、葉の枚数を登録できる
  • 上記を変更できる
  • 上記を削除できる

大体のレイアウトの作成

今回の記事ではレイアウトを作成していきます。

不要なコードの削除

まずは、開発環境構築後に自動で作成されているコードを削除していきます。

global.css の中身を消す

public/global.css の中身を削除します。

index.html を編集する

public/index.html を以下のように変更します。

titleタグを変更しただけです。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset='utf-8'>
	<meta name='viewport' content='width=device-width,initial-scale=1'>

	<title>ひまわり生育日記</title>

	<link rel='icon' type='image/png' href='/favicon.png'>
	<link rel='stylesheet' href='/global.css'>
	<link rel='stylesheet' href='/build/bundle.css'>

	<script defer src='/build/bundle.js'></script>
</head>

<body>
</body>
</html>

App.svelte を変更してみる

いよいよSvelteファイルを変更していきます。

といっても特に難しいことはなく、まずは以下のようにシンプルにしてみます。

<script>
</script>

<main>
	<h1>ひまわり生育日記</h1>
</main>

<style>
</style>

画面はこのような感じになります。

SvelteはVueと似ていて、ファイルの中が三つに分かれています。

<script> にはJavaScriptを書きます。

その下にあるのが HTML の部分です。

そして、<style> が CSS　です。

通常のHTML/CSS/JavaScriptとほとんど変わりがないのでReactよりもとっつきやすいと思います。

ヘッダーをつけてみる

それではヘッダーをつけてみましょう。

さきほどの「ひまわり生育日記」をheaderタグにもっていっただけです。

<script>
</script>

<main>
	<header>
		<h1>ひまわり生育日記</h1>
	</header>
	<h2>中身</h2>
</main>

<style>
</style>

しかし、このまま続けていくと、単にApp.svelteにコードが追加されていくだけで、どんどん肥大化していきます。

ヘッダー部分を別のファイルに分けて、コンポーネント化してみます。

以下のようにヘッダーの部分だけを Header.svelte ファイルに分けます。

<script>
</script>

<header>
	<h1>ひまわり生育日記</h1>
</header>

<style>
</style>

App.svelte では src/Header.svelte を import して使うだけです。

<script>
	import Header from './Header.svelte'
</script>

<main>
	<Header />
	<h2>中身</h2>
</main>

<style>
</style>

ヘッダーにスタイルをつけてみる

次にヘッダーにスタイルを適用します。

通常のCSSと同様にstyleタグ内にCSSを記述します。以下のようにしてみました。

<script>
</script>

<header>
	<h1>ひまわり生育日記</h1>
</header>

<style>
	header {
		color: white;
		background: lightgreen;
		text-align: center;
	}
</style>

ヘッダーに表示する文字列をApp.svelteから渡してみる

今は「ひまわり生育日記」という文字は、Header.svelte 内でベタ書きになっています。

このままでも問題ないですが、親コンポーネント(Header.svelte を import して使っている)である App.svelte から「ひまわり生育日記」という文字を渡してみます。

<script>
	import Header from './Header.svelte'

	const title = 'ひまわり生育日記だよ'
</script>

<main>
	<Header title={title} />
	<h2>中身</h2>
</main>

<style>
</style>

<script>
	export let title
</script>

<header>
	<h1>{title}</h1>
</header>

<style>
	header {
		color: white;
		background: lightgreen;
		text-align: center;
	}
</style>

App.svelte では、渡したい文字列を title 変数に割り当てます。

そして、<Header title={title} /> のようにして Header コンポーネントに渡します。

Header.svelte 側では受け取りたい値を export let title のように宣言します。

そして、<h1>{title}</h1> のようにして title に割り当てられている文字列を表示します。

今回は以上です。次回はいよいよ入力処理周りを実装します。

svelte

Posted by たみぼうず