エラーレポート作成手順のメモ

# 修正できないエラーが発生した時の報告手順

以下は、main ブランチで作業をしている前提です。main ではない branch で作業をしている場合は、そのブランチ名に置き換えて読んでください。

:::note info
下記手順は暫定版です。
:::

## エラー報告の前に

下記について、再度確認してください。

- タイプミスがないか。**バグの９割はタイプミスです。**
- 作業をしているディレクトリが間違っていないか。
- 作業をしているbranch が間違っていないか。
- 各種ツールが最新のバージョンか。

## 1. 現在発生しているエラーが発生していない commit まで戻します。

戻した状態で、エラーが発生していないことを確認します。報告したい内容と無関係なエラーやワーニングが出ていても問題ありません。

## 2. ソースコードに修正を加えます。

ソースコードの修正（追加、削除、書き換え）は、１ファイルのみ、なおかつ直前の commit から1行の変更になるようにして下さい。ただし、コメント行と console.log() のみの行、および括弧やブラケットのみの行は、上記の行数制限に入りません。

変更部分の行数が複数行になる場合は、エラーの発生と無関係な行が含まれていることがほとんどです。追加してもエラーが発生しない行を、可能な限り追加してください。削除、修正に関しても同様です。

## 3. エラーが出る状態で commit し、main ブランチを github に push します。

commit 時の comment に "error" の文字を含めてください。

例:
```
$ git commit -m "error #0711"
```

## 4. エラー発生の状況について、下記の情報を記入し、報告してください。

ひとつでも情報が欠けていると、回答ができないので、必ず全ての情報を記入してください。

- **作業中のレポジトリの URL とブランチ名**: main ブランチで作業している場合は「main ブランチ」と記入してください。

- **修正によってエラーの発生したファイル名**：/src/Hoge.vueのようにパスも書いてください。

- **発生したエラー出力の内容**：該当するエラーの部分のみを切り出して、ログを貼り付けてください。

- **エラーログが出力された場所**：ブラウザのコンソール、ターミナル、各種ログファイル、等です。ログファイルの場合はファイル名も書いてください。

- **エラーが発生している行で、実現しようとしている機能**：可能な限り具体的に書いてください。「**何に対して**（オブジェクト、配列、HTML要素、irestore、コンポーネント、データベース、画像、等）、**どのような操作を実行しようとしているか**」ということは、必ず記述してください。何をするためのコードなのかが、そもそも分からない場合は、エラー報告ではなく質問をしてください。
  - 以下は記述例です。
  -  「firestore の /hoge/ コレクション内に新規のドキュメントを作成し、xxx.data の内容全てを書き込む。」
  - 「要素 <button id="hoge"> がクリックされた時に呼び出されるcallback関数をaddEvenListener() で登録する」
  -  配列 arr の中から "hoge" という文字列の入った要素を取り出す」
  -  firebase にログインしているユーザの id (user.uid) を読み出す」

### 例1

```(1) a1.js
  FriendlyEats.prototype.getDocumentsInQuery = function(query, renderer) {
  };
```

上の状態から、下の状態に変更（追記）した場合は、変更は１行と数えます。

```(2) a1.js
  FriendlyEats.prototype.getDocumentsInQuery = function(query, renderer) {
    query.onSnapshot(function(snapshot) {            // 変更はこの行のみ

      // コメントのみの行と空行は、行数に数えない
      
      console.log( snapshot ); // console.log() の行は行数に数えない
    }); // 括弧だけの行は数えない。
```

## 例2


下記のように、1行中に複数の関数が . (ドット) で連結されている行で
エラーが発生している場合は、どの関数でエラーが発生するかを
突き止めてください。

```(1) b1.js
return firebase.firestore().collection('restaurants').doc(id).get();
```

以下、手順を示します。まず、下記のようにドットの直前部分に改行を入れます。

```(2) b1.js
return firebase
       .firestore()
       .collection('restaurants')
       .doc(id)
       .get();
```

最初に、下記のコードだけでエラーになるかを調べます。

```(3) b1.js
return firebase
       .firestore();

```

上記コードでエラーにならない場合は、関数呼び出しをひとつ追加して、エラーになるかを確認します。

```(4) b1.js 
return firebase
       .firestore()
       .collection('restaurants');
```

上記コードがエラーになった場合は、まず d1.js (5) の状態まで戻して commit します（変更するたびに commit することを推奨します）

