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 に割り当てられている文字列を表示します。
今回は以上です。次回はいよいよ入力処理周りを実装します。
最近のコメント