What's New Qiita

20200730のReactに関する記事は8件です。

  • 投稿日：2020-07-30T18:19:33+09:00

React Nativeで作ったアプリをリリースしてから1年経ったので振り返ってみる

Frame 1.png

React Native製、予定作成アプリ「ペペロミア」を公開しました

以前記事にしたペペロミアが公開してから1年経ったので振り返りも兼ねて記事にまとめてみました。
個人プロダクトのアーキテクトとかの参考になれば良いかなと思います。

主に使用している技術

GitHub

前はモノレポで1つのRepositoryで全Sサービス管理していたが、各サービスごとにわけるようにしたので以下の通りです。

リリースノート

今までの主な更新リリース内容は、こちらで確認できます。

https://peperomia.app/information

ペペロミアとは

プロジェクトの概要は、こちらを参照

https://peperomia.app/about

アプリ

https://github.com/wheatandcat/Peperomia

スクリーンショット 2020-07-27 23.09.57.png

■ Apple Store
https://itunes.apple.com/us/app/%E3%83%9A%E3%83%9A%E3%83%AD%E3%83%9F%E3%82%A2/id1460583871?l=ja#?platform=iphone

■ Google Play
https://play.google.com/store/apps/details?id=com.wheatandcat.peperomia

概要

スケジュール管理アプリ。
アカウント登録すると、Push通知、Web版、シェア機能など利用できるようになります。

使用技術 / ツール

デザイン設計

Figamaを使用しています。
https://www.figma.com/

Figmaについては以下で公開しています。
ペペロミア Figma

Figmaに関しては前に記事にしているので以下を参照
エンジニアでも出来る！Figmaを使って自作アプリをリニューアル

アプリ作成

アプリはExpoを使用しています。
https://expo.io/

データベース

アカウント認証前は、SQLiteを使用、
アカウント認証後はWeb版でもデータ同期ができるようにFirestoreを使用する実装になっています。

認証

認証はFirebase Authenticationを使用しています。
GoogleログインとSign in with Appleで登録できるようになっています。

主なリリース内容

Expo SDKのバージョンアップ

リリース当初がExpo SDK v32でしたが、現在はExpo SDK v38で実装しています。

各SDKのバージョンアップのPull Requestがこちら

主なバージョンアップ変更は以下の通り

  • React Native v0.61以降になりFast refreshが導入されたので開発時に高速でリフレッシュできる
  • 元々expo内部に入っていたモジュールが別モジュールに分割
  • webサポートされた（けど、他ライブラリの影響でペペロミアでは、ビルドでコケるので使えていない :sweat: ）

ダークモードの実装

以下で解説しているのが細かい実装は省略しますが、
React Native製の公開しているアプリにダークモードを実装してみた

現状は、端末の設定を見て通常モード、ダークモードの切り替えを行う実装になっています。
ホーム画面の比較をすると、こんな感じです。
darkmode.png

カレンダー機能の実装

calendar001.png

  • スケジュールに日付入力をできるようにしてカレンダーUIで表示するように変更
  • 実装はreact-native-calendarsを使用

Sign in with Appleの実装

  • Sign in with Appleを実装
  • Apple storeの規約でサードパーティのログインを形式の場合はSign in with Appleの実装は必須になったのでFirebase Authenticationに追加
  • ExpoでのSign in with Appleは以下の通りに実

Expo Push通知の実装

Backend

https://github.com/wheatandcat/PeperomiaBackend

概要

言語はGo言語で実装
主にアカウント認証後のデータのやり取りのAPIを実装しています。

使用技術 / ツール

フレームワーク

Ginを利用して実装
https://github.com/gin-gonic/gin

GraphQLはgqlgenで実装
https://github.com/99designs/gqlgen

デプロイ先

GCPのGAEにデプロイしています。

API設計書

RESTful APIのドキュメントはSwaggerHubで実装しています。

以下で、ドキュメントを公開しています。
https://app.swaggerhub.com/apis-docs/wheatandcat/peperomia/1.0.0

主なリリース内容

gomockでのHTTP Requestのテストの実装

Goでテストを書く際にFirestoreにアクセスさせたくなかったのでgomockでメソッドをモック化してテストコードを作成しました。
https://github.com/golang/mock

実装の詳しい内容は以下の記事参照
GoMockを使ってHTTP Requestのテストを書いてみる

ExpoでPush通知を実装

ExpoのPush通知のSDKがあるので、こちらを使用して実装
https://github.com/oliveroneill/exponent-server-sdk-golang

カレンダーに合わせてPush通知を送るようにしており、GAEのcron.yamlのジョブのスケジューリングで定期実行しています。

