概要

このラボでは、ケーススタディ用のアプリケーションであるオンライン クイズ アプリケーションについて確認し、そのデータを Cloud Datastore に保存します。

クイズ アプリケーションのスケルトンはあらかじめ用意されています。まず、Google Cloud Shell を使用してこのスケルトンを含むリポジトリのクローンを作成し、Cloud Shell コードエディタでコードを確認します。次に、Cloud Shell のウェブ プレビュー機能を使用してアプリケーションを表示します。

その後、Cloud Datastore を使用してデータを保存するようにコードを変更します。

目標

このラボでは、次のタスクの実行方法について学びます。

• Cloud Shell を開発環境として利用する。

• Cloud Datastore を NodeJS アプリケーションに統合する。

設定と要件

各ラボでは、新しい Google Cloud プロジェクトとリソースセットを一定時間無料で利用できます。

1. Qwiklabs にシークレット ウィンドウでログインします。

2. ラボのアクセス時間（例: 1:15:00）に注意し、時間内に完了できるようにしてください。
   一時停止機能はありません。必要な場合はやり直せますが、最初からになります。

3. 準備ができたら、[ラボを開始] をクリックします。

4. ラボの認証情報（ユーザー名とパスワード）をメモしておきます。この情報は、Google Cloud Console にログインする際に使用します。

5. [Google Console を開く] をクリックします。

6. [別のアカウントを使用] をクリックし、このラボの認証情報をコピーしてプロンプトに貼り付けます。
   他の認証情報を使用すると、エラーが発生したり、料金の請求が発生したりします。

7. 利用規約に同意し、再設定用のリソースページをスキップします。

Google Cloud Shell の有効化

Google Cloud Shell は、開発ツールと一緒に読み込まれる仮想マシンです。5 GB の永続ホーム ディレクトリが用意されており、Google Cloud で稼働します。

Google Cloud Shell を使用すると、コマンドラインで Google Cloud リソースにアクセスできます。

1. Google Cloud コンソールで、右上のツールバーにある [Cloud Shell をアクティブにする] ボタンをクリックします。

   

2. [続行] をクリックします。

環境がプロビジョニングされ、接続されるまでしばらく待ちます。接続した時点で認証が完了しており、プロジェクトに各自のプロジェクト ID が設定されます。次に例を示します。

gcloud は Google Cloud のコマンドライン ツールです。このツールは、Cloud Shell にプリインストールされており、タブ補完がサポートされています。

• 次のコマンドを使用すると、有効なアカウント名を一覧表示できます。

gcloud auth list

出力:

Credentialed accounts: - @.com (active)

出力例:

Credentialed accounts: - google1623327_student@qwiklabs.net

• 次のコマンドを使用すると、プロジェクト ID を一覧表示できます。

gcloud config list project

出力:

[core] project =

出力例:

[core] project = qwiklabs-gcp-44776a13dea667a6 注: gcloud ドキュメントの全文については、 gcloud CLI の概要ガイド をご覧ください。

ケーススタディ用アプリケーションをプレビューする

このセクションでは、Cloud Shell にアクセスしてクイズ アプリケーションを含む Git リポジトリのクローンを作成し、アプリケーションを実行します。

Cloud Shell でソースコードのクローンを作成する

Cloud Shell で次のコマンドを実行して、クラスのリポジトリのクローンを作成します。

git clone --depth=1 https://github.com/GoogleCloudPlatform/training-data-analyst

ケーススタディ用アプリケーションを構成、実行する

1. 作業ディレクトリへのショートカットとしてソフトリンクを作成します。

ln -s ~/training-data-analyst/courses/developingapps/v1.3/nodejs/datastore ~/datastore

2. 作業ファイルが格納されているディレクトリに移動します。

cd ~/datastore/start

2. GCP プロジェクト ID を参照する環境変数 GCLOUD_PROJECT をエクスポートします。

export GCLOUD_PROJECT=$DEVSHELL_PROJECT_ID

3. アプリケーションの依存関係をインストールします。

npm install

4. 次のコマンドを実行して、アプリケーションを実行します。

npm start

ケーススタディ用アプリケーションを確認する

1. Cloud Shell でウェブでプレビュー > [ポート 8080 でプレビュー] をクリックして、クイズ アプリケーションをプレビューします。

2. ナビゲーション バーで、[Create Question] をクリックします。

3. ナビゲーション バーで、[Take Test] をクリックします。

