GASプロジェクトの一括出力方法

## 前書き

この前オープンチャットにて、GASのプロジェクトのIDを一括で取得したいという話題がありました。
調べてみても、これだ！感がある回答も見つからず、
スタンドアローンだけならDriveから探せばいいのですが、スプレッドシートやフォームに紐付けているコンテナバインドだと見つかりづらいんですよね。

ということでやってみよう、という感じの記事です。
結論だけ言っておくとブラウザの開発者ツール使って直接取得するだけのお話です。
（質問者にはすでに回答済み）

調べてみた↓
[How do you get the ids of the individual scripts inside a GAS project? \- Stack Overflow](https://stackoverflow.com/questions/66069785/how-do-you-get-the-ids-of-the-individual-scripts-inside-a-gas-project)
[Get Bounded Script ID from another project \- Stack Overflow](https://stackoverflow.com/questions/51120078/get-bounded-script-id-from-another-project)

## やり方(結論)

1. https://script.google.com/home に移動する
    左のサイドバーから自分のプロジェクト以外にもスター付きやすべてのプロジェクトなど選べるので、自分の取得したい場所を開いておいて下さい
    ![CleanShot 2024-10-07 at 22.45.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565925/4bf96ed2-4a77-06b1-e2b6-d0389eeba12a.png)
2. スクロールしてプロジェクトを全部読み込む
    ![CleanShot 2024-10-07 at 22.45.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565925/c99f3518-def5-d32a-7b83-126024ca11e6.png)
3. 右クリックして検証を押下(DevToolsを開きたいので、F12とかOpt+Command+Iとか何でも良い)
4. コンソールを開いて下記を実行
    ```javascript
    const data = Array.from(document.querySelectorAll(`[aria-label="プロジェクト リスト"] > div`))
      .map(item=>{
        const id = item.dataset.scriptId;
        return id;
      })
      .join("\n");
    console.log(data);
    ```
    ![CleanShot 2024-10-07 at 23.39.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565925/16e7b881-c46b-5fea-0700-9b2286e124cb.png)

    「Self-XSSという手法で~」と記載があります。その通りで知らないスクリプトを無闇に実行するのは良くないです。
    信頼できないけど、理解するのが難しいスクリプトであればAIを頼ってみましょう:robot:

    
    :::note warn
    ChromeやEdgeを使っている人で、開発者ツールを使ったことがなく、「allow pasting」「貼り付けを許可」みたいな文言が出た場合は、よく読みましょう。
    上の方に表示されている「Self-XSSという手法で〜」と同じで、コピペを文字列で許可をしないとコピペさせてくれない仕様になっています。
    ['Do you trust this code?' dialog in Sources and self-XSS warning in Console](https://developer.chrome.com/blog/new-in-devtools-120?hl=ja#self-xss)

    
4. 表示されたテキストをコピーして、スプレッドシートなどに貼り付ける
    多分こんな感じで表示されるはずです。
    ![CleanShot 2024-10-07 at 23.08.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565925/16cf1fa1-8b2e-507f-0a67-f079745c0d89.png)

## 少し改造

スタンドアローンかコンテナバインドか、
またコンテナバインドの場合、スプレッドシートなのかフォームなのか。。。みたいなのも表示させたかったので作ってみました。

そのスタンドアローンなのか。。。みたいなプロジェクトのタイプ？の判断は、
アイコンがSVGでレンダリングされていたので、SVGの色で判断させました
<details>
<summary>画像</summary>

![CleanShot 2024-10-07 at 23.34.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565925/108a7618-ae9d-6d4b-e1b9-5b7c70f090a7.png)

</details>

```javascript
const projectTypes = {
  "#0F9D58": "SpreadSheet",
  "#4285F4": "AppsScript",
  "#673AB7": "Form",
  "#F4B400": "Slides",
  "#4285F4": "Docs",
};

const data = Array.from(document.querySelectorAll(`[aria-label="プロジェクト リスト"] > div`))
  .map(item=>{
    const projectId = item.dataset.scriptId;
    const projectName = item.querySelector("span[jsname='DeDuO']").textContent;
    const projectTypeColor = item.querySelector("g > path").getAttribute("fill");
    const projectType = projectTypes[projectTypeColor];
    return `${projectId}\t${projectName}\t${projectType}`;
  })
  .join("\n");
console.log(`Project ID\tProject Name\tProject Type\n` + data);
```

## 余談

どうせGASを使ってのやり方はみんな探してるんですよ。
なので今更私がみたところで変わらないだろう、、、というところで、
実際のAppsScriptのホームから追っかけられないか？という思いつきでした。

ってことで、ホーム画面からDevToolsを使いこなしたら見つけたってワケです
![CleanShot 2024-10-07 at 23.13.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565925/0150bb4c-0478-38a0-30f0-2f730d3eb78f.png)

ここだけの話、
質問者さんには、`item.getAttribute("jsdata").split(";")[1]`で取得するようなコード投げちゃったんですが、
`data-script-id`にあるじゃん、、、ってことでこの記事はそちらのスマートな方に変更しました。

DevToolsで実際にレンダリングされてるHTMLから色々見つけ出すのは楽しいので、
皆様もぜひ触ってみて下さいませ。