# 【InFiNiTO Club】プログラミング講座5回目
## 初期準備
Teams上にアップロードした資料をダウンロードしてください。
Zipファイルですので解凍してデスクトップにフォルダを配置してください。
このフォルダをVsCodeで開いた状態で授業に進んでいきます。

本日使う授業フォルダに入っているもの。

chat.html
object.html
Firabase.pdf
sample/chat_complete

## セクション１　多次元配列
### 1-1 VsCode上でobject.htmlを開いて配列の中身を表示する。

console.log(data[0]);

### 1-2 続いて多次元配列を書いてコンソールにデータを表示してみましょう。

let datas = [
    ["中野","田中","山田"],
    ["石田","青山","山本"]
];

console.log(datas);
console.log(datas[0][1]);

配列の中に更に配列を書くことで複合的なデータ管理ができます。
これを多次元配列と呼びます。

## セクション2　オブジェクト
### 2-1 object.htmlに新たにオブジェクトを記述する

// オブジェクト
let names ={name1: "中野",name2: "田中",name3: "山田"};

console.log(names);
console.log(names.name1);

オブジェクトの形式は以下の通りです。
{ キー:値 }
自由に決めれるキー名と対応する値をワンセット（プロパティ）とします。
呼び出し方はオブジェクト内のkey名を指定します。

### 2-2 オブジェクトの値を更にオブジェクトにすることも可能

let teams = {
    team1: {member1: "中野",member2: "田中",member3: "山田"},
    team2: {member1: "石田",member2: "青山",member3: "山本"}
}

onsole.log(teams);
console.log(teams.team1.member1);

### 2-3　テンプレートリテラルの構文でオブジェクトからデータを受け取りHTMLで表示

// テンプレートリテラル ``バックコートと${}で書く
$("#reslut").html(`<h1>${teams.team1.member1}</h1>`);

## セクション3　JSONについて
### 3-1 object.html先ほど作ったオブジェクトをJSON化する。

let json_teams = JSON.stringify(teams);
console.log(teams);
console.log(json_teams);

JSON化とはデータを単純な文字列に変更する処理です。
変数やオブジェクトなどのデータ形式では他のプログラミング言語などに送る（送信）ことができないのでJSON形式の文字列にする事によって送信等が可能になる。
外部APIなどweb上でデータのやり取りをする時はJSON形式が一般的です。

### 3-2 JSON化されたデータを元に戻す処理

// JSONを元に戻す処理parse
let data_teams = JSON.parse(json_teams);

console.log(data_teams);

JSON形式(文字列)で送られてきた情報は元のデータ型に戻して利用します。

## セクション4　リアルタイムチャットの実装
### 4-1 まずは以下のリンクからFirebaseにログインします。Googleアカウントでログインできます。
https://firebase.google.com/?hl=ja

### 4-2 プロジェクトを以下の手順で作成していきます。

１： 画面右上のコンソールへ移動をクリック
2: 画面中央のプロジェクト追加をクリック
3: プロジェクト名(自由に決めてOK)を決めて続行をクリック
4: Googleアナリティクスのチェックを外してプロジェクトを作成
5: プロジェクトが完成したら続行をクリック

ここでは開発用のプロジェクトを立ち上げています。

### 4-3 Firabaseのプロジェクト管理画面が表示されたらアプリを追加します。

１： 管理画面トップの「アプリにFirebaseを追加して利用を開始しましょう」の下にあるアイコンのウェブをクリック
2: アプリ名(chat)を入力してアプリを登録します。（チェックは入れません）
3: FirebaseSDKの追加で「<script>タグを使用する」にチェック
4: 下に表示されたスクリプトをコピーします。
5: コンソールに進むをクリック

この手順でWeb用アプリを立ち上げてAPIkeyを発行しています。

### 4-4 先ほどコピーしたSDKをchat.htmlを開いて29行目にコピペ

