まず、チャットのログ画面とチャットの文字入力枠を作りました。 bodyにdiv要素を作り、id名を付けてあげます。cssでborderを付けてあげて幅や高さをつけました。 これでチャットの文字がここに出力されるようにします。文字入力するところでは、formのinputタグでinputにもid名を付けておきました。 先輩からの最初の課題は、チャット画面にjsonファイルの中にある文字列を出力するという事です。
モックで使われたjson形式になっているファイルがあったのでそのファイルの中にある文字列を画面に出力させます。 json形式は配列またはjavascriptにおけるオブジェクト（キーと値のペア）の形式になっていて、{"name":"いさむ"}というように{キー:値}の形になっています。
今回のチャット作りで重要な役割を果たすものがありました。それはjqueryのajax関数というものです。 ajaxはサーバーとのデータのやり取りを行う役目なのでajax関数でデータをサーバーに送る事ができます。 今まで、formタグでactionにリクエスト先やmethodでPOSTを指定するやり方しか知らなかったので、このajax関数を 使えば、リクエスト先のURLやどのようなDataをサーバーに送信するかとか、通信が成功したときの処理などをajaxで操作することができます。
サーバー側では、jsonファイルを読み込みその読み込んだものをレスポンスとしてクライアント側に 返すという流れになります。
本日はjsonファイルの中身を表示することができなく、jsonとajaxがどういう物なのかもしっかり理解することが できず。明日には表示させるようにしたいと思います。
1月9日 宮本 勇