はじめに

2019年4月に株式会社オプトに入社したsh1okohと申します。
なんやかんやありまして、今はReact, Redux, Railsなどを使ったプロダクトで、日々奮闘しております。
今回は、お仕事中に出会った技術スタックを使ってモダン()なTODOアプリを作ってみたので、各種ライブラリの紹介をしつつ、Todoアプリの紹介をしていきたいと思います。（備忘録的な目的もあります）

対象読者

今回は、テーマ的にも内容自体は広く浅くになっております。
各種ライブラリを使ったWEBアプリの全体像を把握したい方などを対象としており、各ライブラリを深く学びたいといった方は対象外となっておりますので、よろしくお願いします。

今回使用した技術

フロントエンド

• Javascript （業務ではTypeScriptを使っています）
• React
• Redux
• axious

バックエンド

• Ruby 2.5.7
• Ruby on Rails 5.2.4
• rubocop
• guard
• rspec

CI/CD

• Circle CI

フロントエンド編

React とは

A JavaScript library for building user interfaces

https://reactjs.org/

Facebookの作ったJavascriptライブラリです。
MVC(Model View Controller)モデルでいうとVの部分を提供しています。

Reactの考え方

Component-Based
Build encapsulated components that manage their own state, then compose them to make complex UIs.

https://reactjs.org/

Reactでは、画面をComponentの親子関係を持つツリーとして構成します。
各コンポーネントは、親から渡されたprops（プロパティ）、State（自分の状態）を元に、renderメソッドでDOM（Virtual DOM）を生成します。

axios とは

Promise based HTTP client for the browser and node.js

https://github.com/axios/axios

Http通信を簡単に行うことができるJavascriptライブラリです。
主な特徴としては、

• ChromeやFirefox, Safariなどのブラウザに対応

• ブラウザからXMLHttpsRequestsを作成

• リクエストとレスポンスデータを変換

• Promise APIをサポート

と言った特徴があります。

今回は、このライブラリを使ってAPIとの通信を行なっていきます。

実装

以下がコードになります。

import React from 'react';
import axios from 'axios';

const Title = ({todoCount}) => {
  return (
    <div>
      {
          todoCount > 0 ? <h1>{todoCount}つのタスクがあります</h1> :
          <h1>タスクがありません</h1>
      }
    </div>
  );
}

const TodoForm = ({addTodo}) => {
  let input;
  return (
    <form onSubmit={(e) => {
        e.preventDefault();
        addTodo(input.value);
        input.value = '';
      }}>
      <input className="form-control col-md-12" ref={node => {
        input = node;
      }} />
      <br />
    </form>
  );
};

const Todo = ({todo, remove}) => {
  return (
    <li>
      <a href="#" className="list-group-item">{todo.contents}</a>
      <button onClick={() => {remove(todo.id)}}>削除</button>
    </li>
  );
}

const TodoList = ({todos, remove}) => {
  const todoNode = todos.map((todo) => {
    return (<Todo todo={todo} key={todo.id} remove={remove} />)
  });
  return (<div className="list-group" style={{marginTop:'30px'}}>{todoNode}</div>);
}

window.id = 0;
class TodoApp extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      data: []
    }
    this.apiUrl = 'http://localhost:3000/api/todos/'
  }

  componentDidMount(){
    axios.get(this.apiUrl)
      .then((res) => {
        this.setState({ data: res.data });
      });
  }

  addTodo(val){
    const todo = {contents: val}
    axios.post(this.apiUrl, todo)
       .then((res) => {
          this.state.data.push(res.data);
          this.setState({data: this.state.data});
       });
  }

  handleRemove(id){
    const remainder = this.state.data.filter((todo) => {
      if(todo.id !== id) return todo;
    });

    axios.delete(this.apiUrl+id)
      .then((res) => {
        this.setState({data: remainder});
      })
  }

  render(){

    return (
      <div>
        <Title todoCount={this.state.data.length}/>
        <TodoForm addTodo={this.addTodo.bind(this)}/>
        <TodoList
          todos={this.state.data}
          remove={this.handleRemove.bind(this)}
        />
      </div>
    );
  }
}

export default TodoApp

上記のコードを見てもらうと分かりやすいと思うのですが、TodoAppコンポーネントにconstructorメソッド、componentDidMountメソッドを定義しています。componentDidMountメソッドは、Reactのライフサイクルメソッドの一種で、出力が DOM にレンダーされた後に実行されます。ここではライフサイクルの話は割愛しますので、気になる方は下記リンクを参考にしてみてください。

• https://ja.reactjs.org/docs/state-and-lifecycle.html
• https://qiita.com/Julia0709/items/3c3fc8d29fd2e56ed7a9

で、各関数コンポーネントに、propsを渡し、その値に応じた描画を行なっています。

APIの疎通に関しては、

axios.get

や

axios.post

で行なって、APIからのレスポンスデータを取得したりしています。

で、実際に見てみると、初期の出力結果が、こうなります。（めっちゃ殺風景・・・。）

で入力欄に値を入力してEnterを押すと、タスクが追加できて、削除までできます。

本当は最低限CRUDの実装はしたかったのですが、諸々の事情により、updateの機能は後日追記いたします。

バックエンド編

Ruby on Rails とは

Rails is a web-application framework that includes everything needed to create database-backed web applications according to the Model-View-Controller (MVC) pattern.

https://github.com/rails/rails

大半の方がご存知かと思いますが、Model-view-controller パターンを採用したフレームワークです。
特にActiceRecordは個人的には強力な機能だと思っています。

今回はView側はReactで実装していますので、RailsのAPIモードを使って実装しました。

APIモードは、下記のようにコマンドライン引数に --apiとつけるだけで、できてしまいます（さすがRails！）

rails new my_api --api

APIモード
https://guides.rubyonrails.org/api_app.html

Active Record とは

Active Record is the M in MVC - the model - which is the layer of the system responsible for representing business data and logic. Active Record facilitates the creation and use of business objects whose data requires persistent storage to a database. It is an implementation of the Active Record pattern which itself is a description of an Object Relational Mapping system.

https://guides.rubyonrails.org/active_record_basics.html

MVCモデル言うところの、Mの部分に相当するものです。
ORM（O/Rマッピング）システムに記述されている「Active Recordパターン」を実装したもので、このパターンと同じ名前が付けられています。

ORM(O/Rマッピング)とは、アプリケーションが持つオブジェクトを、RDBMSのテーブルに接続することです。
ORMを用いると、SQL文を書かずに、完結なコードだけで、テーブルからレコードのデータを取得できたり、更新できたりしてとても便利です。

例えば、ターミナル上で、

rails console

を叩き

Todo.all

などとすると、下記のような出力結果を得ることができます。

またワンライナーでも書くことができるので、
SQL文を書くより遥かに楽だと言うことが分かると思います。

他にも

• モデル同士のアソシエーションを表現する
• 関連付けられているモデル間の継承階層を表現する
• データをデータベースで永続化する前にバリデーションを行う

などの特徴を持っています。

RuboCop とは

RuboCop is a Ruby static code analyzer and code formatter.

https://github.com/rubocop-hq/rubocop

rubyのコードアナライザーであり、フォーマッターです。
例えば、チーム開発をするときにコード規約を定めると思うのですが、RuboCopを用いると捗ります。
また、警告を出すのみに止まらず、いくつかの問題を自動で直してくれることもしてくれます。
例えば、ターミナル上で下記のコマンドを実行すると、一括でフォーマットをかけてくれたりしますので、とても便利です。

bundle exec rubocop -a

参考
https://rubocop.readthedocs.io/en/stable/

実装

実装はとても簡単で、ターミナル上で、下記のコマンドをバーン！すると、
ルーティングやコントローラー、モデルからテーブル定義までの雛形を作ってくれます。

bundle exec rails generate scaffold Todo contents:string

実際のコード

todo_controller.rb

class TodosController < ApplicationController
  before_action :set_todo, only: [:show, :edit, :update, :destroy]

  def index
    @todos = Todo.all
    render json: @todos
  end

  def show
    render json: @todo
  end

  def new
    @todo = Todo.new
  end

  def edit
  end

  def create
    @todo = Todo.new(create_params)
    if @todo.save
      render json: @todo
    else
      render :new
    end
  end

  def update
    if @todo.update!(update_params)
      render json: @todo
    else
      render :edit
    end
  end

  def destroy
    @todo.destroy
    render json: @todos
  end

  private
    def set_todo
      @todo = Todo.find(params[:id])
    end

    def create_params
      params.require(:todo).permit(:contents)
    end

    def update_params
      params.require(:todo).permit(%i[id contents])
    end

    def destroy_params
      params.require(:todo).permit(:id)
    end
end

routes.rb

Rails.application.routes.draw do
  scope :api, defaults: { format: :json } do
    resources :todos, only: %i[show index create update destroy]
  end
end

models/todo.rb

class Todo < ApplicationRecord
  def as_json(options = {})
    super(options.reverse_merge(except: %i[created_at updated_at]))
  end
end

