<commit_before>---
layout: post
title: Firebase + Vue.js で ToDo アプリ開発
category: blog
tags: firebase javascript vuejs css
---

コロナ・引きこもり記事の第3弾。引きこもり期間中に新しいことにトライしようと思ってFirebase+Vue.jsでアプリを作ってみた。もうすこしブラッシュアップしてから公開しようと思っていたのだが、他の活動が忙しくなってしまい、時期を逃してしまいそうだ。改善の余地は多いがポストしておこう。

簡単に言うとFirebaseはサーバレスのデータベース・アプリのホスティング環境だ。データを保存するデータベース、認証フレームワーク、ウェブアプリ配信のためのホスティングURLなどを提供してくれる。小規模の場合は無償で試すことができる。

Vue.jsはアプリ構築のツールセット。JavaScriptのラッパーとして動作する。コンポーネントはHTMLで作成し、CSSで見た目を、動作をVue.jsスタイルのJavaScriptで定義する。それらをコンパイルして配布用のJavaScriptを作りFirebaseから配信する。今回はウェブアプリを作ったがiOSアプリ、Androidアプリも対応可能。ウェブアプリもiOS、Androidのホーム画面のアイコンから実行できるので、まずはウェブアプリから始めるのが良いと思う。最近は生のJavaScriptではなくTypeScriptが人気で、Vue.jsはどちらも対応している。まずは基本的なJavaScriptで入門してみた。

題材は、良くあるが「TODOリスト」にしてみた。最近、WanderlistがMicrosoftに買収されTodoがOfficeに統合されてしまって使い勝手が悪い（プライベートと仕事のアカウントを分けるという意味でも）。自分の気に入るような代替品を自分で作っておきたい、という動機もある。


