こんにちは。
今回はajaxzip3を使って、Reactでも簡単に住所の自動入力を実装する方法を紹介します。

住所自動入力

オンラインショッピングを利用するユーザーの約3分の2が購入を完了する前にカートを離脱していることが明らかとなっています。ECサイトのカート破棄率は平均約70%とされていて、カートの離脱を防ぎ、購入率を上げるためにもEFO（入力フォーム最適化）は重要です。

使い方

はじめにhtmlファイルのbody内にajaxzip3を読み込みます。

index.html

<script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>

関数

AjaxZip3.zip2addr()の引数にinputタグのnameを指定し、郵便番号を入力すると、指定したフォームに対して都道府県、市町村、番地が自動で入力されます。
自動入力ではonChangeが発火しないため、stateが更新されず、フォームからapiにデータを渡す時に空判定されてしまう可能性があります。
そのため、指定したidのフォーム内に入力されている住所をdocument.getElementById('id').valueで取得してsetStateで更新してあげます。

Form.js

class Form extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      user: {}
    };
  }

  handleChange = e => {
    const params = this.state.user;
    params[e.target.name] = e.target.value;
    this.setState({ user: params });
  };

  complementAddress = () => {
    const { AjaxZip3 } = window;
    AjaxZip3.zip2addr(
      'postCodeH',
      'postCodeF',
      'address1',
      'address2',
      'address3'
    );
  };

  onBlurZipcode = () => {
    this.setState({
      user: {
        ...this.state.user,
        address1: document.getElementById('address1').value,
        address2: document.getElementById('address2').value,
        address3: document.getElementById('address3').value
      }
    });
  };

  render() {
    return(
      <div>下記フォーム</div> 
    )  
  }
}
export default Form;

郵便番号を入力するフォーム

 <input
    name="postCodeH"
    size="3"
    maxLength="3"
    onChange={e => this.handleChange(e)}
/>
-
<input
    name="postCodeF"
    size="4"
    maxLength="4"
    onChange={e => this.handleChange(e)}
    onKeyUp={this.complementAddress}
    onBlur={this.onBlurZipcode}
/>

住所を入力するフォーム

<input
    name="address1"
    id="address1"
    onChange={e => this.handleChange(e)}
/>
<input
    name="address2"
    id="address2"
    onChange={e => this.handleChange(e)}
/>
<input
    name="address3"
    id="address3"
    onChange={e => this.handleChange(e)}
/>

動画をアップロードできないので

郵便番号を入力すると、、、、、

とても便利。
ありがとうございました。

References

• https://qiita.com/koba04/items/4d13caf5ab4507974bf0
• Reactコンポーネントへの理解を深める

• npm trends angular vs react vs vue

Share@2020/02/09

特徴

- Just the UI

- Component志向
    - Componentとは
        - Reactコンポーネントへの理解を深める
https://codezine.jp/article/detail/9928
            - Props と State を利用している
                - Propsとは、Component生成時に親から渡されるObject。Componentが画面から除去されるまで、不変の値を保持。
                - Stateとは、Component内で保持される、PrivateなObjectで、可変　の　変数　を保持。
                    - 直接更新NG
                    - > this.setState( hash代入 )
                    - アロー演算子の場合
                        - this.setState((prevState, props) => ({
  currentTime: props.format + prevState.date
}));
            - Component の ライフサイクル
                - React Componentのクラス型で宣言する場合　必ず　React.Componentクラスを継承。
                - Raact.Componentクラス　は　抽象クラス。
                - React.Componentクラス　を　継承した　サブクラス　は　ライフサイクルメソッド　を　利用可能
            - ライフサイクルメソッド
                - Mounting（Componentが生成されてDOMに要素が挿入されるとき）
                    - constructor()
                    - componentWillMount()
                    - render()
                    - componentDidMount()
                - Updating（PropsやStateの値に変更が発生したとき）
                    - componentWillReceiveProps()
                    - shouldComponentUpdate()
                    - componentWillUpdate()
                    - render()
                    - componentDidUpdate()
                - Unmounting（ComponentがDOMから除去されるとき）
                    - componentWillUnmount()



