どれにしよう

Vueは2も3も使ってみた事がある。
angularはangularDartで使ったことがある。
reactは使ったことない。

stackoverflowの比較

reactなのか。しかしながら、おじさんはメジャーな奴は好きではないのである。
dartのBLOCパターンを使ってみたいので結果を無視してflutterにしてみる。

２位だし。（多分Webだけじゃないけど）

SPAのSEO対策について

昔SPAはSEO的に不利と見た覚えがある。
https://www.codit.work/notes/mhpxxkeqv4qhzfjecmrn/
もう結構平気みたい。

構築手順

公式サイトに沿って進めるだけ。
https://flutter.dev/docs/get-started/web

cd ~/development
curl -LO https://storage.googleapis.com/flutter_infra/releases/stable/macos/flutter_macos_2.0.4-stable.zip
unzip ~/development/flutter_macos_2.0.4-stable.zip 
echo "export PATH=\$PATH:$(pwd)/flutter/bin" >> ~/.zshrc
source ~/.zshrc 
rm ~/development/flutter_macos_2.0.4-stable.zip 

flutter doctor で依存関係のステータス確認

Running "flutter pub get" in flutter_tools...                       3.3s
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.0.4, on macOS 11.3 20E5217a darwin-x64, locale ja-JP)
[✗] Android toolchain - develop for Android devices
    ✗ Unable to locate Android SDK.
      Install Android Studio from: https://developer.android.com/studio/index.html
      On first launch it will assist you in installing the Android SDK components.
      (or visit https://flutter.dev/docs/get-started/install/macos#android-setup for detailed instructions).
      If the Android SDK has been installed to a custom location, please use
      `flutter config --android-sdk` to update to that location.

[✗] Xcode - develop for iOS and macOS
    ✗ Xcode installation is incomplete; a full installation is necessary for iOS development.
      Download at: https://developer.apple.com/xcode/download/
      Or install Xcode via the App Store.
      Once installed, run:
        sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
        sudo xcodebuild -runFirstLaunch
    ✗ CocoaPods not installed.
        CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that responds to your plugin usage on the Dart
        side.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/platform-plugins
      To install see https://guides.cocoapods.org/using/getting-started.html#installation for instructions.
[✓] Chrome - develop for the web
[!] Android Studio (not installed)
[✓] VS Code (version 1.54.3)
[✓] Connected device (1 available)

! Doctor found issues in 3 categories.

[✓] Chrome - develop for the webがオッケーならよさそう。

flutter devices でデバイスが有効になっていることを確認

1 connected device:

Chrome (web) • chrome • web-javascript • Google Chrome 89.0.4389.114

アプリ作成

flutter create clientapp

起動確認

cd clientapp
flutter run -d chrome

コードがリアルタイムに反映されるので開発も楽そう。