実装の詳しい内容は以下の記事参照
ExpoでPush通知を実装してみた

gqlgenの実装

gqlgenを実装

gqlgenのベースになっているGraphQL Schemaファイルをgraphql-codegenに渡すことでTypeScriptのtypeファイルを自動生成するようにしています。

実装の詳しい内容は以下の記事参照
gqlgenとgraphql-codegenでGraphQLのtypeを自動生成してフロントエンドのコード作成する

Web版

https://github.com/wheatandcat/PeperomiaWeb
web001.png

■ URL
https://app.peperomia.info/login
※アプリでアカウント作成していないと利用できません

概要

Nuxt.js で実装しています。

使用技術 / ツール

UIライブラリ

Vuetifyで実装
https://vuetifyjs.com/ja

デプロイ先

こちらもGCPのGAEにデプロイしています。

主なリリース内容

Firebase Authenticationでサードパーティクッキーの対応

Safariでサードパーティクッキーをデフォルトでブロックされるようになったので、Firebase Authenticationを素で組み込むとエラーになるようになっていたので、そちらの対応

実装の詳しい内容は以下の記事参照
Firebase Authenticationの「This browser is not supported or 3rd party cookies and data may be disabled. 」の解決方法

Composition API + TypeScriptの導入

Vue 3.0で導入されるComposition APIを導入
合わせてComposition APIと相性の良いTypeScriptも導入しました。

導入前に以下の3パターンの実装方式を検証

  • パターン①. Composition API + TSXファイル + CSS Modules
  • パターン②. Composition API + Vueファイル + <script lang="tsx">
  • パターン③. Composition API + Vueファイル + <script lang="ts">

検証の結果、1番シンプルなパターン③で実装しました。

実装 + 検証の詳しい内容は以下の記事参照
NuxtでComposition API とTSとTSX + CSS Modulesの組み合わせについて考えてみる

@nuxt/http導入 + スケジュール修正機能の実装

ペペロミアのWeb版でのAPIアクセスは@nuxt/httpで実装
https://github.com/nuxt/http

Web側でスケジュール内容の編集の際は@nuxt/httpでAPIにアクセスしてデータ変更を行っている

ヘルプサイト

https://github.com/wheatandcat/PeperomiaHelp
スクリーンショット 2020-07-28 22.58.52.png

■ URL
https://amazing-hawking-a280c3.netlify.app/

概要

GatsbyJSで実装
GatsbyJSはMDXをサポートしているのヘルプ記事の中身はMDXで記載しています。

使用技術 / ツール

デプロイ先

Netlifyにデプロイしています。

GatsbyJSでのNetlifyデプロイ方法は以下を参照
https://www.gatsbyjs.org/docs/deploying-to-netlify/

主なリリース内容

GatsbyJS + MDXでヘルプサイトを作成

なるべく手をかからず、zendeskやIntercomみたいにお金のかからない方式でヘルプサイトを作りたかったので作成。

実装の詳しい内容は以下の記事参照
Gatsby.js + mdxでヘルプサイトを作ってみる

ちなみに今だとGatsby CloudでMDXも使えるみたいなので、こちらの選択式もありかなと思います
https://www.gatsbyjs.com/

LPページ

https://github.com/wheatandcat/PeperomiaLandingPage
スクリーンショット 2020-07-28 23.25.26.png

■ URL
https://peperomia.app/

概要

Reactで実装しています

使用技術 / ツール

デプロイ先

Netlifyにデプロイしています。

主なリリース内容

LPサイトにアニメーションを追加

Jul-22-2020 01-20-20

react-inview-monitorを使ってスクロールに入ったタイミングアニメーションするように修正

実装の詳しい内容は以下の記事参照
Reactで作成したLPサイトにアニメーションを追加してみた

RSS経由からリリースノートを表示

スクリーンショット 2020-07-22 19 12 00

リリースノートを自動生成するスクリプトを作成してブログに投稿
タグを付けてRSS経由で取得して、LPページに表示させています。

リリースノートの自動生成については以下の記事参照
リリースノートを自動生成するスクリプトを書いてみた

今年〜来年への開発予定

Firestoreの設計見直し

実装時はFirestoreへの理解が浅かったのもあり、RDBっぽい設計になっているので、見直し & 新設計にマイグレーション予定
CollectionGroupを使えば、ある程度柔軟に設計できるかな模索中。

whereのinに取得制限があったりもするのでFirestoreは設計は、すごく重要だなと実感
https://firebase.google.com/docs/firestore/query-data/queries#limitations