React component ライフサイクル図(kawachi)より

表1　ライフサイクルメソッド一覧

#   メソッド名 引数  概要
1   render()    -   React.Componentクラスに必須のメソッド。単一のReact要素を返す役割をもつが、何も描画する必要が無い場合にはnullやfalseを返すこともできる。
2   constructor()   -   DOM挿入前の初期化時に呼ばれる。
3   componentWillMount()    -   renderメソッドによるDOM挿入直前に呼ばれる。（Mountingフェーズ）
4   componentDidMount() -   renderメソッドによるDOM挿入直後に呼ばれる。（Mountingフェーズ）
5   componentWillReceiveProps() nextProps   親コンポーネントから新しいpropsを受け取ったときに呼ばれる。propsが更新されたときのみに呼ばれ、stateが更新されただけでは呼ばれることはない。
6   shouldComponentUpdate() nextProps,nextState propsかstateが更新されたときに呼ばれ、初回の描画時（Mountingフェーズ）では呼ばれない。
7   componentWillUpdate()   nextProps,nextState renderメソッドによるDOM挿入直前に呼ばれる。（Updatingフェーズ）
8   componentDidUpdate()    prevProps,prevState renderメソッドによるDOM挿入直後に呼ばれる。（Updatingフェーズ）
9   componentWillUnmount()  -   React要素がDOMから取り除かれるときに呼ばれる。

- Virtual DOM

- React.js は JS内にVirtual DOMとしてDOM Treeのような構造体を持つ。
- rerender時、その構造体の前後の差分だけを実際のDOMへ反映。
→高速処理が可能

- Data Flow

- データの流れが一方向
    - アプリのデータを管理するComponent
    - →そのデータを子のComponentに渡す

nextAction
これからReactを勉強する人が最初に見るべきスライド７選

自分用の備忘録です。
Firebaseを自作Webアプリに導入する準備をしました。
Firebaseの公式サイト

0. 概要

1. Firebase上で準備をする
2. 便利なパッケージをインストールする
3. 設定ファイルを作成する

1. Firebase上で準備をする

1-1. アカウントを作成する

Sign in ボタンをクリックして、アカウントを作成します。
ログインしたら Go to console ボタンをクリックします。

1-2. プロジェクトを作成する

名前を付けて、プロジェクトを作成します。
アナリティクスは入れても入れなくても問題ありません。

1-3. アプリを追加する

iOS Android Web の3つの選択肢があると思います。
Webアプリなら Web をクリックして追加します。

2. 便利なパッケージをインストールする

Firebaseを便利に設定できるパッケージがあるので、それを導入します。

$ npm install --save firebase

3. 設定ファイルを作成する

Firebaseを使うための設定ファイルを作成します。

firebase.js

import firebase from 'firebase/app';

if (!firebase.apps.length) {
 const config = {
   apiKey: "~~~",
   authDomain: "~~~",
   databaseURL: "~~~",
   projectId: "~~~",
   storageBucket: "~~~",
   messagingSenderId: "~~~"
 };
 firebase.initializeApp(config);
}

~~~ と書いてあるところに、必要な情報を入力します。
Firebase上で、自分のWebアプリの設定で Firebase SDK snippet を見ます。
ここに書かれてある情報をコピペして導入完了です。

始めに

UIを作成する際は、ずっとjQuery(たまーにRiot.js)にお世話になっていましたが、2020年にもなったし、そろそろ重い腰をあげて、本格的にReactを勉強したい、という事で勉強を始めています。(自分はjQueryも好きですし、現在進行形でお世話になってます)

年始(2020年)に掲げたゴールの一つがReactの習得なので、個人的なアウトプットとして、いくつかメモとして、文章を残していこうと思います。それと同時に、自分と同様、現場で導入されそうだし、そろそろReact勉強したい！という人に向けて書いていこうかなと思います。

