はじめに

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
• 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などのブラウザに対応

• ブラウザから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メソッド, renderメソッドを定義しています。componentDidMountメソッド, renderメソッドは、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

この記事は「kintone Advent Calendar 2019」の21日目の記事です！

株式会社AISICの久米です。
福岡でkintoneエバンジェリストしています。
年一のQiita投稿で恐縮ですが、今年も書いてみます＾＾

テーマ的には、昨年の記事と似ていますが、より整理を進めてみました！

弊社のkintone開発の定石を、テンプレート的にまとめてみましたので、皆さんと共有して、よりイケてるkintone生活を送っていただきたく思います！

kintoneは上手に作らなければ『早い』だけで、変化に『弱い』システムになる

「kintoneは、早い！簡単！」って言いすぎですよね。
いや、確かに「早い・簡単」ではあるんですよ。
会社への導入にしても、アプリを作るにしても、それほどの知識が無くてもできちゃう辺りは、「早い・簡単」以外の何物でもないとは思うわけです。
そして、運用に合わせて、アプリを自分たちで簡単に変更できるのもスゴクいいところ。これも間違いない。
最初はアプリ単体での活用だったのが、数ヶ月経ってくると、複数アプリが連携する事の簡単さや強力さに感動しながら、バンバン盛り上がったりするわけです。

で、「そろそろ、バックアップとか考えないとねー」とか「特定の顧客ごとに年度毎に集計したいよねー」とか「開発環境って別にできた方がいいよね！」とかなってきたときに、「あれ？？なんか無理ゲー」みたいになるのです。

簡単に『変わる』ために『骨』を作るべし

単に「作る」だけであれば、色々と考えなくても作りたいように作ってしまえばいいのですが、「容易に変わる・変える・変え続ける」ためには、システムとしての『骨』をちゃんと使っておくことが肝要です。
あまり意識せずにkintoneでアプリを作ってしまうと、この『骨』が作れないので、結果的に「変化に弱い」アプリになってしまうのです。

では、kintoneにおける変化に強いとは？？

• 拡張・連携したいと思った時に、容易に拡張・連携できるようにすること
• データのバックアップ(CSV・Excel)から一括更新(リストア)ができること

アプリを作る段階では1点目が重要ですが、運用しながら変更をしていくときには2点目が重要です。

システムの『骨』をkintoneに通すという事

他アプリから利用される・連携されることを前提とした下記の様なフィールドを各アプリに設けておくとよいです。後からこれらのフィールドを追加しようとすると、当該フィールドへのデータの更新など必要以上に手間が掛かり、迅速なアプリの更新ができなくなります。

• uid

  • レコード番号ではなく、機械的に連番を採番された番号を格納する

• ルックアップキー

  • 他アプリからルックアップする際に利用されるための検索キーを格納する

• レコードタイトル

  • レコードタイトルを格納する
    

• No

  • 業務運営上意味のある番号などを格納する(00001 など)
    

カスタマイズテンプレートを使ってみるといいですよ！

上記の様な事を実現するには、ガッツリとjavascriptでのプログラミングが必要になります。ですが、プログラミングに不慣れな方が実現するのはかなり難しい。なので、上記の様なアプリをテンプレートとしてダウンロードいただけるようにしておりますので、そちらをお使いいただけるとよいかと思います。
このアプリをベースに、必要な項目を自分なりに追加していただければ、おのずと『骨』の通ったシステムになります。

1. こちらからダウンロード
   
   カスタマイズアプリテンプレート
   

2. ダウンロードした「カスタマイズアプリテンプレート.zip」を使ってkintoneにアプリを追加する
   
   
   必要に応じてアプリテンプレートとして登録してもよいかもです。
   

3. アプリテンプレートから作成したアプリにレコードを追加した内容
   

注意事項

今回ご紹介したカスタマイズアプリテンプレートは、javascriptカスタマイズをしていますので、スタンダードプランでのみ利用できます。

最後に

こういうアプリをベースにユーザー側でアプリを作っていただければ、ハイレベルなカスタマイズをしたいと思った時にでも、弊社の様なkintoneカスタマイズを請け負っている企業にスムーズに依頼・実装出来ると思います！

このテンプレートを使ってアプリを作成し、変化に強い・変化し続けるkintoneアプリを使いながら、チームワークやビジネスを素早く確実に進めていただければと思います！

追記というかお知らせ

「カスタマイズアプリテンプレート」でも利用しているkintone_toolsも作っています。kintoneのjavascriptカスタマイズをしていくときに、あったらいいなぁとライブラリです。
皆さんからのアイデアも欲しいですし、一緒に開発を進めていただける方も絶賛募集中ですので、ぜひご協力いただけると嬉しいです！