<script type="module">
  // Import the functions you need from the SDKs you need
  import { initializeApp } from "https://www.gstatic.com/firebasejs/9.12.1/firebase-app.js";
  // TODO: Add SDKs for Firebase products that you want to use
  // https://firebase.google.com/docs/web/setup#available-libraries

  // Your web app's Firebase configuration
  const firebaseConfig = {
    apiKey: "*********************************",
    authDomain: "****[ Your Firebase KEY ]****",
    databaseURL: "****************************",
    projectId: "**********",
    storageBucket: "**************************",
    messagingSenderId: "**********************",
    appId: "**********************************",
  };

  // Initialize Firebase
  const app = initializeApp(firebaseConfig);
</script>

先ほどのSDKを貼り付けたHTMLからFirabeseにアクセスすることができるようになりました。

### 4-5 Firabaseのコンソール画面に戻って認証設定

１： 管理画面トップの「Authentication」をクリック
2: 始めるをクリック
3: ログイン方法の追加パネルで「匿名」をクリック
4: 匿名を有効にして保存

この手順で誰でもアクセスできる状態に変更しました。

### 4-5 Firabaseのコンソール画面からデータベースを作成します。

１： 管理画面左側にあるメニューから構築のプルダウンを開きます。
2: Realtime Databaseをクリック
3: 表示された画面のデータベースを作成をクリック
4: ローケーションは米国で次へをクリック
5: テストモードで開始するにチェックを入れて有効にするをクリック

これでリアルタイムデータベースが構築され利用できるようになりました。

### 4-6 chat.html側にFirebaseのライブラリコードを1行追加します。
この1行です。

//この1行を追加します。超超重要です。
//この1行を追加します。超超重要です。
    import { getDatabase, ref, push, set, onChildAdded, remove, onChildRemoved } from "https://www.gstatic.com/firebasejs/10.0.0/firebase-database.js"

場所はSDKのscriptタグから５行目辺りです。

<!--** 以下Firebase **-->
<script type="module">
    // Import the functions you need from the SDKs you need
    import { initializeApp } from "https://www.gstatic.com/firebasejs/9.12.1/firebase-app.js";
    // TODO: Add SDKs for Firebase products that you want to use
    // https://firebase.google.com/docs/web/setup#available-libraries

    //この2行を追加します。超超重要です。
    import { getDatabase, ref, push, set, onChildAdded, remove, onChildRemoved } 
    from "https://www.gstatic.com/firebasejs/9.12.1/firebase-database.js";
  
// Your web app's Firebase configuration
       ・・・以下省略

### 4-7 chat.html上でデータベース接続開始処理を記述します

・・・上記省略
// Initialize Firebase
const app = initializeApp(firebaseConfig);

//ここからコード記述開始
const db  = getDatabase(app); //RealtimeDBに接続
const dbRef = ref(db,"chat"); //RealtimeDB内の"chat"を使う（存在しない場合は自動作成）

### 4-8 まずは送信のクリックイベントを作成

//データ登録(Click)
$("#send").on("click",function() {
    const msg = {
        uname: $("#uname").val(),
        text: $("#text").val()
    }
    const newPostRef = push(dbRef); //ユニークKEYを生成
    set(newPostRef, msg);           //"chat"にユニークKEYをつけてオブジェクトデータを登録
});

### 4-9 リアルタイムにデータを読み込む処理を作成

//最初にデータ取得＆onSnapshotでリアルタイムにデータを取得
onChildAdded(dbRef, function(data){   
    const msg  = data.val();    //オブジェクトデータを取得し、変数msgに代入
    const key  = data.key;      //データのユニークキー（削除や更新に使用可能）

    //表示用テキスト・HTMLを作成
    let h = `<p>${msg.uname}<br>${msg.text}</p>`;

        $("#output").append(h); //#outputの最後に追加
});

### 4-10 エンターキーを押したら送信になるようにコード追記

//データ登録(Enter)
$("#text").on("keydown",function(e){
    console.log(e);        //e変数の中身を確認！！
    if(e.keyCode == 13){   //EnterKey=13
        const msg = {
            uname: $("#uname").val(),
            text: $("#text").val()
        }
        const newPostRef = push(dbRef); //ユニークKEYを生成
        set(newPostRef, msg);           //"chat"にユニークKEYをつけてオブジェクトデータを登録
    }
});