# はじめてのスクリプト

> ページスクリプトでチャットルームの入室イベントを受け取り、案内行を表示し、メッセージを送ってみます。

設置したチャットルームにページスクリプトを追加し、入室したらあいさつの案内を表示し、ボタンでメッセージを送ってみます。[5分で設置](/ja/doc/1.2)を終えたページから始めます。

## コード全体 {#full-code}

次のコードを1つのHTMLファイルに貼り付けて開いてみてください。

```html
<!-- 1. 事前登録コード: uchat.jsより前に -->
<script>U=window.U=window.U||{},U.events=U.events||[],U.chat=function(n){return{on:function(e,t){U.events.push([n,e,t])},off:function(e){for(var t=U.events.length;t>0;)U.events[--t][0]==n&&U.events[t][1]==e&&U.events.splice(t,1)}}};</script>
<script async src="https://client.uchat.io/uchat.js"></script>

<!-- 2. チャットルーム -->
<u-chat room="my-room" style="display:inline-block; width:100%; max-width:500px; height:500px;"></u-chat>
<button id="hello" disabled>こんにちはを送る</button>

<!-- 3. ページスクリプト -->
<script>
var myRoom = null;

U.chat('my-room').on('after.join', function (room, data) {
	myRoom = room;
	document.getElementById('hello').disabled = false;
	room.print('入室しました。あなたのニックネームは ' + escapeHtml(data.my.nick) + ' です。');
});

U.chat('my-room').on('after.message', function (room, data) {
	if (data.user.nick !== room.my.nick) document.title = '新着メッセージ - ' + data.user.nick;
});

document.getElementById('hello').addEventListener('click', function () {
	if (!myRoom.action.send('こんにちは')) alert('今は送信できません。');
});

function escapeHtml(text) {
	return String(text).replace(/[&<>"']/g, function (c) {
		return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c];
	});
}
</script>
```

入室するとチャットルームに案内行が表示され、ボタンが有効になります。ボタンを押すと自分のニックネームで `こんにちは` が送信され、ほかの人が発言するとブラウザのタブのタイトルが変わります。

## 事前登録コード {#preload}

`uchat.js` は `async` で読み込むため、ページスクリプトが実行される時点ではまだ `U.chat` がないことがあります。1行目の事前登録コードは、`U.chat(...).on(...)` で登録したイベントを `U.events` に保管しておき、`uchat.js` の準備ができたらそのまま引き継ぎます。そのため、**`uchat.js` より前に**入れる必要があります。

事前登録コードを省くと、`U is not defined` エラーが出たり、イベントが登録されなかったりします。読み込み順序と、複数のチャットルームやSPAでの使い方は[非同期読み込みと複数のチャットルーム](/ja/doc/2.2)にあります。

## イベントを受け取る {#events}

```js
U.chat('my-room').on('after.join', function (room, data) { ... });
```

- `U.chat('room-id')` でチャットルームを選び、`.on(eventName, callback)` でイベントを登録します。
- コールバックは常に `(room, data)` の2つの引数を受け取ります。`room` はチャットルームオブジェクトで、`data` はイベントごとに異なります。
- `after.join` は入室が完了し、自分の情報を受け取ったときに発生します。`data.my` が自分の情報です。
- `after.message` はチャットメッセージ1行ごとに発生します。`data.user` が送信者、`data.content` が内容です。入室時に受け取る過去の会話や、自分が送ったメッセージでも発生します。

`before.` で始まるイベントで `false` を返すと、デフォルトの処理を止められます。イベントの一覧と止められるイベントは[イベント](/ja/doc/3.3)にあります。

## roomオブジェクトを使う {#room}

| 使うもの | できること |
| --- | --- |
| `room.print(html)` | 自分の画面にだけ案内行を表示します。ほかの人には見えません。値はHTMLとして解釈されるので、ユーザーの入力はエスケープしてから入れます。 |
| `room.action.send(message)` | 自分のニックネームでメッセージを送ります。接続前、内容が空、またはスローモードで待つ必要がある場合は `false` を返します。 |
| `room.my` | 自分の情報(`nick`、`auth` など)。入室前は空のオブジェクトです。 |

`room` のすべてのプロパティと関数は[U.chat() と room オブジェクト](/ja/doc/3.2)にあります。

## 次のステップ {#next}

- 会員のニックネームで入室させる → [会員連携](/ja/doc/2.1)
- チャットルーム内にボタンやダイアログを入れる → [スキンUIを拡張する](/ja/doc/2.3)
- 接続者同士でデータをやり取りする → [リアルタイムデータの送受信](/ja/doc/2.4)