Wix CodeでWebアプリを簡単に構築する方法｜データベース・動的ページ・JavaScript活用ガイド

本記事はWix提供のスポンサード記事です。内容および意見は編集の独立性を保った執筆者自身の見解であり、スポンサーの影響を受けるものではありません。

はじめに：Webサイト制作の2つのアプローチ

Webサイトを作成する場合、開発者であればDIY方式でコードを書き、ホスティングまですべて自分で行うことができます。一方、多くの一般ユーザーにとっては、クリックだけで美しいサイトを作れる「Webサイトビルダー」が便利な選択肢となります。

Wixは後者に属するサービスで、マウス操作を数回行うだけで無料の美しいWebサイトを作成できるビルダーです。しかし「Wix Code」の登場により、DIY型開発とWebビルダーの境界線は曖昧になり、両方のメリットを同時に享受できるようになりました。

Wix Codeとは何か

Webアプリや動的なWebサイトを構築するには、通常、データベース、フォーム、JavaScriptといった専門的な技術知識が必要です。ほとんどのWebビルダーは、こうしたツールを提供していません。導入するとアプリが複雑になりすぎるためです。

Wix Codeは、既存のWebサイト構築ツールに複雑さを加えることなく、これらの機能を実装しました。データベースやフォームを構築・管理するためのテンプレートが複数用意されており、サイトにJavaScriptコードを追加することも可能です。

さらに注目すべきは動的ページ機能です。データベースのコンテンツを自動的にページへ反映できるため、Wixは単なるサイトビルダーではなく、CMS（コンテンツ管理システム）のような使い方ができます。

この記事では、シンプルなテック系ブログを例に、Wix Codeで動的な機能を追加する手順を解説します。

ステップ1：Wixで新規サイトをセットアップする

初めてWixを使う場合は、まずアカウント登録から始めましょう。アカウント作成後、Webサイトの作成画面が表示されます。

次に、作成したいサイトの種類を選択します。今回はテック系ブログを再現するため、「ブログ」オプションを選びました。

続いて、サイトの作成方法を尋ねられます。

Wix ADIは人工知能を活用して自動的にサイトを生成してくれる機能です。手動で細部まで調整したい場合は、Wixエディタを選択してください。なお、Wix Codeを利用するには後者が必要です（Wix ADIを選んだ場合でも、後からエディタモードへ切り替えることは可能です）。

今回はサイトのデザインを完全にコントロールしたいため、Wixエディタを使用しました。ここからテンプレート（数千種類あります）を選んで作業を開始します。

シンプルに進めるため、クラシックなレイアウトの空白テンプレートからスタートしました。以下がその初期状態です。

ステップ2：Wix Codeへのアクセス方法

Wix Codeを利用するには、メニューの「ツール」を開き、「開発者ツール」にチェックを入れます。

すると、新しい「サイト構造」というカラムが表示されます。Wix Codeのすべての機能には、ここからアクセスできます。

投稿を保存するデータベース（コレクション）の作成

Wix Codeの優れた機能の一つがデータベース機能です。データベース（コレクションとも呼ばれます）を作成し、そこにデータを保存できます。ブログの場合、すべての投稿を保存するためのコレクションが必要です。

データベースセクションで「新しいコレクションを追加」をクリックし、コレクション名と用途を指定します。ユーザー生成コンテンツ、会員投稿、プライベートデータなど、用途に応じて複数のデータベースタイプから選択可能です。

コレクションを作成したら、フィールドやデータの追加を開始しましょう。

ここでは、タイトル、本文、公開日などのブログ投稿情報を含む「Posts」データベースを作成しました。次に、このデータベースの内容をサイト本体に反映させていきます。

動的ページで投稿を自動生成する

動的ページはいわば「テンプレートページ」です。デザインを一度作成してデータベースと接続すれば、データベース内の全項目がそれぞれ固有のURLでフロント側に自動的に表示されます。

たとえば、データベースに6件の投稿がある場合でも、たった1つの動的ページを作るだけで、すべての投稿をメインサイトに表示できます。投稿ごとに個別ページを手作業で作る手間が省けるのです。

Wix Codeの動的ページには主に2種類あります。1つは単一アイテムを表示するためのもので、もう1つはカテゴリ（類似アイテムをリスト形式でまとめたもの）用です。

以下、動的ページを作成してサイトにリンクさせる具体的な手順を紹介します。

1. 浮遊ツールバーの最初のアイコンをクリックし、「動的ページ」を選択します。「サイトに追加」ボタンを押してください。