今回のAPIの設計方針として、REST APIを採用しました。
REST APIについては、下記を参照してみてください。
https://restfulapi.net/

CI編

後日書きます

まとめ

半年間、自分が使ってきた技術を用いて、アプリーケーションを開発するのは良い振り返りにもなるし、一年の節目にも良さそうと思いました。今後も、何か学ぶ機会があれば、やってみるといいかもと思いました。
実はまだまだ書きたいこともあるので、後日追記するか、別の記事に載せることにします。

その他の参考資料

https://restful-api-guidelines-ja.netlify.com/
https://scotch.io/tutorials/create-a-simple-to-do-app-with-react

Opt Technologies Advent Calendar 2019の21日目の記事です。

はじめに

2019年4月に株式会社オプトに入社したsh1okohと申します。
なんやかんやありまして、今はReact, Redux, Railsなどを使ったプロダクトで、日々奮闘しております。
今回は、お仕事中に出会った技術スタックを使ってモダン()なTODOアプリを作ってみたので、各種ライブラリの紹介をしつつ、Todoアプリの紹介をしていきたいと思います。（備忘録的な目的もあります）

ちなみに、今回のTODOアプリのソースコードは下記リンクにありますので、
興味のある方はみてみてください。

https://github.com/sh1okoh/adventcalendar

対象読者

今回は、テーマ的にも内容自体は広く浅くになっております。
各種ライブラリを使ったWEBアプリの全体像を把握したい方などを対象としており、各ライブラリを深く学びたいといった方は対象外となっておりますので、よろしくお願いします。

今回使用した技術

フロントエンド

• JavaScript （業務ではTypeScriptを使っています）
• React
• Redux
• axios

バックエンド

• Ruby 2.5.7
• Ruby on Rails 5.2.4
• rubocop
• guard
• rspec
• rack-cors

CI/CD

• Circle CI

フロントエンド編

React とは

A JavaScript library for building user interfaces

https://reactjs.org/

Facebookの作ったJavascriptライブラリです。
MVC(Model View Controller)モデルでいうとVの部分を提供しています。

Reactの考え方

Component-Based
Build encapsulated components that manage their own state, then compose them to make complex UIs.

https://reactjs.org/

Reactでは、画面をComponentの親子関係を持つツリーとして構成します。
各コンポーネントは、親から渡されたprops（プロパティ）、State（自分の状態）を元に、renderメソッドでDOM（Virtual DOM）を生成します。

axios とは

Promise based HTTP client for the browser and node.js

https://github.com/axios/axios

Http通信を簡単に行うことができるJavascriptライブラリです。
主な特徴としては、

• ChromeやFirefox, Safariなどのブラウザに対応

• ブラウザからXMLHttpsRequestsを作成

• リクエストとレスポンスデータを変換

• Promise APIをサポート

と言った特徴があります。

今回は、このライブラリを使ってAPIとの通信を行なっていきます。

実装

以下がコードになります。

import React from 'react';
import axios from 'axios';

const Title = ({todoCount}) => {
  return (
    <div>
      {
          todoCount > 0 ? <h1>{todoCount}つのタスクがあります</h1> :
          <h1>タスクがありません</h1>
      }
    </div>
  );
}

const TodoForm = ({addTodo}) => {
  let input;
  return (
    <form onSubmit={(e) => {
        e.preventDefault();
        addTodo(input.value);
        input.value = '';
      }}>
      <input className="form-control col-md-12" ref={node => {
        input = node;
      }} />
      <br />
    </form>
  );
};

const Todo = ({todo, remove}) => {
  return (
    <li>
      <a href="#" className="list-group-item">{todo.contents}</a>
      <button onClick={() => {remove(todo.id)}}>削除</button>
    </li>
  );
}

const TodoList = ({todos, remove}) => {
  const todoNode = todos.map((todo) => {
    return (<Todo todo={todo} key={todo.id} remove={remove} />)
  });
  return (<div className="list-group" style={{marginTop:'30px'}}>{todoNode}</div>);
}

window.id = 0;
class TodoApp extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      data: []
    }
    this.apiUrl = 'http://localhost:3000/api/todos/'
  }

  componentDidMount(){
    axios.get(this.apiUrl)
      .then((res) => {
        this.setState({ data: res.data });
      });
  }

  addTodo(val){
    const todo = {contents: val}
    axios.post(this.apiUrl, todo)
       .then((res) => {
          this.state.data.push(res.data);
          this.setState({data: this.state.data});
       });
  }

  handleRemove(id){
    const remainder = this.state.data.filter((todo) => {
      if(todo.id !== id) return todo;
    });

    axios.delete(this.apiUrl+id)
      .then((res) => {
        this.setState({data: remainder});
      })
  }

  render(){

    return (
      <div>
        <Title todoCount={this.state.data.length}/>
        <TodoForm addTodo={this.addTodo.bind(this)}/>
        <TodoList
          todos={this.state.data}
          remove={this.handleRemove.bind(this)}
        />
      </div>
    );
  }
}

export default TodoApp

上記のコードを見てもらうと分かりやすいと思うのですが、TodoAppコンポーネントにconstructorメソッド、componentDidMountメソッドを定義しています。componentDidMountメソッドは、Reactのライフサイクルメソッドの一種で、出力が DOM にレンダーされた後に実行されます。ここではライフサイクルの話は割愛しますので、気になる方は下記リンクを参考にしてみてください。

• https://ja.reactjs.org/docs/state-and-lifecycle.html
• https://qiita.com/Julia0709/items/3c3fc8d29fd2e56ed7a9

で、各関数コンポーネントに、propsを渡し、その値に応じた描画を行なうという流れになっております。

APIの疎通に関しては、

axios.get

や

axios.post

で行なって、APIからのレスポンスデータを取得したりしています。

で、実際に見てみると、初期の出力結果が、こうなります。（めっちゃ殺風景・・・。）

で入力欄に値を入力してEnterを押すと、タスクが追加できて、削除までできます。

本当は最低限CRUDの実装はしたかったのですが、諸々の事情により、updateの機能は後日追記いたします。

バックエンド編

Ruby on Rails とは

Rails is a web-application framework that includes everything needed to create database-backed web applications according to the Model-View-Controller (MVC) pattern.

https://github.com/rails/rails

大半の方がご存知かと思いますが、Model-view-controller パターンを採用したフレームワークです。
特にActiceRecordは個人的には強力な機能だと思っています。

今回はView側はReactで実装していますので、RailsのAPIモードを使って実装しました。

APIモードは、下記のようにコマンドライン引数に --apiとつけるだけで、できてしまいます（さすがRails！）

rails new my_api --api

APIモード
https://guides.rubyonrails.org/api_app.html

Active Record とは

Active Record is the M in MVC - the model - which is the layer of the system responsible for representing business data and logic. Active Record facilitates the creation and use of business objects whose data requires persistent storage to a database. It is an implementation of the Active Record pattern which itself is a description of an Object Relational Mapping system.

https://guides.rubyonrails.org/active_record_basics.html

MVCモデル言うところの、Mの部分に相当するものです。
ORM（O/Rマッピング）システムに記述されている「Active Recordパターン」を実装したもので、このパターンと同じ名前が付けられています。

ORM(O/Rマッピング)とは、アプリケーションが持つオブジェクトを、RDBMSのテーブルに接続することです。
ORMを用いると、SQL文を書かずに、簡潔なコードだけで、テーブルからレコードのデータを取得できたり、更新できたりしてとても便利です。

例えば、ターミナル上で、

rails console

を叩き

Todo.all

などとすると、下記のような出力結果を得ることができます。

またワンライナーでも書くことができるので、
SQL文を書くより遥かに楽だと言うことが分かると思います。

他にも

• モデル同士のアソシエーションを表現する
• 関連付けられているモデル間の継承階層を表現する
• データをデータベースで永続化する前にバリデーションを行う

などの特徴を持っています。

RuboCop とは

RuboCop is a Ruby static code analyzer and code formatter.

https://github.com/rubocop-hq/rubocop

rubyのコードアナライザーであり、フォーマッターです。
例えば、チーム開発をするときにコード規約を定めると思うのですが、RuboCopを用いると捗ります。
また、警告を出すのみに止まらず、いくつかの問題を自動で直してくれることもしてくれます。
例えば、ターミナル上で下記のコマンドを実行すると、一括でフォーマットをかけてくれたりしますので、とても便利です。

bundle exec rubocop -a

参考
https://rubocop.readthedocs.io/en/stable/

実装

実装はとても簡単で、ターミナル上で、下記のコマンドをバーン！すると、
ルーティングやコントローラー、モデルからテーブル定義までの雛形を作ってくれます。

bundle exec rails generate scaffold Todo contents:string

実際のコード

todo_controller.rb