※随時、セクションを追加更新していく予定です。
本記事はReactを構成する概念や記法について、ざっくり整理しながら触れます。
(詳細はReactのドキュメントを見まっしょ！)

Reactとは

UIを構築するための、宣言型JSライブラリです。

jQueryで、少し複雑なUI(例えば、状態を持つような)を作ろうとすると、コードが冗長になりやすかったり、後で見返したときに、「え...何してるのかよく分からん...」となったりということは、jQueryで頑張ってきたエンジニア、Webデザイナーなら、一度は経験があるはずです。

Reactは状態を持つようなインタラクティブなUIの作成をやりやすくしてくれるライブラリとして、設計されています。

導入すると何が嬉しいかというと、コンポーネント単位での実装が容易なので、再利用性が高く、保守性も担保した運用がしやすくなります。
ここら辺、Atomic Designの考え方とも親和性が高そう。
(後でこちらも記事としてまとめたい)

ちょっと前まで英語のドキュメントを読むしかなかったですが、今は日本語のドキュメントもVue.js並に充実してる印象です。手始めにチュートリアルを一通りやってみるのが、取っ掛かりとして、一番早いかも。(何事も自分で手を動かす方が理解が深まりますよね？)
Reactの導入

Reactを構成する記法① JSX

ReactでHTML(DOM)を出力するための独自構文で、JSの機能を備えています。また、埋め込まれた値をレンダリングする前に、エスケープしてくれるので、インジェクション攻撃を防ぐ事ができます。

Reactは、JSXでの記述を強制してる訳ではないですが、JSXで書いた方が圧倒的に楽です。よっぽどこだわりのある偏屈な人じゃなければ、JSX使っていきましょう！最初は違和感あるかもしれないけれど、ここら辺は慣れの問題かなと思います。普段、HTMLやJS書いてるような人ならすぐに慣れると思います。

JSX記法

import React from 'react';

const title = <h1>Study React!!!</h1>
const greeting = <h2 className='greeting'>Hello.</h2>

JSXでない記法を参考までに

JSX = シンタックスシュガーである事が分かりますね。

これは上記JSXと等価です

import React from 'react';

const title = React.createElement('h1', null, 'Study React!!!')
const greeting = React.createElement('h2', {className: 'greeting'}, 'Hello.')

JSXは子要素も定義できます

子要素を定義

const elem = (
    <>
　　　　　<section className='head'>
        　<h1>Study React!</h1>
        <h2>Hello.</h2>
          </section>
        <section className='body'>
          <h1>
            Roadmap
          </h1>
        </section>
    </>
)

JSXに値を埋め込むことも可能

ただタグを表示するだけでなく、JSの値を埋め込むこともできます。
{ 変数や値 }

JSXの中にJSの値を埋め込む

let title = 'Study React!';
let greeting = 'Hello';
const heading_s = { color: 'red', borderBottom: '1px solid #DDD' }

let elem = (
    <>
        //属性の値にも利用できることに注目
        <h1 style={ heading_s }>{ title }</h1>
        <h2>{ greeting }</h2>
    </>   
)

JSXを書く上での注意点

Reactを勉強したての頃、JSXでエレメントを定義する際、以下のように書いてしまってエラーになるケースがあります。(上記の違いは <></>で囲っていない点)これ、何がいけないかというと、renderメソッドで、描画できるのは、一つのエレメントだけというルールがあるからです。

JSXに子要素をもったDOMを代入する際は、親として、必ず <div>タグ もしくは、<>タグ(=<React.Fragment>タグ)で囲ってあげましょう。

(VSCodeやInteliJとか使ってれば、そもそも記法の間違いは教えてくれますが)

初学者がやりがちなミス

const elem = (
    <section className='head'>
        <h1>Study React!</h1>
        <h2>Hello.</h2>
    </section>
    <section className='body'>
        <h1>
            Roadmap
        </h1>
    </section>
)

Reactを構成する記法② Component

JSXでエレメントを定義し、ReactDOM.renderで描画するだけだと、全く便利さは感じないと思ったはずです(自分もそうでした)。

