質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

4663閲覧

Vue.js 3 でjavascriptのimport ~ fromがうまくいかなくて困っています。

退会済みユーザー

退会済みユーザー

総合スコア0

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2020/11/25 02:19

編集2020/11/25 02:25

前提・実現したいこと

Vue.js 3でjavascriptのimport ~ fromがうまくいかなくて困っています。

Vue Grid | Get Started with ag-Grid and Vue
https://www.ag-grid.com/vuejs-grid/

現在、Vue.js 3とag-gridを組み合わせて、ag-gridの基本動作をさせようとしています。
手順はURL記事のサンプルコードの手順からは変更しています。(下記コードをご参照ください)
Vue.CLIは使用せず vue.global.jsを使用しています。

ただし、ここでは Vue.jsとjavascriptのimport~fromの問題のみに限定します。

現在、javascript中でimport ~ fromを使用すると、
この部分 → import { AgGridVue } from 'ag-grid-vue'; ※たぶんこれは複数ファイルのよう?
で、Uncaught SyntaxError: Cannot use import statement outside a module とエラーがでており、

import ~ fromを使用できないときは、script type="module"を使用するようですが、

<script type="module" src="..."></script>

javascript中で、import ~ fromでVueにコンポーネントとして登録したいので、何らかの方法をとる必要があります。
調べても解決できていなく、この場合はどのようにすればよいでしょうか?

ご教授お願いします。

html

1// js, css読込 2<link rel="stylesheet" href="~/lib/ag-grid/styles/ag-grid.css" /> 3<link rel="stylesheet" href="~/lib/ag-grid/styles/ag-theme-balham.css" /> 4<script src="~/lib/ag-grid/ag-grid-community.js"></script> 5<script src="~/lib/vue/vue.global.js"></script>

html

1<div id="app"> 2 <div id="myGrid" style="height: 500px; width: 500px;"></div> 3</div>

javascript

1import { AgGridVue } from 'ag-grid-vue'; // ← Vue中でコンポーネントとして登録 2 3Vue.createApp({ 4 name: 'myGrid', 5 6 data() { 7 return { 8 columnDefs: null, 9 rowData: null 10 } 11 }, 12 13 components: { 14 AgGridVue 15 }, 16 17 beforeMount() { 18 this.columnDefs = [ 19 { headerName: 'Make', field: 'make' }, 20 { headerName: 'Model', field: 'model' }, 21 { headerName: 'Price', field: 'price' } 22 ]; 23 24 this.rowData = [ 25 { make: 'Toyota', model: 'Celica', price: 35000 }, 26 { make: 'Ford', model: 'Mondeo', price: 32000 }, 27 { make: 'Porsche', model: 'Boxter', price: 72000 } 28 ]; 29 }, 30 31 template: ` 32 <ag-grid-vue style="width: 500px; height: 300px;" 33 class="ag-theme-alpine" 34 :columnDefs="columnDefs" 35 :rowData="rowData"> 36 </ag-grid-vue> 37 ` 38}).mount("#myGrid");

その他、試したこと

■ javascriptのみを使用するものはag-gridの動作が確認できました。手順はURL記事のサンプルコードの通り。

Get Started with ag-Grid in Your Project
https://www.ag-grid.com/javascript-grid/

※importとVueは使っていないので問題なし。

補足情報(FW/ツールのバージョンなど)

ツールはVisual studio 2019 Professionalを使用

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

stack overflowで該当記事を見つけましたが、その手順で解決に至りませんでした。

https://stackoverflow.com/questions/59565934/ag-grid-with-vuejs-vanillajs

https://stackoverflow.com/questions/56334844/is-it-possible-to-use-ag-grid-with-vue-without-a-builder

しかし、vue.js + ag-gridの時、ag-gridをvanilla jsタイプで使用しても、
vue.jsの利用に影響がありませんでしたので、こちらの方で進めたいと思います。

ありがとうございました。

投稿2020/12/07 02:55

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ag-grid-community.jsはagGrid単体で使うためのもので、Vue用ではないと思われます。