class TodosController < ApplicationController
  before_action :set_todo, only: [:show, :edit, :update, :destroy]

  def index
    @todos = Todo.all
    render json: @todos
  end

  def show
    render json: @todo
  end

  def new
    @todo = Todo.new
  end

  def edit
  end

  def create
    @todo = Todo.new(create_params)
    if @todo.save
      render json: @todo
    else
      render :new
    end
  end

  def update
    if @todo.update!(update_params)
      render json: @todo
    else
      render :edit
    end
  end

  def destroy
    @todo.destroy
    render json: @todos
  end

  private
    def set_todo
      @todo = Todo.find(params[:id])
    end

    def create_params
      params.require(:todo).permit(:contents)
    end

    def update_params
      params.require(:todo).permit(%i[id contents])
    end

    def destroy_params
      params.require(:todo).permit(:id)
    end
end

routes.rb

Rails.application.routes.draw do
  scope :api, defaults: { format: :json } do
    resources :todos, only: %i[show index create update destroy]
  end
end

models/todo.rb

class Todo < ApplicationRecord
  def as_json(options = {})
    super(options.reverse_merge(except: %i[created_at updated_at]))
  end
end

db/schema.rb

ActiveRecord::Schema.define(version: 2019_12_15_104719) do

  create_table "todos", force: :cascade do |t|
    t.string "contents"
    t.datetime "created_at", null: false
    t.datetime "updated_at", null: false
  end

end

今回のAPIの設計方針として、REST APIを採用しました。
REST APIについては、下記を参照してみてください。
https://restfulapi.net/

CI編

後日書きます

まとめ

半年間、自分が使ってきた技術を用いて、アプリーケーションを開発するのは良い振り返りにもなるし、一年の節目にも良さそうと思いました。今後も、何か学ぶ機会があれば、やってみるといいかもと思いました。
実はまだまだ書きたいこともあるので、後日追記するか、別の記事に載せることにします。

その他の参考資料

https://restful-api-guidelines-ja.netlify.com/
https://scotch.io/tutorials/create-a-simple-to-do-app-with-react

Opt Technologies Advent Calendar 2019の21日目の記事です。

はじめに

2019年4月に株式会社オプトに入社したsh1okohと申します。
なんやかんやありまして、今はReact, Redux, Railsなどを使ったプロダクトで、日々奮闘しております。
今回は、お仕事中に出会った技術スタックを使ってモダン()なTODOアプリを作ってみたので、各種ライブラリの紹介をしつつ、Todoアプリの紹介をしていきたいと思います。（備忘録的な目的もあります）

ちなみに、今回のTODOアプリのソースコードは下記リンクにありますので、
興味のある方はみてみてください。

https://github.com/sh1okoh/adventcalendar

対象読者

今回は、テーマ的にも内容自体は広く浅くになっております。
各種ライブラリを使ったWEBアプリの全体像を把握したい方などを対象としており、各ライブラリを深く学びたいといった方は対象外となっておりますので、よろしくお願いします。

今回使用した技術

フロントエンド

• JavaScript （業務ではTypeScriptを使っています）
• React
• Redux
• axios
• eslint
• prettier

バックエンド

• Ruby 2.5.7
• Ruby on Rails 5.2.4
• rubocop
• guard
• rspec
• rack-cors

CI/CD

• Circle CI

フロントエンド編

React とは

A JavaScript library for building user interfaces

https://reactjs.org/

Facebookの作ったJavascriptライブラリです。
MVC(Model View Controller)モデルでいうとVの部分を提供しています。

Reactの考え方

Component-Based
Build encapsulated components that manage their own state, then compose them to make complex UIs.

https://reactjs.org/

Reactでは、画面をComponentの親子関係を持つツリーとして構成します。
各コンポーネントは、親から渡されたprops（プロパティ）、State（自分の状態）を元に、renderメソッドでDOM（Virtual DOM）を生成します。

axios とは

Promise based HTTP client for the browser and node.js

https://github.com/axios/axios

Http通信を簡単に行うことができるJavascriptライブラリです。
主な特徴としては、

• ChromeやFirefox, Safariなどのブラウザに対応
• リクエストとレスポンスデータを変換
• Promise APIをサポート

と言った特徴があります。

今回は、このライブラリを使ってAPIとの通信を行なっていきます。

実装

以下がコードになります。

import React from 'react';
import axios from 'axios';

const Title = ({todoCount}) => {
  return (
    <div>
      {
          todoCount > 0 ? <h1>{todoCount}つのタスクがあります</h1> :
          <h1>タスクがありません</h1>
      }
    </div>
  );
}

const TodoForm = ({addTodo}) => {
  let input;
  return (
    <form onSubmit={(e) => {
        e.preventDefault();
        addTodo(input.value);
        input.value = '';
      }}>
      <input className="form-control col-md-12" ref={node => {
        input = node;
      }} />
      <br />
    </form>
  );
};

const Todo = ({todo, remove}) => {
  return (
    <li>
      <a href="#" className="list-group-item">{todo.contents}</a>
      <button onClick={() => {remove(todo.id)}}>削除</button>
    </li>
  );
}

const TodoList = ({todos, remove}) => {
  const todoNode = todos.map((todo) => {
    return (<Todo todo={todo} key={todo.id} remove={remove} />)
  });
  return (<div className="list-group" style={{marginTop:'30px'}}>{todoNode}</div>);
}

window.id = 0;
class TodoApp extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      data: []
    }
    this.apiUrl = 'http://localhost:3000/api/todos/'
  }

  componentDidMount(){
    axios.get(this.apiUrl)
      .then((res) => {
        this.setState({ data: res.data });
      });
  }

  addTodo(val){
    const todo = {contents: val}
    axios.post(this.apiUrl, todo)
       .then((res) => {
          this.state.data.push(res.data);
          this.setState({data: this.state.data});
       });
  }

  handleRemove(id){
    const remainder = this.state.data.filter((todo) => {
      if(todo.id !== id) return todo;
    });

    axios.delete(this.apiUrl+id)
      .then((res) => {
        this.setState({data: remainder});
      })
  }

  render(){

    return (
      <div>
        <Title todoCount={this.state.data.length}/>
        <TodoForm addTodo={this.addTodo.bind(this)}/>
        <TodoList
          todos={this.state.data}
          remove={this.handleRemove.bind(this)}
        />
      </div>
    );
  }
}

export default TodoApp

上記のコードを見てもらうと分かりやすいと思うのですが、TodoAppコンポーネントにconstructorメソッド、componentDidMountメソッド, renderメソッドを定義しています。componentDidMountメソッド, renderメソッドは、Reactのライフサイクルメソッドの一種です。出力が componentDidMountメソッドは、DOM にレンダーされた後に実行されます。ここではライフサイクルの話は割愛しますので、気になる方は下記リンクを参考にしてみてください。

• https://ja.reactjs.org/docs/state-and-lifecycle.html
• https://qiita.com/Julia0709/items/3c3fc8d29fd2e56ed7a9

で、各関数コンポーネントに、propsを渡し、その値に応じた描画を行なうという流れになっております。

APIの疎通に関しては、

axios.get

や

axios.post

で行なって、APIからのレスポンスデータを取得したりしています。

で、実際に見てみると、初期の出力結果が、こうなります。（めっちゃ殺風景・・・。）

で入力欄に値を入力してEnterを押すと、タスクが追加できて、削除までできます。

本当は最低限CRUDの実装はしたかったのですが、諸々の事情により、updateの機能は後日追記いたします。

バックエンド編

Ruby on Rails とは

Rails is a web-application framework that includes everything needed to create database-backed web applications according to the Model-View-Controller (MVC) pattern.

https://github.com/rails/rails

大半の方がご存知かと思いますが、Model-view-controller パターンを採用したフレームワークです。
特にActiceRecordは個人的には強力な機能だと思っています。

今回はView側はReactで実装していますので、RailsのAPIモードを使って実装しました。

APIモードは、下記のようにコマンドライン引数に --apiとつけるだけで、できてしまいます（さすがRails！）

rails new my_api --api

APIモード
https://guides.rubyonrails.org/api_app.html

Active Record とは

Active Record is the M in MVC - the model - which is the layer of the system responsible for representing business data and logic. Active Record facilitates the creation and use of business objects whose data requires persistent storage to a database. It is an implementation of the Active Record pattern which itself is a description of an Object Relational Mapping system.

https://guides.rubyonrails.org/active_record_basics.html

MVCモデル言うところの、Mの部分に相当するものです。
ORM（O/Rマッピング）システムに記述されている「Active Recordパターン」を実装したもので、このパターンと同じ名前が付けられています。

ORM(O/Rマッピング)とは、アプリケーションが持つオブジェクトを、RDBMSのテーブルに接続することです。
ORMを用いると、SQL文を書かずに、簡潔なコードだけで、テーブルからレコードのデータを取得できたり、更新できたりしてとても便利です。

例えば、ターミナル上で、

rails console

を叩き

Todo.all

などとすると、下記のような出力結果を得ることができます。

またワンライナーでも書くことができるので、
SQL文を書くより遥かに楽だと言うことが分かると思います。

他にも

• モデル同士のアソシエーションを表現する
• 関連付けられているモデル間の継承階層を表現する
• データをデータベースで永続化する前にバリデーションを行う

