STEP 2での成果物 (STEP 2 : ユーザ認証を行なって、自分だけが読み込めて書き込めるタスク管理アプリを作成する - React + Redux + Firebase チュートリアル)

★前回の記事 yucatio.hatenablog.com STEP 2では、ユーザごとのタスクを管理できるアプリを作成します。 ログインボタンを設置し、ログイン後にタスクの閲覧、更新を可能にします。 ログイン時↓ 未ログイン時↓ 簡単のため、今回はGoogleアカウントでの認証の…

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

★前回の記事 yucatio.hatenablog.com アプリが完成したので、Firebaseにアプリを公開します。 ビルドします。 $ yarn run build 一旦ローカルで正常に動くか確認しましょう。 $ firebase serve http://localhost:5000にアクセスして、動作確認しましょう。 …

リファクタリング : actionsの分割 (STEP 1 : 誰でも読み込み・書き込みできるタスク管理アプリを作る - React + Redux + Firebase チュートリアル)

★前回の記事 yucatio.hatenablog.com actionsの変更 actions/index.jsのサイズが大きくなってきたので、分割します。また、下記の点もリファクタリングします。 action typeを定数で定義する 個々のactionを定義する index.jsにaction typeをまとめます。 sr…

タスク完了フラグの切り替え処理の修正 (STEP 1 : 誰でも読み込み・書き込みできるタスク管理アプリを作る - React + Redux + Firebase チュートリアル)