そして、import { AgGridVue } from 'ag-grid-vue';のような、npm経由で参照する形は、ブラウザには直接処理できません

ag-grid-vueを直接ブラウザから参照できるファイルを探すなり作るなりして、それをimportを使わない形で参照する」あるいは「npmからのimportを処理できるよう、JavaScriptの事前処理の仕組みを作る」のどちらかの手段が必要です。

投稿2020/11/25 02:35

maisumakun

総合スコア145121

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2020/11/25 07:39 編集

ご回答ありがとうございます。 ご指摘の通り、ag-grid-community.jsは、Vue用でなかったためコメントアウトしました。 <!-- <script src="~/lib/ag-grid/ag-grid-community.js"></script> --> サンプルコードのimportははnpmから直接参照の形式だったのですね。また私の環境はWindowsでした。 ローカルファイルからimportを使わず、参照する場合はどのように行えばよいでしょうか? ネットで検索してもimportでの例しか見つからなく、 この設定を単独で追加してみましたが、変わらずでした。 <script src="~/lib/ag-grid-vue/dist/ag-grid-vue.umd.js"></script> また、これはVue + ag-gridの組み合わせで通常通り使用するべきか、 ag-gridは単体として使用して、vueと併用とするかについても悩んでます。 ※やりたいこととしては、現在は、tabulatorというgridを使用しています(Vue無し)が、ag-grid + vue.jsへの移行を検討しています。 Gridでは直接編集で、そのの編集内容がそのまま配列オブジェクトとして記憶(tabulatorでいうとreactiveData)され、 それをjson postするようなイメージで考えています。 ag-grid + vue が公式ドキュメントの手順で問題なく表示され、それがreactiveDataとして使用できるか検証したいです。 もしよいアドバイスがあればご教授お願いしたく。
maisumakun

2020/11/25 07:38 編集

> この設定を単独で追加してみましたが、変わらずでした。 ag-grid-vue.umd.jsを読み込めば、「window['ag-grid-vue']」として必要な値が取れるようです。なお、agGridとVueの本体もそれぞれ<script>で読み込む必要があります(ag-grid-community.jsもコメントアウトせずに置いておいて、ag-grid-vue.umd.jsをそれより後に追加してください)。
退会済みユーザー

退会済みユーザー

2020/11/25 09:11 編集

javascriptについては、下記の順番に読込して、 <script src="~/lib/vue/vue.global.js"></script> <script src="~/lib/ag-grid/ag-grid-community.js"></script> <script src="~/lib/ag-grid-vue/dist/ag-grid-vue.umd.js"></script> Chromeのデバッグ Consoleでその読込を確認しました。 Watchで window['ag-grid-vue'] を確認してみましたが、undefinedとなっています。 また、下記のエラーが発生していました。 vue-class-component.esm.js:236 Uncaught TypeError: Right-hand side of 'instanceof' is not callable at componentFactory (vue-class-component.esm.js:236) at vue-class-component.esm.js:311 at __decorate (tslib.es6.js:56) at AgGridVue.ts:15 at Module.fae3 (AgGridVue.ts:198) at __webpack_require__ (bootstrap:19) at bootstrap:83 at bootstrap:83 at webpackUniversalModuleDefinition (universalModuleDefinition:9) at universalModuleDefinition:10 エラーがでていない場合、undefinedでない場合は、下記の設定になるのかと考えています。 components: { AgGridVue: window['ag-grid-vue'] }, それぞれのバージョンについて ag-grid@24.1.0 ag-grid-vue@24.1.1 vue@3.0.2 importの問題は、windowの利用で解決しそうな気はしますが、 ag-grid-vueの読込トラブルとなってしまい、申し訳ございません。
退会済みユーザー

退会済みユーザー

2020/11/26 00:44

<script src="~/lib/ag-grid-vue/dist/ag-grid-vue.umd.js"></script> で、ag-grid-vue の次に distフォルダがあるため、windowで取得できないようです、 解決方法を調べていますが、まだ解決できていないです。すみません。
退会済みユーザー

退会済みユーザー

2020/12/07 02:55 編集

解答欄に移動
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問