github.com

mise とは

mise を使用した開発ツールの管理についておさらいしてみた | DevelopersIO

• 開発ツールの管理や環境変数、makeのようなタスク管理ができる
  • 特にnodenv などのようにプロジェクトごとにバージョンを管理できるのが便利
• Flutter も mise で管理できる
• renovate も問題なく動く

FVM 辞める理由

• 今まで node や ruby version は anyenv で管理していたが mise に寄せた
  • 各種 env を入れることなく mise i で全て解決できて便利
  • mise を使うと cocoapods などのバージョンも .mise.toml で固定できる
• Flutter も .mise.toml で指定できるので、もう全て mise に寄せるのが楽となった
• FVM はバージョンを上げた後 vscode がうまく認識してくれなくて再起動が必要だったりハマることが多々あった
  • コマンドも頭に fvm ってつけるのが面倒だが mise だと普通にコマンドを実行できる

移行手順

• .fvmrc を削除
• $ mise use flutter@x.x.x
  • .mise.toml が作られる
• .vscode/settings.json の dart.flutterSdkPath を更新
  • 例: "dart.flutterSdkPath": "~/.local/share/mise/installs/flutter/3.35.1-stable"
  • fvm は自動でここを変更してくれたけど、 mise は手動で変更する必要がある

以上!
手元のプロジェクトでは node や cocoapods も使うので .mise.toml は以下になった

[tools]
flutter = "3.35.1"
node = "24.6.0"
ruby = "3.3.8"
cocoapods = "1.16.2"

Github Actions

Github Actions で flutter analyze や flutter test を実行している。その際は mise の action を使える。mise-action を使うだけでいい。CIではflutterしか利用しないので install_args で flutter を指定することで flutter のみの install となる。(node や ruby は install されない)

      - name: Setup mise
        uses: jdx/mise-action@v3
        with:
          install_args: flutter

Renovate

renovate を使っている場合、 mise は renovate に対応しているので簡単に利用できる。 enabledManagers": ["pub", "mise"] に指定することで、.mise.toml に指定したバージョンの更新があれば通知してくれる。

おわり

mise を入れておくだけで簡単に node や ruby もバージョンが整うので体験が良い。

個人開発で複数Project共通で使っている script は ~/.config/mise/tasks に置いたので、複数プロジェクトで script を共有しやすくなった。
手元で使う系のツールも、今まで npm -g とかで入れてたやつも mise で管理するようになった。
今は global の config.toml はこんな感じになっている。

[settings]
idiomatic_version_file_enable_tools = ["ruby", "node"]

[tools]
cocoapods = "latest"
node = "22"
"npm:@anthropic-ai/claude-code" = "latest"
"npm:firebase-tools" = "latest"
uv = "latest"

テスト環境だと「テストテストテスト」とか「あああああああああああああああああああああ」みたいな文字をテストデータに使いがちである。画像も適当にネットで拾ったやつとか、カメラロールにあるやつとか、デスクの上でその場で撮ったりした画像を使いがちである。

でも「テスト環境だから」という理由で雑なデータは登録しない方が良い。理由は以下が挙げられる。

• いかにも開発感が強すぎるデータを登録してしまうと、ベータ版アプリを使っている人が本番と同じ体験をすることができず、使い勝手や改善点をベータ版では気が付けない可能性がある
• テスト環境であっても著作権上問題ない画像を使う必要がある
• 万が一テスト環境本番環境を間違えてデータを登録してしまった時も、本番と差し支えないデータを登録することで一応のリスクヘッジとなる
• 本番環境の話になるが、自分にしか見れないデータと思って適当な情報を登録していたら、不具合で他の人にその情報が公開されてしまうかもしれない
  • 前職で実際にあった

有名な資料として以下があるけど、これは「一見してテストとわかる文字の方が望ましい」とあるが、私はそれよりも本番に近い文字が望ましいと思う。(もちろんテストとわかるメリットもあるしサービスの特性にもよりそう)

www.infiniteloop.co.jp

少なくとも自分たちでドッグフーディングが可能なサービスに関しては本番と同等のデータを使いテスト環境を構築したいですね。

techlife.cookpad.com

Flutter hooks で useTextEditingController(); とか useScrollController(); が使えてめっちゃ便利と思っていて、これを webview_flutter などでも使いたい。

やり方は前に Flutter hooks で画面遷移のイベント変化を custom hooks でいい感じに検知する - star__hoshi's diary で作ったように Custom Hook を作る。

WebViewController useWebViewController() {
  return use(const _WebViewController());
}

class _WebViewController extends Hook<WebViewController> {
  const _WebViewController();

  @override
  _WebViewControllerState createState() => _WebViewControllerState();
}

class _WebViewControllerState
    extends HookState<WebViewController, _WebViewController> {
  final WebViewController _controller = WebViewController();

  @override
  WebViewController build(BuildContext context) {
    return _controller;
  }

  @override
  void dispose() {
    super.dispose();
  }
}

これで final controller = useWebViewController(); ができる。

Flutter で画面遷移の検知をするのには routeObserver.subscribe(...) したり with RouteAware する必要があって、結構めんどい。(参考: 【Flutter】RouteAwareで遷移を検知する方法 | 417.Run())

