Velo 第６６回　Velo の学び方（２）

2024年10月29日 13:46

Wix Learn を見よう！

Wixでは教育用ビデオライブラリーが用意してあります。
もちろん英語ですので敷居を高く感じるかもしれません。
しかし日本語字幕が付いていますので安心して下さい。

また英文の台本もついていますのでじっくり調べたいときにはこの台本を活用することもできます。

初めて Velo に挑戦するときは「Start Coding With Velo」、少し慣れてきたら「Coding With Velo: Frontend」など、学習段階や目的に合わせて視聴すると効果的です。
いきなりバックエンドの話を視聴するとか、全部通しで視聴するとか、チャレンジの仕方は人それぞれですが、かかる時間の割には効果はない様に思います。

Examples を見よう！

分からないときは真似をするのが基本です。
真似ることで学習の方法と内容を身に着けることが出来ます。
下図の様に Velo サイトには Documentationメニューがあって有益な情報が満載されています。
先程の Wix Learn もこのメニューに収められています。
そして最下段の Examples には実際のサイトとそのコーディング例が載っています。

例えば Hello Data という Example を選んでみると、下図のように実際のページの例が現れ、Edit Now ボタンをクリックすると自分のアカウントにサイトを構成してくれます。

また、このサイトの説明、コーディング等々も示してくれます。

まさに解答集のような感じです。
ただし全文英文ですので、ある程度 Velo に慣れてコーディングの勘所が分かってからの利用が適当かと思います。
業務でVeloを使うような場合にはもってこいの例文集となります。

ここに掲載されているコードやオブジェクトをAPIレファレンスやJavascriptの教科書で調べることで、コーディング力もモリモリ付いてきます。

上の図でも冒頭に import文、WixDataモジュール、$w.onReady( )ページ初期化関数、async/await演算子、WixDataクエリー等、Velo の核となる構文が満載です。

AIを使ってみる？

この世界、とても便利になっています。使わない手はないですね。次のようなお願いをしてみました。

$w('#myText') に $w('#inputText') から入力した値を表示し、その値をコレクション $w('#myCollection') のフィールド name に保存する Veloコードを書いて欲しい。

するとあっという間に以下の様に意図した回答をしてくれました。ご丁寧に送信ボタンまでつけてくれています。

import wixData from 'wix-data';

$w.onReady(function () { // ボタンがクリックされたときのイベントハンドラ 
　　$w('#submitButton').onClick(() => { // 入力された値を取得 

　　　　const inputValue = $w('#inputText').value;

　　　　// 取得した値を#myTextに表示
　　　　$w('#myText').text =　 inputValue;

　　　　// コレクションに保存するデータオブジェクトを作成
        const toSave = {
            name: inputValue
        };

        // コレクションにデータを保存
        wixData.save('myCollection', toSave)
            .then((result) => {
                console.log('データが保存されました:', result);
            })
            .catch((err) => {
                console.error('データの保存に失敗しました:', err);
            });
    });
});

このようにAIは使い物になります。ただし、「これで正しい」と判断できるから便利と思えますし、安心して使うこともできます。そうでなかったら随分危険だとも思います。そしてこれを繰り返すだけなら何ら学習にはなりません。AIは答え合わせの一つと思って学習を進めれば力が付くこと間違いなしです。

ヘルプセンターを利用しよう！

Velo を知るには Wix を知ろうと言うことです。Wixについてはヘルプセンターから問い合わせることが出来ます。
ダッシュボードからもHELPメニューがあり同じく利用できます。
本来英語版ですが、幸い日本語版も用意されています。

前回の記事

Velo開発のご依頼はこちら