復習も兼ねて一日一投稿してます。
簡単なメモです。

for文

繰り返しが決まっている時はfor文
繰り返しが決まってない場合はwhile文

for(初期値;条件式;増減式){
繰り返し処理
｝

for(i=0;i<100;i++){
    documen.write(i);
}

const list=['toypoo','pome','siba'];
for(const i=0;i<list.length;i
++){
    document.write(list[i]);
}

このように配列と繰り返し処理はよく使います。

for(const i=o;i<10;i++){
    if(i===5){
        break;
    }
    document.write(i);
}

breakを使うことで処理を終了できます。

for(const i=o;i<10;i++){
    if(i===5){
        continue;
    }
    document.write(i);
}

iが5の時は処理がスキップされます。

continueを使うと実行中の処理を中断し次の処理へ進みます。

while文

繰り返し回数が決まってない場合はwhile文です。
無限ループは避けましょう。

while(条件式){
    繰り返し処理
}

条件式がtrueである限りずっと繰り返しますので制限をつけましょう。

do{
    繰り返し処理
}while(条件式)

こちらのdo whileはとりあえず先に処理を行います。その後条件式が真であれば処理を続けるというものです。

const count = 0;
while(count<100){
    document.write(count);
    count++;
}

do{
    document.write(count);
    count++;
}while(count<10);

一旦処理を行いたい場合はdo whileです。

Dateオブジェクト

DateオブのジェクトはJSの組み込み関数の一つです。
他の組み込み関数には
String,Number,Booleann,Array,Date,Mathなどがあります。

//年を取得します。
const day = new Date();
console.log(day.getFullYear());

//付きを取得します
console.log(day.getMonth()+1);
//+1することを忘れずに。

//日付です。
console.log(day.getDate());

//曜日です。
console.log()day.getDay());

//年月日曜日を一気に取得してみます。
console.log(day.getFullYear()+'/'+day.getMonth()+1+'/'+day.getDate()+'/'+day.getDay());

//ゼロパディング処理をして日時を取得します。
const day = new Date();
day.getHours()+'時'+today.getMinutes()+'分'+('0'+today.getSeconds()).slice(-2)+'秒';

hotframeworks.com

URLはこちらになります。
http://hotframeworks.com/

目的

OAuth2認可を使ってオンラインサービスと連携させることができるコマンドラインツールを作成中です。ユーザー認証後に認可コードをこのツールで受け取りたいと思っているので、127.0.0.1で走るHTTPSサーバーをリダイレクト先として用意したい。
その検証として、まずローカルHTTPSサーバーをNode.jsで走らせてみました。言語は実際の使う予定のTypeScriptとなっています。

何を使う?

• Node.js
• httpsモジュール
• TypeScript

準備

まずはHTTPで地ならし

私はNode.jsローカル環境ではHTTPサーバーすらを立てた経験がないので、まずはHTTPから試してみる。

HTTPサーバーならばこれでOK。

import http from 'http';

const PORT = 9090;
const HOST = '127.0.0.1';

function startHttpServer(portNumber: number, hostName: string): Promise<http.IncomingMessage> {
  return new Promise((resolve, reject)=>{
    http.createServer((request, response)=>{
      response.writeHead(200, {
        'Content-Type': 'text/plain'
      });
      response.end(`welcome to local page!`);
      resolve(request);
    }).listen(portNumber, hostName);
  });
}

(async (portNumber, hostName)=>{
  const req = await startHttpServer(portNumber, hostName);
})(PORT, HOST);

HTTPは楽勝。

単純にHTTP -> HTTPSで置き換えてやってみる

単純にhttpモジュールをhttpsモジュールに置き換えて見ました。結論から言いますと以下のコードは機能しません。

単純な置き換えでは機能しない。

import https from 'https';
import { IncomingMessage } from 'http';

const PORT = 9090;
const HOST = '127.0.0.1';

function startHttpServer(portNumber: number, hostName: string): Promise<IncomingMessage> {
  return new Promise((resolve, reject)=>{
    https.createServer((request, response)=>{
      response.writeHead(200, {
        'Content-Type': 'text/plain'
      });
      response.end(`welcome to local HTTPS page!`);
      resolve(request);
    }).listen(portNumber, hostName);
  });
}

(async (portNumber, hostName)=>{
  const req = await startHttpServer(portNumber, hostName);
})(PORT, HOST);

実行すると、当然ですが、エラーになります。

何が必要なのか？

公式ドキュメントを読んでみます。目につくのがoptionsで指定している。keyとcertです。

https.createServer([options][,requestListener])

