はじめに

今回の記事では、

• ○ 初心者向けでも大丈夫なように
• ○ 出来るだけ分かりやすく簡潔に
• ○ Cloud Functions を遊びながら学んでいけます。

CloudFunctions をざっくりと説明

CloudFunctions は、Google が提供するもので、その名のとおり、Cloud 上に関数（イベント）を設置することができます。

みなさん、ウェブサービス上でダウンロードボタンをクリックをすればファイルをダウンロードできたりしますよね。

そういうイベントの内容をサーバー上ではなくグーグルのクラウド上に設置できるものとなります。

実際に触ってからの方が理解できると思うので、数回の記事に渡って掘り下げていければいいなと思います。

早速触ってみます

※みなさんの中で、Firebase で Web アプリを一度公開などしたことがある人は下記のコマンドは不要です。

//ターミナル

npm install -g firebase-tools

参考ドキュメント

上記のコマンドで、FirebaseCLI というものをインストールします。

CLI はコマンドラインインターフェースの略らしいです。

これをインストールすることにより、

firebase から始まるいろんなコマンドを使えるようになります。

npm を使ったことがない人は、「npm つかいたい」とかで検索してみてください。

Firebase を準備する

公式ドキュメント：https://firebase.google.com/?hl=ja

このページからもろもろ登録して、「コンソールへ移動」→ プロジェクトの作成 →「testapp」という名前で作成

をしておいてください。

早速、CloudFunctions を作りましょう

 作る場所を決めます。

僕は/Users/name/Desktop/javascript

ここに作ることにしました。

ディレクトリは右クリックで作って、ターミナルへドラッグアンドドロップするとそのディレクトリの階層が勝手に入力されます。

コマンドで打つと、

cd /User/name/Descktop/javascript/testapp

です。

ターミナルの表示が

testapp name$

となっていれば指定の階層になっていると思います。その場所で、

//ターミナルでコマンド
firebase login
//パスワード等聞かれたら入力してログインする
firebase init

をします。

?Which Firebase CLI features do you want to set up for this folder? Press Space

to select features, then Enter to confirm your choices. (Press <space> to selec

t, <a> to toggle all, <i> to invert selection)

❯◯ Database: Deploy Firebase Realtime Database Rules

◯ Firestore: Deploy rules and create indexes for Firestore

◯ Functions: Configure and deploy Cloud Functions

◯ Hosting: Configure and deploy Firebase Hosting sites

◯ Storage: Deploy Cloud Storage security rules

◯ Emulators: Set up local emulators for Firebase features

と、でてきたらいい感じです。

上から３番目の Functions にカーソルを持って行って、スペースをおします。選択されたら、エンターで次へ進みます。

?Please select an option:(Use arrow keys)

❯ Use an existing project

Create a new project

Add Firebase to an existing Google Cloud Platform project

Don't set up a default project

今回は上から 1 番目、Use an existing project

でいきます。

次の画面ではプロジェクトの一覧が表示されますが、さきほど作った「testapp」を選択します。

?What language would you like to use to write Cloud Functions?(Use arrow keys)

❯ JavaScript

TypeScript

JavaScriptを選びます。

?Do you want to use ESLint to catch probable bugs and enforce style?(y/N)

ESLint っていうのは、「構文エラーを指摘してくれる」やつです。

詳しいことはここで説明するとずれるので、しませんが、VScode 上で色々表示してくれるのが参考になるので y を押します。

Do you want to install dependencies with npm now?(Y/n)

いつでもできるので、N をおします。

じゃじゃ〜〜ん。

プロジェクトがさきほど作成したディレクトリ以下に構成されています！

早速 VScode で開いてみます。

めんどくさいのは終わりました。あとは遊ぶだけです。

functions/index.js

を開いてください（画像と同じ）

const functions = require("firebase-functions");

// // Create and Deploy Your First Cloud Functions
// // https://firebase.google.com/docs/functions/write-firebase-functions
//
// exports.helloWorld = functions.https.onRequest((request, response) => {
//  response.send("Hello from Firebase!");
// });

このような記述があると思いますが、

下 3 行をコメントアウトを外します。

exports.helloWorld = functions.https.onRequest((request, response) => {
  response.send("Hello from Firebase!");
});

はいできました！

1 行目の helloWorld のところが、関数の「名前」、{}の間、つまり 2 行目が、処理の内容です。

1 行目は、ほぼおまじないなので、今理解する必要はないと思います。

コマンドで

//ターミナル
firebase serve --only functions

を叩きます。

npm install しろとターミナルに怒られました。

なので、コマンドで

//ターミナル
cd functions
npm install

を叩きます。インストールが完了しました。

もう一度、

firebase serve --only functions

を叩いてみます。

✔ functions[helloWorld]: http function initialized (http://localhost:5000/testapp-80832/us-central1/helloWorld).
i functions: Beginning execution of "helloWorld"
i functions: Finished "helloWorld" in ~1s

こんなのが出れば良いです。

ここにある 5000 ポートがローカルでの実行 URL なので飛んでみましょう。

飛んでみましたか？

Hello from Firebase!

と書いてあります。

コードに戻ります。

response.send('Hello from Firebase!');

とありますね。

つまりそういうことなんでしょう。

少し書き換えます。

response.send('うおおおおおお');
console.log('uoooooooooooo');

これでもう一度先ほどの url で更新押してみます。

表示が変わりました。

console.log はターミナル上で出力されているはずです。

i functions: Beginning execution of "helloWorld"
> uoooooooooooo
i functions: Finished "helloWorld" in ~1s

こんなかんじです。

exports.helloWorld=functions.https.onRequest((request, response) => {

この行の request には、URL を叩いた時の例えば GET ならパラメータとかあると思うんですが、そういうのが入ってきて、response には返すものを指定するような感じです。

まとめ

console.log()が出るようになるまでは大変。

console.log()さえ出れば、あとは自分で好きなことが書ける。

もうここまでくれば、色々遊べると思います。

今回の記事では以上となりますが、次回以降実際に僕が作った

「筋肉 TV2nd のスタジオの名前自動取得できてないですね App」

今となっては動いてないページ

を題材に色々やっていきたいと思います。

マジでくだらないですが、youtubeAPI や node のパッケージ、Firebase にデータを保存したり、色々やっています。

表示は React で router や styled-components など使っているのでだいぶ基礎が詰まっています。

是非是非ご覧ください。

次の記事では、データベース（Firestore）と連携してデータを保存したり取得したりします。

ぜひ、ご覧ください！

次の記事 Firestore と連携する