APIのrequestの型を自動生成してフロントエンドで使用

現状GraphQLに関してはgqlgenとgraphql-codegenの組み合わせで型を自動生成している。
だが、RESTful APIの方は特にやっていないので、こちらを型安全の状態にしたい。

以下のどちらかのパターンで実装しようかなと検討中

案1. swagger-to-tsを使って型を自動生成

swagger-to-tsでswaggerからtypeファイルを生成できるので、こちらを使用する
https://github.com/manifoldco/swagger-to-ts

ただ、これだとswaggerの方がミスっていた時に検知できないので、さらにswaggerのテストツールのdreddを実装する
https://github.com/apiaryio/dredd

案2. 現状のRESTful APIをGraphQLのmutationに移行する

mutationに移行するれば、gqlgenとgraphql-codegenの組み合わせで型を自動生成できるので、こちらを使用する
こちらの方がシンプルになりそうだけど、移行するのに時間がかかりそうな予感。

最後に

リリースノートを自動生成するようにしたのを、きっかけに振り返りの記事を書いて見ました。
振り返ると1年間で結構開発していたんだなーと思いました。また、なにかの区切りに振り返りの記事を書こうと思います :bow:

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-07-30T15:45:26+09:00

MERNスタックを学べる動画をまとめてみた（外国語の動画です）

MERNスタック is 何？

MongoDB, Express, React.js, Node.jsの4つを使った開発環境のアーキテクチャのことです。主に、Webアプリ開発に用いられます。

MongoDBとは

ドキュメント志向のNo-SQLデータベース。データの保存などに使う。DBは、データベースの意。データがJSON形式みたいな感じなので非常にJavaScriptと相性が良い。

ExpressJSとは

Node.jsのフレームワーク。Node.jsの機能と一緒に使う事で、バックエンドの構築が出来る。

ReactJS

単一ページWebアプリのUIを作成するUIコンポーネントを構築出来る。アプリケーションのView部分を担っている。

NodeJSとは

サーバサイドJavaScriptエンジン のことです。

MERNスタックの良いところは？

ずばり！！
全部JaveScriptで書けることです！JavaScriptはフロントだけでしか使えへんやろ・・・。と思われがちですが、なんでも行けちゃうんです。もし、HTML,CSS,JavaScriptという静的なサイトしか作ったことがないという人は、新しく言語を学ばずともWebアプリケーションを開発することができるのでオススメです！！

MERNスタックを学べる動画一覧（英語のみ）

Youtubeの動画か再生リストになっていて一年以内(2019年の8月以降)に投稿されているものをまとめました。

JavaScriptの勉強している人は分かると思いますが、アロー関数とか非同期処理(async await)とか、Hooksの書き方をしている教材がすくないですよね・・・。でも、こちらに挙げているものは、どれも最新の記法で書かれているのでコードを眺めるだけでもけっこう勉強になります！

CODERS NEVER QUIT
インスタのクローンアプリが作れます。
動画本数：53本　1動画：10分前後　合計：9時間

John Ahn
Youtubeのクローンアプリが作れます。
合計：4時間30分

John Ahn
映画の紹介サイトが作れます。
合計：1時間30分

John Ahn
ECサイトが作れます。
合計：5時間

Coding Garden with CJ
旅行のログを投稿するサイト。Live形式です。
合計：4時間

Programming with Jaiti
ログイン認証アプリが作れます。
まだ完成するところまでの動画はupされていませんが分かりやすいですね。

おススメ勉強法

外国語だったとしてもコードの書き方は同じなので基本的な書き方さえ知っていれば分かります。しかし、この動画をみて学ぶのはファイル構成だったり、使用するライブラリの使い方、モダンな書き方を一から見て、自分で次に何かプロダクトを作るときに再利用することができるようにすることです。そのためにお勧めしたいのが・・・

コメントアウト勉強法です！

その名の通り、コメントアウトしまくります。どのタイミングでコメントアウトするかは人それぞれなんですが、一番良いのは再生リストになってるやつは一つの動画が終わるたびにコメントアウトするとよいですね。長い動画だと30分か、一つの機能を実装する度にすると良いと思います！

メリットとしては、コードを写経するだけだと見返したとしても何も覚えてなかったりしますが、これをすると自分の言葉でそのコードを表現する必要があるので、アウトプット要素が含まれます。本当のアウトプットは自分のプロダクトを作るときだとは思いますが、インプットと同時に簡単なアウトプットをしておくことで次にコードを見る時や他の人のコードを理解する時にも役に立ちます！ぜひお試しください！

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-07-30T15:08:11+09:00

