[Flutter]Dartのコメントの種類とその活用方法

![スクリーンショット 2023-10-12 9.12.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672609/e6ac01b8-287c-f360-d919-50bae98c9d83.png)


こんにちわ。いせりゅーです。

10月に入り、ようやく落ち着きを取り戻してきました。僕は23卒のエンジニアで入社して半年が経ちました。早いですね💦

業務中にレビューを受けた際、いくつか非常に参考になるアドバイスを得ることができました。その内容を共有し、皆さんと一緒に学んでいきたいと思います。

## 問題の背景
- コメントアウトについて考えずに記載をしていた。
- １行コメント、複数行コメント、ドキュメントコメントの存在は知っていたが、それぞれの役割を正確に理解していなかった。


## コメントの種類

Dartの公式サイトから引用しています。

:::note info
認識のミスがありましたら、コメントいただけると幸いです🙇
:::

https://dart.dev/language/comments

コメントには3つの種類があります

- １行コメント
- 複数行コメント
- ドキュメントコメント


## １行コメント(Single-line comments)

- 行の先頭に`//`をつけることで、その行のコメントとして扱われる。

#### 記載例

```dart
void main() {
  // TODO: refactor into an AbstractLlamaGreetingFactory?
  print('Welcome to my Llama farm!');
}
```

## 複数行コメント(Multi-line comments)

- `/*`で始めて`*/`で終わる。この間に記述された内容は、ドキュメントコメントでなければDartのコンパイラによって無視される。

#### 記載例

```dart
void main() {
  /*
   * This is a lot of work. Consider raising chickens.

  Llama larry = Llama();
  larry.feed();
  larry.exercise();
  larry.clean();
   */
}
```

## ドキュメントコメント(Documentation comments)

- `/**`または`///`で始まる単行または複行のコメントである。ドキュメンテーション・コメントの内側では、Dartのコンパイラはそれが括弧で囲まれていない限り総てのテキストを無視する。
- ドキュメントとして生成される。

:::note info
個人的には<b>「ドキュメントとして生成される」</b>点がとても驚きました❗️❗️
実際にどうなっているのか見てみましょう。
:::


具体例として、Riverpodのコードを用いました。（一部抜粋）
詳しくは下のリンク↓

https://github.com/rrousselGit/riverpod/blob/dbf47a3953f449cfb57736355ea4afb6cd4eaaa5/packages/riverpod/lib/src/common.dart#L38

#### 記載例

```dart: riverpod/packages/riverpod/lib/src/common.dart

/// A utility for safely manipulating asynchronous data.
///
/// By using [AsyncValue], you are guaranteed that you cannot forget to
/// handle the loading/error state of an asynchronous operation.
///
/// It also exposes some utilities to nicely convert an [AsyncValue] to
/// a different object.
/// For example, a Flutter Widget may use [when] to convert an [AsyncValue]
/// into either a progress indicator, an error screen, or to show the data:
///
/// ```dart
/// /// A provider that asynchronously exposes the current user
/// final userProvider = StreamProvider<User>((_) async* {
///   // fetch the user
/// });
///
/// class Example extends ConsumerWidget {
///   @override
///   Widget build(BuildContext context, WidgetRef ref) {
///     final AsyncValue<User> user = ref.watch(userProvider);
///
///     return user.when(
///       loading: () => CircularProgressIndicator(),
///       error: (error, stack) => Text('Oops, something unexpected happened'),
///       data: (user) => Text('Hello ${user.name}'),
///     );
///   }
/// }
/// ```

```


Riverpodのドキュメントを確認してみると、以下の記載がありました。


![スクリーンショット 2023-10-12 8.47.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672609/e574603f-2a19-1b58-f094-3213fc1d4c3f.png)


リンクはこちらになります。

https://pub.dev/documentation/hooks_riverpod/latest/hooks_riverpod/AsyncValue-class.html


ちなみにドキュメントの作成方法としては、

<b>１、プロジェクトに移動</b>
```terminal
cd (プロジェクト)
```

<b>２、生成する</b>
```terminal
dart pub get
dart doc .
```

:::note warn
警告
ドキュメントを生成するには、最初に`dart pub get`を実行する必要があリます。
また、`dart analyze`でエラーが出ないようにする必要もあります。
:::


生成場所としては、`doc/api`の中に生成されます。HTML形式で生成されるため、気になる方は実際に見てみると面白いと思います。


# 最後に

今までドキュメントコメントなどは全く考えていませんでした。入社して半年でこの事実を知れて、アウトプットできたことはとてもいいメリットになっていくと信じています。
これからももりもりとインプットとアウトプットを頑張っていきます🤗

もし、何かありましたらお気軽にご連絡ください🙇


# 参考文献

https://dart.dev/language/comments

https://dart.dev/tools/dart-doc