2018-09-29

Firebaseを使ったwebアプリで、apiKeyなどの接続に必要な設定をWeb Consoleで確認する手順

Firebase

FirebaseをReactと共に使う時に、firebaseの設定をファイルに書く必要があるのですが、どこに書かれているかすぐにわからなくなるので、スクリーンショット付きで手順を示します。

１. Firebase console (https://console.firebase.google.com/)のProject Overviewを開き、+アプリの追加をクリックします。

f:id:yucatio:20180924180028p:plain

２. </>を選択します

f:id:yucatio:20180924180238p:plain

３. スニペットが表示されます。これをプロジェクトのコードにコピーします。

f:id:yucatio:20180924180841p:plain — apiKey, authDomain, databaseURL, projectId, storageBucket, messagingSenderId が表示される

2018-09-28

Realtime Databaseへのデータの事前登録 (STEP 1 : 誰でも読み込み・書き込みできるタスク管理アプリを作る - React + Redux + Firebase チュートリアル)

Firebase

★前回の記事

yucatio.hatenablog.com

今回のチュートリアルでは読み込み部分を先に作るため、先にデータベースにデータを登録します。

データファイルの準備

テキストエディタを開いて、以下の内容を記載します。ファイル名は、initial_todo.jsonにします。

{
  "todos" : {
    "-LLcJvIoMXREl_WIrA91" : {
      "text" : "設計",
      "completed" : true
    },
    "-LLcJvIoMXREl_WIrA92" : {
      "text" : "実装",
      "completed" : false
    },
    "-LLcJvIoMXREl_WIrA93" : {
      "text" : "テスト",
      "completed" : false
    }
  }
}

データベースへの登録

１. Firebaseコンソール(https://console.firebase.google.com)を開き、sample-todoプロジェクトを選択します。

２. データベースメニューを開きます。データタブの、ドットが縦に3つ並んでいるメニューアイコンをクリックし、JSON をインポートを選択します。

f:id:yucatio:20180924134148p:plain

３. 参照を押して、先ほど作成したファイル(initial_todo.json)を選択し、インポートします。

f:id:yucatio:20180924134335p:plain

４. データベースにファイルの内容が反映されました。

f:id:yucatio:20180924134557p:plain

ちなみに、JSON をインポートは、現在データベースに登録されているデータを全て削除してからファイルのデータを挿入するので、データが入っている状態で操作を行う際は気をつけてください。

以上でデータの事前準備は完了です。

★次回の記事

yucatio.hatenablog.com

★目次

yucatio.hatenablog.com

2018-09-27

firebase-toolsのインストールとfirebase init (STEP 1 : 誰でも読み込み・書き込みできるタスク管理アプリを作る - React + Redux + Firebase チュートリアル)

React + Redux + Firebase

★前回の記事

yucatio.hatenablog.com

firebase-toolsのインストールとfirebase initを実行して、プロジェクトにFirebaseの設定ファイルを追加します。

firebase-toolsのインストールとログイン

まず、firebase-tools (firebaseのコマンドラインツール)をインストールします。

$ yarn global add firebase-tools

インストールできたらバージョンを確認します。

$ firebase --version
4.2.1

バージョンが表示されれば、正常にインストールされています。

次に、Googleアカウントでログインします。

$ firebase login

ブラウザが立ち上がり、Googleアカウントの選択画面になります。Firebaseプロジェクトを作成したアカウントを選択してください。

firebase initの実行

前回作成したプロジェクトのルートフォルダに移動してください。その後firebase initコマンドを実行します。 create-react-app を利用したプロジェクトにfirebaseを導入するので、create-react-appのマニュアル (create-react-app/README.md at master · facebook/create-react-app · GitHub) の通りに進めます。

$ cd todo-sample
$ firebase init

以下のような文字が表示されます。燃えてます。

f:id:yucatio:20180924000354p:plain

Firebaseのどの機能を使うのか聞かれるので、DatabaseとHostingを選択してください。上下キーで選択し、スペースキーでON/OFFを切り替えてください。選択できたらEnterキーを押します。

f:id:yucatio:20180924100836p:plain

どのFirebaseプロジェクトとひもづけるか聞かれますので、前回作成したtodo-sampleを選択します。

f:id:yucatio:20180924140459p:plain

データベースの設定ファイルの名前を聞かれます。デフォルトのdatabase.rules.jsonを使うので、何も入力せずEnterキーを押します。

f:id:yucatio:20180924124516p:plain

公開するファイルのルートディレクトリを聞かれますので、build と入力します。

f:id:yucatio:20180924124806p:plain

シングルページアプリケーションかどうか聞かれますので、y を入力します。

f:id:yucatio:20180924125750p:plain

build/index.html がすでに存在している場合、上書きするか聞かれますが、Nを選択して上書きされないようにしてください。

f:id:yucatio:20180924130401p:plain

これでfirebaseの設定ファイルが作成されました。

todo-sample
    |_ database.rules.json
    |_ firebase.json
    |_ .firebaserc

続いて、firebase.jsonのhosting直下にheaders設定を追加します。これを追加しないと、firebaseにデプロイしたときに、最新のリソースに更新されないそうです。

{
  // 略
  "hosting": {
    "public": "build",
    "headers": [
      {"source": "/service-worker.js", "headers": [{"key": "Cache-Control", "value": "no-cache"}]}
    ],
  // 略
  }
}

それでは、ビルドして、fierbaseのエミュレータで表示されるか確かめてみましょう。

$ yarn run build
$ firebase serve

http://localhost:5000/ にアクセスして、React + Reduxのサンプルアプリが表示されればOKです。画像はアクセスした後、動作確認をしている時のものです。

f:id:yucatio:20180923233920p:plain

真っ白なページが表示される場合は、firebase.jsonの中身を確認してください。 "public": “public”, になっていませんか？”public": “build”,に直しましょう。

まだfirebaseと全く接続していないので、次回以降で接続していきます。

開発中はfirebaseのhosting機能ではなく、create-react-appの開発用サーバ(webpack-dev-server)を使います。ソースコードの変更を即座に反映させるのと、エラーを画面に表示させるためです。

# サーバを起動する
$ yarn start
# http://localhost:3000/ でアプリが立ち上がる

以上でfirebaseの設定ファイルの作成は完了です。

★次回の記事

yucatio.hatenablog.com

★目次

yucatio.hatenablog.com

2018-09-26

Firebaseプロジェクトの作成 (STEP 1 : 誰でも読み込み・書き込みできるタスク管理アプリを作る - React + Redux + Firebase チュートリアル)

Firebase

★前回の記事

yucatio.hatenablog.com

Firebaseでアプリを開発するのには、まずプロジェクトをFirebase consoleで作成する必要があります。プロジェクトの作成の手順を示します。

１. Firebase Console (https://console.firebase.google.com/)を開きます。

２. プロジェクトを追加 を押します。

f:id:yucatio:20180923171113p:plain

３. プロジェクト名を入力します。今回は todo-sample という名前にしました。

f:id:yucatio:20180923171831p:plain

４. 少し待つと、プロジェクトが作成されます。

f:id:yucatio:20180923221052p:plain

５. 作成したプロジェクトを開きます。

６. 左のメニューのDatabaseを選択します。(2018年9月現在)一番上にCloud Firestoreが表示されてますが、その下の Realtime Database を今回は選択します。

f:id:yucatio:20180923222450p:plain

７. テストモードで開始 を選択します。

f:id:yucatio:20180923222301p:plain

これでFirebaseプロジェクトの作成とデータベースの作成が完了しました。

★次回の記事

yucatio.hatenablog.com

★目次

yucatio.hatenablog.com

2018-09-25

React + Reduxプロジェクトの準備 (STEP 1 : 誰でも読み込み・書き込みできるタスク管理アプリを作る - React + Redux + Firebase チュートリアル)

React + Redux

★前回の記事

yucatio.hatenablog.com

今回のチュートリアルでは、Reduxの公式ページのサンプルコードを使用するので、準備をします。

React + Reduxプロジェクトの作成

React + Reduxのプロジェクトの作成をします。

create-react-appを使用してReactアプリの雛形を作った後、reduxとreact-reduxモジュールをインストールします。Redux公式に記載されている、Reactと併用するサンプル(https://redux.js.org/basics/exampletodolist)をコピペしてください。

# "todo-sample"というディレクトリにReactの雛形を作成する
$ yarn create react-app todo-sample
$ cd todo-sample

# redux と tract-redux をインストールする
$ yarn add redux react-redux
# サーバを起動する
$ yarn start
# http://localhost:3000/ でサーバが立ち上がる

# サンプルコードを書き写す

コードの一覧はこのようになります → Initial commit · yucatio/todo-sample@dcef604 · GitHub

http://localhost:3000/ にアクセスしてアプリが完成したか見てみましょう。

f:id:yucatio:20180923233920p:plain

できました！

★次回の記事

yucatio.hatenablog.com

★目次

yucatio.hatenablog.com

2018-09-24

STEP 1での成果物 (STEP 1 : 誰でも読み込み・書き込みできるタスク管理アプリを作る - React + Redux + Firebase チュートリアル)

React + Redux + Firebase

★前回の記事

yucatio.hatenablog.com

STEP 1ではFirebaseをReact+Reduxのアプリに統合していきます。Reduxの公式ページに記載されているタスク管理アプリを使用します。

Firebaseからタスク一覧を読み込んだり、Firabaseへタスクを追加したり、タスクの完了フラグを変更します。

f:id:yucatio:20180923231721p:plain

f:id:yucatio:20180923232528p:plain

Reduxのサンプルとほぼ見た目は変わらないですが、データベースにデータを保存しているので、ページを再読み込みしてもタスクの一覧が削除されません。

システム図は以下です。

f:id:yucatio:20180923230338p:plain

誰でも読み込めて書き込めるアプリをまずは作ります。ユーザの認証は行いません。ユーザ認証はSTEP 2で扱います。

チュートリアルでは以下のモジュールを使用します。

react-redux-firebase (https://github.com/prescottprue/react-redux-firebase)
redux-thunk (https://github.com/reduxjs/redux-thunk)

それでは、STEP 1のチュートリアルを始めましょう。

★次回の記事

yucatio.hatenablog.com

★目次

yucatio.hatenablog.com

2018-09-23

React + Redux + Firebase でアプリを作るための前提知識と勉強の仕方

React + Redux + Firebase

React + Redux + Firebaseで開発を始めました。まだまだ勉強中のところもありますが、自身の力でアプリを作成できるようになってきたので、ここまでどのように学んできたか書いておきます。主に他言語の経験者でwebの経験があると参考になると思います。

習得チャート

f:id:yucatio:20180923165728p:plain

英語

2018年9月現在、日本語の情報が少ないので、英語で技術的内容が読める程度にはなっている必要があります。習得方法は愚直に辞書を引きながら読むしかないと思います。

[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]

現場で困らない！ ITエンジニアのための英語リーディング [ 西野竜太郎 ]
価格：1944円（税込、送料無料) (2018/9/22時点)

楽天で購入

ES6(ES2015)

ES6は、JavaScript(正確には、ECMAScript)のバージョン6のことです。2015年に標準化されました。

JavaScriptの概要をざっと復習したい場合には、こちらを読んでおくとよいです。

JavaScript 「再」入門 - JavaScript | MDN

昔のJavascriptしか知らない場合には、ES6でいくつか記法が追加されているので、下記を読んでおくとよいです。

React

ReactはJavaScriptでhtmlを構築するためのライブラリです。ユーザのアクションによって状態を書き換えて再描画するための便利な機能が提供されています。

Reactの習得には、公式tutorialを実践しました。公式は英語ですが、有志の方が日本語訳を公開しています。チュートリアルではcodepenを使用するので、面倒な環境設定が不要です。

reactjs.org

babel

babelはES6でやJSXで書かれたスクリプトをES5に変換するのに使用します。

日本語だとここのページががわかりやすいです。

Babel とは？ - ラボラジアン

実際の設定はcreate-react-appで自動でやってくれるので、自分で設定できなくてもとりあえずはOKです。

Webpack

WebpackはJavaScriptやcss, 画像を一つのファイルにまとめてくれるツールです。

日本語だとここのページがが分かりやすかったです。

webpack 4 入門

実際の設定はcreate-react-appで自動でやってくれるので、自分で設定できなくてもとりあえずはOKです。

ESLint

静的コード解析ツールです。

下記ページを読みました。

ESLint 最初の一歩

create-react-appを利用すれば自動で設定されているので、自分で設定できなくてもとりあえずはOKです。

create-react-app

Reactの環境を作成するツールです。

習得には、はじめに日本語ページをざっと読み、次に公式ページに目を通し、最後に日本語ページの内容を一通りローカル環境で実行すると理解しやすいと思います。

公式ページ(英語) create-react-app/ at next · facebook/create-react-app · GitHub
日本語(Qiita) Facebook公式のcreate-react-appコマンドを使ってReact.jsアプリを爆速で作成する

Redux

状態管理を行うJavaScriptのライブラリです。Reactと直接関係のないライブラリですが、Reactと組み合わせることでコードが書きやすくなります。

まず、公式のドキュメントを読むのが一番理解できました。IntroductionとBasicsを読見ました。公式は英語ですが、有志の方が日本語訳を公開しています。

Basicsの最後の2章がReactと一緒に使うための説明とサンプルコードです。

connect()が分からないと思ったので、このプログ記事を書きました。

yucatio.hatenablog.com

Reduxの習得にはサンプルコードを書き写しました。create-react-appを使用してローカル環境を構築して、サンプルコードを書き写し、実行しました。

$ yarn create react-app todo-sample
$ cd todo-sample

# redux と tract-redux をインストールする
$ yarn add redux react-redux
# サーバを起動する
$ yarn start
# http://localhost:3000/ でサーバが立ち上がる

# サンプルコードを書き写す

Firabase

Firebaseはデータベース、ストレージ、ホスティング、アナリティクスなどのサービスの集まりです。

習得にはFirebase Tutorialが一番理解できました。Optionalになっているものもやるとよいです。 2018年9月現在、Notificationは、webは対象外になっているため、行うことができませんでした。

Firebase tutorial : Firebase Web Codelab

おわりに

以上でReact+Redux+Firebaseでアプリ開発を行うための準備ができました。勉強するために書籍を購入することも検討しましたが、あまり評判のよい書籍が見当たらず、web(主に公式ドキュメント)のみで勉強しました。各ライブラリともチュートリアルが充実していたので、書籍がなくても問題ありませんでした。

ドキュメントを読んでいる間は何も手を動かせないので、早く何かを作りたくてウズウズしました。しかし、忍耐強く読んで知識を固めておくことが重要だと感じています。

今回、英語の必要性をひしひしと感じました。まだまだ検索しても日本語のドキュメントが表示される割合は少ないです。英語はとにかく慣れるしかないですね。

★次の記事

yucatio.hatenablog.com

★目次

yucatio.hatenablog.com

yucatio@システムエンジニア

趣味で作ったものいろいろ

Firebaseを使ったwebアプリで、apiKeyなどの接続に必要な設定をWeb Consoleで確認する手順

Realtime Databaseへのデータの事前登録 (STEP 1 : 誰でも読み込み・書き込みできるタスク管理アプリを作る - React + Redux + Firebase チュートリアル)

データファイルの準備

データベースへの登録

firebase-toolsのインストールとfirebase init (STEP 1 : 誰でも読み込み・書き込みできるタスク管理アプリを作る - React + Redux + Firebase チュートリアル)

firebase-toolsのインストールとログイン

firebase initの実行

Firebaseプロジェクトの作成 (STEP 1 : 誰でも読み込み・書き込みできるタスク管理アプリを作る - React + Redux + Firebase チュートリアル)

React + Reduxプロジェクトの準備 (STEP 1 : 誰でも読み込み・書き込みできるタスク管理アプリを作る - React + Redux + Firebase チュートリアル)

React + Reduxプロジェクトの作成

STEP 1での成果物 (STEP 1 : 誰でも読み込み・書き込みできるタスク管理アプリを作る - React + Redux + Firebase チュートリアル)

React + Redux + Firebase でアプリを作るための前提知識と勉強の仕方

習得チャート

英語

ES6(ES2015)

React

babel

Webpack

ESLint

create-react-app

Redux

Firabase

おわりに