Reactの真価はコンポーネントを組み合わせてUIを構築していくことにあります。

コンポーネントとは、画面に表示する部品で、表示の内容や必要なデータ、処理などを一つのオブジェクトにまとめます。
ボタンや入力フォーム、カードなど、Webアプリは沢山の小さなコンポーネントとその組み合わせで構築されています。

コンポーネントを作成することによって、再利用可能で、堅牢な仕組みが構築しやすくなります。

デザイナーやフロント寄りの開発をされてる方にとっては、デザインシステムという言葉は見聞きした事があると思います。有名どころだとGoogleのMaterial Designや、Mailchimpのデザインシステム、SalesforceのLightning Design System等がありますが、世の中には沢山のデザインシステムが存在します。
(デザインシステムのギャラリーサイトもあって、眺めてるだけでも面白いですよ)

なんでも良いのですが、試しに上記３リンクを開いてみてください。どのサイトにもComponentが定義されているはずです。各企業は、ブランディングやユーザビリティ、開発効率性の観点から、デザインシステムを設計し、UIをコンポーネントとして定義することによって、一貫性、保守性を保とうと努力しています。

Reactは、そのような要求にも耐えうる開発を進めていくための一つの選択肢とされています。

コンポーネントの書き方にはClass Component(クラスコンポーネント)とFunctional Component(関数コンポーネント)の２種があります。参考までに書き方の例を示します。

コンポーネントの記法は２種類ある

import React, { Component } from 'react';

//関数コンポーネント
function StudyReact(props) {
    return <h1>During study...</h1>
}

//クラスコンポーネント
class StudyReact extends Component {

    constructor(props) {
        super(props);
        this.state = {
            status: 'During study...'
        }
    }

    render() {
        return <h1>{this.state.status}</h1>
    }
}

コンポーネントでデータを管理するための方法

コンポーネントでデータを扱う主要な手法として、props と stateという二つのオブジェクトを利用します。この二つの理解は、今後、Reactを勉強していく上で、重要です。

両者の違いは以下の通りです。

• Props : 親コンポーネントから渡されたプロパティ。
  　- 値を指定するタイミングは、コンポーネントを作成する時
  　- 値の変更不可

• State : そのコンポーネントが持っている状態
  　- 値を指定するタイミングはコンポーネント作成後
  　- 値の変更可

上記のルールを踏まえて、コンポーネントを使用する際に意識する事は、親から初期状態として、propsを渡し、stateでそのコンポーネント自身の状態を管理するという点です。

まず、propsの使い方から見ていきます。
値の変更は不可という事は、propsは読み取り専用という事ですね。

以下の実装で名前のプロパティと、担当楽器のプロパティを定義しています。
コンポーネントに定義されたプロパティは、そのコンポーネントが作成された瞬間、後から変更を加える事が出来ません。
propsは、そのコンポーネントがずっと保持し続ける、そのコンポーネントたらしめる要素になります。
(人の名前は名付けられた瞬間、基本的に変える事は出来ませんよね？ そういう事です。)

以下では、ビートルズのメンバーを作成しています。

props

class BandMember extends Component {
    constructor(props) {
       super(props);
       //初期化時に、引数のpropsからnameとpartという値を取り出し、プロパティに設定
       this.name = props.name; 
       this.part = props.part;
    }

    render() {
        return(
            <>
                <p>
                    My name is {this.name}. My part is {this.part}.
                </p>
            </>
        )
    }
}

class App extends Component {
    render() {

        return(
        <>
            {/*各コンポーネントに値を設定*/}
            <BandMember name='Paul' part='Base'/>
            <BandMember name='John' part='Guitar'/>
            <BandMember name='George' part='Guitar'/>
            <BandMember name='Ringo' part='Drums'/>
        </>
        )
    }
}

続いて、stateを見ていきます。

上記、実装を利用しながら、stateを説明してみます。
今、バンドメンバーとして、４名が定義されています。

• Paul: Vocal/Bass
• John: Vocal/Guitar
• George: Guitar/Vocal
• Ringo: Drums/Vocal