2. ポップアップから「アイテムページ」を選択します。

3. URL設定で、URLとして使用したいデータベースのフィールドを選びます。ここでは「タイトル」をURLに設定しました。

4. 次にページをデザインし、データベースのフィールドを配置していきます。ページにドラッグした各要素に対して「データに接続」ボタンをクリックすることで、データベースのフィールドと紐付けられます。たとえば「見出し1」要素をページにドラッグし、Postsデータベースの「タイトル」フィールドに接続する、という具合です。

同様に、アイキャッチ画像や本文なども接続します。

5. デザインが完了したらプレビューで確認し、フロント側での見え方をチェックしましょう。

6. 最後に、ホームページから動的ページへのリンクを設定します。ホームページを読み込み、「リスト＆グリッド」セクションからリピーターウィジェットを追加してください。ウィジェットをPostsデータベースに接続し、ウィジェット内の各要素をデータベースのフィールドと紐付けます。「リンクの接続先」セクションを下にスクロールし、動的ページセクションの「Posts」を選択すれば完了です。

これで完成です。

ポイントは、作成した動的ページはたった1つだけということです。それがデータベース内の各アイテムのページを自動的に生成してくれます。同じ要領で、カテゴリ用の動的ページも追加できます。

JavaScriptでページに機能を追加する

JavaScriptのコーディングに慣れているなら、各ページに自由にコードを追加して機能を拡張できます。たとえば、ユーザーフォームを設置した場合、送信前にフォームフィールドの入力値を検証する処理を組み込むことが可能です。

補足： ページにJavaScriptコードを追加するには、対象のページを開き、下部にある「ページコード」ボタンをクリックします。ウィンドウが表示されるので、そこにコードを記述してください。

実践例： 名前（姓・名）とメールアドレスを収集する簡単なフォームを作成しました。このフォームでは、メールアドレスの妥当性を検証し、「確認用メールアドレス」フィールドが「メールアドレス」フィールドと一致していることをチェックします。

「ページコード」セクションに以下のコードを追加します。

$w.onReady(function () {

	const validateEmail = (otherEmailElementId) => (value, reject) => {
		let otherEmailElement = $w(otherEmailElementId);
		if (value === otherEmailElement.value) {
			otherEmailElement.validity.valid = true;
			otherEmailElement.resetValidityIndication();
			return;
		}
		console.log("Email and Confirm Your Email fields do not match");
		otherEmailElement.validity.valid = false;
		otherEmailElement.updateValidityIndication();
		reject("Email and Confirm Email fields do not match");
	};
	$w("#emailConfirmInput").onCustomValidation(validateEmail("#emailInput"));
	$w("#emailInput").onCustomValidation(validateEmail("#emailConfirmInput"));

	$w('#dataset1').onBeforeSave(() => {
		let validationMessage = '';

		if (!$w('#emailInput').valid) {
		    if (!$w('#emailInput').value)
			validationMessage += 'Please enter an email address\n';
		    else if ($w('#emailInput').value !== $w("#emailConfirmInput").value) {
			validationMessage += 'Email and Confirm Email fields do not match\n';
		    }	
                   $w('#validationMessages').text = validationMessage;
                   $w('#validationMessages').expand();		
                }
		else 
		    $w('#validationMessages').collapse();

        });
});

このコードによってメールアドレスが検証され、無効な場合はエラーメッセージが表示されます。

JavaScriptでできることはまだまだあります。詳しくは公式のサンプル集をご覧ください。

外部APIとの連携

唯一、少し難易度が上がるのがこのステップかもしれません。Wix Codeは外部APIと統合されており、Amazon、Dropbox、Googleドライブ、Twitter、IFTTT、Zapierなどのサードパーティサービスに簡単に接続できます。詳細は割愛しますが、興味のある方は公式のAPIドキュメントを参照してみてください。

まとめ：ノーコードとコードの良いところ取り

技術的な知識や開発経験がない場合、自力でWebサイトを構築するのは骨の折れる作業です。Wixはサイト制作を誰でも簡単に行える環境を見事に実現しています。さらにWix Codeを活用すれば、その一歩先へ——複雑な開発者向けツールを使いこなし、サイトの挙動を完全にコントロールすることが可能になります。しかも必要なのは、クリックとドラッグ＆ドロップだけ。コーディング経験は一切不要です。

こんなに扱いやすいツールを作り上げたWixの手腕には脱帽です。ぜひWix Codeを試して、あなたの感想も聞かせてください。