GDG DevFest 2023 LT - HackMD

2023年にDartでWebサイトを作る3つの方法

---

Kurogoma4D

Kurogoma4D (Suzuki Takafumi)
株式会社Sun Asterisk
Native-app Engineer

X: @Krgm4D

Goal:

Webサイトを構築する際の
Dartの可用性を知ること

---

イマドキはDartでWeb！という話ではない

Method 1: `dart create` command

Getting Startedページに載っている

https://dart.dev/tutorials/web/get-started

こんな感じのプロジェクトが生成される

webdev packageで開発サーバーを建てる
https://pub.dev/packages/webdev

Hello World!

メリット

dart:html ライブラリのおかげで型付きでDOM elementなどを扱える

デメリット

バンドルサイズが大きい
webdevのサーバーはdartファイル以外の変更に反応しない

Method 2: Jaspr

https://pub.dev/packages/jaspr

Flutterっぽくコンポーネントを組み合わせて
Webサイトを構築できる

 import 'package:jaspr/jaspr.dart';
 
void main() {
  runApp(DomComponent(
    tag: 'h1',
    child: Text('Hello World!'),
  ));
}

     Document(
      styles: [
        StyleRule(
          selector:
              const Selector.list([Selector.tag('html'), Selector.tag('body')]),
          styles: const Styles.text(
            fontFamily:
                FontFamily.list([FontFamily('Roboto'), FontFamilies.sansSerif]),
          ),
        ),
      ],

    <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を作ってみる

作ってみた

https://github.com/Kurogoma4D/markdown_blog_example

$ dart pub add dev:build_runner
$ dart run build_runner serve

webdevなどの中身も大枠はコレ
（なのでおまけ）

おまけなのでメリデメはあまり考えてない
（けど楽しいのでOK）

Wrapup

Dart公式のWebサイト構築用のコマンドとツールがまだ生きている
ライブラリとしてはJasprが今のところ優秀
自前でツールやジェネレータから作る選択肢もある

2023年にDartでWebサイトを作る3つの方法 --- Kurogoma4D

{"title":"GDG DevFest 2023 LT","slideOptions":"{\"transition\":\"slide\"}","description":"``","contributors":"[{\"id\":\"95aaa46f-9d30-4df6-acf6-9a605e051096\",\"add\":5043,\"del\":2502}]"}

changed a year ago 562 views