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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Javaの人間がRubyでやってしまった失敗を1つ紹介します。 意図した通りに動かないコード こんなコードを書きました sum = 100 + 200 + 300 + 400 puts sum #=> 300 100+200+300+400 (=10000)のつもりで書いていましたが、最初の2つしか足されていません。 デ…