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

前書き

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

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

調べてみた↓
How do you get the ids of the individual scripts inside a GAS project? - Stack Overflow
Get Bounded Script ID from another project - Stack Overflow

やり方(結論)

1. https://script.google.com/home に移動する
   左のサイドバーから自分のプロジェクト以外にもスター付きやすべてのプロジェクトなど選べるので、自分の取得したい場所を開いておいて下さい
   

2. スクロールしてプロジェクトを全部読み込む
   

3. 右クリックして検証を押下(DevToolsを開きたいので、F12とかOpt+Command+Iとか何でも良い)

4. コンソールを開いて下記を実行

   const data = Array.from(document.querySelectorAll(`[aria-label="プロジェクト リスト"] > div`))
     .map(item=>{
       const id = item.dataset.scriptId;
       return id;
     })
     .join("\n");
   console.log(data);
   

   

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

   ChromeやEdgeを使っている人で、開発者ツールを使ったことがなく、「allow pasting」「貼り付けを許可」みたいな文言が出た場合は、よく読みましょう。
   上の方に表示されている「Self-XSSという手法で〜」と同じで、コピペを文字列で許可をしないとコピペさせてくれない仕様になっています。
   'Do you trust this code?' dialog in Sources and self-XSS warning in Console

5. 表示されたテキストをコピーして、スプレッドシートなどに貼り付ける
   多分こんな感じで表示されるはずです。
   

少し改造

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

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

画像

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を使いこなしたら見つけたってワケです

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

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