XEROTTA

新入社員の学び / Google Cloud初級者 / 講座3

GOOGLE CLOUD BASICS / COURSE 03

制作環境の準備

WindowsまたはmacOSに、編集と確認のための作業場所を用意できる。

アニメと具体例手順付き演習成果物とレビュー進捗保存・完了チェック

まずは、図でつかもう

1 / 4

矢印を追い、各ポイントを押して確認しましょう。

01 / GOOGLE CLOUD BASICS

学習目標と所要時間

WindowsまたはmacOSに、編集と確認のための作業場所を用意できる。

第3章 / 全14章目安 60分（説明・演習・確認）

前提：前章までのファイルと学習記録を用意します。

この教材は受講者本人が操作するための教育ページです。契約・課金変更・外部連携・リソース作成は自動実行しません。外部手順は条件を理解した受講者本人が実施します。
制作環境の準備の学習内容を表した仕組みのイメージ図

02 / GOOGLE CLOUD BASICS

説明：仕組みと具体例

この章の考え方

詳しく見る

テキストエディターは文字でコードを編集する道具です。無料のVisual Studio Code等と、普段使う最新のブラウザーを使います。Wordなどの文書作成ソフトは、HTMLに不要な書式が入るので使いません。拡張機能や追加の有料サービスは必須ではありません。

具体的な仕組み

詳しく見る

ZIPは複数のファイルをまとめた圧縮ファイルです。WindowsはZIPを右クリックして「すべて展開」、macOSはFinderでダブルクリックして展開します。圧縮された中をそのまま編集せず、展開先で作業します。Windowsではエクスプローラーの表示設定でファイル名拡張子を表示します。macOSでもFinderの詳細設定で拡張子表示を確認します。

使うときの判断

詳しく見る

作業フォルダーの中は index.html、styles.css、assets/cafe.svg という構成です。index.htmlは入口、assetsは素材をまとめるフォルダーです。大文字・小文字、半角・全角、ハイフンを区別します。ファイルはUTF-8という日本語を扱える文字コードで保存します。

構成と権限

詳しく見る

後半で使うCLIは、文字を入力して操作する道具です。WindowsはPowerShell、macOSはターミナルを使います。Node.js公式サイトのサポート中LTS版をインストールするとnpm（ツールを導入する仕組み）も入ります。CLI公式資料の最低要件だけで古いNode.jsを選ばず、サポート中の版を選んでください。会社PCで許可がなければ講師に相談します。

03 / GOOGLE CLOUD BASICS

場面で学ぶ：制作環境の準備

場面を順に追う解説アニメです。初期状態は停止しています。「次の場面」でゆっくり読むか、自動再生を選べます。動きを減らすOS設定では手動で進めます。

学ぶこと
仕組み
実践の手順
振り返り
場面

04 / GOOGLE CLOUD BASICS

操作手順：一つずつ確かめる

  1. エディターの公式サイトから対応OS版を入手し、起動する。会社PCはインストール規則に従う。
  2. 配布ZIPを展開し、cafe-siteフォルダーをエディターの「フォルダーを開く」で開く。
  3. index.htmlをブラウザーで開く。見本と同じ文章・色・画像があるか比べる。
  4. 見出しに「練習中」を加えて保存し、ブラウザーを再読み込みする。確認後に元へ戻す。
  5. 作業フォルダーとは別にバックアップ用コピーを作る。認証ファイルは入れない。
  6. Node.js公式サイト（https://nodejs.org/）からOSに合うLTSインストーラーを入れ、ターミナルを開き直す。下の確認・導入コマンドを1行ずつ実行する。
  7. バージョン番号が出れば確認成功。command not found／認識されない場合は再起動、PATH、導入先を確認する。EACCESではむやみにsudoを付けずnpmの権限ガイドか管理者へ相談する。

Windows PowerShell／macOSターミナル：場所は任意。導入は受講者が実施

node --version
npm --version
npm install -g firebase-tools
firebase --version

05 / GOOGLE CLOUD BASICS

演習：自分で変え、結果を残す

エクスプローラーまたはFinderとエディターで同じ3ファイルの場所を示す。変更・保存・再読み込みの前後を記録する。

提出するもの

対象と目的／使用環境／変更した内容／期待した結果／実際の結果／失敗時に確かめたこと／まだ未実施のことを記録してください。スクリーンショットに認証情報や請求の個人情報を含めません。

07 / GOOGLE CLOUD BASICS

完了チェックと学習記録

説明できたこと、実際に確認したことだけをチェックします。学習進捗と下のメモは、このブラウザーのローカルストレージへ保存し、外部送信しません。別端末とは同期せず、サイトデータ削除・プライベートモード・保存禁止では保持できない場合があります。秘密情報は記入しないでください。

08 / GOOGLE CLOUD BASICS

よくある失敗と対処

  • ファイルを2か所へ展開して別の方を編集：ブラウザーの場所とエディターの作業場所を照合する。
  • 画像がない：assetsフォルダーを含めて展開したか確認する。

09 / GOOGLE CLOUD BASICS

確認日と公式資料

公式情報の確認日：2026年10月25日（日本時間）。画面・上限・契約条件は変わるため、実行前にも公式資料と自分の契約を確認してください。ログや画面の例は説明用で、実環境の操作結果ではありません。

講師向け：事前準備・つまずき・評価基準 →