理想としては、 final appLifecycleState = useAppLifecycleState(); みたいに、 final routeAware = useRouteAwareEvent(); という形で custom hooks 形式で利用したい。

試行錯誤した結果、final routeAware = useRouteAwareEvent(ref.watch(routeObserverProvider)); で利用できるようになった。 useAppLifecycleState を参考に実装した。

実装

依存

以下に依存している。

• go_router
• go_router_builder
• flutter_riverpod
• riverpod_annotation
• flutter_hooks
• riverpod_generator

実装内容

まず RouteObserver をつくる。

@Riverpod(keepAlive: true)
RouteObserver routeObserver(RouteObserverRef ref) => RouteObserver();

GoRouter でそれを利用する。

@Riverpod(keepAlive: true)
GoRouter makeRouter(MakeRouterRef ref) => GoRouter(
      initialLocation: '/',
      routes: $appRoutes,
      observers: [
        FirebaseAnalyticsObserver(analytics: FirebaseAnalytics.instance),
        ref.watch(routeObserverProvider),
      ],
    );

custom hooks を実装する。

// RouteAware は abstract class なのでコールバックするだけの実装をする
class RouteAwareEvent extends RouteAware {
  VoidCallback? onDidPopNext;
  VoidCallback? onDidPop;
  VoidCallback? onDidPushNext;
  VoidCallback? onDidPush;

  @override
  void didPopNext() => onDidPopNext?.call();
  @override
  void didPop() => onDidPop?.call();
  @override
  void didPushNext() => onDidPushNext?.call();
  @override
  void didPush() => onDidPush?.call();
}

// hooks の返り値
enum RouteAwareType {
  didPush,
  didPop,
  didPopNext,
  didPushNext,
}

RouteAwareType? useRouteAwareEvent(RouteObserver routeObserver) {
  return use(_RouteAwareHook(routeObserver));
}

class _RouteAwareHook extends Hook<RouteAwareType?> {
  const _RouteAwareHook(this.routeObserver) : super();
  final RouteObserver routeObserver;

  @override
  __RouteAwareState createState() => __RouteAwareState();
}

class __RouteAwareState extends HookState<RouteAwareType?, _RouteAwareHook> {
  RouteAwareType? _state;
  final aware = RouteAwareEvent();

  @override
  void initHook() {
    super.initHook();
    aware.onDidPop = () => _state = RouteAwareType.didPop;
    aware.onDidPopNext = () => _state = RouteAwareType.didPopNext;
    aware.onDidPush = () => _state = RouteAwareType.didPush;
    aware.onDidPushNext = () => _state = RouteAwareType.didPushNext;
  }

  var firstBuild = true;
  @override
  RouteAwareType? build(BuildContext context) {
    // initHook で context を触るとエラーになるので、ここで初期化する
    // また、ここでは useEffect が使えないので、firstBuild を利用し初回のみ subscribe する
    if (firstBuild) {
      firstBuild = false;
      hook.routeObserver.subscribe(aware, ModalRoute.of(context)!);
    }
    return _state;
  }

  @override
  void dispose() {
    super.dispose();
    hook.routeObserver.unsubscribe(aware);
  }
}

Widget ではこのように利用できる。

class HogePage extends HookConsumerWidget {
  HogePage({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context, WidgetRef ref) {

    final routeAware = useRouteAwareEvent(ref.watch(routeObserverProvider));
    useEffect(() {
      if (routeAware == RouteAwareType.didPop) {
        print('did pop');
      }
      return null;
    }, [routeAware]);

    return Scaffold();
  }
}

おわり。

社で推薦図書みたいなのになってたので読んでみた。Kindle はないけど、公式で epub が買える。 O'Reilly Japan - Lean UX 第3版

感想としては、リーンスタートアップ の内容や エンジニアリング組織論への招待 と似ているなと思った。不確実なところを確実にしていくことが大事そう。

アプトプットではなくアウトカムが大事というのが良い話と思って、エンジニアとかは実装してたら評価されたりしがちだけど、そうじゃなくてどれだけユーザに価値が届いたかが重要で、そこは間違えない様にしたい。でも自分としては実装よりのエンジニアなので自分で案出しとかは得意じゃなくて、出てきた案に対しコメントするのが得意なので、アウトプット寄りになってしまいがち。
無駄を取り除く話も好きで、「成果を向上させることに貢献しないものは全て無駄なので取り除くべき」とあり、この考え方はすごい好き。それ意味ある?みたいなのやりがちなのでちゃんと書かれていて嬉しい。

Lean UX 的には、組織の役割にとらわれるのではなく職能で担当が決めるのではなくメンバー誰もが複数の領域で貢献できると良いとある。それは納得なのだがジョブ型雇用とは乖離がありそうで、海外だとジョブ型が主流っぽいと聞いていたけどそれはどうなんだろう。

また、対面で顔を合わせてコミュニケーション取るのが大事と書かれていて、私は出社拒否勢なので心が痛い。

本を読んで新しい発見はあまりなかったけど、わりかし忘れがちな大事なことが書かれていてよかった。