Dart/Flutterでimport_sorterを使用してimportの並び順を整理する

この記事はこんな人にオススメ

Dart/Flutterプロジェクトのimportを一括で整理したい人
Dart/Flutterプロジェクトのメンテナンス性を向上させたい人
Dart/Flutterプロジェクトにimport_sorterを導入する方法を知りたい人

どうも、Shinyaです。

この記事では、Dart/Flutterプロジェクトでサードパーティツールのimport_sorterを使用してソースファイルに含まれるimportを一括で整理する方法について書いていきます。

Dart/Flutterのプロジェクトでアプリ開発を進めていると、どうしてもサードパーティライブラリやプロジェクト内のソースファイルのimportが増えてきて乱雑になりがちなのですが、importが整理されていない状態が続くと次のような問題が発生する場合があります。

ソースコードの構造が不明確になる
開発者がimportを見た際に依存関係を把握するのが困難になる
不要なimportが残存する可能性が高まる
メンテナンス性が悪化する

こうした問題をスマートに解決する方法を提供しているのがサードパーティツールのimport_sorterです。

import_sorterを使用すると、特定のルールでプロジェクト内の全てのソースコードに含まれるimportの並び順を一括で整理することができます。

import_sorterを使用すると乱雑になりがちなimportの並び順が見違えるほどに良くなりますので、Dart/Flutterでアプリ開発をしている方は是非使ってみてください！

事前準備

Dart/Flutterのインストールがまだ完了していない方は、次の記事を参考にDart/Flutterのインストールを行なってください。

import_sorterを使用してみる

それでは、早速Dart/Flutterプロジェクトでimport_sorterを使用してみましょう。

import_sorterを依存性に追加する

まずは、import_sorterをプロジェクトのpubspec.yamlの依存性に追加する必要があります。プロジェクトの特性に応じて、コマンドプロンプトで次のコマンドを実行してください。

Dart:

dart pub add import_sorter --dev

Flutter:

flutter pub add import_sorter —-dev

上記のコマンドを実行した後でプロジェクト直下のpubspec.yamlを開くと、次のようにdev_dependenciesにimport_sorterが追加されたことを確認できます。

dev_dependencies:
  import_sorter: ^4.6.0

import_sorterを実行してみる

ここまでの作業でimport_sorterを利用可能な状態になったので、実際にimport_sorterを実行してみたいと思います。

この記事ではimport_sorterの検証用に、次のような構造のDartプロジェクトを使用します。

.
├── analysis_options.yaml
├── bin
│   ├── example.dart
│   └── something.dart
├── pubspec.lock
└── pubspec.yaml

また、できるだけimport_sorterの使用効果を検証するために、次のようにサードパーティライブラリを追加してあります。

dependencies:
  bluesky: ^1.0.7
  bluesky_text: ^1.0.3
  http: ^1.5.0
  intl: ^0.20.2
  universal_io: ^2.2.2

例えば、次のようなmain関数があると想定します。

import 'package:http/http.dart';
import 'package:universal_io/io.dart';
import 'something.dart';
import 'package:bluesky_text/bluesky_text.dart';
import 'package:bluesky/atproto.dart';

Future<void> main(List<String> args) async {
  File('./test.jpg');
  await get(Uri.https('example.com'));
  Something();
  BlueskyText('hello');
  await createSession(identifier: 'example.com', password: '...');
}

この規模だとimportが整理されていなくても一見すると問題はなさそうですが、それでもimportの並び順に規則性がないため乱雑に見えます。ここでコマンドプロンプトで次のコマンドを実行してみてください。

dart run import_sorter:main

上記のコマンドを実行すると、先ほどのmain関数のimportの並び順がimport_sorterによって次のように整理されたことを確認できます。

// Package imports:
import 'package:bluesky/atproto.dart';
import 'package:bluesky_text/bluesky_text.dart';
import 'package:http/http.dart';
import 'package:universal_io/io.dart';

// Project imports:
import 'something.dart';

Future<void> main(List<String> args) async {
  File('./test.jpg');
  await get(Uri.https('example.com'));
  Something();
  BlueskyText('hello');
  await createSession(identifier: 'example.com', password: '...');
}

importがアルファベット順に整理されただけではなく、importの種別がライブラリとプロジェクトで分類されたことでとても見通しが良くなりました。

import_sorterの設定を変更する

import_sorterは先の例のようにデフォルトのまま使用しても問題ないのですが、次のようにpubspec.yamlに設定を追加することで、import_sorterの実行時の振る舞いを変更することができます。

import_sorter:
  emojis: true # 任意、デフォルトはfalse
  comments: false # 任意、デフォルトはtrue
  ignored_files: # 任意、デフォルトは[]
    - \/lib\/*

試しに、先の作業で使用したpubspec.yamlに、次のようにemojisのオプションをtrueで追加してみます。

name: dart_import_sorter
environment:
  sdk: ^3.9.0

dependencies:
  bluesky: ^1.0.7
  bluesky_text: ^1.0.3
  http: ^1.5.0
  intl: ^0.20.2
  universal_io: ^2.2.2
  
dev_dependencies:
  import_sorter: ^4.6.0

import_sorter:
  emojis: true

上記の状態で、コマンドプロンプトで次のコマンドを実行してください。

dart run import_sorter:main

上記のコマンドを実行すると、先ほどの作業で使用したmain関数のimportに付与されたコメントに絵文字が追加されたことを確認できました。

// 📦 Package imports:
import 'package:bluesky/atproto.dart';
import 'package:bluesky_text/bluesky_text.dart';
import 'package:http/http.dart';
import 'package:universal_io/io.dart';

// 🌎 Project imports:
import 'something.dart';

Future<void> main(List<String> args) async {
  File('./test.jpg');
  await get(Uri.https('example.com'));
  Something();
  BlueskyText('hello');
  await createSession(identifier: 'example.com', password: '...');
}

絵文字に実用性はないですけど、こうしたサードパーティライブラリの遊び心はとても面白くて良いですね！