などの特徴を持っています。

RuboCop とは

RuboCop is a Ruby static code analyzer and code formatter.

https://github.com/rubocop-hq/rubocop

rubyのコードアナライザーであり、フォーマッターです。
例えば、チーム開発をするときにコード規約を定めると思うのですが、RuboCopを用いると捗ります。
また、警告を出すのみに止まらず、いくつかの問題を自動で直してくれることもしてくれます。
例えば、ターミナル上で下記のコマンドを実行すると、一括でフォーマットをかけてくれたりしますので、とても便利です。

bundle exec rubocop -a

参考
https://rubocop.readthedocs.io/en/stable/

実装

実装はとても簡単で、ターミナル上で、下記のコマンドをバーン！すると、
ルーティングやコントローラー、モデルからテーブル定義までの雛形を作ってくれます。

bundle exec rails generate scaffold Todo contents:string

実際のコード

todo_controller.rb

class TodosController < ApplicationController
  before_action :set_todo, only: [:show, :edit, :update, :destroy]

  def index
    @todos = Todo.all
    render json: @todos
  end

  def show
    render json: @todo
  end

  def new
    @todo = Todo.new
  end

  def edit
  end

  def create
    @todo = Todo.new(create_params)
    if @todo.save
      render json: @todo
    else
      render :new
    end
  end

  def update
    if @todo.update!(update_params)
      render json: @todo
    else
      render :edit
    end
  end

  def destroy
    @todo.destroy
    render json: @todos
  end

  private
    def set_todo
      @todo = Todo.find(params[:id])
    end

    def create_params
      params.require(:todo).permit(:contents)
    end

    def update_params
      params.require(:todo).permit(%i[id contents])
    end

    def destroy_params
      params.require(:todo).permit(:id)
    end
end

routes.rb

Rails.application.routes.draw do
  scope :api, defaults: { format: :json } do
    resources :todos, only: %i[show index create update destroy]
  end
end

models/todo.rb

class Todo < ApplicationRecord
  def as_json(options = {})
    super(options.reverse_merge(except: %i[created_at updated_at]))
  end
end

db/schema.rb

ActiveRecord::Schema.define(version: 2019_12_15_104719) do

  create_table "todos", force: :cascade do |t|
    t.string "contents"
    t.datetime "created_at", null: false
    t.datetime "updated_at", null: false
  end

end

今回のAPIの設計方針として、REST APIを採用しました。
REST APIについては、下記を参照してみてください。
https://restfulapi.net/

CI編

後日書きます

まとめ

半年間、自分が使ってきた技術を用いて、アプリーケーションを開発するのは良い振り返りにもなるし、一年の節目にも良さそうと思いました。今後も、何か学ぶ機会があれば、やってみるといいかもと思いました。
実はまだまだ書きたいこともあるので、後日追記するか、別の記事に載せることにします。

その他の参考資料

https://qiita.com/matzkoh/items/90baab22ad489b78384b
https://restful-api-guidelines-ja.netlify.com/
https://scotch.io/tutorials/create-a-simple-to-do-app-with-react

Opt Technologies Advent Calendar 2019の21日目の記事です。

はじめに

2019年4月に株式会社オプトに入社したsh1okohと申します。
なんやかんやありまして、今はReact, Redux, Railsなどを使ったプロダクトで、日々奮闘しております。
今回は、お仕事中に出会った技術スタックを使ってモダン()なTODOアプリを作ってみたので、各種ライブラリの紹介をしつつ、Todoアプリの紹介をしていきたいと思います。（備忘録的な目的もあります）

ちなみに、今回のTODOアプリのソースコードは下記リンクにありますので、
興味のある方はみてみてください。

https://github.com/sh1okoh/adventcalendar

対象読者

今回は、テーマ的にも内容自体は広く浅くになっております。
各種ライブラリを使ったWEBアプリの全体像を把握したい方などを対象としており、各ライブラリを深く学びたいといった方は対象外となっておりますので、よろしくお願いします。

今回使用した技術

フロントエンド

• JavaScript （業務ではTypeScriptを使っています）
• React
• Redux
• axios
• eslint
• prettier

バックエンド

• Ruby 2.5.7
• Ruby on Rails 5.2.4
• rubocop
• guard
• rspec
• rack-cors

CI/CD

• Circle CI

フロントエンド編

React とは

A JavaScript library for building user interfaces

https://reactjs.org/

Facebookの作ったJavascriptライブラリです。
MVC(Model View Controller)モデルでいうとVの部分を提供しています。

Reactの考え方

Component-Based
Build encapsulated components that manage their own state, then compose them to make complex UIs.

https://reactjs.org/

Reactでは、画面をComponentの親子関係を持つツリーとして構成します。
各コンポーネントは、親から渡されたprops（プロパティ）、State（自分の状態）を元に、renderメソッドでDOM（Virtual DOM）を生成します。

axios とは

Promise based HTTP client for the browser and node.js

https://github.com/axios/axios

Http通信を簡単に行うことができるJavascriptライブラリです。
主な特徴としては、

• ChromeやFirefox, Safariなどのブラウザに対応
• リクエストとレスポンスデータを変換
• Promise APIをサポート

と言った特徴があります。

今回は、このライブラリを使ってAPIとの通信を行なっていきます。

実装

以下がコードになります。

import React from 'react';
import axios from 'axios';

const Title = ({todoCount}) => {
  return (
    <div>
      {
          todoCount > 0 ? <h1>{todoCount}つのタスクがあります</h1> :
          <h1>タスクがありません</h1>
      }
    </div>
  );
}

const TodoForm = ({addTodo}) => {
  let input;
  return (
    <form onSubmit={(e) => {
        e.preventDefault();
        addTodo(input.value);
        input.value = '';
      }}>
      <input className="form-control col-md-12" ref={node => {
        input = node;
      }} />
      <br />
    </form>
  );
};

const Todo = ({todo, remove}) => {
  return (
    <li>
      <a href="#" className="list-group-item">{todo.contents}</a>
      <button onClick={() => {remove(todo.id)}}>削除</button>
    </li>
  );
}

const TodoList = ({todos, remove}) => {
  const todoNode = todos.map((todo) => {
    return (<Todo todo={todo} key={todo.id} remove={remove} />)
  });
  return (<div className="list-group" style={{marginTop:'30px'}}>{todoNode}</div>);
}

window.id = 0;
class TodoApp extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      data: []
    }
    this.apiUrl = 'http://localhost:3000/api/todos/'
  }

  componentDidMount(){
    axios.get(this.apiUrl)
      .then((res) => {
        this.setState({ data: res.data });
      });
  }

  addTodo(val){
    const todo = {contents: val}
    axios.post(this.apiUrl, todo)
       .then((res) => {
          this.state.data.push(res.data);
          this.setState({data: this.state.data});
       });
  }

  handleRemove(id){
    const remainder = this.state.data.filter((todo) => {
      if(todo.id !== id) return todo;
    });

    axios.delete(this.apiUrl+id)
      .then((res) => {
        this.setState({data: remainder});
      })
  }

  render(){

    return (
      <div>
        <Title todoCount={this.state.data.length}/>
        <TodoForm addTodo={this.addTodo.bind(this)}/>
        <TodoList
          todos={this.state.data}
          remove={this.handleRemove.bind(this)}
        />
      </div>
    );
  }
}

export default TodoApp

上記のコードを見てもらうと分かりやすいと思うのですが、TodoAppコンポーネントにconstructorメソッド、componentDidMountメソッド, renderメソッドを定義しています。componentDidMountメソッド, renderメソッドは、Reactのライフサイクルメソッドの一種です。componentDidMountメソッドは、出力が DOM にレンダーされた後に実行されます。ここではライフサイクルの話は割愛しますので、気になる方は下記リンクを参考にしてみてください。

• https://ja.reactjs.org/docs/state-and-lifecycle.html
• https://qiita.com/Julia0709/items/3c3fc8d29fd2e56ed7a9

で、各関数コンポーネントに、propsを渡し、その値に応じた描画を行なうという流れになっております。

APIの疎通に関しては、

axios.get

や

axios.post

で行なって、APIからのレスポンスデータを取得したりしています。

で、実際に見てみると、初期の出力結果が、こうなります。（めっちゃ殺風景・・・。）

で入力欄に値を入力してEnterを押すと、タスクが追加できて、削除までできます。

本当は最低限CRUDの実装はしたかったのですが、諸々の事情により、updateの機能は後日追記いたします。

バックエンド編

Ruby on Rails とは

Rails is a web-application framework that includes everything needed to create database-backed web applications according to the Model-View-Controller (MVC) pattern.

https://github.com/rails/rails

Model-view-controller パターンを採用したフレームワークです。
特にActiceRecordは個人的には強力な機能だと思っています。

今回はView側はReactで実装していますので、RailsのAPIモードを使って実装しました。

APIモードは、下記のようにコマンドライン引数に --apiとつけるだけで、できてしまいます（さすがRails！）

rails new my_api --api

