タダケンのEnjoy Tech

楽しみながらラクに成果を上げる仕組みを考える

「Vue.jsとFirebaseで作るミニWebサービス」は個人でWEBサービスを作ってみたい人にピッタリの本

f:id:tadaken3:20180913193239p:plain こんにちは!
タダケン(@tadaken3)です。

今回は「Vue.jsとFirebaseで作るミニWebサービス」という本をご紹介します。本書はWebサービスを作ってみたい人にまさにピッタリの本です。

著者は「ためしがき」開発者のnabettuさん

「ためしがき」というWebサービスを開発された@nabettuさんによって書かれたものです。

「ためしがき」は、商用利用可能な日本語のフリーフォントをお好きな言葉・文章で試すことができるWebサービスです。

商用可能なフリーフォントで一度にたくさん試すことができて、WEBサイト作成やデザイン作成時のフォント探しにとても便利なサイトです。

はてなブックマークを2000以上を集め、驚異的な注目を集めています。

百聞は一見にしかずなので、まだ触ったことがない方は、ぜひ「ためしがき」を触ってみてください。丁寧に作られたユーザーインターフェース、遊び心のあるアニメーションなど、とても勉強になります。

tameshigaki.jp

その@nabettuさんが、ミニWEBサービス(シングルページアプリケーション)の作り方を教えてくれるのが本書です。

本書を書かれた経緯については@nabettuさんのブログにまとめられています。

サービスを作って人に使ってもらうってめっちゃ楽しいからみんなやろうぜ ってのを伝えたいなってのがまず最初にありまして、

「でもWebサービス開発って結構ハードル高いんでしょう?」って人も一回小さいものを作ってみるとなんとなく流れがわかるので最小限のコンパクトな形にまとめました。

著書「Vue.jsとFirebaseで作るミニWebサービス」が発売されました!🎉本に込めた想いと経緯など - フロントエンドの地獄

これは読むしかありませんね。

本書では、

  • ユーザーインターフェイスを構築するためのJavasricptのフレームワークVue.js
  • Googleが提供するモバイルアプリやWebサービスを開発するためプラットフォームFirebase

を組み合わせてWebサービスを開発していきます。

ちなみになぜVue.jsなのか?なぜFirebaseなのか?ということも上記のブログに書かれています。

いきなりデブロイするところからはじまる

Webサービス開発については、いろいろな技術書がありますが、この本の中でとくに素敵だなと思ったのが、いきなり「サービスをデブロイする」ところからはじまることです。

デプロイとはサイトをサーバーなどに公開して、他の人が利用可能な状態にすることです。基本的なVue CLIの使い方とfirebaseの設定を方法を解説した後、WEBサービスをすぐにデプロイしてしまいます。

最初にデブロイするサイトは、Vue CLIのテンプレートから作られた簡単なものです。ですが、まずデプロイすることで、自分がWebサービス開発の一歩を踏み出したんだという気分になり、一気にテンションがあがります。

ボクは、動いているサイトを見て、テンションもあがり学習意欲もアップしました。

”完成”するまでデプロイはしないものと思っている方もいるのではないでしょうか。Webサービスには”完成”などという段階は存在しません。Webサービスにとってローンチは、数あるマイルストーンの一つにすぎないのです。

引用: 「Vue.jsとFirebaseで作るミニWebサービス」P.16

まずデプロイする理由としては、以下の2つがあげられています。

  • ローカル環境と本番環境が違うことで起きる問題を先に解決できる
  • 見える形にしておくことで、友人などに途中経過をみせてフィードバックをもらいやすくなり、モチベーションの維持につながる

とくに個人開発においては2つ目の理由が大きいと思います。機能を追加したり、デザインを変更した結果を、すぐさま他人に見せてフィードバックしてもらうことで、反応を見ながら、開発を進めることができます。

そのあとは、少しずつ機能を追加していき、そのたびにデプロイして進めていきます。

オリジナルのMarkdownエディタが作れるようになる

また、本書では、

  • Firebaseを利用したログイン認証の実装方法
  • データベースの作成とデータ保存・取得方法
  • Webサービスとして公開するために必要最低限のこと(見た目やセキュリティ対策など)

といったことも学べます。最終的には以下のようなマークダウンエディタを作成することができます。1

mymarkdown

Markdownエディタの作成を通して、Webサービスを開発する上で、基本となるユーザーの管理方法だったり、データの保存・取得方法などを学ぶことができます。加えて、セキュリティ対策などの面に触れている点もとても実用的です。

Webサービスを作りたい、個人開発者を目指しているという方はぜひ本書をお手にとってみてください。本書の内容を学ぶことで、Webサービスを開発する上で、必要な要素を一通り学ぶことができると思います。

改訂新版 Vue.jsとFirebaseで作るミニWebサービス (技術書典シリーズ(NextPublishing))

改訂新版 Vue.jsとFirebaseで作るミニWebサービス (技術書典シリーズ(NextPublishing))

最後に少し宣伝です

今、ボクが所属しているWebサービス開発者集団「入江開発室」のメンバーで「LIKE IT」というサービスを作っています。「LIKE IT」もVue.js + Firebaseで作成していて、「Vue.jsとFirebaseで作るミニWebサービス」を読んだことをきっかけに開発に取り掛かりました。

「LIKE IT」は、自分の好きな本をコメントを付けて、SNSで紹介するサービスで、10月中のリリースを目指しています。

f:id:tadaken3:20180913213332g:plain

「LIKE IT」についての情報は、ボクのTwitterや本ブログで公開していく予定です。

LIKE ITにご興味を持っていただけた方は、Twitterアカウントをフォローもしくは、ブログの読者登録していただけると開発の励みになります!

ぜひ、よろしくお願いいたします。


  1. デザインは超適当です。