Code

【神サービス】バックエンド問題を一掃するサービス「Firebase」

Firebase
Pocket

こんにちは、うらけんです。

今回はバックエンド管理をナシでアプリケーション開発ができる「Firebase」についてご紹介していきます。

アプリ開発やサービス開発をしている際に出てくる代表的な問題点がバックエンド問題(DBなどを管理など)です。

こうした問題にぶち当たった際の解決方法として、これまでは主に3つがあったかと思います。(もし、他の解決方法があったなら、知識不足です。すみません…。)

  1. 自分で勉強する
  2. バックエンドエンジニアを雇う
  3. 知り合いのバックエンジニアに頼む

お金があれば、問題ありませんでしたが、お金のない個人や企業にとっては、割と時間を要する問題でした。

しかし、このような悩みを一掃してくれるのが、Firebaseです。

本記事では、「Firebase」について詳しくご紹介していきます。

Firebaseとは

Firebaseは、アプリケーションなどを作成する際に使用できるプラットフォームです。

従来、自分で環境開発を開発する必要がありました。しかし、このFirebaseを利用すると面倒な作業を行う必要がなくなります。

また、FirebaseはGoogleが買収しているため、信頼性もかなり高いです。

Firebaseの特徴

Firebaseの特徴は以下の3つあります。

  1. インフラ整理が不要
  2. 有名企業も採用しているツール
  3. 複数のプロダクトを1つのプラットフォームで管理できる

控えめに言っても、このツールは最高です。

また、バックエンドの知識がない方でもカンタンにできることも特徴の1つです。

Firebaseの知識に関しては、公式HPやドットインストールを利用すれば、余裕でできるようになるので、ぜひチャレンジしてみてください。

Firebaseの利用が向いている人

次に、Firebaseが向いている人をご紹介していきます。

利用が向いている方は以下のとおりです。

  1. アプリケーション開発をしている方
  2. バックエンドの知識ない or 人手が足りない
  3. チームでアプリを管理したい方

Firebaseでは、無料である程度まで使うことができるので、「予算や費用がない」という場合でも心配なく使用してもらうことができます。

Firebaseの料金体系

Firebaseの料金体系については以下のとおりです。

firebase_料金体系

有料版でも月額25ドルなので、めちゃくちゃ高いというわけでもなさそうです。

ただ従量制(利用量や利用時間に応じて料金を決める方法)になると場合よっては、数万や数十万という単位になるので、注意が必要かと思います。

ただ、個人で普通に使う場合、無料プランで十分に事足ります。

Firebaseを実際に使ってみた!

実際に、カンタンにFirebaseを使ってみました。

コードは下記にあるので、参考にしてみてください。

HTML

<!DOCTYPE html>
<html lang=”ja”>
<head>
<metacharset=”utf-8″>
<title>LIST</title>
</head>
<body>
<ulid=”messages”></ul>>
<formautocomplete=”off”>
<inputtype=”text”id=”meses”>
</form>
<!– <script src=”https://www.gstatic.com/firebasejs/5.0.4/firebase.js”></script> –>
<scriptsrc=”https://www.gstatic.com/firebasejs/5.0.4/firebase-app.js”></script>
<scriptsrc=”https://www.gstatic.com/firebasejs/5.0.4/firebase-firestore.js”></script>
<script src=”js/main.js”></script>
</body>
</html>

Javascript

 

‘use strict’;

// Your web app’s Firebase configuration
const firebaseConfig = {
apiKey: “AIzaSyDG1i3HWDE08FOkGZVQ3Spubc4moA4AJAs”,
authDomain: “fire-sample-aba43.firebaseapp.com”,
databaseURL: “https://fire-sample-aba43.firebaseio.com”,
projectId: “fire-sample-aba43”,
storageBucket: “fire-sample-aba43.appspot.com”,
mesesagingSenderId: “851200628260”,
appId: “1:851200628260:web:bdbf329cd0bd82eb”
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);

db.setting({
timestampsInSnapshots: true
});
const collection = db.collection(‘mes’);
mes.focus();

const db = firebase.firestore();

const mes = document.getElementById(‘mes’);
const form = document.querySelector(‘form’);
const meses = document.getElementById(‘meses’);

collection.orderBy(‘created’).get().then(snapshot => {
snapshot.forEach(doc => {
const li = document.createElement(‘li’);
li.textContent = doc.data().mes;
meses.appendChild(‘li’);
});
});

form.addEventListener(‘submit’, e=>{
e.preventDefault();

const val = mes.value.trim();
if(val === “”){
return;
}

const li = document.createElement(‘li’);
li.textContent = val;
meses.appendChild(li);

mes.value = ”;
mes.focus();

collection.add({
mes: val,
created: firebase.firestore.FieldValue.serverTimestamp()
})
.then(doc =>{
console.log(`${doc.id} added!`);
})
.catch(error =>{
console.log(‘error’);
})
})

ABOUT ME
ウラケン
ウラケン
サラリーマンとWebデザイナーの二足のわらじを履いてます。「独学でWebデザイナーになれた方法」・「Webデザイナーの方に便利な情報」に発信しています。
Webデザインの詳細ページ
Pocket

Webデザイン_フロー Webデザイン