Velo 第６３回 Webメソッド
バックエンド関数をフロントエンドで呼び出す仕組みが変わった様です。
従来はバックエンドに .jsw 拡張子を付けたファイルで webモジュールを作成していましたが、今は .web.js 拡張子を付けたファイルに記述するようになっています。
書き方も違っていますのでまとめてみました。
Webメソッド
従来のバックエンド関数をパーミッションを付けてラッピングするメソッドです。
つまりその関数が使える人を限定する情報を同時に送ることになります。
ここでは簡単な掛け算を与える関数 multiply をバックエンド関数としてエクスポートし、フロントエンドでインポートして実行するコーディングを見てみましょう。
バックエンドファイルの作成
下図のようにサイドバーでバックエンドと公開({ })をクリックし、さらに追加(⊕)をクリックし、メニューから「Webモジュールを追加NEW」を選択します。従来の .jsw は非推奨に格下げされています。
もちろん現状でも動作しますがセキュリティー関係で推奨されていないようです。
ファイルの名前は myModule.web.js にしてあります。
ダブル拡張子になっているのは multiply 関数をフロントエンド側でインポートするときにモジュール名 myModule.web が使われる仕組みの様です。
さて myModule.web.js にコーディングをしましょう。
簡単な掛け算の関数です。
コードパネルにはファイル名のタブが表示されています。
以下にコーディングを見ておきましょう。
ほぼ定型文ですので一度覚えてしまうと後々困ることはありません。
１行目はお約束です。
Permissions が enum という列挙変数でwebMethodがラッパー関数です。
３行目でmultiply関数を定義しています。
webMethod ラッパー関数は２つの引数を取っています。
１つ目はパーミッションです。
２つ目は実行関数で、ここではアロー関数で定義しています。
名前のある関数ならばここに関数の名前を書けばOKです。
パーミッション
パーミッションのオプションは Anyone、SiteMember、Admin の３種類が用意されています。
通常、誰でも使えるようにするには AnyoneでOKですが機能をログインしているメンバーに制限する場合はSiteMember になります。
ページコードの作成
フロントエンド(ブラウザー)で multiply 関数を呼び出すためにはページコードにインポートが必要です。
以下の様にページコードを開けてみましょう。
ここではテキスト(text1)に計算結果を表示するコーディングを行っています。
１行目で multiply 関数をインポートしています。ここで関数のインポート元が backend/myModule.web になっている事に注意しましょう。
先に作ったWebモジュールのダブル拡張子 .web.js のうち .js が外れています。注意しましょう。
戻り値はプロミス
最も注意することはバックエンド関数を呼び出したときの戻り値がプロミスであることです。
上記コーディングでも async/await 演算子を使ってプロミス対応をしています。これはサーバーからの返答を待つために必要です。
単純に「const value = multiply(4, 5)」としてもプロミスが返ってくるだけで数値は得られません。
実行結果
ページの表示と同時に計算結果の20がテキストに表示されます。
Velo開発のご依頼はこちら
この記事が気に入ったらサポートをしてみませんか？