Jasprが凄い話

Flutter Tokyo #5

Transcript

1. Flutter Tokyo #5.2 2025/03/01 aq (Hayami Shuhei) +BTQS͕ੌ͍࿩
2. https://jaspr.site/ Jaspr
3. IUUQTHJUIVCDPNEBSUMBOHTJUFXXXQVMM IUUQTYDPNTDIVMUFL@EFWTUBUVT EBSUEFWͰ΋࠾༻͞Εͨ
   13ग़ͨ͠,JMJBOࢯ͕࡞ऀ
4. Jasprͷલʹ…ݱࡏͷFlutterWeb • Wasmͷ2DඳըΤϯδϯͰ͋Δ CanvasKit ·ͨ͸ SKWasm + ΞϓϦ(Dart)ΛWasmίϯύΠϧ͔jsϏϧυ • ϏϧυʹΑͬͯ͸΄΅WasmͷΈͰඳըͰ͖ΔͷͰઌਐత • ΞϓϦͱ΄ͱΜͲมΘΒͳ͍ը໘ΛWebͰ࠶ݱ
5. Jasprͷલʹ…ݱࡏͷFlutterWeb • CanvasKit΋SKWasm΋ѹॖ࣌Ͱ1.5MBʙ2MBఔ౓͋Δ • ϒϥ΢βʔͱ͸ҟͳΔಠࣗඳըΛ͢ΔͷͰɺεϚϗͳͲ௿ੑೳ ͷ؀ڥͩͱॳճඳըʹ͕͔͔࣌ؒΔ • ಡΈࠐΈ+ඳըͷ஗͔͞ΒɺSEOධՁ͕Ͳ͏ؤுͬͯ΋࠷௿ʹ ۙ͘ͳͬͯ͠·͏ • ͪΐͬͱ·ͩ࣌୅͕௥͍͍ͭͯͳ͍ײ
6. Jaspr • FlutterΛ࢖ΘͣʹDart͔ΒWebϖʔδΛੜ੒͢Δύοέʔδ • Flutter ͕ Everything is a Widget ͳͷʹର͠ɺ Jaspr ͸ Everything is a Component • main͔ΒrunAppΛ࣮ߦɺStatelessComponent·ͨ͸ StatefulComponentͷbuildϝιου಺ʹهड़͍ͯ͘͠
7. JasprͰΧ΢ϯλʔΞϓϦΛ࡞ͬͯΈΔ dart pub global activate jaspr_cli ࣮ߦ͢Δͱ৭ʑ߲໨͕ग़ͯ͘Δ͚Ͳ
   TUBUJD
   CVJME
   ΛબΜͰ ͓͚͹ޙ͸ͲΕͰ΋0,
   ॳظͰ؆୯ͳΧ΢ϯλʔΞϓϦ͕࡞ΒΕΔ΋ͷͷɺ΋ͬͱ γϯϓϧʹͯ͠ΈΔ jaspr create my_website
8. JasprͰΧ΢ϯλʔΞϓϦΛ࡞ͬͯΈΔ import 'package:jaspr/browser.dart'; import 'package:my_website/counter.dart'; void main() { runApp(Counter()); } XFCNBJOEBSU
9. import 'package:jaspr/jaspr.dart'; class Counter extends StatefulComponent { const Counter({super.key}); @override State<Counter> createState() => CounterState(); } class CounterState extends State<Counter> { int count = 0; @override Iterable<Component> 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
10. JasprͰΧ΢ϯλʔΞϓϦ jaspr serve ϩʔΧϧͰ֬ೝ༻ʹMJCNBJOEBSU΋ඞཁʢࠓճ͸ׂѪʣ ϩʔΧϧͰ֬ೝ͢Δʹ͸ɿ jaspr build αʔόʔΞοϓϩʔυ༻ʹϏϧυ͢Δʹ͸ɿ
11. SEOʹڧ͍ • HTMLλά΍ςΩετΛؚΊͨ੩తϑΝΠϧͱͯ͠ੜ੒͞ΕΔ ͷͰɺී௨ͷWebαΠτͱͯ͠ೝࣝ͞ΕΔ • CSSʹΑΔҰׅ੔ܗ΋ग़དྷΔʢTailwind΋࢖͑Δʣ • αʔόʔαΠυϨϯμϦϯάΛ࢖͑͹ಈతίϯςϯπΛαʔ όʔଆͰ੩తϑΝΠϧͱͯ͠ੜ੒͢ΔͷͰߋʹૣ͘Ͱ͖Δ
12. Flutterͱͷޓ׵ੑ • Riverpod͸jaspr_riverpodΛ࢖͑͹OK →ConsumerWidget౳͕ແ͘ɺcontext.watch͚ͩͰมߋ͕൓ өͰ͖Δ • InheritedWidget୅ΘΓͷInheritedComponent΋ͪΌΜͱ͋Δ
13. 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తʹ΋໰୊ͳ͠
14. ·ͱΊ • FlutterWeb͸ϦονͳίϯςϯπɺJaspr͸දࣔ଎౓ͱSEOॏࢹ ͷܰྔͳίϯςϯπͱ͍ͬͨ࢖͍෼͚͕ྑͦ͞͏ • Flutter༻ʹॻ͍ͨίʔυΛJapsrͰϏϧυ͢ΔͨΊͷઃܭ͸৭ʑ ೰·͍͠🤔 ࠓޙٞ࿦͕ͳ͞ΕΔͱخ͍͠Ͱ͢… • ݸਓతʹ͸BLoCύλʔϯͰਐΊ͍ͯ͘༧ఆͰ͢
15. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ X: @aqhayami Zenn: @hyshu