Tweet
Tweet

Slide 1

Slide 1 text

Flutter Tokyo #5 2025/03/01 aq (Hayami Shuhei) +BTQS͕ੌ͍࿩

Slide 2

Slide 2 text

https://jaspr.site/ Jaspr

Slide 3

Slide 3 text

IUUQTHJUIVCDPNEBSUMBOHTJUFXXXQVMM IUUQTYDPNTDIVMUFL@EFWTUBUVT EBSUEFWͰ΋࠾༻͞Εͨ 13ग़ͨ͠,JMJBOࢯ͕࡞ऀ

Slide 4

Slide 4 text

Jasprͷલʹ…ݱࡏͷFlutterWeb • Wasmͷ2DඳըΤϯδϯͰ͋Δ CanvasKit ·ͨ͸ SKWasm + ΞϓϦ(Dart)ΛWasmίϯύΠϧ͔jsϏϧυ • ϏϧυʹΑͬͯ͸΄΅WasmͷΈͰඳըͰ͖ΔͷͰઌਐత • ΞϓϦͱ΄ͱΜͲมΘΒͳ͍ը໘ΛWebͰ࠶ݱ

Slide 5

Slide 5 text

Jasprͷલʹ…ݱࡏͷFlutterWeb • CanvasKit΋SKWasm΋ѹॖ࣌Ͱ1.5MBʙ2MBఔ౓͋Δ • ϒϥ΢βʔͱ͸ҟͳΔಠࣗඳըΛ͢ΔͷͰɺεϚϗͳͲ௿ੑೳ ͷ؀ڥͩͱॳճඳըʹ͕͔͔࣌ؒΔ • ಡΈࠐΈ+ඳըͷ஗͔͞ΒɺSEOධՁ͕Ͳ͏ؤுͬͯ΋࠷௿ʹ ۙ͘ͳͬͯ͠·͏ • ͪΐͬͱ·ͩ࣌୅͕௥͍͍ͭͯͳ͍ײ

Slide 6

Slide 6 text

Jaspr • FlutterΛ࢖ΘͣʹDart͔ΒWebϖʔδΛੜ੒͢Δύοέʔδ • Flutter ͕ Everything is a Widget ͳͷʹର͠ɺ Jaspr ͸ Everything is a Component • main͔ΒrunAppΛ࣮ߦɺStatelessComponent·ͨ͸ StatefulComponentͷbuildϝιου಺ʹهड़͍ͯ͘͠

Slide 7

Slide 7 text

JasprͰΧ΢ϯλʔΞϓϦΛ࡞ͬͯΈΔ dart pub global activate jaspr_cli ࣮ߦ͢Δͱ৭ʑ߲໨͕ग़ͯ͘Δ͚ͲTUBUJDCVJMEΛબΜͰ ͓͚͹ޙ͸ͲΕͰ΋0, ॳظͰ؆୯ͳΧ΢ϯλʔΞϓϦ͕࡞ΒΕΔ΋ͷͷɺ΋ͬͱ γϯϓϧʹͯ͠ΈΔ jaspr create my_website

Slide 8

Slide 8 text

JasprͰΧ΢ϯλʔΞϓϦΛ࡞ͬͯΈΔ import 'package:jaspr/browser.dart'; import 'package:my_website/counter.dart'; void main() { runApp(Counter()); } XFCNBJOEBSU

Slide 9

Slide 9 text

import 'package:jaspr/jaspr.dart'; class Counter extends StatefulComponent { const Counter({super.key}); @override State createState() => CounterState(); } class CounterState extends State { int count = 0; @override Iterable build(BuildContext context) sync* { yield div( styles: Styles(textAlign: TextAlign.center, fontSize: Unit.em(5)), [ span([text('$count')]), button( onClick: () => setState(() => count++), [text('+1')], ), ]); } } MJCDPVOUFSEBSU

Slide 10

Slide 10 text

JasprͰΧ΢ϯλʔΞϓϦ jaspr serve ϩʔΧϧͰ֬ೝ༻ʹMJCNBJOEBSU΋ඞཁʢࠓճ͸ׂѪʣ ϩʔΧϧͰ֬ೝ͢Δʹ͸ɿ jaspr build αʔόʔΞοϓϩʔυ༻ʹϏϧυ͢Δʹ͸ɿ

Slide 11

Slide 11 text

SEOʹڧ͍ • HTMLλά΍ςΩετΛؚΊͨ੩తϑΝΠϧͱͯ͠ੜ੒͞ΕΔ ͷͰɺී௨ͷWebαΠτͱͯ͠ೝࣝ͞ΕΔ • CSSʹΑΔҰׅ੔ܗ΋ग़དྷΔʢTailwind΋࢖͑Δʣ • αʔόʔαΠυϨϯμϦϯάΛ࢖͑͹ಈతίϯςϯπΛαʔ όʔଆͰ੩తϑΝΠϧͱͯ͠ੜ੒͢ΔͷͰߋʹૣ͘Ͱ͖Δ

Slide 12

Slide 12 text

Flutterͱͷޓ׵ੑ • Riverpod͸jaspr_riverpodΛ࢖͑͹OK →ConsumerWidget౳͕ແ͘ɺcontext.watch͚ͩͰมߋ͕൓ өͰ͖Δ • InheritedWidget୅ΘΓͷInheritedComponent΋ͪΌΜͱ͋Δ

Slide 13

Slide 13 text

Flutterͱͷޓ׵ੑ • Dartίʔυ͸ `dart compile` Ͱjsʹม׵͞Ε͍ͯΔ (Wasmίϯ ύΠϧ΋Մೳ)ɻͳͷͰFlutterΛ࢖͍ͬͯͳ͍Dartίʔυ͸ͦͷ ··ར༻Մೳ (https://github.com/schultek/jaspr/blob/main/packages/jaspr_cli/lib/src/commands/build_command.dart#L129) • FlutterEmbedViewΛ࢖͑͹FlutterWebΛը໘಺ʹຒΊࠐΉ͜ ͱ΋Մೳɻ஗ԆಡΈࠐΈͳͷͰSEOతʹ΋໰୊ͳ͠

Slide 14

Slide 14 text

·ͱΊ • FlutterWeb͸ϦονͳίϯςϯπɺJaspr͸දࣔ଎౓ͱSEOॏࢹ ͷܰྔͳίϯςϯπͱ͍ͬͨ࢖͍෼͚͕ྑͦ͞͏ • Flutter༻ʹॻ͍ͨίʔυΛJapsrͰϏϧυ͢ΔͨΊͷઃܭ͸৭ʑ ೰·͍͠🤔 ࠓޙٞ࿦͕ͳ͞ΕΔͱخ͍͠Ͱ͢… • ݸਓతʹ͸BLoCύλʔϯͰਐΊ͍ͯ͘༧ఆͰ͢

Slide 15

Slide 15 text

͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ X: @aqhayami Zenn: @hyshu