FragmentShaderを表示するreactコンポーネントの作り方

fragmentshader.jpeg

概要

CRAでプロジェクトを作成、プロジェクトにPackageを入れて、↑を表示するシンプルなReactコンポーネントの作成を行います。

環境

  • Mac
  • yarn/npx (CRAのグローバルインストールは非推奨のため)
  • TypeScript 3.5+ （オプション）

CRAでベースアプリを作成

# npxの場合
$ npx create-react-app myshader

# yarnの場合
$ yarn create react-app myshader


# npx & typescriptを利用する場合
$ npx create-react-app myshader --template typescript

# yarn & typescriptを利用する場合
$ yarn create react-app myshader --template typescript

大抵の場合は必要ないですが、一応CRAがちゃんとコードを生成している事を確認しておきます。

$ cd myshader

# yarn
$ yarn start

# npm
$ npm start

[TypeScriptの場合]
cra.png

react-vfxをインストール

react-vfxをインストールします。
併せて、styled-componentsも入れておきます。CSSやSCSSまたはSASSが好きな方はインストールしなくても全く問題ないです。
ちなみ、react-vfxはtsで書かれているので、＠typesファイルのインストールは不要です。

# yarn
$ yarn add react-vfx styled-components
$ yarn add -D @types/styled-components <-- if you use typescript

# npm
$ npm install react-vfx styled-components
$ npm install -D @types/styled-components <-- if you use typescript

コンポーネントを作成

一番最初の画像を表示するためのシンプルなコンポーネントを作成していきます。
名前はなんでも良いのですが、今回は分かりやすくMyShader.tsxとしました。
本当はフォルダを作るべきなんですが、目的はreact-vfxを試す事なので、src直下に作りました。

import React from "react";
import * as VFX from "react-vfx";
import styled from "styled-components";

const Content = styled.div`
  width: 100vw;
  height: 100vh;
`;

const metal = `
uniform vec2 resolution;
uniform float time;
void main()
{
    vec2 coord = gl_FragCoord.xy / resolution.xy;
    vec2 st = coord;
    vec3 line = vec3(0.0);

    coord *= 4.;

    float len;

    for (int i = 0; i < 15; i++) {
        len = length(vec2(coord.x, coord.y));
        coord.x += cos(coord.y + sin(len)) + cos(time * .07) * 0.2;
        coord.y += sin(coord.x + cos(len)) + sin(time * 0.1);
    }

    len *= cos(len * 0.4);

    len -= 10.;

    for (float i = 0.0; i < 5.0; i++) {
        len += 0.11 / abs(mod(st.x, 1.09 * i) * 200.) * 1.;
    }

    vec3 color = vec3(cos(len + 0.2) * 1.15, cos(len + 0.1), cos(len - 0.05));

    gl_FragColor = vec4(color, 1.0);
}
`;

const MyShader: React.FC = () => {
  return (
    <>
      <VFX.VFXProvider>
        <VFX.VFXSpan shader={metal}>
          <Content></Content>
        </VFX.VFXSpan>
      </VFX.VFXProvider>
    </>
  );
}

export default MyShader;

コード自体は非常にシンプルで、react-vfxをインポート
import * as VFX from "react-vfx";
FragmentShaderをリテラル内に記述して、metalという変数を定義
インポートしたvfxのコンポーネントを使って、metal（FragmentShader）をロード

Contentは表示するためだけのものなので、普通にCSSを書いて、インポートする方がstyled-componentsを使うより簡単かつ楽だと思います。

あとはこれをApp.tsxもしくはApp.jsにインポートして、を記述したのちに、アプリを起動すれば、FragmentShaderで記述されたアニメーションが表示されます。

ちなみに、metalの部分にShaderToyのコードを移植して、変数名等を修正すれば、簡単に色々なモノを試せます。ただし、公開する場合はライセンスに気をつける必要があります。

react-vfxサンプルページ

react-vfx自体もエフェクトを持っているので、Shaderを書かなくても面白いエフェクトをページに簡単に加える事ができます。
https://amagi.dev/react-vfx/

[text]
Screen Shot 2020-07-30 at 2.06.53 AM.png

repo：https://github.com/koji/typescript/tree/master/shadereact
レポジトリを試す場合は下記を実行すれば、動きます。

$ cd shaderreact
$ yarn
$ yarn start

Dev.toに投稿したポストを日本語にして投稿してみました。
元の記事
https://dev.to/kojikanao/use-fragmentshader-with-reactjs-easily-react-vfx-52lm

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-07-30T13:17:31+09:00

