Zenn
📝

alpine.jsAG Gridを動かす

2023/12/25に公開
JavaScript
aggrid
Alpine.js
tech

テストで実験がてら、Alpine.jsにAG Gridを配置してみる。

よくfilamentを利用するんだけど、
filament自体がlivewireとalpine.jsの上に成り立ってて
僕自身がどちらにも精通していないので、
どうするか全く解らんwww

とりあえずページを作る

今回はViteでサクッとhttpサーバーを立ち上げてAlpin.jsとAG GridをCDNで読み込む
その方がFilamentに親和性が高い気がするから。
ムリなら、Alipineのコンポーネントを作るかな？

Viteをインストールしてサーバーを立ち上げる

とりあえずViteのインストール

npm create vite@latest

Ok to proceed? (y)　ｙ
Project name　alpineAgGrid
Package name　alpineaggrid　そのまま
Select a framework　Vanilla
Select a variant　JavaSrcipt

npm istallとローカルサーバー起動

フォルダと中のファイルが出来た

以下のコマンドを走らせろ！
「Done. Now run:」との事なので、一個づつ実行

  cd alpineAgGrid
  npm install
  npm run dev

私の環境だと「http://localhost:5174/」でサーバーを起動したから
みたらいいよ。
との事なので、ブラウザで見る

起動したね。

Alpine.jsでAG Gridを描画

Alpine.jsとAG GridをCDNで読み込み

<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/ag-grid-enterprise@31.0.1/dist/ag-grid-enterprise.min.js"></script>

CSSを簡単に作成

public\css\style.scss
body {
    #app {
        width: 100%;
        height: 100vh;
        #grid {
            width: 100%;
            height: 100vh;
        }
    }
}
index.html
 <!doctype html>
 <html lang="en">
 <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
+    <link rel="stylesheet" href="/css/style.css">
+    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/ag-grid-enterprise@31.0.1/dist/ag-grid-enterprise.min.js"></script>
 </head>
 <body>
    <div id="app">
+        <div id="grid"></div> <!-- このDivにAG Gridを配置したい-->
    </div>
-    <!-- <script type="module" src="/main.js"></script> -->
 </body>
 </html>

この状態でブラウザを見ても真っ白

テストでAG Gridを表示

index.html
+ <script src="/js/testGrid.js"></script>
 </head>
 <body>
     <div id="app">
+         <div id="grid" class="ag-theme-quartz" x-data="testGrid($el)"></div>
     </div>
 </body>

 </html>
public\js\testGrid.js
function testGrid(elm) {
    const gridOptions = {
        // Row Data: The data to be displayed.
        rowData: [
			{mission: "Voyager",company: "NASA",location: "Cape Canaveral",date: "1977-09-05",rocket: "Titan-Centaur ",price: 86580000,successful: true},
			{mission: "Apollo 13",company: "NASA",location: "Kennedy Space Center",date: "1970-04-11",rocket: "Saturn V",price: 3750000,successful: false}, 
			{mission: "Falcon 9",company: "SpaceX",location: "Cape Canaveral",date: "2015-12-22",rocket: "Falcon 9",price: 9750000,successful: true}
		],
        columnDefs: [
			{ field: "mission" }, { field: "company"}, { field: "location"}, { field: "date"}, {field: "price" }, { field: "successful"}, { field: "rocket"}]
    };
    // Your Javascript code to create the grid
    agGrid.createGrid(elm, gridOptions);
}

表示した。

後は、良い感じに触っていくだけやね。」
」

あとがき

AG Gridで細かい事はまた今度調べるとして
Viteが便利すぎて・・・

Alpine.jsを利用するメリットはあんまり解らないけど、FilamentがliveWireで、LiveWireがAlpine.jsなので
慣れないと仕方ない。

GitHubで編集を提案

Discussion