Vue.js

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/04/22 10:36:09時点 Amazon調べ-詳細)
created by Rinker
¥3,694 (2019/04/22 11:56:48時点 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


Sponsored link

関連記事

  1. Laravel

    【Laravel5.5】Webアプリケーションを作るためのゆるめの環境構築編【Node.js】【np…

    ロリポップやXサーバーなど、格安のレンタルサーバーでも運用できるプ…

  2. Laravel

    【Vue.js/Laravel】Webアプリ実践記 37歳おっさんが独学でVue.js+Larave…

    webアプリ実践記 0日目~10日目webアプリ実践記 11…

  3. Laravel

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

    ここ数年、ユーチューブで見れるプログラミング動画が増えています。し…

  4. Laravel

    【Vue.js/Laravel】Webアプリ実践記 37歳おっさんが独学でVue.js+Larave…

    webアプリ実践記 0日目~10日目webアプリ実践記 11…

  5. Vue.js

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

    最近徐々に増えつつある『SPA(エスピーエー)』。『SPA』とは、…

  6. Laravel

    【Vue.js/Laravel】Webアプリ実践記 37歳おっさんが独学でVue.js+Larave…

    webアプリ実践記 0日目~10日目webアプリ実践記 11…

Sponsored link

最近の記事

アーカイブ

Sponsored link
  1. 検索システム

    新しいホテルを探すサービスをつくってみました【楽天トラベルAPI】【条件付】
  2. 検索システム

    【検索システム】をつくってみた【実際にログインしてさわれます】
  3. HTML/CSS

    【厳選8冊】ホームページを作れるようになるためのおすすめ本【初心者向け】
  4. IoT

    【Arduino】ラジコンをつくってみた 〜今ドキのプログラミングの覚え方
  5. docker初心者向けdocker-composeからやったほうがいいかもよ

    ツール

    【Docker】初心者はdocker-composeから始めた方がいいかもしれな…
PAGE TOP