皆さん、今日はWix Studioの開発環境に慣れ、最初のコードを書いてみましょう。
Dev環境を開くには、中括弧をクリックし、"Start coding "をクリックしてDev環境のセットアップを初期化する。
ページコードには、以下のセクションがある：
* フロントエンド開発ツールの概要
* 各ページのコード：マスターページでは、すべてのページで実行されるコードを追加することができます。この下に、CSS、パブリックおよびバックエンドのJavaScriptファイル、カスタム拡張機能を追加できます。
* コードベースの検索、CMSコレクションへのアクセス、npmパッケージ、VS Codeパッケージ、カスタムアプリのインポート、GitHubへの接続とローカルでの作業、その他様々な開発者ツールへのアクセス。
では、エディター内IDEを探ってみよう：
* このタブは作業中のファイルを示します。
* API ドキュメントへの参照があり、その下に `$w.onReady` 関数があります。この関数はすべてのページに含まれ、フロントエンドのページコードの大部分がここにあります。この関数は、ページがロードされ、インタラクションの準備ができたことを示します。
* 右側には、プロパティとイベントのパネルがあります。ビジュアルエディタで要素が選択されると、要素ID、デフォルトの可視性、イベントハンドラにアクセスできます。CSSクラスもここにあります。このパネルの上には、VSコードベースのIDEに接続するためのボタン、コードをプレビューするための実行ボタン、コード・フォーマッタ、IDEを最大化・最小化するためのボタンがあります。 さて、慣れたところでコードを書いてみよう：
* まだの場合は、ページにボタンとテキスト要素を追加し、デフォルトのテキストを更新してください。
* コードの最初の行は、text要素のデフォルトテキストを更新するボタンのクリックイベントハンドラになります。
* 関数 `$w.onReady` の中で、`$w` と括弧の中にボタンの ID を入力して、クリックハンドラを書く要素をターゲットにします。
* ボタンの ID でエラーが発生しました。ビジュアル・キャンバスに要素を追加すると、デフォルトの ID が与えられます。ベストプラクティスは、コードで操作する各要素に意味のある ID を追加することです。IDは要素をクリックしてプロパティパネルで確認できます。
* ボタンを好みのIDに更新し、続ける前にtext要素のIDも更新しましょう。これで、ボタンIDのエラーがなくなったことがわかります。
* では、ボタンのクリック・イベントを作りましょう。クリックイベントのボディに、テスト用のコンソールログ文を追加しましょう。 * もう一度 `$w` と入力し、今度は利用可能なIDのリストを見て、テキスト要素のIDを選んでください。ビジュアル・キャンバス内のすべての要素が、オートコンプリートで利用可能なIDを持つことになります。
* では、「実行」をクリックしてコードをテストし、プレビュー・モードでその動きを見てみよう。
* 下部に開発者コンソールがあり、ログやエラーメッセージが表示されます。* ご覧のように、テキストは更新され、ログはクリックのやりとりを示しています。* コードをWix Studioの本番環境にプッシュするには、"Publish "ボタンをワンクリックします。これで変更が反映されました。* これはWix Studioでの開発者としての旅の始まりに過ぎません。私たちは、あなたが次に何を作るか楽しみにしています！