APIモード
https://guides.rubyonrails.org/api_app.html

Active Record とは

Active Record is the M in MVC - the model - which is the layer of the system responsible for representing business data and logic. Active Record facilitates the creation and use of business objects whose data requires persistent storage to a database. It is an implementation of the Active Record pattern which itself is a description of an Object Relational Mapping system.

https://guides.rubyonrails.org/active_record_basics.html

MVCモデル言うところの、Mの部分に相当するものです。
ORM（O/Rマッピング）システムに記述されている「Active Recordパターン」を実装したもので、このパターンと同じ名前が付けられています。

ORM(O/Rマッピング)とは、アプリケーションが持つオブジェクトを、RDBMSのテーブルに接続することです。
ORMを用いると、SQL文を書かずに、簡潔なコードだけで、テーブルのレコードのデータを取得できたり、更新できたりしてとても便利です。

例えば、ターミナル上で、

rails console

を叩き

Todo.all

などとすると、下記のような出力結果を得ることができます。

またワンライナーでも書くことができるので、
SQL文を書くより遥かに楽だと言うことが分かると思います。

他にも

• モデル同士のアソシエーションを表現する
• 関連付けられているモデル間の継承階層を表現する
• データをデータベースで永続化する前にバリデーションを行う

などの特徴を持っています。

RuboCop とは

RuboCop is a Ruby static code analyzer and code formatter.

https://github.com/rubocop-hq/rubocop

rubyのコードアナライザーであり、フォーマッターです。
例えば、チーム開発をするときにコード規約を定めると思うのですが、RuboCopを用いると捗ります。
また、警告を出すのみに止まらず、いくつかの問題を自動で直してくれることもしてくれます。
例えば、ターミナル上で下記のコマンドを実行すると、一括でフォーマットをかけてくれたりしますので、とても便利です。

bundle exec rubocop -a

参考
https://rubocop.readthedocs.io/en/stable/

実装

実装はとても簡単で、ターミナル上で、下記のコマンドをバーン！すると、
ルーティングやコントローラー、モデルからテーブル定義までの雛形を作ってくれます。

bundle exec rails generate scaffold Todo contents:string

実際のコード

controllers/todos_controller.rb

class TodosController < ApplicationController
  before_action :set_todo, only: [:show, :edit, :update, :destroy]

  def index
    @todos = Todo.all
    render json: @todos
  end

  def show
    render json: @todo
  end

  def new
    @todo = Todo.new
  end

  def edit
  end

  def create
    @todo = Todo.new(create_params)
    if @todo.save
      render json: @todo
    else
      render :new
    end
  end

  def update
    if @todo.update!(update_params)
      render json: @todo
    else
      render :edit
    end
  end

  def destroy
    @todo.destroy
    render json: @todos
  end

  private
    def set_todo
      @todo = Todo.find(params[:id])
    end

    def create_params
      params.require(:todo).permit(:contents)
    end

    def update_params
      params.require(:todo).permit(%i[id contents])
    end

    def destroy_params
      params.require(:todo).permit(:id)
    end
end

config/routes.rb

Rails.application.routes.draw do
  scope :api, defaults: { format: :json } do
    resources :todos, only: %i[show index create update destroy]
  end
end

models/todo.rb

class Todo < ApplicationRecord
  def as_json(options = {})
    super(options.reverse_merge(except: %i[created_at updated_at]))
  end
end

db/schema.rb

ActiveRecord::Schema.define(version: 2019_12_15_104719) do

  create_table "todos", force: :cascade do |t|
    t.string "contents"
    t.datetime "created_at", null: false
    t.datetime "updated_at", null: false
  end

end

今回のAPIの設計方針として、REST APIを採用しました。
REST APIについては、下記を参照してみてください。
https://restfulapi.net/

CI編

後日書きます

まとめ

半年間、自分が使ってきた技術を用いて、アプリーケーションを開発するのは良い振り返りにもなるし、一年の節目にも良さそうと思いました。今後も、何か学ぶ機会があれば、やってみるといいかもと思いました。
実はまだまだ書きたいこともあるので、後日追記するか、別の記事に載せることにします。

その他の参考資料

https://qiita.com/matzkoh/items/90baab22ad489b78384b
https://restful-api-guidelines-ja.netlify.com/
https://scotch.io/tutorials/create-a-simple-to-do-app-with-react

Opt Technologies Advent Calendar 2019の21日目の記事です。

はじめに

2019年4月に株式会社オプトに入社したsh1okohと申します。
なんやかんやありまして、今はReact, Redux, Railsなどを使ったプロダクトで、日々奮闘しております。
今回は、お仕事中に出会った技術スタックを使ってモダン()なTODOアプリを作ってみたので、各種ライブラリの紹介をしつつ、Todoアプリの紹介をしていきたいと思います。（備忘録的な目的もあります）

ちなみに、今回のTODOアプリのソースコードは下記リンクにありますので、
興味のある方はみてみてください。

https://github.com/sh1okoh/adventcalendar

対象読者

今回は、テーマ的にも内容自体は広く浅くになっております。
各種ライブラリを使ったSPAの全体像を把握したい方などを対象としており、各ライブラリを深く学びたいといった方は対象外となっておりますので、よろしくお願いします。

今回使用した技術

フロントエンド

• JavaScript （業務ではTypeScriptを使っています）
• React
• Redux
• axios
• eslint
• prettier

バックエンド

• Ruby 2.5.7
• Ruby on Rails 5.2.4
• rubocop
• guard
• rspec
• rack-cors

CI/CD

• Circle CI

フロントエンド編

React とは

A JavaScript library for building user interfaces

https://reactjs.org/

Facebookの作ったJavascriptライブラリです。
MVC(Model View Controller)モデルでいうとVの部分を提供しています。

Reactの考え方

Component-Based
Build encapsulated components that manage their own state, then compose them to make complex UIs.

https://reactjs.org/

Reactでは、画面をComponentの親子関係を持つツリーとして構成します。
各コンポーネントは、親から渡されたprops（プロパティ）、State（自分の状態）を元に、renderメソッドでDOM（Virtual DOM）を生成します。

axios とは

Promise based HTTP client for the browser and node.js

https://github.com/axios/axios

Http通信を簡単に行うことができるJavascriptライブラリです。
主な特徴としては、

• ChromeやFirefox, Safariなどのブラウザに対応
• リクエストとレスポンスデータを変換
• Promise APIをサポート

と言った特徴があります。

今回は、このライブラリを使ってAPIとの通信を行なっていきます。

実装

以下がコードになります。

import React from 'react';
import axios from 'axios';

const Title = ({todoCount}) => {
  return (
    <div>
      {
          todoCount > 0 ? <h1>{todoCount}つのタスクがあります</h1> :
          <h1>タスクがありません</h1>
      }
    </div>
  );
}

const TodoForm = ({addTodo}) => {
  let input;
  return (
    <form onSubmit={(e) => {
        e.preventDefault();
        addTodo(input.value);
        input.value = '';
      }}>
      <input className="form-control col-md-12" ref={node => {
        input = node;
      }} />
      <br />
    </form>
  );
};

const Todo = ({todo, remove}) => {
  return (
    <li>
      <a href="#" className="list-group-item">{todo.contents}</a>
      <button onClick={() => {remove(todo.id)}}>削除</button>
    </li>
  );
}

const TodoList = ({todos, remove}) => {
  const todoNode = todos.map((todo) => {
    return (<Todo todo={todo} key={todo.id} remove={remove} />)
  });
  return (<div className="list-group" style={{marginTop:'30px'}}>{todoNode}</div>);
}

window.id = 0;
class TodoApp extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      data: []
    }
    this.apiUrl = 'http://localhost:3000/api/todos/'
  }

  componentDidMount(){
    axios.get(this.apiUrl)
      .then((res) => {
        this.setState({ data: res.data });
      });
  }

  addTodo(val){
    const todo = {contents: val}
    axios.post(this.apiUrl, todo)
       .then((res) => {
          this.state.data.push(res.data);
          this.setState({data: this.state.data});
       });
  }

  handleRemove(id){
    const remainder = this.state.data.filter((todo) => {
      if(todo.id !== id) return todo;
    });

    axios.delete(this.apiUrl+id)
      .then((res) => {
        this.setState({data: remainder});
      })
  }

  render(){

    return (
      <div>
        <Title todoCount={this.state.data.length}/>
        <TodoForm addTodo={this.addTodo.bind(this)}/>
        <TodoList
          todos={this.state.data}
          remove={this.handleRemove.bind(this)}
        />
      </div>
    );
  }
}

export default TodoApp

上記のコードを見てもらうと分かりやすいと思うのですが、TodoAppコンポーネントにconstructorメソッド、componentDidMountメソッド, renderメソッドを定義しています。componentDidMountメソッド, renderメソッドは、Reactのライフサイクルメソッドの一種です。componentDidMountメソッドは、出力が DOM にレンダーされた後に実行されます。ここではライフサイクルの話は割愛しますので、気になる方は下記リンクを参考にしてみてください。