const options = {
  key: fs.readFileSync('test/fixtures/keys/agent2-key.pem'),
  cert: fs.readFileSync('test/fixtures/keys/agent2-cert.pem')
};

keyとcertはそれぞれ何かと言うと、同じく公式ドキュメントのTLSモジュールをみると下のように書いてありました。PEMフォーマットのプライベートキーですね。

key <string> | <string[]> | <Buffer> | <Buffer[]> | <Object[]>
Private keys in PEM format. PEM allows the option of private keys being encrypted. Encrypted keys will be decrypted with options.passphrase. Multiple keys using different algorithms can be provided either as an array of unencrypted key strings or buffers, or an array of objects in the form {pem: [, passphrase: ]}. The object form can only occur in an array. object.passphrase is optional. Encrypted keys will be decrypted with object.passphrase if provided, or options.passphrase if it is not.

certについて上記のページに下の説明があります。PEMフォーマットの証明書ですね。

cert <string> | <string[]> | <Buffer> | <Buffer[]>
Cert chains in PEM format. One cert chain should be provided per private key. Each cert chain should consist of the PEM formatted certificate for a provided private key, followed by the PEM formatted intermediate certificates (if any), in order, and not including the root CA (the root CA must be pre-known to the peer, see ca). When providing multiple cert chains, they do not have to be in the same order as their private keys in key. If the intermediate certificates are not provided, the peer will not be able to validate the certificate, and the handshake will fail.

幸いMacには元々opensslが入っていたので、これを使ってプライベートキーと証明書を作成します。
こちらのブログ、「秘密鍵、公開鍵、証明書、CSR生成のOpenSSLコマンドまとめ」 が大変参考になりました。このブログにあった「秘密鍵と自己署名証明書を一括で作成したい」を使います。
対話形式で入力する組織情報はどれが必須で、どれが省略可能なのかまでは調べていません。全部省略したらエラーになってしまいました。

プライベートキーと証明書の作成

$ openssl req -x509 -sha256 -nodes -days 9999 -newkey rsa:2048 -keyout localhttps_key.pem -out localhttps_cert.pem
Generating a 2048 bit RSA private key
............................................+++
...+++
writing new private key to 'localhttps_key.pem'
-----
You are about to be asked to enter information that will be incorporated
into your certificate request.
What you are about to enter is what is called a Distinguished Name or a DN.
There are quite a few fields but you can leave some blank
For some fields there will be a default value,
If you enter '.', the field will be left blank.
-----
Country Name (2 letter code) []:JP
State or Province Name (full name) []:Tokyo
Locality Name (eg, city) []:Tokyo
Organization Name (eg, company) []:FiftyFifty
Organizational Unit Name (eg, section) []:FortyNine
Common Name (eg, fully qualified host name) []:localhost
Email Address []:.

このコマンドが成功すると、localhttps_key.pemと言うプライベートキーとlocalhttps_cert.pemと言う証明書ファイルが生成されます。

機能するコード例

プライベートキーと証明書とをオプションで指定したら、HTTPSでアクセスできるようになりました。
実際にアクセすると、Chromeブラウザは強い警告を出してきますが、許可すればなんとかアクセスはできます。

機能するコード

import fs from 'fs';
import https from 'https';
import { IncomingMessage } from 'http';

const PORT = 9090;
const HOST = '127.0.0.1';

const options = {
  key: fs.readFileSync('./localhttps_key.pem'),
  cert: fs.readFileSync('./localhttps_cert.pem')
}

function startHttpServer(portNumber: number, hostName: string): Promise<IncomingMessage> {
  return new Promise((resolve, reject)=>{
    https.createServer(options, (request, response)=>{
      response.writeHead(200, {
        'Content-Type': 'text/plain'
      });
      response.end(`welcome to local HTTPS page!`);
      resolve(request);
    }).listen(portNumber, hostName);
  });
}

(async (portNumber, hostName)=>{
  const req = await startHttpServer(portNumber, hostName);
  console.log(`${JSON.stringify(req.headers)}`);
})(PORT, HOST);

はじめに

こんにちは！@70days_jsです。

文字を入力したら、ランダムな位置にランダムな大きさで表示されます。gif↓

64日目。(2019/12/21)
よろしくお願いします。

サイトURL

https://sin2cos21.github.io/day64.html

やったこと

キーダウンをイベントリスナーで捉えて、入力文字は一つずつオブジェクトを作っています。
50文字打ち込んだら全てのオブジェクトが消える仕組みになっています。

html↓

 <body>
    <div id="countWrapper">COUNT: <span id="count"></span></div>
    <canvas id="canvas"></canvas>
  </body>

css↓

