Web開発フレームワークの選び方｜2025年の主流技術と開発目的別の比較ポイント

標準化されたWebフレームワーク比較ダッシュボード｜2025年主流技術選定サポーター

Webフレームワーク選びは、開発目的や流行技術、チームのスキルによって条件がバラバラになりがちです。自分も過去に「どれが自社案件に最適なのか」迷い、Excel管理が煩雑になって大事な判断材料を見落としたことがある。特にバージョンやサポート状況、コミュニティの強さの比較を怠ると、後で泣きを見る。本ツールは、それらの情報をGoogleスプレッドシートで一元管理・可視化し、「要件定義→比較→選定」の標準プロセスを劇的に効率化する実践型ダッシュボードです。

このコードをコピペして比較ダッシュボードを構築

複数フレームワークの特性・用途・サポート状況などを記録・比較し、開発目的ごとに最適候補を抽出できるダッシュボードです。

// === Webフレームワーク比較ダッシュボード ===

function doGet(e) {
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = ss.getSheetByName('FW_比較表') || ss.insertSheet('FW_比較表');
  var html = [];
  // シート初期化（1回目のみ）
  if(sheet.getLastRow() === 0) {
    sheet.appendRow(['フレームワーク名','用途','主流年','言語',
      'サポート状況','公式サイト','評価','比較タグ']);
  }
  // 入力フォーム描画
  html.push('<div style="padding:24px;max-width:580px;'
    + 'margin:20px auto;background:#f4f8fb;">');
  html.push('<h2>フレームワーク比較登録フォーム</h2>');
  html.push('<form id="fwForm">');
  html.push('名前:<input type="text" name="name" required><br>');
  html.push('用途:<select name="purpose">'
    + '<option>SPA</option><option>SSR</option>'
    + '<option>API</option><option>管理画面</option>'
    + '<option>汎用</option></select><br>');
  html.push('主流年:<input type="number" name="year" min="2000" '
    + 'max="2025" value="2025"><br>');
  html.push('言語:<input type="text" name="lang" value="JavaScript"><br>');
  html.push('サポート:<select name="support">'
    + '<option>公式継続</option><option>メンテ縮小</option>'
    + '<option>終了</option></select><br>');
  html.push('公式URL:<input type="url" name="url"><br>');
  html.push('自分の評価(1~5):<input type="number" name="rating" '
    + 'min="1" max="5" value="3"><br>');
  html.push('比較タグ:<input type="text" name="tag" '
    + 'placeholder="例:モバイル,高速"><br>');
  html.push('<button type="button" onclick="sendData()">登録</button>');
  html.push('</form>');

  // 履歴テーブル
  html.push('<h3>記録済みフレームワーク一覧</h3>');
  html.push('<button onclick="location.reload()">最新表示</button>');
  html.push(tableHtml(sheet));

  // 比較絞り込み機能
  html.push('<h3>タグで比較抽出</h3>');
  html.push('<form id="filterForm">タグ:<input type="text" '
    + 'id="tagFilter">');
  html.push('<button type="button" onclick="filterByTag()">抽出</button>');
  html.push('</form>');
  html.push('<div id="filterRes"></div>');

  // JS（簡易AJAX＋絞込）
  html.push('<script>'
    + 'function sendData(){'
    + 'var fd=new FormData(document.getElementById("fwForm"));'
    + 'fetch("'+ScriptApp.getService().getUrl()+'",{'
    + 'method:"POST",body:fd}).then(()=>{location.reload();});}'
    + 'function filterByTag(){'
    + 'var tag=document.getElementById("tagFilter").value.trim();'
    + 'fetch("?filter="+encodeURIComponent(tag))'
    + '.then(r=>r.text()).then(html=>{'
    + 'document.getElementById("filterRes").innerHTML=html;});}'
    + '</script>');

  html.push('</div>');
  // GETパラメータで絞込表示
  if(e && e.parameter.filter) {
    return HtmlService.createHtmlOutput(
      filterTable(sheet,e.parameter.filter));
  }
  return HtmlService.createHtmlOutput(html.join(''));
}

// POST: フォーム登録
function doPost(e){
  var ss=SpreadsheetApp.getActiveSpreadsheet();
  var sheet=ss.getSheetByName('FW_比較表');
  var vals=[e.parameter.name||'',e.parameter.purpose||'',
    e.parameter.year||'',e.parameter.lang||'',
    e.parameter.support||'',e.parameter.url||'',
    e.parameter.rating||'',e.parameter.tag||''];
  sheet.appendRow(vals);
  return HtmlService.createHtmlOutput('登録OK');
}

