JS 製フレームワーク Svelte + Page.js でルーティングする

最終更新日: 2019-09-11

Page.js とは

ルーティング (Routing) が簡単にできるライブラリ。

ファイル構成

Contorller をファイルに分けた。

public/
  └ index.html
src/
  ├ Controllers/
  │    └ IndexController.js
  ├ Views/
  │    └ Index.svelte
  └ main.js

サンプルコード

public/index.html

<div id="app"></div> を追加。

<!doctype html>
<html>
<head>
	<meta charset='utf8'>
	<meta name='viewport' content='width=device-width'>

	<title>Svelte app</title>

	<link rel='icon' type='image/png' href='/favicon.png'>
	<link rel='stylesheet' href='/css/style.css?v1.0.0'>
	<link rel='stylesheet' href='/css/bundle.css?v1.0.0'>
</head>

<body>
	<div id="app"></div>
	<script src='/js/bundle.js?v1.0.0'></script>
</body>
</html>

src/main.js

import page from 'page'

import IndexController from './Controllers/IndexController.js'

page('/', IndexController.Index)

src/Controllers/IndexController.js

import Index from './../Views/Index.svelte';

const IndexController = {
	Index: (context) => {
		// innerText の中身を毎回空にしないとどんどんコンテンツが下に追加されていく。
		document.getElementById('app').innerText = ''
		const app = new Index({
			target: document.getElementById('app'),
		})
	}
}

export default IndexController;

src/Views/Index.svelte

<script></script>
<style></style>

<h1>Hello Svelte</h1>