• https://ja.reactjs.org/docs/state-and-lifecycle.html
• https://qiita.com/Julia0709/items/3c3fc8d29fd2e56ed7a9

で、各関数コンポーネントに、propsを渡し、その値に応じた描画を行なうという流れになっております。

APIの疎通に関しては、

axios.get

や

axios.post

で行なって、APIからのレスポンスデータを取得したりしています。

で、実際に見てみると、初期の出力結果が、こうなります。（めっちゃ殺風景・・・。）

で入力欄に値を入力してEnterを押すと、タスクが追加できて、削除までできます。

本当は最低限CRUDの実装はしたかったのですが、諸々の事情により、updateの機能は後日追記いたします。

バックエンド編

Ruby on Rails とは

Rails is a web-application framework that includes everything needed to create database-backed web applications according to the Model-View-Controller (MVC) pattern.

https://github.com/rails/rails

Model-view-controller パターンを採用したフレームワークです。
特にActiceRecordは個人的には強力な機能だと思っています。

今回はView側はReactで実装していますので、RailsのAPIモードを使って実装しました。

APIモードは、下記のようにコマンドライン引数に --apiとつけるだけで、できてしまいます（さすがRails！）

rails new my_api --api

APIモード
https://guides.rubyonrails.org/api_app.html

Active Record とは

Active Record is the M in MVC - the model - which is the layer of the system responsible for representing business data and logic. Active Record facilitates the creation and use of business objects whose data requires persistent storage to a database. It is an implementation of the Active Record pattern which itself is a description of an Object Relational Mapping system.

https://guides.rubyonrails.org/active_record_basics.html

MVCモデル言うところの、Mの部分に相当するものです。
ORM（O/Rマッピング）システムに記述されている「Active Recordパターン」を実装したもので、このパターンと同じ名前が付けられています。

ORM(O/Rマッピング)とは、アプリケーションが持つオブジェクトを、RDBMSのテーブルに接続することです。
ORMを用いると、SQL文を書かずに、簡潔なコードだけで、テーブルのレコードのデータを取得できたり、更新できたりしてとても便利です。

例えば、ターミナル上で、

rails console

を叩き

Todo.all

などとすると、下記のような出力結果を得ることができます。

またワンライナーでも書くことができるので、
SQL文を書くより遥かに楽だと言うことが分かると思います。

他にも

• モデル同士のアソシエーションを表現する
• 関連付けられているモデル間の継承階層を表現する
• データをデータベースで永続化する前にバリデーションを行う

などの特徴を持っています。

RuboCop とは

RuboCop is a Ruby static code analyzer and code formatter.

https://github.com/rubocop-hq/rubocop

rubyのコードアナライザーであり、フォーマッターです。
例えば、チーム開発をするときにコード規約を定めると思うのですが、RuboCopを用いると捗ります。
また、警告を出すのみに止まらず、いくつかの問題を自動で直してくれることもしてくれます。
例えば、ターミナル上で下記のコマンドを実行すると、一括でフォーマットをかけてくれたりしますので、とても便利です。

bundle exec rubocop -a

参考
https://rubocop.readthedocs.io/en/stable/

実装

実装はとても簡単で、ターミナル上で、下記のコマンドをバーン！すると、
ルーティングやコントローラー、モデルからテーブル定義までの雛形を作ってくれます。

bundle exec rails generate scaffold Todo contents:string

実際のコード

controllers/todos_controller.rb

class TodosController < ApplicationController
  before_action :set_todo, only: [:show, :edit, :update, :destroy]

  def index
    @todos = Todo.all
    render json: @todos
  end

  def show
    render json: @todo
  end

  def new
    @todo = Todo.new
  end

  def edit
  end

  def create
    @todo = Todo.new(create_params)
    if @todo.save
      render json: @todo
    else
      render :new
    end
  end

  def update
    if @todo.update!(update_params)
      render json: @todo
    else
      render :edit
    end
  end

  def destroy
    @todo.destroy
    render json: @todos
  end

  private
    def set_todo
      @todo = Todo.find(params[:id])
    end

    def create_params
      params.require(:todo).permit(:contents)
    end

    def update_params
      params.require(:todo).permit(%i[id contents])
    end

    def destroy_params
      params.require(:todo).permit(:id)
    end
end

config/routes.rb

Rails.application.routes.draw do
  scope :api, defaults: { format: :json } do
    resources :todos, only: %i[show index create update destroy]
  end
end

models/todo.rb

class Todo < ApplicationRecord
  def as_json(options = {})
    super(options.reverse_merge(except: %i[created_at updated_at]))
  end
end

db/schema.rb

ActiveRecord::Schema.define(version: 2019_12_15_104719) do

  create_table "todos", force: :cascade do |t|
    t.string "contents"
    t.datetime "created_at", null: false
    t.datetime "updated_at", null: false
  end

end

今回のAPIの設計方針として、REST APIを採用しました。
REST APIについては、下記を参照してみてください。
https://restfulapi.net/

CI編

後日書きます

まとめ

半年間、自分が使ってきた技術を用いて、アプリーケーションを開発するのは良い振り返りにもなるし、一年の節目にも良さそうと思いました。今後も、何か学ぶ機会があれば、やってみるといいかもと思いました。
実はまだまだ書きたいこともあるので、後日追記するか、別の記事に載せることにします。

その他の参考資料

https://qiita.com/matzkoh/items/90baab22ad489b78384b
https://restful-api-guidelines-ja.netlify.com/
https://scotch.io/tutorials/create-a-simple-to-do-app-with-react

はじめに

多くの方が既にuseContextやuseReducerを使い、Reduxのようなprops-drillingを回避するようなHooksを作っています。そこで今回はreact-trackedを使いReduxが解決した機能の一つであるpropsdrilling回避を実現したいと思います。
react-trackedの利点については@daishiさんのreact-trackedの紹介という記事をご参照ください。

react-trackedを使ってみる

今回はカウンターアプリを作っていきたいと思います。

ファイル構成

今回のファイル構成は以下です。store.jsにglobalに置きたい変数、reducerを置きます。

src
 |-- index.js
 |-- App.js
 |-- store.js
 |-- Components
   |-- Counter.js
   |-- Display.js

store.jsに初期値を設定&Reducerを置き、Providerを定義する

今回はカウンターアプリなので、以下のように設定します。

src/store.js

import { useReducer } from "react";
import { createContainer } from "react-tracked";

const initialState = { count: 0 };

const reducer = (state, action) => {
  switch (action.type) {
    case "INCREMENT_COUNT":
      return { ...state, count: state.count + 1 };
    case "DECREMENT_COUNT":
      return { ...state, count: state.count - 1 };
    default:
      throw new Error();
  }
};

const useValue = () => useReducer(reducer, initialState);

export const {
  Provider,
  useTrackedState,
  useUpdate: useDispatch
} = createContainer(useValue);

ProviderをApp.jsに適用し、変数、reducerにアクセスできるようにする

Providerでコンポーネント全体をラップします。各コンポーネントに関しては下で説明します。

src/App.js

import React from "react";
import Display from "./Components/Display";
import Counter from "./Components/Counter";
import { Provider } from "./store";

const App = () => {
  return (
    <Provider>
      <Display />
      <hr />
      <Counter />
    </Provider>
  );
};

export default App;

Count機能を作るCounterコンポーネントとCountの値表示機能を作るDisplayコンポーネントを作成。

今回の作ったコンポーネントはComponentsディレクトリにまとめておきます。
まずはCount機能

src/Components/Counter.js

import React from "react";
import { useDispatch } from "../store";

const Counter = () => {
  const dispatch = useDispatch();

  return (
    <div>
      <button onClick={() => dispatch({ type: "INCREMENT_COUNT" })}>
        Plus
      </button>
      <button onClick={() => dispatch({ type: "DECREMENT_COUNT" })}>
        Minus
      </button>
    </div>
  );
};

export default Counter;

次に値表示機能

src/Components/Display.js

import React from "react";
import { useTrackedState } from "../store";

const Display = () => {
  const state = useTrackedState();
  return <div>count : {state.count}</div>;
};

export default Display;

完成品

完成品についてはこのCodeSandboxのリンクから見ることができるので、動作を確認してみてください。

最後に

カウンターアプリだと結構簡単に作ることができましたが、正直これだけだとreact-truckedの「不要なrenderがパフォーマンス低下を引き起こすのを防ぐ」という面は紹介できなかったかなと思います。
詳細については上で紹介した@daishiさんのreact-trackedの紹介という記事やreact-trackedのチュートリアルを見るとよくわかると思います。

参考文献

今回カウンターアプリを作るにあたり以下の記事を参考にさせていただきました。ありがとうございました。

Reduxから Context API with Hooks へ

はじめに

この記事はFirebase #2 Advent Calendar 2019の21日目の記事です。
タイトル通り，Webアプリにおけるユーザーグループ機能について考えた内容を書いていきます．