4人で曲を練習していたある日、Paulが急に「ギターやりたい」と言いだしました。
Georgeは仕方なく、パートをベースに変えざるを得ない状況に立たされてしまいました。

この状況では、最初に、propsで定義していたpart(担当楽器)を変える必要が出てきました。(=コンポーネントの状態を変える) = すなわち状態を持つ必要に迫られました。

こういった要件では、stateを使いましょう。

初期化時のstateの設定は、あくまでもstateの初期化処理にすぎません。
イベントを受け取って、更新する際は、setStateを利用する必要があります。
引数には、初期化時に定義したstateのうち、変更したいオブジェクトを指定します。

setStateの記法は２通り

this.setState({ ... })

this.setState((state) => ({ ... }))

以下に実装例を示します。
ボタンをクリックすると担当楽器が変わるようになります。

stateを使って担当楽器を変更

class BandMember extends Component {
    constructor(props) {
       super(props);
       this.name = props.name;
       this.part = props.part;

       //初期化時にstateを定義しておく
       this.state = {
           myState: props.part,
       }
    }

    //担当楽器を変えるメソッド
    changeBase = () => {
        this.setState({myState: 'Bass'})
    }
    //担当楽器を変えるメソッド
    changeGuitar = () => {
        this.setState({myState: 'Guitar'})
    }

    render() {
        return(
            <>
                <p>
                    My name is {this.name}. My part is {this.state.myState}.
                </p>
　　　　　　　　　　//各コンポーネント(メンバー)に楽器を変更するボタンを追加
                <button onClick={ this.changeBase }>ChangeBase</button>
                <button onClick={ this.changeGuitar }>ChangeGuitar</button>
            </>
        )
    }
}

class App extends Component {

    render() {

        return(
        <>
            {/*コンポーネント作成時に、各コンポーネントに値を設定*/}
            <BandMember name='Paul' part='Base'/>
            <BandMember name='John' part='Guitar'/>
            <BandMember name='George' part='Guitar'/>
            <BandMember name='Ringo' part='Drums'/>
        </>
        )
    }
}

React Hooksが導入されて、クラスコンポーネントの力を借りずとも、関数コンポーネントでも状態を管理することが出来たので、両者の使い分けは、現場ごとの選択になるのかなと思ってるのですが、そこら辺はもう少し突っ込んで、追ってアウトプットしたいと思います。

React初学者の所感

• 静的なページならjQueryでも全然良いと思う。
• アプリライクな動的ページを作るならReactやReactでUIを作る考え方は、いいかげんキャッチアップしといた方が良さそう。
• 逆にいうと、LPなどを作るようなWebデザイナーさんは、無理して勉強しなくても良いと思う。JSの流行り廃りは激しいし。興味があれば、仮想DOMの概念やコンポーネント化してUIを設計する手法とかは勉強してみると視野が広がるし、面白いと思うし、今後の仕事に活かせるかも。

Redux&Reduxエッセンシャル

まずは，reduce,reducer,state,actionの整理

Reduce,Reducer,State,Actionとは?

reduce -直訳-> 変える
reducer -直訳-> 変化を与えるもの
state -直訳-> 状態
action -直訳-> 実行

定義

Reduceとは，一回あたりの関数適用によって行われる値の変化
Reducerとは，適用される関数の事
Stateとは，reduceされる前の初期状態
Actionとは，stateをどのように変更させるか

例） 関数 F(aを2倍にする処理を行う(Action))

F(2) ->F(a) -Reduce->4

F(2)がState,
F(a)がReducerです．

Redux実践

インポート

import { createStore } from 'redux'

簡単な例

Reducerでは，Actionによって，switch文などでStateに変更を加える

function counter(state = 0, action) {
  switch (action.type) {
  case 'INCREMENT':
    return state + 1
  case 'DECREMENT':
    return state - 1
  default:
    return state
  }
}

掲示板を作ろう

目標

JQueryで言うと，

<html>
<form>
<input type="text" id="hoge" />
<button onclick="push()">追加</button>
</form>
<ul id="list"></ul>
</html>