★前回の記事 yucatio.hatenablog.com タスクの完了フラグの切り替え(toggleTodo)をFirebaseと連携します。 toggleTodoの変更 actionsのtoggleTodoを変更します。 src/actions/index.js export const toggleTodo = id => { return (dispatch, getState, {getF…

Firebaseへのデータ送信前後でメッセージを表示する (STEP 1 : 誰でも読み込み・書き込みできるタスク管理アプリを作る - React + Redux + Firebase チュートリアル)

★前回の記事 yucatio.hatenablog.com 前回の記事で、Firebaseへの通信を行う前にADD_TODO_REQUEST、通信完了時にADD_TODO_SUCCESS、エラー発生時にADD_TODO_ERROR actionをそれぞれdispatchしました。今回はそれぞれに対するreducerと画面表示を実装します。…

redux-thunkの導入とタスク追加処理の修正 (STEP 1 : 誰でも読み込み・書き込みできるタスク管理アプリを作る - React + Redux + Firebase チュートリアル)

★前回の記事 yucatio.hatenablog.com state更新のタイミング Firebaseへの更新の際に、以下の3つのタイミングでstateを更新したいと思います。 Firebaseへの投稿直前 Firebaseへの通信が成功した時 Firebaseへの通信が失敗した時 Reduxでは、通常1回のdispat…

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

★前回の記事 yucatio.hatenablog.com getVisibleTodosを更新します。 todosが配列からオブジェクトになったため、filterを直接todosに対して使うことができません。代わりにキーの配列を作成した後、completedの状態でfilterし、reduceを使って空のオブジェ…

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

★前回の記事 yucatio.hatenablog.com データの読み込み部分を、ローカルからFirebase Realtime Database(以下、Firebase)に変更します。 読み込み部分の作成 データ読み込みのコードはcontainerに記載します。タスク一覧(todos)をFirebaseから取得します。 s…

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

★前回の記事 yucatio.hatenablog.com モジュールのインストール 開発を始めるにあたり、firebaseのモジュールをインストールします。 $ yarn add firebase 次に、React + Redux + Firebaseでの開発を簡単に行うために、react-redux-firebase モジュールをイ…

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

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

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

★前回の記事 yucatio.hatenablog.com 今回のチュートリアルでは読み込み部分を先に作るため、先にデータベースにデータを登録します。 データファイルの準備 テキストエディタを開いて、以下の内容を記載します。ファイル名は、initial_todo.jsonにします。 …

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

★前回の記事 yucatio.hatenablog.com firebase-toolsのインストールとfirebase initを実行して、プロジェクトにFirebaseの設定ファイルを追加します。 firebase-toolsのインストールとログイン まず、firebase-tools (firebaseのコマンドラインツール)をイン…

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

★前回の記事 yucatio.hatenablog.com Firebaseでアプリを開発するのには、まずプロジェクトをFirebase consoleで作成する必要があります。プロジェクトの作成の手順を示します。 1. Firebase Console (https://console.firebase.google.com/)を開きます。 …

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

★前回の記事 yucatio.hatenablog.com 今回のチュートリアルでは、Reduxの公式ページのサンプルコードを使用するので、準備をします。 React + Reduxプロジェクトの作成 React + Reduxのプロジェクトの作成をします。 create-react-appを使用してReactアプリ…

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

★前回の記事 yucatio.hatenablog.com STEP 1ではFirebaseをReact+Reduxのアプリに統合していきます。Reduxの公式ページに記載されているタスク管理アプリを使用します。 Firebaseからタスク一覧を読み込んだり、Firabaseへタスクを追加したり、タスクの完了…

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

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

React + Redux + Firebase チュートリアル : タスク管理アプリを作る【目次】

React + Redux + Firebase で、タスク管理アプリを作ります。Reduxの公式ページに載っているサンプルを元に、react-reduxで作られたアプリにfirebaseを導入します。 環境はMac(Sierra 10.12.6)です。 目次 準備 STEP 1 : 誰でも読み込み・書き込みできるタス…

react-reduxのconnect()を図解する

ReactとReduxの勉強中です。react-reduxのconnect()の理解に時間がかかったので、同じように悩んでいる方に向けて図にして説明します。初心者向けの説明なので、正確さよりもわかりやすさを重視しています。 目次 Reduxの世界 Reactの世界 React-reduxの世界…

エンジニアが使ってみたい英語表現5個 : React Tutorial編

Railsも5.2がリリースされ、フロントエンド周りがいい感じになってきたと聞いたので、思い立ってReactを勉強し始めました。"React Tutorial"で検索した時に、一番上に出てきたのが英語のチュートリアルだったので、思いつきで英語で読むことにしました。 読…

Railsでカスタムバリデータとvalidates_withで2つの日時の前後、最小間隔、最大間隔のチェック

開始時間と終了時間を入力するアプリで、入力の前後関係と最小間隔、最大間隔をチェックしたい場合があります。 チェックを実装するには、Railsではカスタムバリデータとカスタムメソッドの方法があります。開始時間、終了時間をもつアプリは多いので、今回…

Validationがごちゃごちゃしてきたら、分類して整理する : 整理編

前回の記事の続きです。 ★前回の記事 yucatio.hatenablog.com 前回の記事では、validationの軸として 単属性/属性間 子属性の個数 モデル値/DB値/入力値 マスタ情報に値が存在するかのチェックが必要/不要、さらにマスタ情報の値を用いてvalidationが必要/不…

Validationがごちゃごちゃしてきたら、分類して整理する : 分類編

アプリを作成・改修していくうちに、モデルの属性が多くなり、validationも複雑になってきます。既存の項目と同時に設定できない項目が追加されたり、また、システムが大きくなってくると、外部のAPIと通信が必要といったケースもあります。 新しく追加した…

RubyMineの正規表現チェックがrubyのString#matchと挙動が違う件

RubyMineには文字列が正規表現にマッチするか調べる機能があります。 1. 正規表現にカーソルを移動し、 電球マークまたはoption+エンターキー(windowsの場合はalt+エンターキ)を押す。 2. Check RegExpを選択する 3. Sample:にテストしたい文字列を入力しま…

期間が重複しているかを判定する条件式の導出方法

SQL

開始時間(start_time)と終了時間(end_time)を持つテーブル(例: schedule)で、あるレコードXと時間が重複したデータを抽出するSQLは、 SELECT * FROM schedule WHERE start_time < レコードXのend_time AND end_time > レコードXのstart_time です。 しかしst…

Railsでvalidation中にDBアクセスする場合は、will_save_change_to_#{attr_name}?を使用する

Webアプリでvalidationを書いていると、DBに問い合わせをしなければいけない時があるのですが、その時に、値が変更されているかチェックしてからDB問い合わせした方がよいよというお話です。値が変更されているかは、Railsではwill_save_change_to_#{attr_na…

Railsで変更前の(DBに保存されている)値を利用してvaldiateする

Webアプリでvalidationを書いていると、DBに保存されている値が必要になる場合があります。Railsでは、DBに保存されている値は、#{attr_name}_in_database、保存されている値から変更があったかは、will_save_change_to_#{attr_name}?というメソッドが用意さ…

Railsで値が変更されているか調べてvaldiateする

Webアプリでvalidationを書いていると、値が変更になった時にだけvalidationをかけたい場合があります。Railsではwill_save_change_to_#{attr_name}?というメソッドが用意されています。#{attr_name}の部分はModelの属性(カラム名)で置き換えます。 値が変更…

Rubyで全角空白も対象としたstrip(trim)

rubyではtrimじゃなくてstripというそうです。 stripは先頭と末尾の半角空白やタブ、改行などを除去するメソッドです。 全角空白は除去されないので、独自で定義する必要があります。 うまくいく例 class String def strip_all_space! gsub!(/(^[[:space:]]+…

「オブジェクト指向とは何か」の答えが『なぜ、あなたの仕事は終わらないのか(中島聡[著])』に書いてあったので紹介します

オブジェクト指向とは 『なぜ、あなたの仕事は終わらないのか(中島聡[著])』には以下のように書いてあります。 なんらかの対象(オブジェクト)を先に選択したうえで動作を指定することをオブジェクト指向といいます。 考えてみる Wikipediaでオブジェクト指…

複数行の式とRubyMineのフォーマッタとの相性が悪いのでIssueをあげました

こちらの記事を書いてる最中に、複数行の式とRubyMineのフォーマッタの相性が悪いと気づきました。 yucatio.hatenablog.com 算術オペレータを最後に置いて改行する場合 算術オペレータを最後に置く方法だと、フォーマットをかけた際に、RubyMineは4個のスペ…