```(5) b1.js
return firebase
       .firestore();

```

次に、.collection('restaurants') を追加して、エラーになることを確認します。

```(6) b1.js
return firebase
       .firestore()
       .collection('restaurants');
```

エラーがでることを確認したら、di.js (6) の状態で再度 commit します。
その状態で、 main ブランチを push します。

## 例3

具体的：エラーが出ていない commit でのコードが下記の状態であるとします。

```(1) c1.js
  FriendlyEats.prototype.getDocumentsInQuery = function(query, renderer) {
  };
```

修正後のコードが下記の状態で、この状態でエラーが発生しているとします。

```(2) c1.js
  FriendlyEats.prototype.getDocumentsInQuery = function(query, renderer) {
    query.onSnapshot(function(snapshot) {
      if (!snapshot.size) return renderer.empty(); // Display "There are no restaurants".
  
      snapshot.docChanges().forEach(function(change) {
        // ここでエラーが発生している、とします
        if (change.type === 'removed') {
          renderer.remove(change.doc);
        } else {
          renderer.display(change.doc);
        }
      });
    });
  };
```

c1.js (1) と c1.js (2) との差分は7行もあります（コメント行、空行、括弧の行を除く） 。
このため、以下のようにしてエラーが出ている行を特定し、変更を１行のみに絞ります。

まず下記のコードだけを追加して、エラーがでないかを確認します。

```(3) c1.js
  FriendlyEats.prototype.getDocumentsInQuery = function(query, renderer) {
    query.onSnapshot(function(snapshot) {
    });
  };
```

エラーが出ない場合は、さらに次のようにコードを追加します。

```(4) c1.js
  FriendlyEats.prototype.getDocumentsInQuery = function(query, renderer) {
    query.onSnapshot(function(snapshot) {
        if (!snapshot.size) return renderer.empty();
    });
  };
```

エラーが出ない場合は、さらに次のようにコードを追加します。


```(5) c1.js 
  FriendlyEats.prototype.getDocumentsInQuery = function(query, renderer) {
    query.onSnapshot(function(snapshot) {
        if (!snapshot.size) return renderer.empty();

        snapshot.docChanges().forEach(function(change) {
        });
    });
  };
```

この時に、エラーがでたら、エラーのない状態（c1.js (4) ）になっている commit まで戻します。あるいは、コードを c1.js (4) の状態にコードを戻してから、一度 commit します。

まだ c1.js (5) の状態では、エラーが発生している行には、複数の関数呼び出しが含まれているので、下記のように関数の呼び出しごと（ドットの前）に改行を入れ、どの関数呼び出しでエラーが発生しているかを特定します。

```(6) c1.js 
  FriendlyEats.prototype.getDocumentsInQuery = function(query, renderer) {
    query.onSnapshot(function(snapshot) {
        if (!snapshot.size) return renderer.empty();

        snapshot
            .docChanges();
        });
    });
  };
```

まずは、上記の状態でエラーがでるかを確認します。この状態で、エラーが出なければ、
次の関数呼び出しを追加します。


```(7) c1.js 
  FriendlyEats.prototype.getDocumentsInQuery = function(query, renderer) {
    query.onSnapshot(function(snapshot) {
        if (!snapshot.size) return renderer.empty();

        snapshot
            .docChanges()
            .forEach(function(change) {
        });
    });
  };
```

この追記でエラーが発生した場合は、c1.js (6) の状態で、一旦 commit します。そして、c1.js (7) の変更を加えた後に、再度 commit します。その後、main ブランチを push します。

commit はエラーに関係なく、頻繁にするようにしてください。頻度が低いと、エラー発生時の巻き戻しに時間がかかります。push は特に指示がない限り、１日１回で構いません。

## 稀によくある

下記もチェックしてください。

- pull し忘れていないか。
- 作業に使用している PC や HDD/SSD が以前と異なっていないか。
- 使用しているライブラリやモジュール、ツールのバージョンが想定と異なっていないか。
- ファイルのパーミッションが読み出し不可、書き込み不可になっていないか。
- 使用しているクラウドサービスのアカウントが有効か（ログインしていない、別のアカウントでログインしている、クレジットカードの期限切れ、等）
- クラウドサービス等で、以前に行った設定や書き込んだデータがそのまま残っていないか。
- 使用しているインスタンスやサービスの設定が間違っていないか。