// シートからテーブルHTML生成
function tableHtml(sheet){
  var vals=sheet.getDataRange().getValues();
  if(vals.length<2)return '<p>まだ登録なし</p>';
  var ths=vals[0].map(x=>'<th>'+x+'</th>').join('');
  var trs=vals.slice(1).reverse().map(
    r=>'<tr>'+r.map(
      (x,i)=>(i==5?('<a href="'+x+'" target="_blank">公式</a>'):x)
    ).map(x=>'<td>'+x+'</td>').join('')
    +'</tr>').join('');
  return '<table border=1><tr>'+ths+'</tr>'+trs+'</table>';
}

// タグフィルター表示
function filterTable(sheet,tag){
  var vals=sheet.getDataRange().getValues();
  if(!tag)return '<div>タグ未指定</div>';
  var rows=vals.filter(
    (r,i)=>i>0&&String(r[7]).indexOf(tag)>-1);
  if(rows.length==0)return '<div>該当なし</div>';
  var ths=vals[0].map(x=>'<th>'+x+'</th>').join('');
  var trs=rows.map(
    r=>'<tr>'+r.map(
      (x,i)=>(i==5?('<a href="'+x+'" target="_blank">公式</a>'):x)
    ).map(x=>'<td>'+x+'</td>').join('')
    +'</tr>').join('');
  return '<table border=1 style="background:#eef"><tr>'
    +ths+'</tr>'+trs+'</table>';
}

導入・設定ガイド｜専門家も最初は詰まる

ミスっても焦らなくてOK。初回は皆だいたいどこかで止まる。

1. Apps Script エディタを開く
   動作：Googleスプレッドシートを開き、「拡張機能」→「Apps Script」をクリック。
   位置：画面上部のメニューバー右寄りに「拡張機能」あり。
   結果：新しいタブでスクリプトエディタが開く。
   ⚠️ 昔、会社アカウントで弾かれてしばらく無駄にした。権限に注意。
2. 既存コード削除＆ペースト
   動作：中央の白いエディタ全体をCtrl+Aで選択、Deleteで消す。その後Ctrl+Vで新コードを貼付け。
   位置：エディタ中央のテキストエリア。
   結果：「function myFunction()」が全て置き換わる。
   ⚠️ 自分も何度か一部しか貼れてなくて、謎のバグに悩んだ。全選択→全削除→全貼付けが基本。
3. プロジェクト保存
   動作：画面左上の「保存」アイコン（フロッピー）かCtrl+Sを押す。
   位置：エディタ上部左側。
   結果：最初のみプロジェクト名入力ダイアログが出る。
   ⚠️ 保存忘れて即デプロイ→更新反映されず「なぜ？」と悩みがち。
4. ウェブアプリとしてデプロイ
   動作：右上の青い「デプロイ」→「新しいデプロイ」をクリック。
   位置：エディタ右上に目立つボタン。
   結果：設定画面が出現。
   子手順：
   1. ギアアイコンで「ウェブアプリ」を選ぶ
   2. 実行ユーザーは「自分」を選ぶ
   3. アクセス権は「全員」必須
   4. 「デプロイ」をクリック
   ⚠️ 権限「全員」以外だと、シェアしても相手から見えなくてトラブルになりがち。
5. 認証プロンプトの処理
   動作：Google認証フローに従いクリックを進める。
   結果：赤い「Google未認証」警告が表示される。
   対応：「詳細」→「xxx(安全ではないページに移動)」→「許可」
   ⚠️ 最初は正直焦った。これ、業務用に配る場合も同じ画面が出るので「仕様」だと割り切る。
6. アプリURL取得・利用開始
   動作：完了画面に出る「ウェブアプリのURL」をコピー。
   位置：認証・デプロイ後、中央のダイアログ内に表示。
   結果：そのURLをChrome等で開けばアプリ起動。
   ⚠️ コード修正後は必ず「再デプロイ」必須。更新忘れが一番多い。

導入活用シーン｜意思決定が速くなる現場

案件ごとに「SSR用途でNext.jsとNuxtどっちが最適？」を比較、シートからスペックとタグで即座に絞込み。新卒エンジニアが「SPA/モバイル特化」「公式サポートの有無」で候補を2つまで短時間でリストアップし、リーダーが定量比較で判断。前の現場でエクセル派が混乱していたのを、これで一発解消したことがある。効率が違う。チーム会議でもそのまま画面共有すれば、無駄な争いがなくなる。ほんとに。