0. [環境構築](#h_setup)
1. [ページ遷移の追加](#h_page_transition)
2. [FirebaseのAuthenticationでユーザ認証をする](#h_authentication)
3. [Firebaseのデータベースを設定する。アプリでデータベースのデータを表示する](#h_database)
4. [CSSで見かけを整える（Material Design）](#h_css)


## 環境構築<a name="h_setup"></a>

OSがパッケージで提供している場合もあるがバージョンが古いことも多いので、ローカルにインストールしていく。環境はLinux(Ubuntu)を想定しているが、WSL2やmacOSなどの一般的な環境では同様に動作するだろう。

* nvmのインストール
    + `curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash`
    + `nvm ls-remote`で現在のリモートのバージョンをチェック→Latest LTSはv12.18.3
    + `nvm install v12.18.3`
    + `nvm ls` でv12.18.3が使われることを確認。
* npmの更新
    + `nvm install-latest-npm`
    + `npm --version` → 6.14.7。ここに環境を構築していく。
* ローカルのVue.js環境構築
    + `npm -g install @vue/cli`
    + `vue --version` → 4.4.6
* Firebase CLIのインストール
    + `npm -g install firebase-tools`

## プロジェクトの作成

`vue ui`とコマンド入力することによってでブラウザUIが起動する。そこからプロジェクトが作成できる。名前は`toodo`としてみた。

![Vue.js プロジェクト作成](../images/firebase-ss1.png)

### プラグインの追加

「依存」→「依存をインストール」→「Firebase」を追加する。

![Vue.js プロジェクト作成](../images/firebase-ss2.png)
![Vue.js プロジェクト作成](../images/firebase-ss3.png)
 
「プラグイン」→「Vue router」をクリックしてVue routerを追加する。

### 動作確認

「タスク」→「serve」でアプリをビルドしてブラウザで実行できる。

![Vue.js プロジェクト作成](../images/firebase-ss4.png)

生成されたアプリをブラウザ上で実行している。

![Vue.js プロジェクト作成](../images/firebase-ss5.png)

ちなみに、右クリックで「ソースを見る」としてもアプリをロードするためのHTMLが見えるだけで、ここに表示されている要素は見ることができない。HTMLのソースではなく、アプリがJavaScriptで動的に埋め込んでいるためである。`<div id="app"></div>`の部分をアプリが書き換えている。

この時点でディテクトリは次のような感じ。`node_modules/`以下に依存ライブラリがインストールされているが`.gitignore`されているので見えない。

![Vue.js プロジェクト作成](../images/firebase-ss6.png)


同様に、配布用のアプリを「タスク」→「build」→「タスクの実行」で生成できる。`dist/`ディレクトリに出力される。この生成結果は、あとでデプロイする時に使われる。

## Firebaseの設定

GoogleアカウントでFirebaseにログインする。

「コンソール」→「プロジェクトを追加」でプロジェクトを追加する。

* たとえば「toodo」とプロジェクト名をつけると、「toodo-abcdef」のような詳細プロジェクト名が自動生成される。
* その次のGoogleアナリティクスはデフォルトでOK。
* プロジェクトを作成」ボタンで、プロジェクトが作成される。

最初の画面で「</>（ウェブアプリ）」を追加する。

![Firebaseプロジェクト作成](../images/firebase-ss7.png)

* ニックネームは好きに付けて良い。今回は「toodo」が無難だろう。
* Firebase Hostingを有効にする。さっきのアプリの詳細名（toodo-abcdef）が選択される。
* 「アプリを登録」ボタンで登録できる。

### アプリにFirebaseの設定を追加

Firebaseからは、「次のスクリプトをコピーして<body>タグの下側に貼り付けます」と書かれているがうまく行かなかった。

スクリプトをコピーして、手元のプロジェクトの`public/index.html`の`<body>`タグの次に貼り付ける。

その次のFirebase CLIは、上ですでにインストールしてあるはず。

### デプロイ

手元のコンソールで、書かれているように、次のコマンドを順に実行する。

```
$ firebase login
```

```
$ firebase init
```
ここでいくつか、アプリの設定について質問される。
![Firebaseプロジェクト初期化](../images/firebase-ss8.png)

矢印キーで項目移動、SPACEで選択、ENTERで次画面。

* Database:（スペースバーを押して）有効化
* Firestore: とりあえず無効のまま
* Functions: 無効のまま
* Hosting: 有効化
* Storage: 無効のまま
* Emulators: 無効のまま

その次の画面では「Use an exisint project」→「toodo-abcdef」を選択。

言語は「JavaScript」を選択。

「What do you want to use as your public directory?」という問には、デフォルトの「public」ではなくVue.jsのビルド出力ディレクトリである「dist」を指定する。

今回はVue routerを使ってシングルページアプリを作るので、アプリのタイプは「single-page app」でOK。

```
$ firebase deploy
```
でFirebaseのサーバにデプロイできる。表示されたURL(おそらく`https://toodo-abcdef.web.app`)にアクセスすれば、アプリの画面が表示される。これは、クラウド上にデプロイされているので、スマホなどからでもアクセスが可能だ。


## Todoアプリの基礎

ここからはToDoアプリを作っていこう。
おおまかに次の順番となる。

1. [ページ遷移の追加](#h_page_transition)
2. [FirebaseのAuthenticationでユーザ認証をする](#h_authentication)
3. [Firebaseのデータベースを設定する。アプリでデータベースのデータを表示する](#h_database)
4. [CSSで見かけを整える（Material Design）](#h_css)


## ページ遷移の追加<a name="h_page_transition"></a>

初期に生成されたアプリは、HomeとAboutの2ページを持っていて、`src/router/index.js`でページ遷移が決定されている。

そこに、TaskとSignupの2ページを足す。

### サインインページ

未ログイン状態でアプリを開いた時にログインを促すようなページ。Googleアカウントでのログインを予定しているので、そこに飛ぶボタンだけ配置しておこう。

`src/components/Signup.vue`

```html
<template>
  <div id="signin">
    サインインページ
    <div>
      <button @click="googleLogin">Google ログイン</button>
    </div>
  </div>
</template>
<style>
</style>
<script><commit_msg>Update Doc.<commit_after>---
layout: post
title: Firebase + Vue.js で ToDo アプリ開発
category: blog
tags: firebase javascript vuejs css
---

コロナ・引きこもり記事の第3弾。引きこもり期間中に新しいことにトライしようと思ってFirebase+Vue.jsでアプリを作ってみた。もうすこしブラッシュアップしてから公開しようと思っていたのだが、他の活動が忙しくなってしまい、時期を逃してしまいそうだ。改善の余地は多いがポストしておこう。

簡単に言うとFirebaseはサーバレスのデータベース・アプリのホスティング環境だ。データを保存するデータベース、認証フレームワーク、ウェブアプリ配信のためのホスティングURLなどを提供してくれる。小規模の場合は無償で試すことができる。

Vue.jsはアプリ構築のツールセット。JavaScriptのラッパーとして動作する。コンポーネントはHTMLで作成し、CSSで見た目を、動作をVue.jsスタイルのJavaScriptで定義する。それらをコンパイルして配布用のJavaScriptを作りFirebaseから配信する。今回はウェブアプリを作ったがiOSアプリ、Androidアプリも対応可能。ウェブアプリもiOS、Androidのホーム画面のアイコンから実行できるので、まずはウェブアプリから始めるのが良いと思う。最近は生のJavaScriptではなくTypeScriptが人気で、Vue.jsはどちらも対応している。まずは基本的なJavaScriptで入門してみた。

題材は、良くあるが「TODOリスト」にしてみた。最近、WanderlistがMicrosoftに買収されTodoがOfficeに統合されてしまって使い勝手が悪い（プライベートと仕事のアカウントを分けるという意味でも）。自分の気に入るような代替品を自分で作っておきたい、という動機もある。


0. [環境構築](#h_setup)
1. [ページ遷移の追加](#h_page_transition)
2. [FirebaseのAuthenticationでユーザ認証をする](#h_authentication)
3. [Firebaseのデータベースを設定する。アプリでデータベースのデータを表示する](#h_database)
4. [CSSで見かけを整える（Material Design）](#h_css)


## 環境構築<a name="h_setup"></a>

OSがパッケージで提供している場合もあるがバージョンが古いことも多いので、ローカルにインストールしていく。環境はLinux(Ubuntu)を想定しているが、WSL2やmacOSなどの一般的な環境では同様に動作するだろう。

* nvmのインストール
    + `curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash`
    + `nvm ls-remote`で現在のリモートのバージョンをチェック→Latest LTSはv12.18.3
    + `nvm install v12.18.3`
    + `nvm ls` でv12.18.3が使われることを確認。
* npmの更新
    + `nvm install-latest-npm`
    + `npm --version` → 6.14.7。ここに環境を構築していく。
* ローカルのVue.js環境構築
    + `npm -g install @vue/cli`
    + `vue --version` → 4.4.6
* Firebase CLIのインストール
    + `npm -g install firebase-tools`

## プロジェクトの作成

`vue ui`とコマンド入力することによってでブラウザUIが起動する。そこからプロジェクトが作成できる。名前は`toodo`としてみた。

![Vue.js プロジェクト作成](../images/firebase-ss1.png)

### プラグインの追加

「依存」→「依存をインストール」→「Firebase」を追加する。

![Vue.js プロジェクト作成](../images/firebase-ss2.png)
![Vue.js プロジェクト作成](../images/firebase-ss3.png)
 
「プラグイン」→「Vue router」をクリックしてVue routerを追加する。

### 動作確認

「タスク」→「serve」でアプリをビルドしてブラウザで実行できる。

![Vue.js プロジェクト作成](../images/firebase-ss4.png)

生成されたアプリをブラウザ上で実行している。

![Vue.js プロジェクト作成](../images/firebase-ss5.png)

ちなみに、右クリックで「ソースを見る」としてもアプリをロードするためのHTMLが見えるだけで、ここに表示されている要素は見ることができない。HTMLのソースではなく、アプリがJavaScriptで動的に埋め込んでいるためである。`<div id="app"></div>`の部分をアプリが書き換えている。

この時点でディテクトリは次のような感じ。`node_modules/`以下に依存ライブラリがインストールされているが`.gitignore`されているので見えない。

![Vue.js プロジェクト作成](../images/firebase-ss6.png)


同様に、配布用のアプリを「タスク」→「build」→「タスクの実行」で生成できる。`dist/`ディレクトリに出力される。この生成結果は、あとでデプロイする時に使われる。

## Firebaseの設定

GoogleアカウントでFirebaseにログインする。

「コンソール」→「プロジェクトを追加」でプロジェクトを追加する。

* たとえば「toodo」とプロジェクト名をつけると、「toodo-abcdef」のような詳細プロジェクト名が自動生成される。
* その次のGoogleアナリティクスはデフォルトでOK。
* プロジェクトを作成」ボタンで、プロジェクトが作成される。

最初の画面で「</>（ウェブアプリ）」を追加する。

![Firebaseプロジェクト作成](../images/firebase-ss7.png)

* ニックネームは好きに付けて良い。今回は「toodo」が無難だろう。
* Firebase Hostingを有効にする。さっきのアプリの詳細名（toodo-abcdef）が選択される。
* 「アプリを登録」ボタンで登録できる。

### アプリにFirebaseの設定を追加

Firebaseからは、「次のスクリプトをコピーして<body>タグの下側に貼り付けます」と書かれているがうまく行かなかった。

スクリプトをコピーして、手元のプロジェクトの`public/index.html`の`<body>`タグの次に貼り付ける。

その次のFirebase CLIは、上ですでにインストールしてあるはず。

### デプロイ

手元のコンソールで、書かれているように、次のコマンドを順に実行する。

```
$ firebase login
```

```
$ firebase init
```
ここでいくつか、アプリの設定について質問される。
![Firebaseプロジェクト初期化](../images/firebase-ss8.png)

矢印キーで項目移動、SPACEで選択、ENTERで次画面。

* Database:（スペースバーを押して）有効化
* Firestore: とりあえず無効のまま
* Functions: 無効のまま
* Hosting: 有効化
* Storage: 無効のまま
* Emulators: 無効のまま

その次の画面では「Use an exisint project」→「toodo-abcdef」を選択。

言語は「JavaScript」を選択。

「What do you want to use as your public directory?」という問には、デフォルトの「public」ではなくVue.jsのビルド出力ディレクトリである「dist」を指定する。

今回はVue routerを使ってシングルページアプリを作るので、アプリのタイプは「single-page app」でOK。

```
$ firebase deploy
```
でFirebaseのサーバにデプロイできる。表示されたURL(おそらく`https://toodo-abcdef.web.app`)にアクセスすれば、アプリの画面が表示される。これは、クラウド上にデプロイされているので、スマホなどからでもアクセスが可能だ。


## Todoアプリの基礎

ここからはToDoアプリを作っていこう。
おおまかに次の順番となる。

1. [ページ遷移の追加](#h_page_transition)
2. [FirebaseのAuthenticationでユーザ認証をする](#h_authentication)
3. [Firebaseのデータベースを設定する。アプリでデータベースのデータを表示する](#h_database)
4. [CSSで見かけを整える（Material Design）](#h_css)

この手順に沿って作ったアプリは、コミット履歴とともに、次のところで公開している。文章でわかりづらいところは、更新履歴を参照していただきたい。

[https://github.com/nkon/toodo](https://github.com/nkon/toodo)


## ページ遷移の追加<a name="h_page_transition"></a>

初期に生成されたアプリは、HomeとAboutの2ページを持っていて、`src/router/index.js`でページ遷移が決定されている。

そこに、TaskとSignupの2ページを足す。

### サインインページ

未ログイン状態でアプリを開いた時にログインを促すようなページ。Googleアカウントでのログインを予定しているので、そこに飛ぶボタンだけ配置しておこう。

`src/components/Signup.vue`

```html
<template>
  <div id="signin">
    サインインページ
    <div>
      <button @click="googleLogin">Google ログイン</button>
    </div>
  </div>
</template>
<style>
</style>
<script>
{'fraction_non_alphanumeric': 0.13418599609798396, 'fraction_numerical': 0.010188597442011706, 'mean_word_length': 8.162859980139027, 'pattern_counts': {'":': 0, '<': 43, '<?xml version=': 0, '>': 43, 'https://': 6, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6793942', 'n_tokens_mistral': 6700, 'n_tokens_neox': 6342, 'n_words': 380}