
Velo 第98回 add( )とsave( )
今回はデータセットの2つのメソッド、add( ) と save( ) の違いを考えてみましょう。
データセットはコレクションとページエレメントを媒介するオブジェクトです。
ノーコードでもページエレメントをデータセットにリンクするだけで読み、書き、表示を自動的に行ってくれる優れものです。
さて、データセットにはアイテムの作成、保存を操作する add( ) と save( ) というメソッドがありますが、日本語で「追加」と「保存」と思ってしまうので、一緒?と意味が混乱する場合があります。
いずれのメソッドもデータセットの「書込み」プロパティが有効でないと使えません。
さてコレクション(myCollection)は下図の様になっています。
このコレクションに対しデータセット(myDataset)がリンクしています。

またページには番号フィールドにリンクした入力欄(numberInput)とボタン(addButton)が設置してあります。
このとき2つのメソッドの挙動を確かめてみましょう。
ただし入力欄は未入力でも動作する様に「必須項目」のチェックを外しています。

add( )
APIリファレンスの記述は以下の通りです。
Adds a new blank item.
The add() function saves the current item and then adds a new blank item. When the editing of the new item is complete, you will need to call another function that will save the new item.
コレクションにカレントアイテムを保存し、データセットに新規ブランクアイテムを追加するメソッドです。
新規アイテムの保存には別のメソッドを呼び出さなければなりません。
下図をご覧下さい。ボタンクリックで add( ) を実行するだけのコーディングです。

読み書きモード
データセットが読み書き可能に設定されている場合にプレビューしてみましょう。下図をご覧下さい。

先ず入力欄は「7」に設定されています。
これはデータセットにカレントアイテム(コレクションの最初のアイテム)がリンクされている証拠です。
次にボタンクリックをしてみましょう。下図をご覧下さい。

メソッドが実行され入力欄が未定義になっています。
新規ブランクアイテムがデータセットに追加された証拠です。
最後にコレクションを確認してみましょう。下図をご覧下さい。

カレントアイテムが保存されただけなので、何も変わっていません。
書き込みモード
データセットが書き込み可能に設定されている場合にプレビューしてみましょう。下図をご覧下さい。

先ず入力欄はプレースホルダーのままです。
これは書き込みモードではデータセットに新規アイテムがリンクされるからです。そしてこれがカレントアイテムになります。
次にボタンクリックをしてみましょう。下図をご覧下さい。

新規アイテムが追加されましたが先ほどと同じです。
しかしコレクションを見ると下図の様に未入力のアイテムが保存されました。
リファレンスの説明の通りです。

入力欄以外にもコーディングでアイテムに入力することは可能です。
下図をご覧下さい。
6行目でカレントアイテムの titleフィールドに 'Who' を書き込んでいます。

プレビューして下図の様に入力欄に「200」を入力してボタンを押してみましょう。

コレクションには入力欄の「200」とコーディングの「Who」が保存されています。

save( )
APIリファレンスの記述は以下の通りです。
Saves the current item.
The save() function returns a Promise that is resolved to the saved item when:
● The current item is saved in the collection.
● Any connected page elements have been updated with the current item’s new values (read & write mode) or a new blank item (write-only mode).
コレクションにカレントアイテムを保存し、データセットに結合したページエレメントの内容を更新するメソッドです。
下図をご覧下さい。ボタンクリックで save( ) を実行するコーディングです。15行目でカレントアイテムの titleフィールドに 'Who' を書き込んでいます。

読み書き込みモード
データセットが読み書き可能に設定されている場合にプレビューしてみましょう。下図の様に入力欄に300を入力してボタンをクリックします。

新しいアイテムは作られませんのでページ上の表示は変わりません。しかしコレクションデータは下図のように入力したフィールドがアップデートされています。リファレンスの説明通りです。

書き込みモード
書き込みモードではカレントアイテムは常に新規アイテムから始まります。従ってボタンを押すたびに新規アイテムがコレクションに保存されます。下図をご覧下さい。
入力欄に300を入力し一度ボタンをクリックし、今度は入力欄に400を入力しています。

もう一度ボタンをクリックすると下図の様になります。

書き込みモードなので入力欄にはプレースホルダーが表示されています。このモードではカレントアイテムは常に新規アイテムにリフレッシュされます。
コレクションを見てみましょう。下図をご覧下さい。ボタンをクリックするたびにアイテムが保存されていることが分かります。

まとめ
読み書きモード
add( ) はデータセットに新規アイテムを追加するのみでコレクションに変化はありません。save( ) はカレントアイテムをアップデートしてコレクションに再保存します。
従ってこのモード時に新規アイテムをデータセットに保存するためには add( ) と save( ) の両方のメソッドを使わなければなりません。
書き込みモード
add( ) も save( ) も新規アイテムをコレクションに保存します。
Velo開発のご依頼はこちら