<script>
function push(){
let sentence = $("#hoge").val() ;
$("#list").append("<li>"+sentence+"</li>") ;
}
</script>

こんなものをReact&Reduxの基礎を踏まえながら説明．

install

React

npmはインストール済みの環境であることを前提とします．
※してない方は $brew install npm

$ npm install -g create-react-app

このようにreactをインストール

プロジェクトの作成

$ create-react-app todo

こんな感じのフォルダが出来ると思います．

$ cd todo

todoに移動しましょう．

Redux

$  npm install --save redux react-redux redux-logger

todoフォルダにReduxのインストール

これで環境構築は完了．

ディレクトリの作成

actions
components
containers
reducers
というフォルダをsrc下に配置
各フォルダ内にtodo.jsを作成しましょう．

また，src下にcreatestore.jsというファイルも作ってください．

createstore.jsに関数を作ります

import { createStore as reduxCreateStore, applyMiddleware, combineReducers } from "redux";
import logger from "redux-logger";
import { todoReducer } from "./reducers/todo";

export default function createStore() {
  const store = reduxCreateStore(
    combineReducers({
      todo: todoReducer,
    }),
    applyMiddleware(
      logger,
    )
  );

  return store;
}

ReactにReduxを適用

index.jsを変更します．

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

import { Provider } from 'react-redux';
import createStore from './createstore';

const store = createStore() ;

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>, 
  document.getElementById('root')
);


// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

redux,createstoreをインポートして，Providerにstoreをセットしてるだけです．

serviceWorker.unregister()とはオフラインでのキャッシュを無効にしてます．
これはcreate-react-appをすると標準でついてます．今は無視してOKです．

Component定義

components/todo.js
todo追加用のテキストボックスとボタンを書き入れます．

import React from 'react';

export default class Todo extends React.Component{
  render(){
    return(
      <div>
        <input type="text" />
        <button>追加</button><br />
        <ul>
          <li>aaa</li>
          <li>bbb</li>
        </ul>
      </div>
    );
  }
}

Action定義

actions/todo.js

export const addTodo = (todo) => {
  return {
    type: 'ADD_TODO',
    payload: { todo: todo }
  };
}

Actionは、Reducerに指令を出します。
type プロパティを必ず持ち、これが処理のキーになります。

payload プロパティは、処理に使うパラメータで、この例では追加するTODOを持たせています

Reducer定義

reducer.todo.js

const initialState = {
  todoList: []
}

export const todoReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'ADD_TODO':
      // 新しく追加するTODO
      const todo = action.payload.todo;
      // stateを複製して追加
      const newState = Object.assign({}, state);
      newState.todoList.push(todo);
      return newState;
    default:
      return state;
  }
};

state は書き換えるのではなく新たなオブジェクトとするのがredux.

単純に引数のstateに追加するのではなく、

Object.assignメソッドで複製した新たな state に対して追加し、
それを戻り値とします。

Componentの定義

components/todo.js

import { connect } from 'react-redux';
import * as actions from '../actions/todo';
import Todo from '../components/todo';

const mapStateToProps = state => {
  return {
    todo: state.todo,
  }
}