JavaScriptで、配列・連想配列から要素を削除する時に使える文法！

はじめに

こんにちは！プログラミング初心者なのですが、今日は、初めてQiitaに記事を投稿します。
現在、ReactでToDoListアプリケーションの作成に挑戦しているのですが、今日はその途中で、配列の要素の削除に関してプチ「アハ体験」をしたので、備忘録も兼ねて投稿します！

一般的な配列から要素を削除する方法

JavaScriptの入門書等によく書いてある、要素の削除方法は次の2つ。

  1. pop()
    配列の末尾の要素を取得し、削除する。

  2. shift()
    配列の先頭の要素を取得し、削除する。

  1. pop()
    2. sample.js
    let arry = ["a", "b", "c", "d", "e"];
let poppedArry = arry.pop();

console.log(arry); // ["a", "b", "c", "d"]
console.log(poppedArry); // e

    上記のように、配列の末尾にある要素、今回の例では「e」を取得してきて、それを変数poppedArryに格納し、元の配列arryからは、「e」が削除されています。

  2. shift()
    3. sample.js
    let arry2 = ["あ", "い", "う",  "え", "お"];
let shiftedArry2 = arry2.shift();

console.log(arry2); // ["い", "う", "え", "お"]
console.log(shiftedArry2); // あ

    上記のように、配列の先頭にある要素、今回の例では「あ」を取得してきて、それを変数shiftedArry2に格納し、元の配列arry2からは、「あ」が削除されています。

    本来は削除のための文法ではないけど削除できる文法その1!

    sample.js
    let arry3 = [1, 2, 3, 4, 5];
let splicedArry3 = arry3.splice(1,3);

console.log(arry3); // [1, 5]
console.log(splicedArry3); // [2, 3, 4]

    上記の例では、spliceメソッドを使っています。このspliceメソッドとは、
    splice(開始インデックス番号, 開始からn番目, 置き換え1, ...置き換えn);
    のように、要素を置き換える働きを主にします。
    しかし、上記の例にあるように、開始インデックス番号と開始からn番目の2つのみを指定し、置き換える要素を指定しなければ、それらの指定された区間(開始~n番)の要素が削除されるのです！

    本来は削除のための文法ではないけど削除できる文法その2!

    sample.js
    let arry4 = [
{ id: 1, title: "絵本"},
{ id: 2, title: "小説"},
{ id: 3, title: "参考書" }
]
let filteredArry4 = arry4.filter(arry4 =>
    arry4.id !== 2);

console.log(filteredArry4); 
/* 
{id: 1, title: "絵本"}
{id: 3, title: "参考書"}
*/
console.log(arry4); 
/* 
{id: 1, title: "絵本"}
{id: 2, title: "小説"}
{id: 3, title: "参考書"}*/

    上記の例では、filterメソッドを使っています。このfilterメソッドとは、
    filter(function(value, index, array){
    return 条件
    });
    のように、条件に合った要素で新たに配列を形成する働きを主にします。
    しかし、上記の例にあるように、「連想配列のidが2ではない」を条件として、その条件に
    合う要素を、変数filteredArry4に条件に合う要素のみを集めた新しい配列として格納します。元の配列arry4を見てみると、こちらでは、削除は実行されず、元のままです。

    まとめ

    JavaScriptで、配列・連想配列から要素を削除する時に使える文法には、

  • pop()

  • shift()

  • spliceメソッド

  • filterメソッド

の4つがあります！

個人開発などにおいて、配列や連想配列から要素を削除する機能を付けたいということが多々あると思います。そんな時に、通常のpop()やshift()だけでなく、spliceメソッドやfilterメソッドを選択肢に入れてみてください！
拙い投稿ですが、最後まで読んでくださり、ありがとうございます！

参考文献

山田祥寛著 『改訂新版 JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで』(2018)
※第1刷は、2016年。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-07-30T11:48:54+09:00

[AWS] ReactアプリでCognitoユーザープール認証を行ってみる

Cognitoの基本

「[AWS] Cognitoの基本まとめ」をご覧ください。

前提

今回はReactを使用するので、事前に

  • Node.js
  • npm

をインストールしておいてください。
あと、AWSアカウントの用意もお忘れなく。

準備

ユーザープールの作成

まず、マネジメントコンソールにログインして、サービス「Cognito」の画面を表示します。
まだユーザープール、IDプールともに未作成のはずなので、下記のような画面になると思います。

cognito1.png

ここで「ユーザープールの管理」ボタンを押します。

cognito2.png

そして「ユーザープールを作成する」ボタンを押します。
すると、プール名の入力を促されるので、適当なプール名を入力してください。

