【初心者向け】CloudFirestoreに書き込んだデータの呼び出し

はじめに
下準備
1. googleログイン
2. VSCodeにSDKを設定
  1. SDKのコピー
  2. VSCodeに貼り付け
コードの実行
1. テスト
2. データ呼び出し用コード
まとめ

はじめに

前回CloudFirestoreへのデータ入力方法をご紹介しました。(前回の記事はこちら)

今回はCloudFirestoreに入力されたデータをVisualStudioCode(VSCode)で呼び出す方法をご紹介します。
呼び出すにはjavascriptを使います。
javascriptに不安のある方はprogateやスクールなどで学習する方法もあるので検討してみてはいかがでしょうか^^(こちらの記事を参考にしてください)

では早速見ていきましょう！

下準備

googleログイン

まずはVSCodeのターミナルを使ってグーグルにログインします。

前の手順で作成したVSCodeを起動し、画面下のターミナルを使用します。
※ターミナルが表示されていない場合は、「表示→ターミナル」で表示できます。

①ターミナルに以下のように入力してください。

firebase login

このように表示される場合は既にログイン済みなので以降は飛ばしてください。

表示されない場合は以下のような画面がでると思います。

②ログインするアカウントを選んでください。

③内容を確認して許可で進みます。

こうなればログイン完了です。

VSCodeにSDKを設定

VSCodeにSDKを設定していきます。
この作業で今使っているPCとFirebaseを連携させることができます。

SDKのコピー

まずはSDKを探します。
Firebaseコンソール(Firebaseのメインページ)の左上にある歯車マークをクリックします。

全般タブの画面下の方にある

この部分を全てコピーします。
これを基にサイト情報がリンクします。

VSCodeに貼り付け

コピーしたデータを以下の手順で貼り付けます。

まずVSCodeのエクスプローラー(画面左※表示されない場合は「表示→エクスプローラー」)の「public」フォルダに「app」フォルダ、その下位に「javascript」フォルダ作り、その中に新規にjavascriptファイル(config.js)を作成します。(public/app/javascript/config.js)
そこに先ほどコピーしたSDKを貼り付けます。

コードの実行

ではVSCodeを実行していきましょう。

テスト

まずはきちんと動くか、何も変更せずに実行してみます。

ターミナルに

firebase serve

と入力してエンターを押してください。
以下のように出れば仮想サーバーの起動ができています。

chromeを開いてアドレスバーに「localhost:5000」と入力してください。

この画面が表示されればOKです。

データ呼び出し用コード

いよいよデータ呼び出しのコードを書いてきます。

まず元々入っていたコードを消します。

index.htmlに以下のようなコードが既に書いてあると思いますので全て消します。

空になったindex.htmlに以下のコードをコピペしてください。

<!DOCTYPE html>
<html lang="ja">
  <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>PapasSampleProgram</title>

  <script src="https://www.gstatic.com/firebasejs/8.2.2/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/8.2.2/firebase-auth.js"></script>
  <script src="https://www.gstatic.com/firebasejs/8.2.2/firebase-analytics.js"></script>
  <script src="https://www.gstatic.com/firebasejs/8.2.2/firebase-firestore.js"></script>
  <script src="https://www.gstatic.com/firebasejs/8.2.2/firebase-database.js"></script>
  <script src="https://www.gstatic.com/firebasejs/ui/4.6.1/firebase-ui-auth__ja.js"></script>
  <link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/4.6.1/firebase-ui-auth.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js" type="text/javascript"></script>

  <script src="./app/javascript/config.js"></script>

  </head>
  <body>
    
    <h1>HelloWorld</h1>

  </body>
</html>

<title>PapasSampleProgram</title> と <h1>HelloWorld</h1> は好きなものに変えてOKです。

ここで念のためjavascriptにパスが通っているか確認します。

./app/javascript/config.js の上でコントロールを押しながらクリックしてください。
エラーが出ずに先ほど作ったSDKが表示されればOKです。
エラーが出る場合はフォルダ・ファイル名にミスがあるか、階層に問題があるので戻って確認してください。

では作成したページに呼び出し用のコードを書いていきます。

<h1></h1>の下に以下のコードを貼り付けてください。

<script type="text/javascript">
      var db = firebase.firestore()
      db.collection("users").doc("username").get().then(snapshot =>{
        console.log(snapshot.data())
      })

    </script>

これでFirestoreに保存したデータを呼び出すことができます。

確認してみましょう。

①firebase serveで仮想サーバーを起動します。
②chromeを開きlocalhost:5000にアクセスします。

この段階では何も表示されていないと思います。
正しく呼び出されているかは、

①画面の空白の上で右クリック