ミルク蒼屋のチラシ

Colloid(コロイド)が何か色々と残したりするブログです

技術同人誌の「初めてのシングルページアプリケーション Vue.jsとFirebaseで作るミニ Web サービス」を実際にやってみた

約1年前に下記の技術同人誌を電子書籍で購入した

booth.pm

なんで買ったの?

遡ること2年ほど前、DDR譜面紹介合同の第一弾を主催終えてふと思ったワイ
「募集はともかく、提出先を3通りにするのだるい…*1
「せや!自分で作ろ!」

そんな中、偶然にもTwitterで同上の技術同人誌をみかけたワイ、即購入
決め手は当時よくみかけたFirebaseという存在。ぐぐると人生を変える要素らしい。
あとは純粋にVue.js触ってみたいなぁ*2でも敷居高いなぁとかそんな思いをしてたら、この本はVue.jsも使うだと…というのもあり
でも炎上に転職を重ね、着手できたのが今年入ってから。だがその頃には商業本があったのだ!

そのため商業化する前に買ったので、買い直すよりは一回やってみようと思いやっていったぞ!
長くなるので折りたたむ

この技術同人誌とは

タイトル通りの初めての人向け、Vue.jsとFirebaseでSPAなWebアプリつくろうぜ!といった内容。タイトルからすべてネタバレ。まるでGガンダムの最終回の潔さ。そこがいい。
著者は id:tatsuaki_w 氏で個人的にはためしがきというサービスをコミケや同人誌執筆シーズンになると利用させて頂いてる。強い

登場人物ならぬ用語紹介

ここでなんかよくわからんとならぬように、自分でも振り返る時に振り返りやすくするため用語を紹介すっぞ

  • シングルページアプリケーション

SPAとは「Single Page Application」の略で、単一のページでコンテンツの切り替えを行うWeb アプリケーションのアーキテクチャの名称です。
シングルページアプリケーション(SPA)の導入メリット&デメリット|株式会社オロより引用

インターネット老人の方でHTML5前のWebサイトを作ったことある人向けならば、昔はページ毎に1枚1枚ページを用意しなくてはならなかった。
しかしSPAになると、全部ページを書き換えず一部分をJavascriptでいい感じに置き換えることにより、ストレスなくWeb体験ができるということだ。
昔の個人サイトとGoogleMapを比較すればわかりやすい。

  • Vue.js
    jQueryに変わりそうなJavaScriptフレームワークだ。SPAの構築もしやすい設計らしい。らしいというのは恩恵がいまいちよくわかってないので詳細はぐぐれ

  • Firebase
    Googleが提供しているWebアプリのバックエンドに必要なサービスがモリモリのクラウドサービスだ。よくある省略形で表すとmobile backend as a ServiceでmBaasというカテゴリらしい(?)
    Googleアカウントがあれば誰でもまずは無料で使える。やばい。

以上だ!

ちなみに内容の概要が本のタイトルにつながるので概要はかかず、初っ端から感想とか書いていくぞ

実際にやってみて

内容は根絶丁寧に環境構築からデプロイまで書かれており、Firebaseはすごいんだぞ!というのが伝わる本でした。
そもそも経験として、MVCフレームワークなら作ったことあるけどSPAやってみたいけどよくわからんという状態の中、SPAとはなんぞやというのが手を動かしてわかる本としてありました。
こういうタイプは商業本ではあまり見かけないなぁ。。。技術書でも自己啓発な感じの内容あるじゃないですかーと思うなど。
いわゆるハンズオンをうまく本にまとまったというのがわかりやすい本の内容であり概要だとおもった。

得られたなぁという知見

  • Firebaseヤバイ
    Firebaseヤバイ。まずDB。GoogleのアカウントがあればDBが手に入る。しかもNoSQLな。NoSQLってなんだよRDBしかやったことねーよという方でも入門として使える。しかもGoogleアカウントがあればね。
    次に認証周りがすごい。C#だとめんどいコード書かないと行けなかったけど、Firebaseならポチれば有効になる。もちろんログイン周りのコード書かなきゃだけどこれは楽杉。
    そしてデプロイからの公開。というかWebサーバーとか立てたり契約とかせずにFirebase deployのコマンドで公開とか草しか生えない。おかしい。
    Webとのつなげ方もHTMLに貼り付けるだけ。どんな作りなんだ。。。。
  • Vue.jsの環境構築とコーディング
    環境構築方法が得られたのは個人的には大きな収穫でした。ググってnpmの使い方とかもいまいちよくわからないというか、わかってないというか。当本はnpmのコマンドを解説したりするのでありがたい。
    そしてVue.jsの書き方が得られた。.vueでの書き方というものか。jQueryだと.htmlでも書けるのでVueもそんな感覚なのかなという勘違いみたいなのは少しあったけど、その勘違いは消えたのも良い知見を得られた。
    書き方自体は普通にプログラミングという感じ*3、なのでプログラミングの基礎的な構文わかればできるなぁと敷居的なのが下がった。良い。
  • SPAの挙動
    個人的にMVCはわかりやすい役割分担だなぁと思った中、じゃあSPAはなんだよ。。。と。当本を実際にやってみて、本当にSPAとはという挙動ですげぇなと思った。へぇ

    こうして欲しかったなぁという所

  • ページの改行が微妙
    コードの途中での改行は見辛い。。。商業本は見たこと無いので何も言えないけど、今後コード乗せるときあれば考慮すべき点と思ったなぁ
  • あるコードが間違っている
    GitHub上でのコードなら動きましたね。商業版出てるとはいえ、技術同人版もなにか注意書きとか更新とかしていただけるとありがたい。まぁググる力がつくと考えれば…

こんな方にオヌヌメ

個人サイト運営していて、久しぶりにWeb上でポートフォリオ作るか~というインターネット老人の方でしょうか。
MVCからSPA技術学んでみたい方にも良いかと。ただ商業版が出てるので買うならそちらかなぁ。。。どうだろうか。
技術同人手にとって見て、それ以上に興味が出たら商業手に取るというのもありなのかもしれない。。。。とおもいますた。

おわり

*1:Skypeとメールとその他で参加者に合わせてもらった

*2:前職の案件で、別チームがフロントVue.jsというSIerらしかぬ開発環境で泣いた

*3:if文とかそんなん