cognito3.png

今回は、ここで「デフォルトを確認する」ボタンを押します。

cognito4.png

一応内容を確認して、一番下にある「プールの作成」ボタンを押します。
すぐに作成完了の画面が出るので、プールIDを控えておきましょう（控え忘れてもあとで確認はできます）。

cognito5.png

アプリクライアントの作成

今回は、外部プロバイダではなくユーザープールで認証を行うので、作成したユーザープールにアプリクライアントを作成します。
画面右側にある「アプリクライアント」を選択してください。

cognito6.png

ここで「アプリクライアントの追加」リンクをクリックします。
アプリクライアント名に適当な名称を入力します。
あと、今回は簡単なサンプルにしたいので「クライアントシークレットを生成」のチェックだけ外してください。
それ以外はデフォルトのままとしておきます。

cognito7.png

「アプリクライアントの作成」ボタンを押します。
すると、画面が切り替わるので「アプリクライアントID」を控えておきましょう（これも後で確認することはできます）。

cognito8.png

IDプールの作成

ユーザープールが作成できたので、今度は、アカウントを管理するIDプールを作成します。
画面上部にある「フェデレーテッドアイデンティティ」のリンクをクリックします。

cognito9.png

まずはIDプール名に適当な名称を指定しましょう。

cognito10.png

そして、画面の下の方に移動すると「認証プロバイダー」というリンクをがあるので、これをクリックして入力領域を展開します。
ここで、ここまでに控えておいた、ユーザープールID、アプリクライアントIDを入力します。

cognito11.png

そして「プールの作成」ボタンを押します。
しばらくすると、IAMロールを作成する画面が出てきます。

cognito12.png

特に何も変更せず、そのまま「許可」ボタンを押してください。

クライアントアプリの作成

Reactアプリの作成

まず最初に、create-react-appをインストールします。

$ npm install -g create-react-app

続いて、下記コマンドでアプリケーションのプロジェクトを作成します。

$ create-react-app cognito-test

完了したら、一応正しくセットアップできているか確認してみます。

$ cd cognito-test
$ npm start

http://localhost:3000/にアクセスして、下記のような画面が表示されればOKです。
「Ctrl+C」で一度終了させてください。

react1.png

Apmplifyのインストール

今回はクライアントにJavaScriptを使うため、Amplifyを使用したいと思います。
プロジェクトのディレクトリ配下で、以下のコマンドを実行してください。

$ npm install aws-amplify aws-amplify-react @aws-amplify/ui-react

Cognitoのコードを書く

package.json

まず、上でインストールしたライブラリが追加されているか確認しましょう。
dependenciesに、以下の2行を追記してください。

    "aws-amplify": "^3.0.22",
    "aws-amplify-react": "^4.1.21",
    "@aws-amplify/ui-react": "^0.2.13"

src/index.js

続いて、index.jsを以下のように修正します。

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

Amplify.configure({
  Auth: {
      identityPoolId: 'IDプールのID',
      region: 'ap-northeast-1',
      userPoolId: 'ユーザープールID',
      userPoolWebClientId: 'アプリクライアントID'
  }
});

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  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();

とします。
IDプールのIDは、IDプールの画面で「IDプールの編集」から確認できます。

cognito13.png

src/App.js

続いて、App.jsも、下記のように書き換えてしまってください。

import React from 'react';
import { withAuthenticator } from '@aws-amplify/ui-react';

function App() {
  return (
    <div className="App">
    </div>
  );
}

export default withAuthenticator(App);

以上。
これだけです、たったこれだけ。

動作確認

いざ起動

まずはアプリケーションを起動します。

$ npm start

そしてhttp://localhost:3000/にアクセスすると、画面が先ほどとは違い、以下のような画面が出てきます。
Cognitoのデフォルトの認証画面です。

React_App.png

ユーザ作成

この時点では、まだユーザを1つも登録していないので「Create account」のリンクから、ユーザを登録してみましょう。
この時、標準の設定で、メールアドレス認証を有効にしているので、メールアドレスはメールを受信できる有効なものを指定してください。

userreg.png

「CREATE ACCOUNT」ボタンを押すと、確認画面が表示されます。

なお、この時点でマネジメントコンソール画面でユーザープールの状態をみてみると、

cognito16.png

と、ユーザが作成され、Eメール確認済みが「false」になっていることが確認できます。

cognito17.png

では、話を戻して、Confirmation Codeに、受信したメールに記載されているコードを入力して「CONFIRM」を押してみましょう。
すると、画面が真っ白くなりますが（認証後に表示するページを指定していないため）、マネジメントコンソールの画面で確認してみると、

