ホーム
Sponserd by↑転職したい人向け、ベンチャー企業の採用動画があります

【初心者向け】Cloud Functions って一体なにもの・・・?|超簡単にサーバーなしでAPIを設置できちゃう。

はじめまして。まっつんです。

今回の記事では、

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

CloudFunctionsをざっくりと説明

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

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

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

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

早速触ってみます

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

//ターミナル

npm install -g firebase-tools

参考ドキュメント:https://firebase.google.com/docs/cli#npm

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

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

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

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

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

Firebaseを準備する

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

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

をしておいてください。

firebase画像

早速、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

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

上から3番目の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で開いてみます。

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」

https://reactlecture.web.app/

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

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

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

是非是非ご覧ください。

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

ぜひ、ご覧ください!

https://poppotennis.com/posts/firestore/