【Velo by Wix】一歩先のWebサイトカスタマイズ

本日は、ノーコードツールとして人気のWixを、さらに一歩踏み込んで使いこなす方法をご紹介します。

WixはAIを活用して直感的にサイトを構築できる素晴らしいツールですが、開発モードである「Velo（ヴェロ）」を活用することで、より高度な動的機能の実装が可能になります。

Veloを支える「JavaScript」の力

「Velo」では、世界で最も普及しているプログラミング言語の一つであるJavaScriptを使用します。

「プログラミングなんて難しそう……」と思われるかもしれませんが、基本的なルールさえ理解すれば、FPの実務で役立つ「簡易シミュレーター」なども自作できるのです。

実践例：車両保有コストの自動計算プログラム

例えば、6年間の維持費を含めた車両総費用を算出するシンプルなボタンを作ってみましょう。

以下は、ボタンをクリックした際に計算を実行するコードの例です。

JavaScript　※わかりやすくするために名称に一部日本語を使用しております。

/**
 * 計算ボタン（#計算button）をクリックした時の動作
 */
$w('#計算button').onClick((event) => {

    // 1. 画面の入力フォームから値を取得
    const carPrice = Number($w('#input車両購入費用').value);
    const annualTax = Number($w('#input車両税金').value);

    // 2. 計算の実行（車両価格 ＋ 自動車税6年分）
    const totalCost = carPrice + (annualTax * 6);

    // 3. 計算結果を画面上のテキスト要素に表示
    $w('#車両総費用').text = String(totalCost) + " 円";
    
});

コードのポイント解説

• アロー関数 (event) => { ... } モダンなJavaScriptの書き方で、処理をスマートに記述できます。

• 型変換 Number() 入力フォームの値は「文字」として扱われるため、計算前に「数値」へ変換するのがコツです。

• ユーザー体験の向上 単なる静的なホームページが、これだけで「動く計算ツール」へと進化します。

専門知識 × テクノロジーで新しい価値を

社労士・FPとしての実務知識をシステムに落とし込むことができれば、顧客への提案の幅は無限に広がります。 「AIに作ってもらうサイト」から、「JavaScriptで意思を吹き込むサイト」へ。

皆さんも、一歩踏み出したWeb制作に挑戦してみませんか？