バックエンド

【Vue.js】と【Firebase】で作るミニWebサービス を試してみた〜Googleログインまで〜

プログラミングにどっぷり取り組むようになってからというもの、

いわゆる出版社から販売されている技術書だけではなくて、

同人誌というんでしょうか、インディーズの、個人出版にも目がいくようになっていて。

ここ数ヶ月取り組んでいる『Vue.js(ビュージェイエス)』と、

最近よく見るようになった『firebase(ファイアベース』と、

さらには

『シングルページアプリケーション』
『サーバーレス』

というキーワードも相まって。

表紙が2D少女なことにはぐっと目をつぶって、

アオキ
2Dはどっちかというと苦手なもんで・・

買っちゃいました、この本。

たまたまKindleセールで半額だったのです。

アオキ
半額っていい響きですよね・・

Kindleなのですぐにダウンロードして読めるのが魅力ですね。

ということで早速やってみました。

Sponsored link

Vue.jsとfirebaseで作るミニWebサービスをなぞってみて

amazonの概要ページにも書いてありますが、この本の対象読者として、

  • HTML,CSS,Javascriptを利用して、簡単なWebサイトを作ったことがある人
  • 複数のページや状態管理をJavascript使って自力で行い、ごちゃついてしまい消耗している人
  • 普段デザイナーとしてマークアップしており、フロントエンドの新しめな環境でのサイト構築を経験してみたい人
  • シングルページアプリーケーション、Vue.jsってものを触ってみたい、またはそれらの挫折経験がある人
  • FirebaseのWeb版を使ってみたい人、どんな事が出来るのか知りたい人
  • 普段サーバーサイドやネイティブアプリを作っていて、Webフロントエンドをさらっと触ってみたい人

と書かれてある通り、まったくのweb初心者の方は読むのがしんどいかなと思います。

Web業界、特にJavaScript(ジャバスクリプト)を取り巻く『フロントエンド』は進化のスピードがとても早くて

JavaScriptだけではなく、

  • Node.js (ノードジェイエス)
  • npm (エヌピーエム)
  • vue.js (ビュージェイエス)
  • babel (バベル)
  • webpack (ウェブパック)

あたりのキーワードやツールが普通に出てきます。

この記事の後半で簡単な用語集をつくってみましたが、
これらのキーワードに抵抗ない方なら読める本なのかなと思います。

関連記事

Vue.jsとfirebaseで作るミニWebサービスの内容

ざっくり解説すると、

最近流行りだしているJavaScriptのフレームワーク『Vue.js』と、
 
googleが開発した、サーバー機能を簡単に使えるようにした『firebase』というサービスを連携して、
 
『SPA(シングルページアプリケーション)』をつくって、
 
グーグルアカウントでログイン判定しつつ、
 
Markdownエディタをつくろう!

という内容になっています。

『Markdown』というのは、シャープ(#)や米印(*)などを使って文字を装飾できる仕組みです。

最近だと、

  • 技術情報だけを集めたサイト Qiita(キータ)
  • 技術関連の知恵袋 teratail(テラテイル)

などでも使われています。

SPA(シングルページアプリケーション)というのはざっくりいうと、

HTMLの中身は一緒だけど、JavaScript側でゴリゴリ処理をやっていて、

ページ切り替えのロード時間がほぼなく、スムーズに見れるwebページのことです。

Sponsored link

Vue.jsとfirebaseで作るミニWebサービスをやってみて

同人誌だからといって品質が落ちるということはなく、

とても丁寧に説明されていて、

特に『firebase』は初めて触ったのですが、ほとんど迷うことはなく、グーグルログイン認証まで進めることができました。

合間合間にvue.jsのv-ifの解説があったり、『webpack』や『babel』の解説があったりと、

プログラミングやってる人
名前だけは知ってるけど詳しくは知らないかも・・

といった方でもすんなり入れるんじゃないかなと思います。

今日は時間の都合上グーグルログインまで進めたので、(だいたい半分くらいのページ数)

また時間をつくって、データベース作成、データ保存あたりも試してみたいと思います。

Sponsored link

おまけ Vue.jsとfirebaseで作るミニWebサービスの関連用語集

アオキ
大分はしょってますのでぜひ寛大な心でご参考にしてみてください。
  • JS・・JavaScriptの略
  • Node.js・・JSをサーバー側でもできるようにしました
  • npm・・Node.js製の便利パッケージ群
  • npm-script・・npm run devなどのコマンドが使えるようになる機能
  • Vue.js・・2018年大人気のJSフレームワーク
  • vue-cli・・Vue.jsをコマンドラインから使えるツール
  • webpack・・複数のJSファイルを一つのJSファイルにまとめたりできる
  • pushState・・最近のブラウザの機能。JSからURLを動的に変更できる
  • サーバーレス・・サーバー側をFirebaseにお任せ
  • NoSQL・・めっさ早いデータベース。リレーションできないので一長一短
  • BaaS(Background as a service)・・バックエンドの処理を肩代わりしてくれるサービス
  • Firebase・・GoogleのBaaSサービス
    -デプロイ・・開発用から本番で利用できる状態にすること

■FireBaseでできる事

  • Hosting(ホスティング)・・サーバーの一部を貸し出してくれるサービスの事
  • Authentication(認証)・・ログインが正しいかのチェック
  • リアルタイムデータベース・・NoSQL
  • Cloud Firestore・・代替データベース 今後はこちらが主流になるらしい

さいごに

firebaseの名前を見るようになったのはここ最近だったと思います。

2019年にはVue.jsも3.0にバージョンアップが控えているそうで、Web業界は本当に変化のスピードが早いですね。

アオキ
楽しみながら知識をつけていきたいもんですな。

関連図書

created by Rinker
¥3,650 (2019/08/23 12:53:27時点 Amazon調べ-詳細)
created by Rinker
¥3,694 (2019/08/24 08:27:18時点 Amazon調べ-詳細)

『Vue/Vuex/Nuxt』ではこんな記事も読まれています。

1. 【Vue.js】と【Firebase】で作るミニWebサービス を試してみた〜Googleログインまで〜

2. 【Nuxt】入門 Vuexの状態管理を【図解】してみた【初心者向け】

3. 【Laravel5.5】Webアプリケーションを作るためのゆるめの環境構築編【Node.js】【npm】【Vue.js】【初心者向け】

4. 【Laravel】と【Vue.js】のサンプル動画を見ながらさらりと解説してみる

5. Vue.js+Vue-router+BulmaでさくっとSPAをつくってみた【初心者向け】

6. 【Vue.js】かっこいいフォトギャラリーを発見したのでソースを読んでみた。カテゴリーで選べてなめらかに動くんです

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


関連記事

  1. バックエンド

    【PHP】配列や連想配列が覚えづらかったので学校に例えてみた【初心者向け】

    ググって見ても配列のわかりやすい記事があまりなかったので、…

  2. フロントエンド

    ホームページのつくり方を3ステップでわかりやすくまとめてみた【初心者向け】

    今回の記事ではこんな悩みにお答えします。ホームページを作れ…

  3. バックエンド

    【Python】でWebアプリをがっつりやるならDjango一択な4つの理由【初心者向け】

    最近とある業界の『web予約サービス』をつくろうということになりまして…

Sponsored link

最近の記事

  1. 数学

    【三角関数】の使い方〜わかりやすさ重視でまとめてみた【動画あり】
  2. 数学

    【微分】とは わかりやすくまとめてみた〜めっちゃすごいわり算【初心者向け】
  3. IoT関連

    【Arduino】ラジコンをつくってみた 〜今ドキのプログラミングの覚え方
  4. バックエンド

    【厳選8冊】ホームページを作れるようになるためのおすすめ本【初心者向け】
  5. バックエンド

    【Laravel(PHP)】初心者向け アプリのつくり方 をリリースしました【t…
PAGE TOP
//記事ページのみに構造化データを出力 //サムネイルを取得 //ここから構造化データの記述