const mapDispatchToProps = dispatch => {
  return {
    addTodo: (todo) => dispatch(actions.addTodo(todo)),
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Todo)

mapStateToProps関数
使用する state を切り出して、propsで参照できるようにするための関数

mapDispatchToProps関数
dispatchするための関数をpropsにマッピングするための関数

それぞれ定義したものを、connect関数でコンポーネントに接続し、exportします。こうすることで、コンポーネントがreduxによる状態管理を意識せず、stateやdispatchを参照、実行できるようになります。

コンテナの使い方は、コンポーネントをimportしている箇所をコンテナに切り替えるのみ。
app.js

import React, { Component } from 'react';
import './App.css';
//import Todo from './components/todo';
import Todo from './containers/todo';

Componentの書き換え

components/todo.js

import React from 'react';

export default class Todo extends React.Component {
  state = {
    todo: ''
  }

  render() {
    console.log(this.props);

    // StoreのTodoからリストを生成
    const list = this.props.todo.todoList.map((todo, index) => <li key={index}>{todo}</li>)

    return (
      <div>
        <input type="text" onChange={elm => this.setState({ todo: elm.target.value })} />
        <button onClick={() => this.props.addTodo(this.state.todo)}>追加</button><br />
        <ul>
          {list}
        </ul>
      </div>
    );
  }
}

冗長なコードになればなるほどreduxの恩恵が大きいです．
変更点がすぐに分かるので，チームでの開発が従来よりも簡単．

GraphQLを通してreactからAWSに画像保存

参考にしたURL
https://medium.com/@enespalaz/file-upload-with-graphql-9a4927775ef7
正直, これコピペすれば 90% は完成する.
しないといけないのは,AWS のバケットの設定 以下それについて

AWS S3

• バケットを作る
• アクセス権限のCORSの設定
• アクセストークンの発行 //ここまでAWSのアカウント内でやる事
• config.json の作成
• https://hack-le.com/s3-everyone-read/

config.json

バケットに対して, バックエンドからアップロードしたりするのに必要

AWS.config.loadFromPath('./config.json');

中身は

{ 
  "accessKeyId": "ABCDEFGDHDHDHJDJHDJDJ",
  "secretAccessKey": "jfoaisdjfaosjfasjfasodjfasfjasdif",
  "region": "ap-northeast-1"
}

config.jsonと"region"は以下参照
config.json: https://docs.aws.amazon.com/sdk-for-javascript/v2/developer-guide/loading-node-credentials-json-file.html
region: https://docs.aws.amazon.com/general/latest/gr/rande.html

Web アプリケーションフレームワークを選ぶ基準って、人それぞれ、色々とあるとは思いますが、やっぱり流行も気になってしまうのが Web エンジニア心というものではないでしょうか？

それに、よく使われているということは、

• 当然、フレームワークとしての成熟度は高いはずですし、
• サードパーティのライブラリも充実していて、
• 比較的、Web サイトや書籍などから得られる情報量も多い

と、考えられます。

初めて Web アプリを作成するという人はもちろん、

ある程度、知識のある方でも、軽い気持ちで新しいフレームワークを学んでみたいというのであれば、流行りに乗っておくのが無難かもしれません。

というわけで、ここでは、

• Ruby
• Python
• PHP
• JavaScript

で、実装されている「 人気の Web アプリケーションフレームワーク 」について、興味本位でまとめてみましたので、良かったら何かの参考にでもして頂ければ幸いです。

Ruby on Rails vs. Sinatra

Ruby の Web アプリケーションフレームワークと言えば、Ruby on Rails ですね。

GitHub のスター数は、現在、45k となっています。

https://github.com/rails/rails

異論は認めますが、比較するとしたら、Sinatra くらいしかないでしょうか？

GitHub のスター数は、現在、10.9k となっています。

https://github.com/sinatra/sinatra

Google トレンド のグラフを見ると、Ruby の Web フレームワーク自体、徐々に人気が下がってきているようでもありますが、あとで他の言語とも比較してみましょう。

Django vs. Flask vs. Tornado

Google トレンド によると、Python では、やっぱり Django が人気ですが、Flask の人気もかなり上がってきているように見えます。

単純に考えれば、Python 自体の人気が急上昇していることが要因でしょうか。

GitHub のスター数はと言うと、現在、Django が 47.1k で、Flask が 48.8k となっています。

https://github.com/django/django
https://github.com/pallets/flask

比較対象として、もう一つ、Tornado という Web フレームワークを挙げておきましょう。

こちらは、GitHub のスター数が、現在、18.8k となっています。

https://github.com/tornadoweb/tornado

Laravel vs. Symfony vs. CodeIgniter

PHP では、Laravel が人気を博しているようですね。

GitHub のスター数は、現在、57.5k となっています。

https://github.com/laravel/laravel

何となくのイメージですが、昔から、Web アプリ作成のフレームワークと言えば PHP みたいなところもあるので、やはり定番なのでしょうか。

今回、Laravel と比較するのは、Symfony と CodeIgniter です。

GitHub のスター数は、現在、Symfony が 22.7k で、CodeIgniter が 17.9k となっています。

https://github.com/symfony/symfony
https://github.com/bcit-ci/CodeIgniter

Google トレンド によると、他のフレームワークの人気がなくなってきていると言うよりは、純粋に Laravel が強すぎる感じですかね。

Vue.js vs. React vs. AngularJS

JavaScript に関しては、そもそも他の言語と同列に扱っていいのか、ちょっと微妙なところもあるかもしれませんが、

ともかく、Google トレンド のグラフを見ると、React の勢いが凄いです。

GitHub のスター数は、現在、143k となっています。

https://github.com/facebook/react

もちろん、GitHub のスター数が全てではありませんし、条件が同じとも言い難いですが、他の言語の Web フレームワークと、桁が違いますね。笑

しかし、スター数で言えば、実は、Vue.js の方が多く、現在、157k となっています。

https://github.com/vuejs/vue

また、AngularJS はと言うと、GitHub のスター数は、現在、59.6k となっていますが、それでも多いので、全く侮れません。

https://github.com/angular/angular.js

ただ、Google トレンド によると、Vue.js の人気も、上がってはいるのですが、他の二つに比べるとちょっと低すぎるように見えます。

一体、どういうことでしょうか？

ここへきて、この人気調査？の信憑性が危ぶまれる事態とも言えますが、これは「 一つの指標だけに囚われてはいけない 」ということの好例、ということにしておきましょう。

Ruby on Rails vs. Django vs. Laravel vs. React

まぁ、Google トレンド については、ものによって、キーワードの指定や検索の仕方で結果が大きく変わってしまう場合もあるので、自分でも試してみることをオススメします。

ちなみに、今回は、国やカテゴリなどは絞り込まず、同形異義語を排除するために、プログラミング言語名を一緒に検索してみました。

他にも、人気を判断するために、こんな指標があるよ！というような情報がありましたら、是非、教えて頂ければと思います。

話は逸れましたが、最後に、懲りもせず Google トレンド で、

• Ruby on Rails
• Django
• Laravel
• React

の、各言語で人気らしい Web フレームワークの比較もしてみましょうか。

結果は、こんな感じになりました。

URL は、https://trends.google.co.jp/trends/explore?date=2016-01-01%202019-12-31&q=rails%20ruby,django%20python,laravel%20php,react%20javascript です。

このグラフによれば、Rails の人気が下がってきて、Django と Laravel は少しずつ上昇し、React は急上昇したことにより、

世はまさに「 Web アプリケーションフレームワーク戦国時代 」に突入した！と、言えるのかもしれません。笑

特にどの言語に媚びることもない、こんな平和な？結論が、果たしてあり得るのかどうかはともかく、たとえこれが事実だったとしても、ここを分岐点として、これから、どのフレームワークが生き残っていくのか、頭一つ抜けるのか、見ものではありますよね。

しばらくしたら、また調べてみたいと思います。

はじめに

アルバイトの出勤時間を無料で管理できるサービスTimestampを運用しています。
ここでは運用開発に関する記録を残していきます

ページビュー

ページビューの記録はほとんどが自分のものですね。
qiita記事から何人か来ていただいたみたいでうれしいです！

雑記

googleアナリティクスを導入しました

googleアナリティクスのページに従うだけで簡単でした。

ランディングページを作成しました

デザイン難しいですね。出来に納得していないのですが先に進むことを優先します。
利用規約とプライバシーポリシーのページを作ったのですが、webサービスの規約をちゃんと読んだのはじめt
あと英訳は断念しました！！！

• ロゴ作成はONLINE LOGOMAKER
• 写真素材はphotoAC

開発予定

SEO対策や広告導入、機能改善などを予定しています。
サーバサイドでログ出力するとかエラーが発生したときの通知とかもやらなきゃですね。