body {
  height: 100vh;
  margin: 0;
  background-color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#canvas {
  border: solid 1px rgba(31, 227, 13, 1);
}

#countWrapper {
  color: rgba(31, 227, 13, 1);
  padding-bottom: 20px;
}

JavaScript(61行)↓

let canvas = document.getElementById("canvas"),
  ctx = canvas.getContext("2d"),
  twidth = (canvas.width = 500),
  theight = (canvas.height = 500),
  chars = [],
  count = document.getElementById("count"),
  fontSize = Math.random() * 100,
  countNumber = 0;

function Character(ctx, e) {
  this.ctx = ctx;
  this.x = Math.floor(Math.random() * twidth);
  this.y = Math.floor(Math.random() * theight);
  this.size = fontSize;
  this.char = String.fromCharCode(e.keyCode);
}

Character.prototype.render = function() {
  this.draw();
};

Character.prototype.draw = function() {
  let ctx = this.ctx;
  ctx.beginPath();
  ctx.fillStyle = "rgba(31, 227, 13, .5)";
  ctx.font = this.size + "px Arial";
  ctx.fill();
  ctx.fillText(this.char, this.x, this.y);
  ctx.closePath();
};

//_________keydown_________;
document.addEventListener("keydown", logKey, false);

function logKey(e) {
  if (countNumber >= 50) {
    countNumber = 0;
    chars.length = 0;
    alert("Characters are not eternal.");
  } else if (e.keyCode < 65 || e.keyCode > 91) {
    return false;
  } else {
    let char = new Character(ctx, e);
    chars.push(char);
    countNumber++;
    count.innerHTML = countNumber;
  }
}

function render() {
  fontSize = Math.random() * 100;
  ctx.clearRect(0, 0, twidth, theight);
  for (var i = 0; chars.length > i; i++) {
    let char = chars[i];
    char.render();
  }

  requestAnimationFrame(render);
}

render();

function Character(ctx, e) {...}

↑これはコンストラクターです。
位置、サイズ、文字を入れています。
色々詰め込んだ後に、コンストラクターの役割ってなんだっけと悩みました。
コンストラクターでオブジェクト固有の値を入れるのは、どうなんだろう・・・？

このオブジェクトはrender()メソッドを通して、draw()メソッドを実行します。
メソッドの数が増えたときのためにrender()メソッドを介しています。

