## 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ページに載っている  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サイトを構築できる ```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を作ってみる ---- 作ってみた  <a style="font-size: 24px">https://github.com/Kurogoma4D/markdown_blog_example</a> ---- `$ dart pub add dev:build_runner` `$ dart run build_runner serve`  ----  ---- webdevなどの中身も大枠はコレ （なのでおまけ） おまけなのでメリデメはあまり考えてない （けど楽しいのでOK） --- Wrapup - Dart公式のWebサイト構築用のコマンドとツールがまだ生きている - ライブラリとしてはJasprが今のところ優秀 - 自前でツールやジェネレータから作る選択肢もある