cognito19.png

Eメール確認済みが「true」にかわっているかと思います。

まとめ

認証・認可の機能を追加する、ってなかなか敷居が高いイメージでしたが、さくっとできてしまいました。
次は、FacebookなどからSSOする方法について解説したいと思います。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-07-30T08:35:29+09:00

ドメイン駆動設計のミッション層を設計する手法を紹介

今回の記事では、前回の「エリック・エヴァンスが提唱したアーキテクチャの4層モデルを拡張する」の記事で紹介した
5層アーキテクチャモデルのミッション層を設計する方法について紹介する。

前回の記事について以下のURLを参照
https://qiita.com/aLtrh3IpQEnXKN7/items/b7fe2014ccefcbb9e458

image.png

ミッション層を理解する鍵は抽象表現主義

抽象表現主義とは人間の心象世界を絵画に表現することを目指した表現技法。
現実の世界に基づい絵画を描写する写実主義とは対極に位置する心象風景をモチーフに絵画を記載する手法。
抽象表現主義はオートマティスムと呼ばれる「何か別の存在に憑依されて肉体を支配されているかのように、自分の意識とは無関係に動作を行ってしまう現象」に基づいて絵画を描写する手法を取り入れている。
そのため、抽象表現主義によって取り入れられた絵画は水のような流体状になった作品が仕上がる。
現実の世界を水のような流体として捉える抽象表現主義の描写がミッション層のロジックを理解することに繋がる。
下記は抽象表現主義によって作成された作品。
image.png

ミッション層を巨大なキャンバスとして捉える

ミッション層を設計する場合、巨大なキャンバスとして捉えることが設計を行うポイントになる。
キャンバスの中では、登場人物が役割を演じ、特定のシーンが切り取られ作品として完成する。
キャンバスは以下の要素によって構成されている。
・タイトル
・俳優
・俳優が演じる役割
・俳優が使用する道具

ミッション層では、外部から取り込んだエネルギーを変換し、別のオブジェクトに変換して出力するというプロセスがロジックの流れになる。
そのため、ミッション層で実行されるロジックは、映画のワンシーンのように脚本に沿って各俳優が役割を演じるというロジックになる。
ミッション層のロジックは文脈に基づいて作成されるため、DCIアーキテクチャによって実装が行われる。

DCIアーキテクチャに関する説明は下記の記事参照
https://qiita.com/aLtrh3IpQEnXKN7/items/355ad12f82ac424abea3

ミッション層のロジックはクライアントサーバシステム

ミッション層のロジックは、サービスを受けるクライアントとサービスを提供するサーバーに分割する。
サービスを受けるクライアントは外部情報を保持し、外部情報をサーバに提供してサービスを受ける。
サーバーは受け取った外部情報を基に提供するサービスを決定する。

アリストテレスの四原因説を使用してミッション層内で発生する力の種類、方向性、役割について把握する

四原因説とはアリストテレスが自著『自然学』の中で論じた、自然学の現象に関する4種類の原因。以下の4つの因子で構成されている。
目的因・・・物事の終り、すなわち物事がそれのためにでもあるそれ（目的）をも原因と言う。
形相因・・・形相または原型。
作用因・・・新たな結果・成果を産出する意味での作用因。力のスタート地点を表す。
質料因・・・存在するものの物質的な原因。銅像においては青銅が、銀盃においては銀が該当

四原因説に基づく力の種類、ロジックはドメイン層のメソッドに依存している。
ミッション層では四原因説に該当するドメイン層のメソッドが相互作用し、ロジックを形成する。
四原因説とドメイン層の繋がりを把握することで、ミッション層の全体の流れを把握することができるようになる。
四原因説とドメイン層の繋がりに関しては下記の記事参照
https://qiita.com/aLtrh3IpQEnXKN7/items/0b7abd4ddbc48a8430d6

ミッション層を構成する要素

ミッション層を構成するクラス一覧。
Mission・・・目的を表す。ユースケース層のワンシーンを切り取った名称。
Actor・・・役割を演じるためのクラス。Roleを実装だけのクラスなのでメソッドは何も実装されないが、特定のActorのみ演じられるRoleも存在するため、Roleの生成条件を実装する可能性がある。
Role・・・Actorが演じる役割。四原因説の作用因に該当するドメイン層のメソッドが実装される。
Tool・・・Roleが使用する道具。四原因説の質料因と形相因に該当するドメイン層のメソッドが実装される。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-07-30T05:12:33+09:00

【React Hooks】useState()でcannot assign to read only propertyが出た時の対処法

