Dartでウェブ開発 (やりたい)

https://niigata-5min-tech.connpass.com/event/351031/

Transcript

1. Dartでウェブ開発 N5T #18 (やりたい)
2. WHOAMI asuka • 株式会社モニクル/SWE ◦ 技術書典17: Monicle Techbook vol.1 • Wasm関連の同人誌・商業誌を執筆 ◦ ご注文はWASIですか?? ◦ Wasm Cookbook vol.2 ◦ 実践入門WebAssembly ◦ WebAssembly System Interface入門 • 技術書典18 (NEXT) ◦ Wasm Cookbook vol.3予定 2 書いた本など 東京で新宿御苑.dev という コミュニティを作ったりしてます
3. Dartでウェブ開発してますか? 3 🙋🙋🙋
4. Dartとは 4 Flutter専用言語 Dart言語はJavaScript言語にある解決できない言語上の問題点を解決し 、なおか つ、より優れたパフォーマンスを発揮し 、大規模なプロジェクト用途にも耐え得る特徴 を備え、セキュリティ面でもより優れた言語 として、設計された。 https://ja.wikipedia.org/wiki/Dart 👉Googleが設計した最強のウェブ開発言語のこと
5. Dartとは https://dartpad.dev/?sample=hello-world 5 void main() { for (var i = 0; i < 10; i++) { print('hello ${i + 1}'); } } ✅ 実行時に保証される型がある ✅ JavaとJavaScriptを足して割ったような構文 ✅ JSやWasmに向けてビルドできる
6. Dartとは 6 void main() { print(between1and3([])); // null print(between1and3([1, 200, 3])); // 200 print(between1and3([1, 3])); // null } int? between1and3(List<int> nums) { return switch (nums) { [1, final n, 3] => n, _ => null, }; } void main() { final calc = Calc(1) ..b = 2 ..c = 10; print(calc.add); // 13 } class Calc { final int a; int b = 0; int c = 0; Calc(this.a); int get add => a + b + c; } 前置型定義 パターンマッチ class記法 インスタンス初期化
7. Dartとは 7 構文の印象 自由度が低い 自由度が高い レガシー モダン JavaScript Go Rust C TypeScript Dart
8. Dartとは 8 Flutter専用言語 👉書きやすいけど，言語単体だと覇権を取れない感じがDart GoもDartも大規模開発を目指した結果，全く異なる言語設計になって いるのが面白い
9. Dartでウェブ開発 9
10. Dartでウェブ開発 • Flutter for Web ◦ Dartよりも有名になってしまった Flutterのウェブ版 ◦ 正直これでウェブサイトを作るのは厳しい • packages:web ◦ dart:htmlの代替として公式が出しているパッケージ ▪ dart:htmlはWasmをサポートしていない ◦ Wasmからも利用できるパッケージとして設計されている ◦ document.querySelector(‘div’);などのWeb APIが一式ある • Jaspr ◦ DartのWebフルスタックフレームワーク ◦ Flutterと同様のAPIを提供しつつ，HTML/CSSを出力する 10
11. Web APIの関数が一通り定義されている packages:web 11 import 'package:web/web.dart'; import './src/config.dart'; final app = HTMLElement.main() ..style.textAlign = 'center' ..style.margin = '1vh' ..append( HTMLHeadingElement.h1() ..text = 'Dart Web Example' ..style.color = 'royalblue', ) ..append( HTMLSpanElement() ..text = 'See the source code on ' ..append( HTMLAnchorElement() ..href = repositoryUrl ..target = '_blank' ..text = 'GitHub Repository', ), ); https://www.askua.dev/example-dart-web/
12. Dartにはオブジェクトの初期化を行うための構文がある packages:web 12 import 'package:web/web.dart'; import './src/config.dart'; final app = HTMLElement.main() ..style.textAlign = 'center' ..style.margin = '1vh' ..append( HTMLHeadingElement.h1() ..text = 'Dart Web Example' ..style.color = 'royalblue', ) ..append( HTMLSpanElement() ..text = 'See the source code on ' ..append( HTMLAnchorElement() ..href = repositoryUrl ..target = '_blank' ..text = 'GitHub Repository', ), ); export const app = document.createElement("main"); app.style.textAlign = "center"; app.style.margin = "1vh"; { const h1 = document.createElement("h1"); app.append(h1); h1.textContent = "JS Web Example"; h1.style.color = "royalblue"; } { const span = document.createElement("span"); app.append(span); span.textContent = "See the source code on "; { const a = document.createElement("a"); span.append(a); a.href = repositoryUrl; a.target = "_blank"; a.textContent = "GitHub Repository"; } } JSXのようなテンプレートエンジンを用意しな くてもそこそこ定義を書きやすい JSでDOM操作面倒
13. Flutterと同様のAPIを提供 → Flutter自体がReact (Native)を参考にしている → ReactのようなAPIを提供 良さそうな印象 Jaspr 13 JSでウェブアプリを作る → ReactやVueといったキラーフレームワーク Dartでウェブアプリを作る → キラーフレームワークがない
14. とりあえずpackages:webで始めてみよう 14
15. とりあえずpackages:webで始めてみよう 15 MDNと(packages:webの) API Referenceがあれば実装を始められる (シンプル) ルーティングやレンダリングなどの制御をやろうとするとReactのような仕組みが欲しくな る未来は見える → 現状で特定のフレームワークを採用するはリスクに感じる → 作ってみて必要な機能を整理するでも現状は良さそう → Dartのキラーフレームワークの登場が待たれる 数ヶ月後に進展があると思うので そのときにまた話せたらと思います
16. 数ヶ月後に進展があると思うので， そのときにまた話せたらと思います fin.