目次
第1章 はじめに
第2章 サーバーレスシングルページアプリケーションの基本
第3章 開発環境のセットアップとデプロイまでの流れ
第4章 Googleアカウントでのユーザー登録と、ログイン状態の判別
第5章 エディターの作成：データベース作成とデータ保存
第6章 見た目を整える
第7章 Webサービスとして公開するまでの必要な準備
最後に
第1章 はじめに
本書を手にとっていただきありがとうございます！
まずは購入するかどうかを考えている方もいるかと思いますので、本書のターゲットとそうでない方を明記しておこうと思います。もし次のターゲットに当てはまる場合は是非この本を手にしていただき「SPAがどういったものかつかめてきた！」「自身で作ったWebサービスを使ってもらえる楽しさ」などを体験していただければ何よりです。
1.1 この本の目的・ターゲット
本書では主に次のような方をターゲットとしています。
・HTML,CSS,Javascriptを利用して、簡単なWebサイトを作ったことがある人
・複数のページや状態管理をJavascript使って自力で行い、ごちゃついてしまい消耗している人
・普段デザイナーとしてマークアップしており、フロントエンドの新しめな環境でのサイト構築を経験してみたい人
・シングルページアプリーケーション、Vue.jsってものを触ってみたい、またはそれらの挫折経験がある人
・やったことないけどとにかくWebサービスを作ってみたい人
・FirebaseのWeb版を使ってみたい人、どんなことができるのか知りたい人
・普段サーバーサイドやネイティブアプリを作っていて、Webフロントエンドをさらっと触ってみたい人
簡単なWebサイトを作ったことがあるWebフロントエンド初心者の方が、本書を通じてSPAの基本を摑み、簡単なWebサービスが作れるようになることが目的です。そしてそれらを抑えた上で、さらに次の段階へステップアップするための足がかりになるような要素を各所に入れています。
また、最終的にどんなWebサービスが作れるか、というサンプルを公開しています。今回のプロジェクト名は"MyMarkdown"とし、本書で進行していく上でこの名称が出てきた場合は、都度ご自身のオリジナルのプロジェクト名に置き換えつつ進めてください。
サンプルサービスは本書の内容に加えて、見た目や使いやすさを向上させるために多少手を加えていますが、機能面ではあまり差はありません。
MyMarkdown
https://mymarkdown.firebaseapp.com
Googleアカウントでログインし、マークダウン形式でプライベートなメモが書けるWebサービスです。
本サイトのソースコードについてもこちらに公開しておきますので、途中詰まってしまった時などにご利用ください。
MyMarkdown github リポジトリ（masterブランチが本書の内容です）
1.2 本書であまり触れない部分
本書では主に「Vue.jsとfirebaseを使って簡単なWebサービスを作ってみる」ということを目的としているため、各技術の詳細や網羅的な内容は収まりきらないため省略しています。
・React.jsやAngular.jsなど、他のフレームワーク・ライブラリとの差分については触れません。
・Vue.jsの場合はVuexなどを用いて状態管理を行うのがSPA開発では一般的ですが、今回は入門としてその部分は触れず、コンポーネントをまたいだ状態管理は行いません。
・Firebaseの中でもFunctionsや2018年6月現在ベータ版であるCloud Firestore、アプリSDKなどの内容については触れません。本書ではAuthentication、HostingやRealtime Databaseについてのみ利用します。
・cssについての詳細なテクニックや、PC/SPでの表示切り替えなどはあまり触れません。ただし、本書の手順でSCSS自体は利用します。
・Nuxt.jsなどを用いたサーバーサイドレンダリングについてやPWA化、パフォーマンス・チューニング等については触れません。
・Webpackでのコンパイル等についての詳細や、機能追加については触れません。
・セキュリティやテストについての内容は触れません。
ある程度省略はしますが「この本を終えた後、何をやればいいかわからない」ということにならないよう、できるだけ各項目について名称やざっくりした説明を付け加えておきます。
また、本書の最後には「強くてニューゲーム」として、追加で実装するとよい機能などを羅列しておきますので、その後のステップへ進む手がかりにしていただければと思います。
1.3 本書の構成と対応環境について
この章では本書の前提について、2章ではサーバーレスシングルページアプリケーションとはなにかについて用語の説明なども含めて記載しています。
"前置きはいいのでさっさと開発を始めたい"という人は3章から読み進めてください。
本書で開発を進める環境はMacOSを前提としていますが、Windowsでもセットアップ以外はほぼ問題なく同じように進められるはずです。コマンドを利用する場合はMacではターミナル（Terminal.app）ですがWindowsの方は（cmd.exe）コマンドプロンプトを利用していただき、都度コマンドは対応するものに読み替えてください。
コマンドを利用する際には次の記述で行います。（$は打たなくても大丈夫です。）
$ ここにコマンドが入ります。本書ではそれほど利用する場面は多くありませんが、「黒い画面」が苦手だった方はこれを機に利用してみていただければと思います。使いこなせてくると非常に便利です。
今回執筆時に利用したNode.jsのバージョンは8.11.2です。お使いの環境でのNode.jsのバージョンがわからない方は次のコマンドを実行してみてください。
$ node -vNode.jsが入っていればバージョンが表示されます。
nodeコマンドが見つからない旨が表示されてしまった方は、次のサイトからダウンロードが可能ですので、こちらをダウンロードしてインストールをお願いします。
Node.js公式サイト
もしバージョンに差異がある場合には8.11.2のインストールを推奨しています。
MacOSをお使いの方はnodebrewやnodenvなどをインストール・WindowsOSの方はnodistなどを利用して、できるだけバージョンをあわせていただければと思います。
また、執筆の際に利用したその他のnpmのバージョンの詳細についてはサンプルコードのリポジトリの中のpackage.jsonを見ていただければと思います。
本書でコラム的に用語の説明が個別で必要な場合には次のような「コラム」の形で記載していきますので、すでにご存知の方は読み飛ばしていただければと思います。
npmって？
npmとはNode.jsの"パッケージ管理ツール"です。
ここでいうパッケージとはNode.jsで利用できる便利な機能が入ったライブラリやツールをまとめて管理するためのものです。Node.jsをインストールしておくとnpmコマンドですぐ利用できるようになります。
その際に管理データをpackage.jsonというファイルにまとめておくことができ、その中に「このプロジェクトではVue.jsのバージョン2.5を使います」などの情報が記載されています。
$ npm install
というコマンドを打つと、そのディレクトリにあるpackage.jsonを参照して node_modules というディレクトリにそのライブラリ郡をダウンロードしてくるといった機能があります。
ファイルの編集が必要な部分については、編集する行についてのみ次のように記載します。
リスト1.1: /index.html
1: <!DOCTYPE html>
2: <html lang="ja">
3: <head>初心者でない、すでに他のフレームワーク等を利用したことがある方や、もう一歩進んだことをやりたい方などで本書を読み進めている方については、次のようなコラムで書き加えておきますので是非挑戦していただければと思います。
ちょい足しポイント
このような形で、さらなる高みを目指す際のヒントをところどころに記載しておきますので、余裕があれば是非試してみてください。
1.4 公式ハッシュタグでつぶやいてください！
本を買ったタイミングや、進めていて困った時・切りのよい所まで進められた時など、ぜひぜひTwitterで #Webサービスを作る本 というハッシュタグを付けてつぶやいてみて下さい！
・困っていたら著者が解決しに行きます
・同じ本に取り組んでいる人同士で問題を共有できます
・他の方がどんなデザインにしたのか見に行けます、自分のサービスも見てもらえます
など、さまざまなメリットがあるので是非作っている過程をつぶやいてみて下さい！
もしプログラムが思ったとおりに動かないということがありましたら、
・実行時のソースコードをgithubなどにアップロードしたリポジトリのURL
・公開しているサービスのURL
の２つを共有していただければ、できるだけ早く解決に向かいます。
1.5 リポジトリとサポートについて
本書に掲載されたコードと正誤表などの情報は、次のURLで公開しています。
https://github.com/nabettu/mymarkdown
1.6 表記関係について
本書に記載されている会社名、製品名などは、一般に各社の登録商標または商標、商品名です。会社名、製品名については、本文中では©、®、™マークなどは表示していません。
1.7 免責事項
本書に記載された内容は、情報の提供のみを目的としています。したがって、本書を用いた開発、製作、運用は、必ずご自身の責任と判断によって行ってください。これらの情報による開発、製作、運用の結果について、著者はいかなる責任も負いません。
1.8 底本について
本書籍は、技術系同人誌即売会「技術書典4」で頒布されたものを底本としています