はじめに

useState()でオブジェクトを管理していましたが、タイトルのようなエラーが発生したので、その解決法を記してあります。

エラー時のコード

test.js
import React, { useState, useEffect } from "react";
import { db } from "../firebase.js";

const Test = () => {
  const [imgStyle, setImgStyle] = useState({backgroundImage: ""});

  useEffect(() => {

   db.collection("test").get().then((querySnapshot) => {
      querySnapshot.forEach((doc) => {
        const docVal = doc.data();
        imgStyle["backgroundImage"] = `url(${docVal.imgUrl})`;
        setImgStyle(Object.assign({}, imgStyle));
      });
    }).catch(function(error) {
      console.log("Error getting document:", error);
    });

  }, []);

  return (
    <div>
      <div className="reportBefore" style={imgStyle}></div>
    </div>
  );
}

export default Test;

解決後のコード

test.js
import React, { useState, useEffect } from "react";
import { db } from "../firebase.js";

const Test = () => {
  const [imgStyle, setImgStyle] = useState([]);

  useEffect(() => {

   db.collection("test").get().then((querySnapshot) => {
      querySnapshot.forEach((doc) => {
        const docVal = doc.data();
        setImgStyle(oldForm => [...oldForm,
          {backgroundImage: `url(${docVal.imgUrl})`}
        ]);
      });
    }).catch(function(error) {
      console.log("Error getting document:", error);
    });

  }, []);

  return (
    <div>
      <div className="reportBefore" style={imgStyle[0]}></div>
    </div>
  );
}

export default Test;

まとめ

読みのみで変更はできないので、useStateでオブジェクトを扱う際は追加のイメージを忘れずに持っておくことが必要です。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-07-30T02:52:57+09:00

【Next.js】Google Cloud Storageに静的ファイルをリリースした

Next.jsのSSGでビルドした静的ファイルをGoogle Cloud Storageにアップロードする際に詰まったので備忘録を残します。

というか事例を見つけることが出来なかったので、結構困ってました…。

ただ、GCSへ独自ドメインで静的ホスティングを対応されている方がいたので、それは非常に助かりました。

以下の記事が非常に参考になりました。

参考：https://blog.apar.jp/web/7745/

Next.jsの静的ファイルをGCSにリリースする手順

  1. ドメイン取得
  2. DNSの設定
  3. GCSのバケット作成
  4. Next.jsで静的ファイルをビルド
  5. GCSに静的ファイルをリリース

ドメイン取得

お名前.comやGoogle Domainsでも何でもよいので、独自ドメインを取得しましょう。

example.com を取得したていにしておきます。

DNSの設定

私はCloud DNSを利用したので、手順はそれで説明したいと思います。

ホストゾーン作成

取得したドメインと同じDNS名を設定しましょう。

image.png

取得したドメインのNSレコードを変更

取得したドメインのNSレコードをホストゾーンのNSレコードに設定してあげましょう。

これでDNSがワークしてくれるはずです。

各ドメイン事業者ごとに手順が違うとは思いますが、ググれば簡単に出来ると思うので、各自適宜設定してもらえればと思います。

CNAMEの設定

GCSのバケットにアクセスするためにCNAMEを設定してあげましょう。

以下を設定してあげればアクセスすることが出来るようになります。

c.storage.googleapis.com.

GCSバケット作成

GCSのバケット作るときはドメインと同じバケット名にしてあげましょう。

バケット名は、CNAME や A リダイレクトの一部として、DNS レコードで使用できます。
引用：https://cloud.google.com/storage/docs/naming-buckets?hl=ja

そして、バケットを公開しましょう。

以下手順が参考になるかと思います。

参考：https://cloud.google.com/storage/docs/access-control/making-data-public?hl=ja

また、indexページのアクセスや404時のページ等を設定することも可能です。

参考：https://cloud.google.com/storage/docs/static-website?hl=ja

Next.jsで静的ファイルをビルド

以下コマンドで静的ファイルがビルド出来るかと思います。

$ yarn build
$ yarn export

上記コマンドでoutディレクトリ配下にファイルがビルドされます。

GCSに静的ファイルをリリース

以下コマンドで静的ファイルをGCSにリリース出来るかと思います。

$ gsutil rsync -R ./out gs://xxxxxxxxxx

GCSにリリースする記事を見つけることが出来ませんでしたが、S3にリリースする際のやり方をみながら参考にしてみました。

参考：https://stackoverflow.com/questions/58469857/how-to-deploy-a-static-website-to-aws-s3-using-nextjs

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

日付別

タグ一覧