4. ナビゲーション バーで [GCP] をクリックします。

5. サーバー側アプリケーションに戻るには、ナビゲーション バーで [Quite Interesting Quiz] をクリックします。

ケーススタディ用アプリケーションのコードを確認する

このセクションでは、Cloud Shell テキスト エディタを使用して、このケーススタディ用アプリケーションのコードを確認します。

Cloud Shell コードエディタを使用する

1. Cloud Shell で [エディタを開く] をクリックします。

2. エディタの左側にあるファイル ブラウザ パネルを使用して、datastore/start/server フォルダに移動します。

Express ウェブ アプリケーションを確認する

1. datastore/start/server/app.js ファイルを選択します。

2. datastore/start/server/web-app フォルダを選択します。

3. datastore/start/server/web-app/questions.js ファイルを選択します。

4. questions.js ファイルで、/questions/add ルートに対する HTTP POST リクエストに応答するハンドラを見つけます。

5. datastore/start/server/web-app/views フォルダを選択します。

6. datastore/start/server/web-app/views/questions/add.pug ファイルを表示します。

7. datastore/start/server/api/index.js ファイルを選択します。

8. datastore/start/server/gcp/datastore.js ファイルを選択します。

Cloud Datastore にエンティティを追加する

このセクションでは、フォームデータを Cloud Datastore に保存するためのコードを記述します。

App Engine アプリケーションを作成して Cloud Datastore をプロビジョニングする

1. Cloud Shell に戻り、Ctrl+C キーを押してアプリケーションを停止します。

2. 次のコマンドを実行して、プロジェクトに App Engine アプリケーションを作成します。

gcloud app create --region "us-central"

NodeJS の Datastore モジュールをインポートして使用する

1. Cloud Shell コードエディタで ...gcp/datastore.js ファイルを開きます。

2. 親フォルダから config モジュールを読み込みます。

3. @google-cloud/datastore モジュールを読み込みます。

4. ds という名前の Datastore クライアント オブジェクトを宣言します。

datastore.js

'use strict'; // TODO: ../config モジュールを読み込む const config = require('../config'); // END TODO // TODO: @google-cloud/datastore モジュールを読み込む const {Datastore} = require('@google-cloud/datastore'); // END TODO // TODO: Datastore クライアント オブジェクト ds を作成する // Datastore(...) ファクトリ関数はオプション オブジェクトを受け取ります。 // このオブジェクトを使用して、どのプロジェクトの Datastore // が使用される必要があるのかを projectId プロパティを介して指定します。 // projectId は構成モジュールから取得されます。// このモジュールは GCLOUD_PROJECT 環境変数 // からプロジェクト ID を取得します。 const ds = new Datastore({ projectId: config.get('GCLOUD_PROJECT') }); // END TODO

Cloud Datastore エンティティを作成するコードを記述する

1. kind という名前の定数を宣言し、「Question」という値で初期化します。

datastore.js

// TODO: kind という名前の定数を宣言する // Datastore のキーはリレーショナル データベースの // 主キーに相当します。 // キーを記述する方法は主に 2 つあります。 // 1. kind を指定し、Datastore で一意の数値 ID を // 生成する // 2. kind と一意の文字列 ID を指定する const kind = 'Question'; // END TODO

2. create（...）関数で、既存の Promise.resolve（{}）プレースホルダー ステートメントをcreate（...）関数から削除します。

3. key という名前の定数を宣言して、このエンティティのキーを保存します。

4. entity という名前の定数を宣言して、key と、フォームデータから抽出したクイズの問題のプロパティで初期化します。

5. Datastore クライアント オブジェクト（ds）を使用して、save(entity) メソッドを呼び出してエンティティを保存します。

datastore.js

// create({quiz, author, title, answer1, answer2, // answer3, answer4, correctAnswer}) 関数では // ECMAScript 2015 の分割代入を使用して、この関数に // 渡されたフォームデータからプロパティを抽出します。 function create({ quiz, author, title, answer1, answer2, answer3, answer4, correctAnswer }) { // TODO: プレースホルダ ステートメントを削除する // return Promise.resolve({}); // END TODO // TODO: Datastore が生成した ID を使用して // エンティティ キーを宣言する const key = ds.key(kind); // END TODO // TODO: key と data を使用して、エンティティ オブジェクトを宣言する const entity = { key, // エンティティのメンバーは data プロパティ内で表されます。 // これは配列であり、各要素がエンティティに // 含まれる 1 つのメンバーを表します。各要素は name と value からなる // オブジェクトです。 data: [ { name: 'quiz', value: quiz }, { name: 'author', value: author }, { name: 'title', value: title }, { name: 'answer1', value: answer1 }, { name: 'answer2', value: answer2 }, { name: 'answer3', value: answer3 }, { name: 'answer4', value: answer4 }, { name: 'correctAnswer', value: correctAnswer }, ] }; // END TODO // TODO: エンティティを保存し、Promise を返す // ds.save(...) メソッドは非同期で実行され、 // Promise を呼び出し元に返します。 return ds.save(entity); // END TODO }