render関数(メソッドの方じゃないよ）はfontsizeをランダムな値に再設定しています。

fontSize = Math.random() * 100;

（あれ、もしかしてこれもコンストラクターでやればよかった・・・？）

これはキャンバスをまっさらにしています。↓

ctx.clearRect(0, 0, twidth, theight);

for文で各オブジェクトのメソッドを実行しています。↓

for (var i = 0; chars.length > i; i++) {
let char = chars[i];
char.render();
}

感想

オレオレ流でやりすぎたのを反省した一日でした。
オブジェクト指向プログラミングの本をちゃんと読まなきゃな。

最後まで読んでいただきありがとうございます。明日も投稿しますのでよろしくお願いします。

プリザンターを～

震えさ～す！！?

今日はjQueryのプラグインであるjRumbleを利用してプリザンターをガクガクブルブル震えあがらせてみようと思います。

プリザンターとは

プリザンターとは株式会社インプリムが開発しているオープンソースのWebデータベースです。
データ管理やら業務アプリがマウス操作だけ（ノンプログラミング）でサクッと作れてしまう超有能なプラットフォーム（しかもOSSなので無料という！）なのですな。


オープンソースで脱エクセル！Pleasanter公式サイト


ということで、早速このプリザンターを震え上がらせていこうと思います。

jRumbleのダウンロード

jRumbleは以下のサイトよりダウンロードします。

jRumbleダウンロード

jRumbleの使い方

使い方は簡単です。
下記のサンプルは特定のセレクタをマウスホバーした際に震え上がらせる内容になっています。

サンプル.js

$('セレクタ').jrumble();
$('セレクタ').hover(function () {
    $(this).trigger('startRumble');
}, function () {
    $(this).trigger('stopRumble');
});

プリザンターを震えさせる！！

それでは実際にプリザンターを震え上がらせます!(^^)!

まずはダウンロードしたjquery.jrumble.1.3.min.jsをプリザンターの「Scripts/Plugins」にセットします。

その後、スクリプトタグに以下のスクリプトをセットしてください。

ガクブル.js

var script = document.createElement("script");
script.setAttribute("src", "/scripts/plugins/jquery.jrumble.1.3.min.js");
document.getElementsByTagName("Canvas")[0].appendChild(script);


$(function () {
    function Gakuburu(id) {
        $('#' + id).jrumble();
        $('#' + id).hover(function () {
            $(this).trigger('startRumble');
        }, function () {
            $(this).trigger('stopRumble');
        });
    }

    Gakuburu('CorpLogo');
    Gakuburu('Application');
});

これでプリザンターはガクブルです。

いや～、世の中には面白いプラグインがたくさんあるものです。

また色々面白そうなプラグインを見つけて触っていこうと思います。

ではでは！また！

はじめに

Google のクライアントライブラリ (https://apis.google.com/js/api.js) を使って OAuth 認証するサンプルは多くありますが、複数アカウントを切り替える方法の記事が少なかったので記載します。

実現方法

認証時にオプションを 1 つ設定するだけです。

const options = new gapi.auth2.SigninOptionsBuilder();
options.setPrompt('select_account');
gapi.auth2.getAuthInstance().signIn(options);

これを指定しないと、初回のログイン時はポップアップが表示されてアカウント選択できますが、アカウントを切り替えようと思ってログアウトして再ログインしても、前回認証したアカウントで自動ログインするため、ポップアップが表示されず、アカウントの切り替えができませんでした。

ドキュメントに書いてある通りでした。

宣伝

記載内容は、https://note.aprifield.com (Markdown でメモを取るサービス) を開発中に調査した内容です。

この記事の内容はJSConf JPで話した内容です.
資料全体はこちらにあります。

アジェンダ

IoTのはじめかた

とりあえずIoTをやりたい人へ

IoTとはインターネットとThingsがつながることです。
ざっくりと書くとこんな構成ですね。

この右側のアイコンは皆さんよく知ってるサービスだったりシステムだったりするのではないでしょうか。
メールもslackもよく使いますよね。

逆に左側のセンサ／アクチュエーターはほとんど知らないのではないでしょうか。
直線距離を図る距離センサや、人の有無がわかる人感センサ、物を動かすことができるモーターなどがあります。

IoTをやろう！(というか何かしらハードウェアを作って物理世界に関わろう)とすると、ここのThingsの知識がなくてなかなか難しいことが多いと思います

でもじつはとっても身近なThingsがあります

というわけで、JavaScriptでIoTをしたいな！とおもってる人はSmartPhoneのプログラムを書いてみるとIoTをすることができます。

完

・・・というのも寂しいので、もう少しお話しします。

カスタムハードウェアを作りたくなるとき

スマートフォンも十分IoTですが、それじゃ物足りなくなってくるときがあります

• 価格が高い
  ex) 1台数万円してしまう
• 機能が多すぎる
  ex) 画面はいらない
• 機能が足りない
  ex) 物理ボタンがない／温度が取れない

専用ハードウェアといってもCPUやセンサを選ぶだけで、
それらをつなげて完成させることが多いです。
自作PCみたいなものですね

パーツのカテゴリもだいたい決まっています。

この中からCPUはどれ、センサはどれ、通信方式はどれ・・・といった形で選んでいきます。

重要なのはCPUで、他のところは後から変更がききやすいですが、ここだけは最初に決めたものから変更するのはおお仕事になります。

JavaScriptでIoTするときの選択肢

そのCPUを選んだときにJavaScriptができるCPUなのかどうかが決まります。
基本的にはC言語しか使えないCPUが多い（メモリ容量とかの問題）ですが、
最近はJavaScriptでもかけるCPUが出てきています。

JavaScriptでかけるCPUとしてはESP32とobnizというものになります。

この２つはどちらもJavaScirptでプログラムを書くことができますが、
JavaScriptが動作する場所が違います。

・・・動作する場所がちがうというと、普段でもなにか似たようなことを言ってるのがありますよね

• Server Side JavaScript
• Client Side JavaScript

この２つの違いも、Server Side / Client Side と同じ概念で、稼働場所が違います。

ESP32 はクライアントサイドJavaScript

CPU上でJavaScriptが動くのがESP32です。
クライアント側で動いている分、高速な応答(マイクロ秒単位での反応とか)ができる代わりに、
プログラムの更新や高いCPUスペックを求めるなどのデメリットがあります。

このブラウザだとこの関数が動かない・・・！みたいなこともあります。

obniz はサーバーサイドJavaScript

サーバー側で動くのがobnizです。
サーバーで動くのでサーバーのJavaScriptバージョンに依存してできることが変動します。
都度通信が発生するので応答性が少々悪くなる(ミリ秒単位での反応)になりますが、自由でフレキシブルなプログラムが可能です。

サーバーと言っていますが、スマートフォンをサーバーにしてHTMLで動かす、ということもできます。

Webを活用したIoTができるobnizとは

