Velo by Wix の入門書

Velo by Wix をご利用いただきありがとうございます！ 下記は、Velo で高度なウェブアプリケーションを作成しようという皆さんをお手伝いするためのリソースとなっています。 学習のアプローチはひとそれぞれです。そのため、ここではさまざまな動画、記事、チュートリアルを組み合わせてまとめました。 各リソースでは、おおよその学習時間と学習内容の概要を表示しています。

上の動画と同じく、こちらの記事でも、Velo のすべての機能の概要を説明します。 ここでは、一部、技術的な特徴内容を紹介するとともに、すべての学習リソースへのリンクを提供します。

Velo の API を使用すると、新しい方法でWixサイトを管理できます。 こちらのチュートリアルと動画では、さまざまなユーザー操作に、それぞれ異なった対応をするために、サイトにロジックを追加する方法を説明します。 このチュートリアルでは、さらにコードに着目して、以下のコントロールで作業します。

• 「プロパティ＆イベント」パネル 

• 「コード」パネル

• 「サイト構造」サイドバー 

• イベントハンドラ

• アニメーション API

Velo のさまざまな機能をすべて組み合わせてサイトを最大限に活用すると、Velo のパワーを実感できます。 こちらの動画では、訪問者がユーザーレビューの追加と閲覧ができる旅行サイトを作成します。 動画内では次の機能を活用します。

• Wix データ

• ユーザー入力要素

• データセット（サイト要素をデータに接続します）

• リピーター（コレクションのコンテンツを無制限に 1 枚のページに表示）

• 「プロパティ」パネル

• コード

この動画では、高度な機能について説明します。

Velo の利点は、サイトの仕組みの内部に立ち入ってカスタム JavaScript をサイトに追加できることです。 つまり、Velo を利用すれば、Wix の持つパワーをフル活用することができます。 こちらのチュートリアルでは、「Hello World」を体験しながら、通貨換算機能を追加する過程について説明します。 チュートリアルでは、コードを中心に、以下の項目を紹介します。

• 「プロパティ」パネル

• 「コード」パネル

• $w.onReady 関数（ページの読み込み時にコードを実行）

• ドロップダウンをカスタマイズするコード

• getJSON() 関数（ネットワークから JSONリソース を取得）

Velo の全ての開発機能を試してみたい場合は、ここから始めてください。

Velo におけるすべてのコーディング作業は「コード」パネルで実行します。したがって、その機能を十分に把握しておけばサイト作成時に役立ちます。

• コードファイル

• プロパティ＆イベントパネル

• コードパネルツールバー

• Velo 構文と自動補完

• 参照する要素が読み込まれていることを確認する方法

• 要素の操作

• 警告とエラー

• メディアマネージャーの統合

• コードのテスト

• コードのバージョンの保存

Velo サイドバーには、ページ、ライトボックス、フォルダー、ファイル、パッケージ、データベースコレクションなど、サイトを構成するすべてのファイルが表示されます。

• Promise
• Arrow 関数
• 破壊的代入
• let 宣言と const 宣言
• async/await
• モジュールのサポート