アプリケーションを実行して Cloud Datastore エンティティを作成する

1. ...gcp/datastore.js ファイルを保存し、Cloud Shell コマンド プロンプトに戻ります。

2. 次のコマンドを実行して、アプリケーションを開始します。

npm start

3. Cloud Shell でウェブでプレビュー > [ポート 8080 でプレビュー] をクリックして、クイズ アプリケーションをプレビューします。
4. [Create Question] をクリックします。
5. フォームに次の値を入力して、[Save] をクリックします。

フォームの項目	値
Author	[自分の名前]
Quiz	Google Cloud Platform
Title	Which company owns GCP?
Answer 1	Amazon
Answer 2	Google（[Answer 2] のラジオボタンを選択します）
Answer 3	IBM
Answer 4	Microsoft

6. Cloud Platform Console に移動して、ナビゲーション メニュー で [Datastore] をクリックします。

[進行状況を確認] をクリックして、目標に沿って進んでいることを確認します。 App Engine アプリケーションを作成して、Cloud Datastore にエンティティを追加する

参考: Cloud Datastore に対してクエリを実行する

このセクションでは、Cloud Datastore からエンティティ データを取得するためのコードを記述します。

Cloud Datastore エンティティを取得するためのコードを記述する

1. コードエディタに戻ります。

2. ...gcp/datastore.js ファイルで、list(quiz) メソッドからコードを削除します。

3. list(...) メソッドに、Cloud Datastore から特定のクイズの Question エンティティを取得するクエリを追加します。

4. Datastore クライアントを使用してクエリを実行し、返された promise オブジェクトを定数に割り当てます。

5. promise を返すステートメントを記述します。

6. メソッド チェーンで promise に then(...) メソッドを追加します。

7. then(...) メソッドに arrow 関数を記述して、Cloud Datastore からレスポンスを取得します。

8. arrow 関数で、レスポンスから結果を抽出します。

9. 各エンティティ ID を追加し、Cloud Datastore から返されたデータから正解を削除することで、データを再形成します。

10. arrow 関数の本文のコードを完成させて、エンティティの 1 ページを返すか、結果の最後のページであることを示すオブジェクトを返します。

アプリケーションを実行し、Cloud Datastore に対するクエリをテストする

1. ...gcp/datastore.js ファイルを保存し、Cloud Shell コマンドに戻ります。
2. Ctrl+C キーを押してアプリケーションを停止します。
3. アプリケーションを開始します。
4. Cloud Shell でウェブでプレビュー > [ポート 8080 でプレビュー ] をクリックして、クイズ アプリケーションをプレビューします。
5. アプリケーションの URL の末尾のクエリ文字列を /api/quizzes/gcp に置き換えます。

6. アプリケーションのホームページに戻り、[Take Test] をクリックします。
7. [GCP] をクリックします。

参考セクションの解答は、ラボの bonus フォルダで確認できます。

ラボを終了する

ラボが完了したら、[ラボを終了] をクリックします。ラボで使用したリソースが Google Cloud Skills Boost から削除され、アカウントの情報も消去されます。

ラボの評価を求めるダイアログが表示されたら、星の数を選択してコメントを入力し、[送信] をクリックします。

星の数は、それぞれ次の評価を表します。

• 星 1 つ = 非常に不満
• 星 2 つ = 不満
• 星 3 つ = どちらともいえない
• 星 4 つ = 満足
• 星 5 つ = 非常に満足

フィードバックを送信しない場合は、ダイアログ ボックスを閉じてください。

フィードバックやご提案の送信、修正が必要な箇所をご報告いただく際は、[サポート] タブをご利用ください。

Copyright 2026 Google LLC All rights reserved. Google および Google のロゴは、Google LLC の商標です。その他すべての社名および製品名は、それぞれ該当する企業の商標である可能性があります。