ここではサーバーサイドJavaScriptのobnizでIoTをやる方法を説明します。

手順は
1. カスタムハードウェアを作成する
2. HTML/JavaScriptプログラムを書く
です。

いくつか具体例を書いていきます。

温度取得やLED点灯が１関数で終わるので、あとはセンサやアクチュエーターがどんな物があるかわかれば作れそうですよね。

センサの知識

センサ／アクチュエーターの知識は、事例を見ながら学ぶのがわかりやすいかなと思います、

• トイレの人の有無を確認して空き個室管理
  人感センサという人の動きを検知するセンサーを使って、空いているかどうか判定しています。
  あくまで"動き"なので、ずっと止まっている人がいても、いない判定をします

• マリオコイン
  ゲームをやって、ゲーム内でコインが出てきたら実際に５００円玉が出てくる！というものです。
  コインを押し出すためにサーボモーターというモーターを使っています

• ４足歩行ロボット
  その１
  その２
  こちらのサーボモーターというものを使っています。
  4つの足を4つのサーボモーターで作り、うまく足を動かすことで歩行しています

• 鉄道模型
  ミニ四駆でおなじみのDCモーターをつかって動かしています。

ほかにもQiita内をIoTとかで検索するとたくさん事例が出てくるので、見てみてください。

まとめ

JavaScriptでIoTをやりたいならスマートフォンがおすすめ！
スマホで物足りなくなってきたらobnizかESP32。
obnizはサーバーサイドJavaScript的に、簡単にかけるからおすすめ

オブジェクトリテラル内のスプレッド構文は、ES2018で追加されたたいへん便利な構文です。特に、{ ...obj }という形のコードでオブジェクトをコピーするのはJavaScriptプログラミングでは極めて頻出です。

スプレッド構文が無かった時代はObject.assign({}, obj)として同様のことを達成していた方も多いと思われます。Object.assignはES2015から使用可能でした。

では、この2種類の方法は同じでしょうか。タイトルにもある通り、もちろん違います。今回は、この違いに触れている日本語資料がMDN日本語版で一瞬触れているくらいしか無かったので記事にまとめました。

結論

最初に結論を述べると、Object.prototypeが汚染されていた場合にのみ違いが発生します。特に、Object.prototypeにsetterを持つプロパティ名が存在し、そのプロパティ名でコピーしようとした場合に違いが現れます。

例

Object.defineProperty(Object.prototype, "foo", {
  enumerable: true,
  get() { return 100; },
  set(n) { console.log(`foo is set to ${n}`); }
});

console.log({}.foo); // 100

const sourceObj = { foo: 999 };

const obj1 = Object.assign({}, sourceObj); // foo is set to 999 と表示される
const obj2 = { ...sourceObj };             // 何も表示されない

console.log(obj1.foo, obj2.foo); // 100 999

obj1とobj2を2つの方法で作ったあと、それぞれのfooプロパティの値を調べると異なる値となっています。

解説

Object.assignとスプレッド構文は非常に似た動作をしますが、その違いを一言でまとめるとこうです。すなわち、Object.assignは代入によってプロパティをコピーする一方で、スプレッド構文はプロパティ自体の作成によってプロパティをコピーします。

すなわち、sourceObjが{ foo: 999 }であるという前提で、const obj1 = Object.assign({}, sourceObj)の挙動は以下とおおよそ同様です。

const obj1 = {};
obj1.foo = sourceObj.foo;

一方、const obj2 = { ...sourceObj };の挙動は以下とおおよそ同様です。

const obj2 = {};
Object.defineProperty(obj2, "foo", {
  configurable: true,
  enumerable: true,
  writable: true,
  value: sourceObj.foo
});

前者はobj1.fooに対する代入ですから、obj1.fooがセッタを持っていた場合はそれが呼び出されることになります。一方、後者はObject.definePropertyによるプロパティの作成なので、セッタが呼び出されません。今回は{}で新規オブジェクトを作ってそれを対象としているので、その違いを引き出すためにはObject.prototypeを汚染する必要がありました。

仕様書を実際に見てみると、Object.assignと...objは非常に似た処理をしていることが分かります。

まずObject.assignの定義を仕様書から画像で引用します。

次に、...objの処理の本体部分を使用書から画像で引用します。なお、この場合excludedItemsは空リストになります。

この2つの仕様を注意深く比べると、本質的な違いは下から2行目だけであることが見て取れます。Object.assignはここでSetを使っているのに対し、スプレッド構文ではCreateDataPropertyOrThrowを使っています。深入りするのはやめておきますが、前者がプロパティへの代入に相当する操作である一方、後者はObject.definePropertyに相当する操作です。