この記事を書いたモチベーションは，自分が開発するWebアプリでユーザーグループ機能を実装する必要が出てきたものの，ユーザー情報がダイレクトに関わるものなので，自分の中でちゃんと整理しながらやらないと不安極まりなく，頭の整理も兼ねて書きました．また，FirebaseとFirestoreのみでどう実装できるかを試したかったというのもあります．（機能はまだ検討中）

しかし，予想以上に検討すべき事項が多かったことから（当たり前だが），機能と設計の全体像については複数記事に分けて書くことにしました．
本記事はとりあえず土台を考えてみた程度に止まっており，下記の様な内容をカバーできていません．

• 登録時のメールアドレスの所有確認
• 各ユーザーの役割や管理者権限の変更
• 複数グループへの所属管理
• Firestoreルールのあるべき姿
• etc... （サンプルコードのanyなどは追って書き直します...）

使ったサービス+技術

• Firebase Hosting
• Firebase Authentication
• Firestore
• React.js
• material-ui

どんな機能を作るか？

土台なので，まずはユーザーグループを管理する上で最低限必要となりそうな機能のみ考えています．
それらの機能の大枠とフローは下記の通りです．

この記事でやっていること

ユーザーグループの作成から新規ユーザーの追加まで，です．

今回のユーザーグループ作成の機能では，誰でもユーザーグループを作成できるものの，ユーザーグループを作ったユーザー＝管理者という形になっています．また，グループに新しいユーザーを追加できるのもグループを作った管理者のみとなっています．

新規ユーザーグループの作成・管理者登録

0. Firebaseの設定

公式のクイックスタートと変わりないですが，とりあえずこれがなければ始まらないので．
Google Providerやfunctionsは追々使うので入ってますが，本記事では使ってません．

configFirebase.tsx

import firebase from "firebase/app";
import "firebase/firestore";
import "firebase/functions";
import "firebase/auth";

firebase.initializeApp({
  apiKey: process.env.REACT_APP_FIREBASE_APIKEY,
  authDomain: process.env.REACT_APP_FIREBASE_AUTHDOMAIN,
  projectId: process.env.REACT_APP_GCP_PROJECTID,
});

export default firebase;
export const providerGoogle = new firebase.auth.GoogleAuthProvider();
export const firestore = firebase.firestore();
export const functions = firebase.functions();
export const { FieldValue } = firebase.firestore;

1. トップページ

これはソースいらないと思いますが一応．

TopPage.tsx

import React from "react";
import { makeStyles, createStyles, Theme } from "@material-ui/core/styles";
import { Button } from "@material-ui/core";

/* 省略 */

const TopPage: React.FC = () => {
  const classes = useStyles();

  return (
    <div>
      <Button className={classes.button} href="/signUp">
        ユーザーグループの作成
      </Button>
      <Button className={classes.button} href="/login">
        ログイン
      </Button>
    </div>
  );
};

2. ユーザーグループ・管理者アカウントの作成

とりあえず必要最低限の情報を取得し，
firebase.auth().createUserWithEmailAndPassword()
に投げてユーザーグループの管理者となるアカウントの登録を行っています．
なので，ここではユーザーグループという箱を作ってる訳ではなく，グループを作れるアカウントを作成してるだけです．

注）
本来はここでメールアドレスの所有確認を前段に挟みますが，私の都合で省略しています．
メールアドレスの本人確認メールを投げ，継続URLから登録に進む,,,という流れは追って修正するか，別記事書いてこちらにリンク貼ります．
（公式だとこの辺の機能ですね．https://firebase.google.com/docs/auth/web/passing-state-in-email-actions?hl=ja）
ここはGoogleやFacebookのProviderを使っても良いですが，個人都合でメアド＆パスワードにしています．

ソースは各機能に関する部分を抜粋して載せていきます．
本筋に関係のない部分は割愛しています．

SignUpForm.tsx

