説明
TechCommitさんのお年玉企画で、Techpitさんの教材「Vue.js と Firebase ではてなブックマーク風なブックマークサービスを作ってみよう！」が当選したので使ってみた感想を書きました。
前提
筆者のレベル
| 言語・ツール | レベル |
|---|---|
| HTML・CSS | 基礎レベル |
| JavaScript | 業務で少し触ったことがある |
| Vue.js | はじめて |
| Firebase | はじめて |
扱った技術
- Vue.js
- Bulma
- Firebase Authentication
- Firestore
- Firebase Storage
- Firebase Cloud Function
- Firebase Hosting
作った機能
- ブックマークサービス
- トップページ（全ユーザーのブックマーク一覧）
- サインアップ
- サインイン
- 認証情報変更
- ブックマークへのコメント
- ブックマークコメントのスター登録
- プロファイルページ
完成品
公開したアプリケーション。
https://pitmark-prod-9c6b2.firebaseapp.com/
トップページ
サインアップ
サインイン
認証情報変更
ブックマークへのコメント＆スター登録
プロファイルページ
感想
手順通りに進めるとアプリができあがるので、Progate等で基礎を学んだあとに何か成果物を作りたい人に良いと思いました。Vue.jsとFirebaseの使い方を丁寧に説明してくれるので詰まる箇所も少なく進めていけました。ただし説明が少ない箇所もあるので自分で調べる必要もあります（Vueの公式ページがわかりやすいので助かる）。
HTML・CSS、JavaScriptの基礎を学んでいないと消化不良になりそうです。自分はJavaScriptをしっかり学んでいなかったのでJavaScriptとVue.jsの両方を調べながら教材を進めていきましたが、それだとVue.jsの内容が頭に入りきらないことがあったのでちょっともったいなかったと感じました。
-
Firebaseは初めて触りましたが、基礎的な内容を学ぶことができ勉強になりました。アプリを簡単に公開までもっていけます。学んだ内容は
- Firebase Authentication：認証機能
- Firestore：データベース機能
- Firebase Storage：ファイルストレージ機能
- Firebase Cloud Function：データが作成・更新・削除されたときに特定の処理を裏側で行わせる等で使用
- Firebase Hosting：アプリの公開に使用
Bulmaが便利。Flexboxベースの柔軟なレイアウトを簡単に構築できる。教材に沿って使っただけなので自分で色々試してみたい。