まとめ

Object.prototypeが汚染されていたときのことを考えながらコードを書きましょう！Object.prototypeを汚染するのはやめましょう。

参考

Vue Mastery
The Net Ninja Vue JS 2 Tutorial

Vue.js とは

Vue.jsとはユーザーインターフェースを構築するためのフレームワーク（アプリケーションの基本的な機能やルールを提供する骨組み）で、主にSPA（シングルページアプリケーション）を構築する時に向いています。「学習コストの低さ」「スケールの柔軟性」「公式ドキュメントの充実」が魅力

SPA（シングルページアプリケーション）とは

JavaScriptでDOMを操作しページを切り替える単一ページで構成されるWebアプリケーション

DOM / 仮装DOM とは

DOM : Document Object Modelの略で、JavaScriptからHTMLやCSSのデータを取得、操作するための仕組み。htmlドキュメントをツリー構造として表現したもの。

index.html

<html>
  <head>
    <title>Vue.js</title>
  </head>
  <body>
    <h1>DOMとは</h1>
  </body>
</html>

上記のマークアップは下記のような「DOMツリー」として表現されます。

index.html

html
├── head
│   └──title
│       └──Vue.js-lesson2
└── body
    └── h1
        ├──DOMとは
        └──h1タグのコメント

仮装DOM : 仮想DOMはバインディングしたデータを元に作られ、仮想DOMを元にDOMを作成する。
仮想DOMを利用する目的の1つとして、描画処理の性能を向上させる狙いがあり、実際のDOMでの描画処理では、仮想DOMの差分検出アルゴリズムで描画処理前の仮想Nodeツリーから更新対象を抽出する。
描画対象となるDOMに対して、Nodeの新規追加・更新・削除といったDOM操作を行う。

Vueアプリケーションの作成

アプリケーション作成のために、コンストラクタ関数vueを使ってルートとなるvueインスタンスを作成する。vue インスタンスはアプリケーションの心臓部分。

main.js

var app = new Vue ({
  // オプション
})

※ 慣例的にappやvmなどの変数名が使用される。

オプションの構成

main.js

var app = new Vue ({
  el: '#app',
  data: {
    message: 'Vue.js'
  },
  computed: {
  },
  method: {
  },
  created:  function(){
  }
})

index.html

<div id='app'></div> //ここが対象要素となる

• elオプション : マウントするDOM要素（アプリケーションを紐付ける要素のセレクタ）
• data: アプリケーションで使用するデータです。オブジェクトや配列も登録できる。ここで定義されるプロパティはリアクティブなプロパティへと変換される。

main.js

var app = new Vue ({
  el: '#app',
  data: {
    message: 'Vue.js' //変化を検知できるようになる
  }
})

リアクティブなプロパティ / データとは？

DOMの同期を自動で行う「データバインディング」を行うには、
テンプレートで使用するデータは「リアクティブなデータ」として定義する必要がある。
リアクティブなデータとはVue.jsによって取得した時(get)、または代入した時(set)のフック処理が登録された"反応のできるデータ"のこと。

データバインディング

データと描画を同期させる仕組みのことを「データバイディング」と呼ぶ。
HTMLで作られたUIを操作するのに、viewの管理（DOMの更新など） は必要不可欠。

ライブラリを一切利用せずにJavaScriptでDOMを更新した時は、

app.js

var el = document.getElementById('text') //要素を探す
el.innerText = '新しいテキスト'              //要素を更新する

上記の処理で、UIのパターンごとにDOMを更新するのは、
UIのパターンが増えれば、増えるほど大変になっていってしまう・・
のでこういう自動的に描画が同期できるシステムはとても便利。

computed : 算出プロパティ

算出プロパティは処理に名前をつけて、テンプレート上で変数の様に使うことができる関数。

【 特徴 】

• 一度計算を行った場合、再度関数を呼び出しても依存しているデータに変更がない限りキャッシュを返す（変更箇所だけが返される）
• プロパティ呼び出しの時は ()が不必要
• リアクティブなプロパティが変更された時に呼ばれるのがcomputedプロパティ

methods : メソッド

オブジェクトの操作を処理を定義したもの

【 特徴 】

・ 計算結果をキャッシュしない
・ そのため再描画されるたびにもう一度、計算が実行される
・ イベントに反応する

created Vue.jsのライフサイクル

ライフサイクルとは、Vueインスタンスのはじまり（初期化）からおわり（破棄）されるまでの一定のサイクルのこと。あらかじめ登録された処理を、Vueインスタンスの特定のタイミングで差し込みます。
こうした処理を割り込ませる仕組みを「フック」と呼ぶ。