const SignUpForm: React.FC = () => {
  const classes = useStyles();
  const [email, setEmail] = useState<string>("");
  const [emailError, setEmailError] = useState<string>("");
  const [emailCheck, setEmailCheck] = useState<string>("");
  const [emailCheckError, setEmailCheckError] = useState<string>("");
  const [password, setPassword] = useState<string>("");
  const [complete, setComplete] = useState<boolean>(false);

  const signUp = (): void => {
    firebase
      .auth()
      .createUserWithEmailAndPassword(email, password)
      .then(() => {
        console.log("Success create user.");
      })
      .catch((error: any) => {
        console.log(error.code);
        console.log(error.message);
        if (`${error.message}`.indexOf("already") !== -1) {
          alert("既に登録済のメールアドレスです．");
        }
      });
  };

  const handleEmailChange = (event: any) => {
    setEmail(event.target.value);
    const error = event.target.validationMessage;
    if (error) {
      setEmailError(error);
    } else {
      setEmailError("");
    }
  };

  const handleEmailCheckChange = (event: any) => {
    setEmailCheck(event.target.value);
  };

  useEffect(() => {
    if (email.length > 2) {
      if (email !== emailCheck) {
        setEmailCheckError("* メールアドレスが一致していません");
      } else {
        setEmailCheckError("* メールアドレスが一致しました");
      }
    }
  }, [email, emailCheck]);

  const handlePasswordChange = (event: any) => {
    setPassword(event.target.value);
  };

  const handleSubmit = (event: any) => {
    if (complete) {
      event.preventDefault();
      signUp();
    }
  };

  useEffect(() => {
    const regex = RegExp(
      /^(?=.*?[a-z])(?=.*?\d)(?=.*?[!-\/:-@[-`{-~])[!-~]{8,100}$/i
    );
    console.log(`EmailError: ${emailError}`);
    if (
      emailError.length === 0 &&
      email === emailCheck &&
      regex.test(password)
    ) {
      console.log("the email and password is good.");
      setComplete(true);
    } else {
      console.log("the email and password is bad.");
      setComplete(false);
    }
  }, [email, emailCheck, password]);

  return (
    <div>
      <Card className={classes.mainCard}>
        <Typography variant="h5">
          ユーザーグループの管理者アカウントを作成
        </Typography>
        <form
          className={classes.root}
          onSubmit={handleSubmit}
          noValidate
          autoComplete="off"
        >
          <TableContainer>
            <Table className={classes.tableRoot}>
              <TableHead>
                <TableRow>
                  <TableCell>入力項目</TableCell>
                  <TableCell />
                </TableRow>
              </TableHead>
              <TableBody>
                <TableRow>
                  <TableCell>
                    <TextField
                      required
                      className={classes.textField}
                      id="standard-email"
                      label="メールアドレス"
                      onChange={handleEmailChange}
                      type="email"
                      value={email}
                    />
                  </TableCell>
                  <TableCell />
                </TableRow>
                <TableRow>
                  <TableCell>
                    <TextField
                      required
                      className={classes.textField}
                      id="check-email"
                      label="メールアドレス(確認用)"
                      onChange={handleEmailCheckChange}
                      type="email"
                      value={emailCheck}
                    />
                  </TableCell>
                  <TableCell>
                    <Typography
                      className={classes.errorCaption}
                      variant="caption"
                      style={
                        email === emailCheck
                          ? { color: "green" }
                          : { color: "red" }
                      }
                    >
                      {emailCheckError}
                    </Typography>
                  </TableCell>
                </TableRow>
                <TableRow>
                  <TableCell>
                    <TextField
                      required
                      className={classes.passwordField}
                      id="standard-password"
                      label="Password"
                      type="password"
                      autoComplete="current-password"
                      onChange={handlePasswordChange}
                    />
                  </TableCell>
                  <TableCell>
                    <Typography className={classes.caption} variant="caption">
                      <p>* 半角英数字と記号をそれぞれ1つ以上含めてください</p>
                      <p>* 8文字以上100文字以下</p>
                    </Typography>
                  </TableCell>
                </TableRow>
              </TableBody>
            </Table>
          </TableContainer>
          <p>
            <Button
              className={classes.button}
              type="submit"
              variant="contained"
              disabled={!complete}
            >
              管理者アカウントを作成
            </Button>
          </p>
        </form>
      </Card>
    </div>
  );
};

入力フォームに必要な情報を入力してボタンを押せば，firebase authenticationのページにて，入力したアドレスでユーザーが作成されています．

3. 管理者登録後の遷移

ユーザーグループの作成（というより管理者登録）を終えたら，
firebase.auth().onAuthStateChanged()
で認証状態の変化を検知し，ユーザーグループの管理画面へ遷移させます．
(前述のソースコードではルーティング部分の処理を省略してるので，自動で遷移はしません)

管理者の初回ログインでは，グループの識別に使うグループUIDの作成と，管理者権限の管理をfirestoreで行えるよう役割を付与しています．本記事ではグループUID生成をカバーできていないので，これまた追々更新したいところ．．．

2回目以降のログインや，管理者権限を持たないユーザーのログイン時は，firestoreからユーザーが所属するグループや役割を取得する形になっています．

App.tsx

import React, { useState, useEffect } from "react";
import firebase, { firestore, FieldValue } from "./configFirebase";
import SignUpForm from ".SignUpForm";
import TopPage from "./TopPage";
import GroupPage from "./GroupPage";
import LoginPage from "./LoginPage";
import AddUserPage from "./AddUserPage";

const App: React.FC = () => {

  const [loginUser, setUser] = useState<any | null>(null);
  const [isLoading, setLoading] = useState<boolean>(false);

  // 初回ロード時
  useEffect(() => {
    setLoading(true);

    // firebase authenticationの機能で認証
    firebase.auth().onAuthStateChanged((user: any) => {
      // 登録済みのユーザーで認証できた場合
      if (user) {
        // firestoreにアクセス
        // 初回ログインではここで管理者のユーザー情報をfirestoreにsetする（管理者ログイン以外は登録時にユーザー情報をもつ）
        // 2回目以降のログインでは，ここでユーザー情報を取得する
        Promise.resolve(50)
          .then(() => {
            firestore
              .collection("users")
              .doc(`${user.uid}`)
              .get()
              .then((doc: any) => {
                if (doc.data()) {
                  console.log("already registed User Logined.");
                  const { userName, role, groupUID } = doc.data();
                  setUser({ userName, role, groupUID });
                } else {
                  const docRef = firestore
                    .collection("users")
                    .doc(`${user.uid}`);
                  docRef.set({
                    email: user.email,
                    userName: "Admin User",
                    role: "admin",
                    timestamp: FieldValue.serverTimestamp(),
                    groupUID: "test" // UIDを生成（後日追記,,,）,
                  });
                }
              });
          })
          .then(() => setLoading(false));
      } else {
        setLoading(false);
        // signUpPageへリダイレクト
      }
    });
  }, []);

  return (
    <Router>
      <Switch>
        <Route exact path="/top" component={() => <TopPage />} />
        <Route exact path="/login" component={() => <LoginPage />} />

        {loginUser ? (
          <Switch>
            <Route
              exact
              path="/groupPage"
              component={() => <GroupPage user={loginUser} />}
            />
            <Route
              exact
              path="/addUser"
              component={() => <AddUserPage userRole={loginUser.role} groupUID={loginUser.groupUID} />}
            />

            <Redirect to="groupPage" />
          </Switch>
        ) : (
          <Route exact path="/signUp" component={() => <SignUpForm />} />
        )}
      </Switch>
    </Router>
  );

};

GroupPage.tsx

const GroupPage = (props: GroupPageTypes) => {
  const classes = useStyles(props);
  const [memo, setMemo] = useState<string>("");
  const { user } = props;
  const { userName } = user;
  const { role } = user;

  const handleMemo = (event: any) => {
    console.log(event.target.value);
    setMemo(event.target.value);
  };

  return (
    <div>
      <Card className={classes.mainCard}>
        <Typography variant="h5">ユーザーグループのページ</Typography>
        <br />
        {role === "admin" ? (
          <>
            管理者としてログインしています．
            <Button
              className={classes.button}
              variant="contained"
              href="/addUser"
            >
              新規ユーザーを追加する
            </Button>
          </>
        ) : (
          ""
        )}
        <br />
        <TableContainer>
          <Table className={classes.tableRoot}>
            <TableHead>
              <TableRow>
                <TableCell>ユーザー名</TableCell>
                <TableCell>役割</TableCell>
                <TableCell>メモ</TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              <TableRow>
                <TableCell> {userName} </TableCell>
                <TableCell> {role} </TableCell>
                <TableCell>
                  <TextField
                    required
                    className={classes.textField}
                    id="memo"
                    label="メモ"
                    onChange={handleMemo}
                    type="email"
                    value={memo}
                  />
                </TableCell>
              </TableRow>
            </TableBody>
          </Table>
        </TableContainer>
      </Card>
    </div>
  );
};

ユーザーグループに新規ユーザーを追加する

グループへ新規ユーザーを追加する際は，Slackのワークスペースなどの様に招待メールで継続URLを送信し，そのURLからパスワード登録などを行ってもらうのが良いと考えています．
が，前述の通り本記事ではメールアドレス確認部分を端折ってるので，管理者がグループの長としてメールアドレスと共通の初期パスワードの登録を行う形になっています．ここも後日(ry

ここでグループへ追加ボタンを押すと，先ほどのFirebase Authenticationのページへ新規ユーザーが作成されます．

AddUserPage.tsx

type AddUserTypes = {
  userRole: string;
  groupUID: string;
};

const AddUserPage = (props: AddUserTypes) => {
  const classes = useStyles();
  const { userRole } = props;
  const [email, setEmail] = useState<string>("");
  const [emailError, setEmailError] = useState<string>("error");
  const [complete, setComplete] = useState<boolean>(false);

  const createNewUser = (): void => {
    const initialPassword = "firebaseAdvent2019@";
    firebase
      .auth()
      .createUserWithEmailAndPassword(email, initialPassword)
      .then(() => {
        console.log("Success create new user.");
      })
      .catch((error: any) => {
        console.log(error.code);
        console.log(error.message);
        if (`${error.message}`.indexOf("already") !== -1) {
          alert("既に登録済のメールアドレスです．");
        }
      });
  };

  const handleEmailChange = (event: any) => {
    setEmail(event.target.value);
    const error = event.target.validationMessage;
    if (error) {
      setEmailError(error);
    } else {
      setEmailError("");
    }
  };

  useEffect(() => {
    if (emailError.length === 0) {
      setComplete(true);
    } else {
      setComplete(false);
    }
  }, [emailError]);

  const handleSubmit = (event: any) => {
    event.preventDefault();
    if (emailError.length === 0) {
      createNewUser();
    }
  };

  return (
    <div>
      <Card className={classes.mainCard}>
        <Typography variant="h5">
          ユーザーグループへ新規ユーザーを追加
        </Typography>
        {userRole === "admin" ? (
          <form
            className={classes.root}
            onSubmit={handleSubmit}
            noValidate
            autoComplete="off"
          >
            <TableContainer>
              <Table className={classes.tableRoot}>
                <TableHead>
                  <TableRow>
                    <TableCell>入力項目</TableCell>
                    <TableCell />
                  </TableRow>
                </TableHead>
                <TableBody>
                  <TableRow>
                    <TableCell>
                      <TextField
                        required
                        className={classes.textField}
                        id="standard-email"
                        label="メールアドレス"
                        onChange={handleEmailChange}
                        type="email"
                        value={email}
                      />
                    </TableCell>
                  </TableRow>
                </TableBody>
              </Table>
            </TableContainer>
            <p>
              <Button
                className={classes.button}
                type="submit"
                variant="contained"
                disabled={!complete}
              >
                新規ユーザーをグループへ追加
              </Button>
            </p>
          </form>
        ) : (
          "新規ユーザーの追加を行えるのは管理者のみです．"
        )}
      </Card>
    </div>
  );
};

おわりに

本記事ではここまでです．
ユーザーグループを管理するアカウントの作成から，新規ユーザー追加までを行いました．
とりあえず作ってみるかと勢いで始めましたが，書いてると色々足りない部分が出てきますね...
自分は書き始めないと詳細な設計部分などが見えてこないタイプですが，色々甘すぎました．
必要な機能の全体像や設計は改めて整理したいと思います．

（次は肝心の新規ユーザーを対象グループへ紐付ける部分，新規ユーザーが初回ログインした時にどんな処理が走るかを書いていきます．）

課題の目的

カスタムhooksの基礎的な使い方を理解してもらいたかった。

回答

実装方法はそれぞれ違うと思うので、一つの例だと思って見てほしいです。

import React, { useState, useCallback, memo} from "react";
import ReactDOM from "react-dom";
import "./styles.css";

function App() {
  const [isOpen, open, close] = useOpenComment();
  const [isOpen2, open2, close2] = useOpenComment();
  return (
    <div>
      <button onClick={open}>open!!</button>
      <button onClick={open2}>open2!!</button>
      <Comment isOpen={isOpen} close={close} comment="openしました！"/>
      <Comment isOpen={isOpen2} close={close2} comment="openしました！2"/>
    </div>
  );
};

const useOpenComment = () => {
  const [isOpen, setIsOpen] = useState(false);
  const open = useCallback(() => setIsOpen(true), []);
  const close = useCallback(() => setIsOpen(false), []);
  return [isOpen, open, close];
};

const Comment = memo(({isOpen, close, comment}) => (
  <>
  {isOpen ?  
    <div className="comment">
      <p>{comment}</p>
      <button onClick={close}>close</button>
    </div>
    : null
  }
  </>
));

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

仕様の実装

・useStateを１回だけ使う
・useCallbackを２回だけ使う
これをカスタムhooksをつかって解決している。

const useOpenComment = () => {
  const [isOpen, setIsOpen] = useState(false);
  const open = useCallback(() => setIsOpen(true), []);
  const close = useCallback(() => setIsOpen(false), []);
  return [isOpen, open, close];
};

これをつくっておくことで、ボタンで利用する関数を毎回定義しなくても、useOpenCommentを呼び出すだけで必要な関数を呼び出すことだできるようになる。