片雲の風にさそはれて 紐のない風船のようなフリーランスの備忘録

【学習記録】Vue.jsとFirebaseで作るミニWebサービス 初めてのサーバーレスSPA

【学習記録】Vue.jsとFirebaseで作るミニWebサービス 初めてのサーバーレスSPA

こんにちわ。ノラです。普段は常駐フリーランスでレガシーエリアをウロウロしてます。

ここ2年ほどはDWH基盤で主にSQLServerとTalendとExcel VBA（ときどきQlikview)をさわっていました。

 

どうにも新しい技術のはいる余地がなく、個人で遊ぶのに何か面白いのないかな？と物色していたところ「Vue.jsとFirebaseで作るミニWebサービス 初めてのサーバーレスSPA」なる技術本発見。ワンコインでお手軽そうだったのでさっそくポチりました。

 

衝動的に購入してから約一ヶ月間の熟成期間をおき、一応最後＋アルファまでやりきったのでまとめてみました。

 

目次

書籍について

同人誌版(#モモンガ本)とインプレスR&D発行の商業版(#webサービスを作る本)があります。両方ともお助けハッシュタグがあります。素晴らしい。。。

機能追加＆アップデートがされるので、これから入手するのならば商業版の方がよさそうです。

OD＞Vue．jsとFirebaseで作るミニWebサービス （E-Book／Print　Book　技術書典SERIES） [ 渡邊達明 ]

公式サンプル

完成品(機能強化版)があるので、困ったらソース確認ができます。

アプリ：https://mymarkdown.firebaseapp.com/
コード：https://github.com/nabettu/mymarkdown

書籍の対象者

どんな人をターゲットとして本を書いてあるか本より抜粋しました。私の該当する部分は赤字で。

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

 

私の正確なWEB系のスキルセットは「Webシステムの改修案件を請けるけど、年代物ばっかでJavaScriptとJQueryとVBScriptが共存していて、ついでにcssとhtmにStyleタグ混ざってたりが多いので、それぞれの境界とかあんまり理解してない(動けばよい派)」です。

そしてやりたいことは「SPAの理屈知りたいのとVue.jsを触ってみたい」です。Firebaseはおまけ。

学習記録 1周目 1日目

・目次とまえがき

さらーと流し読み。npmとは？とか、ところどころ注釈が入っていてありがたい。

・Firebaseの機能について

そもそもFirebaseとGCPは何が違うのと根本的疑問がでてきて気になると止まらない。それを解決したのがこちら。株式会社ドワンゴ 西田和史さんのFirebaseを利用するためにGCPとCloud IAMの 基本を理解しようでした。

FirebaseはGoogleが3年前に買収したサービス

統合されてなくて、未だに別のサービスで別のURL

でもFirebaseのユーザと料金の管理はGCPに依存してる

おお。納得。すっきり。

・開発環境のセットアップ

何も考えずにNode.jsをダウンロードしてきてインストールしたら書籍と最新バージョンが違うと…。Node.jsのバージョンが原因と思われる動作不良があったらあわせようととりあえず先へ。

・Firebaseアカウントの作成~ログインページを作りWebにDeployしてログイン

初回は理解しないで良いからとまんま内容を実行して、コードを写経。Deployコマンド実行してWeb表示してログイン→OK。スムーズすぎてびっくりする

 

学習記録 1周目 ２日目

・Editor部分作成

ほんの数行のコードなのに、実行するとメモ入力画面とMarkdownプレビュー画面が上下に表示される…。Chromeのデバッグでみても良く分からず、本家のコードをカンニングする。そうすると左右の率が40%:40%。これが原因か？と50％→40％にするも変わらず…。

デザイン部分はだから嫌いなんだと考えるのを放棄。#100daysofCodeチャレンジでやっていたので、Twitterでちょっとぼやいて終了。

そして翌朝…。なんと作者ご本人からのサポートが。

 

あああ。なんか本質じゃないところを聞いて申し訳ない。そして結果としてStyle部分に変な空白文字があるのが原因と。

 

エンジニアもみじマークがつけたら、若葉マークと一緒の扱いしてもらえるかな…。

 

学習記録 1周目 3日目

・複数メモを作る、メモリストを作る、リストから選んだメモに切り替わる

・Firebase Realtime Databaseへ保存 & ログイン時に呼び出し

前日のうまくいかなかった原因が唐突にわかる。

 

私、入力するのが面倒でPDFからコピペした…。これのせいだ。PDFから文字列を選択してコピペして改行だけで見た目整えてたから、不思議な文字が入ったんだ！と。(すべて自分のせい)

 

ちゃんと写経するなら手を動かせということですね。この日は全部手打ちしました。そして“(ダブルクオート)、,(カンマ)、つづり間違えるなどなどTipo爆発。

 

インテリセンス無いの辛い…と考えて、ふと。ない訳ないじゃんと…。そして即Visual Studio CodeにVue tooling for VS Codeをインストール。ここまでシンプルにテキストエディタでやってこれたから気付かなかったんですよ(言い訳)

 

無事に動いて、機能的にはマークダウンエディタが完成しました。

学習記録 1周目 4日目

・見た目を整える日

shitajicssがどうにも有効にならず、本家githubへ。npmが必要だったんですね。そりゃインストールしていない機能は使えない。(ここらの記述は最新版で修正されているそう)

 

その他、ちょこちょこ変えてみたものの。。。デザインセンスが壊滅なので、あまり整わないまま。１周目完了としました。

 

あまり理解しないままの写経でしたが、トータル6時間ぐらいで飽きることなくさっくり終わり、機能も一通り理解出来て気分よくなりました。なにより公開するのにサーバ作らなくて良いのが最高。

 

そして、勢いに乗って二周目計画に。

 

学習記録 2周目 強くてニューゲーム・・・？

色々と機能拡張案があり、出来るところはやってみようと拾いだして見ました。

・ちょい足しポイント

  1. 普通のwebpack テンプレートを使って、unit テスト等を書いてテスト駆動で進める
  2. CI用にfirebase 用のtoken を発行して CI で deployする
  3. Vue-routerにルーティングの管理を引き受けてもらう
  4. 他のログイン認証を追加する
  5. Vuexで兄弟間でもデータを参照できるようにする
  6. ログイン処理中にローディング画面を表示する
  7. エディタ機能強化
    ・メモの順番を変えられるようにする
    ・最後に編集した日付や作成した日付を追加する
    ・タグ機能を追加する
    ・プレビューのオンオフできるようにする
    ・検索機能をつける
    ・ソート機能をつける
  8. 保存機能
    ・Ctrl + Sでの保存機能
    ・自動保存機能
    ・メモを切替えたら保存保存
  9. ゴミ箱機能をつける

 

・初心者向け機能

  1. ナビゲーションバーの追加
  2. マークダウンでチェックボックスを表示出来るようにする
  3. メモ削除時に確認する
  4. セーブ中はセーブボタンがローディングする（ローディング中は押せない）
  5. 開閉できるメニューを作ってみる
  6. スマホとPC で別々なCSS を当てるようにする
  7. 保存前にタブを消そうとしたら警告を出す
  8. メモの文字数を表示する
  9. functions を使ってAPI を作り、登録ユーザー数をトップページにだしてみる

・中級者向け

  1. textarea をスクロールするととプレビューのスクロールも連動
  2. 各種機能にショートカットキーの追加
  3. 変更したログをとっておいて、以前のメモへ戻れる
  4. Functions を使ってサーバーサイドレンダリングをやってみる(XSS に注意)
  5. Firebase RealtimeDB ではリアルタイムでの複数人編集機能があるので、それをとりいれて編集できるようにする
  6. メモをpublic なデータとして、他の人が見えるが編集できないような場所におけるようにする
  7. 画像を保存できるようにする

 

さらっと32機能あります。全部クリアできたらVue.jsをマスタできそうな勢いです。1日1機能調べながらつけて約1ヶ月ぐらい…？赤字部分だけ挑戦しました。初心者向け6.は途中で飽きました。挫折。

結果、強くてニューゲームにはならなかったけど、装備がひのきのぼうからどうのつるぎになりました。

 

学習記録 2周目 補記

・Node.jsのインストール

１周目終わった時点まで、Node.jsは問題なく動きました。

そして1周目は推奨のMac機で開発したのですが、些細な部分が慣れていなく不便で（Chromeのデバックウインドウとか、再読み込みとか。画面ショットとか）Windows機にも開発環境を再度作りました。

みんなMacなのかな？出荷速報みてもMac率高いしな…。と、思いつつ自分のためにまとめました。

 

 Qiita 
Windows 7にNode.jsをインストールする - Qiita
https://qiita.com/noranoko/items/745008d8ffc69412ee64
スキル洗い替えのために「(https://booth.pm/ja/items/829853)」なる技術本を購入しました。Mac推奨だったのですがWindowsに環境構築...

 

・２周目の追加機能とそのあれこれ

エディタ：タイトルとメモ部分を分離

私の使いやすいMarkdownEditorのイメージはQiitaです。下書き10ファイル制限とっぱらってほしい。

 

ログイン機能の追加

Social Sign-In Buttons for Bootstrapでログインボタンをつくろうとしたけれど、うまく行かず検索していてFirebase UIなるGoogle 提供のUIを発見。サンプルもボタンもかわいいのでこちら採用

参考URL：Authenticating a Vue JS Application With Firebase UI

 

Vue-routerを使用してルーティングする

Dev環境では問題なく動くけれど、FirebaseにDeployするとログイン後Homeが404表示に。
Routerをhistoryモードで使うとうんぬんとの記事をみつけそのままFirebase.jsonを加工したら動くようになった。historyモードとは何ぞやと何故この設定で動くようになるかは必要になった時に調べる。

参考URL: HTML5 History Mode

 

CSSを切り分けて外装を整える

Bootstrapでやろうと探したのだけど、Vuetifyというのが公式ぽいのでインストール。やってみたけれど、そもそも画面のデザインセンスがなくて挫折。

参考URL：Material Design Component Framework

 

感想そして完成品

やってみた感想

Vue.jsもFirebaseもSPAもまったく未経験でしたが、本通りに進めるとさくっと進みました。

 

本来だったら大きな大きな木で枝葉に手をかけよじ登らないといけないところ、上から縄梯子がかかってて、一番風景よい見晴らし台(リアルWEBで動くところ)まで簡単に行けちゃった。そんな印象でした。

 

Vue.jsの雰囲気を知る入門書としてはすごく良い本でした。そして、やっぱり開発は楽しいなぁと。そして次何か作る時ははVue.jsとFirebaseでやってみようとも。

完成品

一応完成品っぽいのはこちらに。

アプリ：https://mymarkdown-bb441.firebaseapp.com
コード：https://github.com/noranoko/mymarkdown-tutorial

おまけのおまけ

結局vue.jsってどこがスタートなの？index.html と Main.jsと App.vueってどんな順番で何がキッカーで誰に呼ばれてるんだろう…？次回Vue.jsを触るときはたぶん、そこの入門書からスタート。おすすめ本があったら教えてほしいです。

学習記録カテゴリの最新記事