## 2023年にDartでWebサイトを作る3つの方法
`---`
#### Kurogoma4D
---
<img src="https://blogassets.krgm4d.dev/icon.webp" width=120 style="border-radius: 50%" alt="icon" /> **Kurogoma4D** (Suzuki Takafumi)
株式会社Sun Asterisk
Native-app Engineer
X: @Krgm4D
---
## Goal:
**Webサイトを構築する際の
Dartの可用性を知ること**
`---`
イマドキはDartでWeb!という話ではない
---
## Method 1: `dart create` command
----
Getting Startedページに載っている
![image](https://hackmd.io/_uploads/B1ph9iaE6.png)
https://dart.dev/tutorials/web/get-started
----
![image](https://hackmd.io/_uploads/Byjk2oaEp.png =600x)
こんな感じのプロジェクトが生成される
----
`webdev` packageで開発サーバーを建てる
https://pub.dev/packages/webdev
![image](https://hackmd.io/_uploads/ByELnsaNp.png)
----
Hello World!
![image](https://hackmd.io/_uploads/H1Js3spNT.png)
----
メリット
- dart:html ライブラリのおかげで型付きでDOM elementなどを扱える
----
デメリット
- バンドルサイズが大きい
- webdevのサーバーはdartファイル以外の変更に反応しない
---
## Method 2: Jaspr
----
![image](https://hackmd.io/_uploads/H1933-erT.png)
https://pub.dev/packages/jaspr
----
Flutterっぽくコンポーネントを組み合わせて
Webサイトを構築できる
```dart=
import 'package:jaspr/jaspr.dart';
void main() {
runApp(DomComponent(
tag: 'h1',
child: Text('Hello World!'),
));
}
```
----
```dart=
Document(
styles: [
StyleRule(
selector:
const Selector.list([Selector.tag('html'), Selector.tag('body')]),
styles: const Styles.text(
fontFamily:
FontFamily.list([FontFamily('Roboto'), FontFamilies.sansSerif]),
),
),
],
```
```html
<style>
html, body {
font-family: "Roboto", sans-serif;
}
```
----
メリット
- ほとんどDartで書ける
- SSR/SSGに対応している
- パフォーマンスをある程度最適化できる
----
デメリット
- SSRだけにするとhot-reloadが効かない?
- dev serverの構成がwebdevと同じ感じ
- 内部のpackageの制約?
- これからの開発次第で改善できる
---
Method 3: build_runner
(おまけ)
----
build_runner はDart製の自動生成ツール
https://pub.dev/packages/build_runner
コード自動生成+簡易サーバーを使えるので、
それを利用してSSGを作ってみる
----
作ってみた
![image](https://hackmd.io/_uploads/rkifT2xra.png =720x)
<a style="font-size: 24px">https://github.com/Kurogoma4D/markdown_blog_example</a>
----
`$ dart pub add dev:build_runner`
`$ dart run build_runner serve`
![image](https://hackmd.io/_uploads/SkWcTheST.png)
----
![image](https://hackmd.io/_uploads/SJmAahgSp.png)
----
webdevなどの中身も大枠はコレ
(なのでおまけ)
おまけなのでメリデメはあまり考えてない
(けど楽しいのでOK)
---
Wrapup
- Dart公式のWebサイト構築用のコマンドとツールがまだ生きている
- ライブラリとしてはJasprが今のところ優秀
- 自前でツールやジェネレータから作る選択肢もある
{"title":"GDG DevFest 2023 LT","slideOptions":"{\"transition\":\"slide\"}","description":"``","contributors":"[{\"id\":\"95aaa46f-9d30-4df6-acf6-9a605e051096\",\"add\":5043,\"del\":2502}]"}