コンポーネントのライフサイクルフックがどの時点で実行されるかは以下になります。
ライフサイクルダイアグラム

メソッド	説明
beforeCreated	インスタンスが作成され、初期化される前に実行
created	インスタンスが作成され、初期化された後に実行
beforeMount	DOMがマウントされる直前に実行
mounted	DOMがマウントされる直後に実行
beforeUpdate	リアクティブプロパティが変更されて、変更されたデータがDOMに反映される前に実行
updated	リアクティブプロパティが変更されて、変更されたデータがDOMに反映された後に実行
beforeDestroy	Vueインスタントが破棄される前に実行
destroyed	Vueインスタンスが破棄された後に呼び出される

created : リアクティブなプロパティの初期化が完了しているので、dataやmethodsを参照することができる。APIにリクエストを送信してデータを送信し、リアクティブプロパティに追加していく処理はcreated内に記述していくと良い。

Vue.jsの基本機能

テキストと属性のデータバインディング

Mustache構文 {{}}

main.js

var app = new Vue ({
  el: '#app',
  data: {
    message: 'Vue.js',
    list: ['ねこ', 'いぬ', 'とり']
  },
  computed: {
  },
  method: {
  },
  created:  function(){
  }
})

dataオプションに定義したmessageプロパティの値を画面に表示したいときは、
{{}}マスターシュ構文（Mustache：口髭） で囲みテンプレートに記述します。

index.html

<h1>{{message}}</h1> // Vue.js と表示される

<h1>{{list[0]}}</h1>  // ねこ と表示される 

ディレクティブ

「Vue.js」では、ディレクティブと呼ばれるv-接頭辞で始まる属性をHTML内で使用できます。
ディレクティブは主にデータバインディングを行うために使用される。

v-bind ディレクティブ

簡単なテキストのデータバインディングであればMustache構文を使えましたが、html要素の属性をデータバインディングする場合にはMustache構文はエラーとなり使えません。

index.html

<div id="error">
  <a href="{{ url }}">Google</a> // 属性では展開されない！
</div>

app.js

var app = new Vue({
  el: "#example-error",
  data: {
    url: "https://google.com"
  }
});

そこで使用するのが v-bindディレクティブ です。
v-bindディレクティブ を使えばDOM要素の属性を動的に切り替えることができます。

index.html

<タグ v-bind:属性=“プロパティ”>～</タグ>

index.html

<div id="example">
  <a v-bind:href="url">Google</a>
</div>

app.js

var app = new Vue({
  el: "#example",
  data: {
    url: "https://google.com"
  }
});

v-bind ディレクティブの省略

v-bind は省略して、:のみで省略できます。

index.html

<div id="example">
  <a :href="url">Google</a>
</div>

v-on ディレクティブ

v-onメソッドはイベント処理をするためのディレクティブです。

（例） clickイベントを設定する

index.html

<div id="app">
  <p>{{ count }}回クリック</p>
  <button v-on:click="increment">このボタンでカウントを増やす</button> //increment メソッドが呼び出される
</div>

main.js

var app = new Vue ({
  el: '#app',
  data: {
    count: 0
  },
  method: {
    increment: function(){
      this.count += 1 // thisはdata内のリアクティブデータを指す
    }
  },
})

v-onディレクティブの省略記法について

v-on は省略して、@で省略できます。

index.html

<div id="app">
  <p>{{ count }}回クリック</p>
  <button @click="increment">このボタンでカウントを増やす</button> //increment メソッドが呼び出される
</div>

v-show ディレクティブ

v-showディレクティブは、式が真のときのみ要素を表示するディレクティブです。

index.html

<div id="app">
　<div v-show="ok">
    <p>Hello</p>
  </div>
</div>

main.js

var app = new Vue({
  el: '#app',
  data: {
    ok: true // 切り替える
  }
})

v-ifとv-showの違いと使い分け

v-if :条件を満たさなかった場合、要素はDOmレベルで削除される。

v-show :条件を満たさなかった場合、display;noneが付与され、非表示になる。

条件分岐

vue.jsはテンプレートベースで条件分岐を記述します。
v-ifディレクティブは、v-showディレクティブ同様に式の真偽を判定して要素を表示させるディレクティブ

index.html

<p v-if="id === 1"> 条件がtrueの時の表示 </p>
<p v-else-if="id === 2"> 上記がfalseで、else-ifでの条件がTrueの表示 </p> //今回はこのpタグが表示される
<p v-else> 上記のどちらの条件もfalseの時の表示 </p>

main.js

var app = new Vue ({
  el: '#app',
  data: {
    message: 'Vue.js',
    id: 2, // ← ここ
  },
})