自己紹介

むちゃんです。
関西を拠点に活動しているフロントエンドエンジニアです。

HAL大阪の2回生です (2020.7.4現在)

イベントなど回っているので是非大阪辺りの方は会いましょう！

1...REACTとは？

Facebook社が開発したWebのUIを作るためのJavascriptのライブラリ。

[公式ドキュメント]:https://ja.reactjs.org/

2...コンポーネントとは?

[見た目]+[機能]を合わせた物。

1. 見た目(View)
2. 機能(controller)

Webの構造(コンポーネントツリー)

・オブジェクトの階層構造のこと

なぜコンポーネントを使うのか？

1. 再利用をするため
2. 分割統治するため(お互いの依存関係をなくす)
3. 変数に強くなるため

コンポーネントの種類

・Functional Component(ファンクショナルコンポーネント)

・Class Component(クラスコンポーネント)

3...DOMについて

そもそもDOMって何？

〜Document Object Model (DOM)=要はインターフェース

HTMLにアクセスする窓口みたいな物
構造や見た目、コンテンツを変更

Virtual DOMとは

〜Reactが管理しているDOM

ブラウザのレンタリングと別管理
->効率よくDOM操作をできる

・通常のDOM操作

document.getElemntById('hoge').innerText='hoge'

・ReactのVirtualDOM操作

render(
<div id="hoge">hoge</div>
)

JSXについて(トランスコンパイル)

〜Javascropt内でHTMLっぽくる

ReactDOM.render(
<div ClassName={hoge}>
  <h1>HelloWorld</h1>
</div>
)

4...JSXの基本文法での注意点!!

・Reactのパッケージインストールが必要

import React from "react"

・ClassはClassNameと記述

・１つで完了するタグは終了タグをつける

あとがき

今回は自分なりにReactについて簡潔にまとめてみした

次回はstateやライフサイクルについてより詳しくまとめてみたいと思います。

Twitter @HomgMuchan ぜひフォロー待っています❗️

webpack.config.js

僕の中で少し苦手なイメージのあるwebpackについて、改めて向き合って理解していこうと思います。
webpackに苦手意識がある人のほとんどは、このwebpack.config.jsについて理解していない人がほとんど。なので、今回は下記のwebpack.config.jsについて丁寧に説明していきます。

webpack.config.js

const path = require('path')
const webpack = require('webpack')

module.exports = {
  entry: {
    index: path.join(__dirname, 'src', 'index.js')
  },
  output: {
    path: path.join(__dirname, 'out'),
    filename: 'main.js'
  },
  devtool: 'cheap-module-eval-source-map',
  target: 'node',
  module: {
    rules: [
      {
        test: /.js$/,
        loader: 'babel-loader'
      }
    ]
  },
  plugins: [
    externalPlugins
  ]
}

entryとoutput

結論から言うと、
entry:は、webpackがビルドする際に開始点となるJSファイルを設定しています。
output:は、ビルドファイルの設定。どこにどのようなファイルを出力すればよいか設定しています。

具体的にみていきます。

webpack.config.js

const path = require('path')
const webpack = require('webpack')

module.exports = {
  entry: {
    index: path.join(__dirname, 'src', 'index.js')
  },
  output: {
    path: path.join(__dirname, 'out'),
    filename: 'main.js'
  },
...
}

entryの設定

早速説明していきます。
簡単に理解できますので、安心してください（笑）

ここでは、webpackがビルドした際に
「./src/index.jsというファイルを探して読み込んでね。」という設定をしています。

まずpath.joinでパスを連結してくれていて、上記だと./src/index.jsというパスにしてくれています。

これを使うメリットとしては、
macやwindowsなどの開発環境によって/が¥になったりするんですけど、それを防ぐことができます。
そしてNode.jsの標準モジュールのpathを読み込ませて使用しているので、path.joinとして使用できています。

__dirnameはNode.jsで用意されているグローバル変数で、現在実行中のソースコードが格納されているディレクトリパスが格納されています。簡単に言うと、手軽に絶対パスの記述ができるものです。

outputの設定

path:とfilename:がありますね。

こちらも結論から言うと
path:は、どのディレクトリに出力するか指定しています。
filename:は、どのファイルに出力するか指定しています。

なので、
「./srcというディレクトリ内のmain.jsというファイルに出力してね。」という設定をしています。

devtool

まず、結論です。
devtool:を設定することによって、ソースマッピングのスタイルを選択して、デバッグプロセスを強化します。指定可能な値はstringとfalseです。
（参照：公式ドキュメントのdevtool）

分からない用語が出てきた？ソースマッピングですかね？

分からなければ、しっかり調べていきましょう。

ソースマップについて

ソースマップとは、Babelなどトランスパイル後と前のコードの内容を紐付けしてデバッグしやするするもの。

トランスパイルについて
JavaSciprtではwebpackでコンパイルなどをする時に同時にトランスパイルという処理を行います。
具体的に何をしているのかというと、互換性のあるコードに変換をする処理。
（例）「CoffeeScriptとかを記載して、Javascriptへトランスパイルする。」みたいな感じです。
一般的にはBabelというライブラリを使います。

devtool: 'cheap-module-eval-source-map'

まとめると、ここでは'cheap-module-eval-source-map'を設定しており、公式ドキュメントによると、ビルドと再ビルトの処理速度としては遅めに処理されるようです。

webpack.config.js

...
module.exports = {
...
  devtool: 'cheap-module-eval-source-map',
...
}

target

結論から言うと、
target:を設定することによって、特定の環境をターゲットにするようにwebpackに指示してくれます。ここでは、'node'と設定しているので、Node.jsのような環境で使用するためにコンパイルしてます。

webpack.config.js

...
module.exports = {
...
  target: 'node',
...
}

module

module:オプションは、プロジェクト内のさまざまなタイプのモジュールがどのように処理されるかを設定しています。「webpack が特定のmoduleをどう扱うか」を決めるってことです。webpack ではmoduleはJavaScriptやCSSなどのファイルを指す。
ここでは、Ruleモジュールについて設定されているので、詳しくみていきます。

webpack.config.js

...
module.exports = {
...
  module: {
    rules: [
      {
        test: /.js$/,
        loader: 'babel-loader'
      }
    ]
  },
...
}

Rule

まず結論から、
rule:を設定すると、「条件」、「結果」、「ネスト」されたルール３つの部分に分けることができます。

Rule.test

公式ドキュメントによると、テストアサーションに合格したすべてのモジュールを含めます。 Rule.testオプションを指定した場合、Rule.resourceも指定できません。
と書いてありましたが、ちょっと「？？」のままでした。

いろいろ調べてみた結果を簡単にいうと、
「Rule.testで拡張子を設定する」というイメージです。
webpackでいうmodule(JavaScriptやCSSなど)を設定するってことです。
今回で言うと、拡張子が.jsなので、test: /.js$/と設定しています。

このまま一気に説明した方が理解がしやすいと思うので、一気に説明していきます。

Rule.loader

この２つですが、簡単にいうと
まずloader: 'babel-loader'と設定することで、test: /.js$/で設定したjsファイルを'babel-loader'として読み込む設定をしています。

plugins

最後plugins:です。
pluginsオプションは、さまざまな方法でwebpackビルドプロセスをカスタマイズするために使用されます。externalPluginsというプラグインがカスタマイズされています。

公式ドキュメントによると、
webpackには豊富なプラグインインターフェイスがあります。 webpack自体のほとんどの機能は、このプラグインインターフェイスを使用します。これにより、Webpackが柔軟になります。

最後

最後の方は駆け足で説明することになりましたが、少しでも理解の手助けになれば幸いです。
こんなことを最後にいうことではありませんが、webpackについては公式ドキュメントに結構丁寧に説明が書いてあるので、そこをみれば理解できるかと思います。

何か間違い等ありましたら教えていただけると幸いです。

概要

Amplify を使って react アプリケーションをデプロイするところまで

環境

Docker で作成します。

docker-compose.yml

version: '3'

services:
    amplify:
        build: ./
        ports:
            - "3000:3000"
            - "20002:20002"
        volumes:
            - ~/dev/AmplifyDemo:/var/www/AmplifyDemo
            # :より左は自分の環境に合わせる（credential, config をこのあとの作業で入れるor入る）
            - ~/dev/AmplifyDemo/aws/:/root/.aws/
        tty: true

のちのち Amplify Mock を利用したいので java を入れておきます。
不要ならなくても問題ないです。

Dockerfile

FROM node:12.4

# amplify CLI
RUN npm install -g @aws-amplify/cli

# java for Amplify Mock
RUN apt update; apt install -y wget software-properties-common apt-transport-https
RUN wget -qO - https://adoptopenjdk.jfrog.io/adoptopenjdk/api/gpg/key/public | apt-key add -
RUN add-apt-repository --yes https://adoptopenjdk.jfrog.io/adoptopenjdk/deb/
RUN apt update; apt install -y adoptopenjdk-11-openj9

WORKDIR /var/www/AmplifyDemo

起動
コンテナ名は自分の環境に置き換えて

$ docker-compose up -d
$ docker exec -it amplifydemo_amplify_1 bash

Amplify が利用する IAM ユーザーを作成

$ amplify configure
Scanning for plugins...
Plugin scan successful
Follow these steps to set up access to your AWS account:

Sign in to your AWS administrator account:
https://console.aws.amazon.com/
Press Enter to continue

Specify the AWS Region
? region:  ap-northeast-1
Specify the username of the new IAM user:
? user name:  amplify-dev
Complete the user creation using the AWS console
https://console.aws.amazon.com/iam/home?region=undefined#/users$new?step=final&accessKey&userNames=amplify-dev&permissionType=policies&policies=arn:aws:iam::aws:policy%2FAdministratorAccess
Press Enter to continue

Enter the access key of the newly created user:
? accessKeyId:  ********************
? secretAccessKey:  ****************************************
This would update/create the AWS Profile in your local machine
? Profile Name:  default

Successfully set up the new user.

これで ~/.aws 配下に上記作成の IAM ユーザーのキーが書かれた credentials と config が生成される。

React プロジェクト作成

※ すでにプロジェクトが存在している場合は 適宜 git clone など。

$ npx create-react-app demo --typescript

起動確認

$ cd demo
$ yarn start

http://localhost:3000 にアクセス

Amplify プロジェクト作成

amplify init
Note: It is recommended to run this command from the root of your app directory
? Enter a name for the project demo
? Enter a name for the environment dev
? Choose your default editor: IntelliJ IDEA
? Choose the type of app that you're building javascript
Please tell us about your project
? What javascript framework are you using react
? Source Directory Path:  src
? Distribution Directory Path: build
? Build Command:  npm run-script build
? Start Command: npm run-script start

これで AWS Amplify コンソールに demo アプリが作成されていることが確認できる。

api 追加

$ amplify add api
? Please select from one of the below mentioned services: GraphQL
? Provide API name: demo
? Choose the default authorization type for the API Amazon Cognito User Pool
Using service: Cognito, provided by: awscloudformation

 The current configured provider is Amazon Cognito.

 Do you want to use the default authentication and security configuration? Default configuration
 Warning: you will not be able to edit these selections.
 How do you want users to be able to sign in? Email
 Do you want to configure advanced settings? No, I am done.
Successfully added auth resource
? Do you want to configure advanced settings for the GraphQL API No, I am done.
? Do you have an annotated GraphQL schema? No
? Do you want a guided schema creation? Yes
? What best describes your project: Single object with fields (e.g., “Todo” with ID, name, description)
? Do you want to edit the schema now? Yes
Please edit the file in your editor: /var/www/AmplifyDemo/demo/amplify/backend/api/demo/schema.graphql
? Press enter to continue Selected  editor intellij was not found in your machine. Please manually edit the file created at /var/www/AmplifyDemo/demo/amplify/backend/api/demo/schema.graphql
? Press enter to continue

The following types do not have '@auth' enabled. Consider using @auth with @model
     - Todo
Learn more about @auth here: https://docs.amplify.aws/cli/graphql-transformer/directives#auth


GraphQL schema compiled successfully.

Edit your schema at /var/www/AmplifyDemo/demo/amplify/backend/api/demo/schema.graphql or place .graphql files in a directory at /var/www/AmplifyDemo/demo/amplify/backend/api/demo/schema
Successfully added resource demo locally

Some next steps:
"amplify push" will build all your local backend resources and provision it in the cloud
"amplify publish" will build all your local backend and frontend resources (if you have hosting category added) and provision it in the cloud

api 追加したら push する

$ amplify push

ここで現状までの状態を git にあげておく
今回の例で言うと demo 配下のもの。

デプロイ

主に公式の手順をなぞっただけ。
Amplify コンソールでリポジトリの接続から Git 連携しておく
さきほどあげた git リポジトリの master を選択。
保存してデプロイ。

問題なくデプロイできていると以下のような感じ

これで master に push するたびに、デプロイが走る。

公式を参考に

以下のようにしてバックエンドの環境を増やして、本番用/ステージング用などと分けます。

amplify env add

作ったバックエンドの環境と git 連携してあるフロントエンドとの関係を定義します。
本番環境: frontned（git の master）、backend（amplify env の prod）
ステージング環境: frontend（git の develop）、backend（amplify env の dev）
のように。

おまけ

もし、すでにもろもろプロジェクトが作成されていて、自分が開発に途中から参画するときにする作業

1. プロジェクトの git clone
2. Amplify の IAM ユーザーの認証情報をもらう（例えばインフラ担当者から）
   もらった認証情報から ~/dev/AmplifyDemo/aws/（自分の環境に合わせてください） に credentials と config ファイルを作成
3. docker の起動までは変わらず手順通りやる（clone してきたパスなど適宜環境に合わせて docker-compose.yml を変更）
4. docker コンテナ内に入って、プロジェクトのディレクトリに移動する
5. amplify init
   ポイントは最初に既存の環境があるか聞かれるので Yes, 次にその環境を選択すること。

$ amplify init
Note: It is recommended to run this command from the root of your app directory
? Do you want to use an existing environment? Yes
? Choose the environment you would like to use: dev

react 画面の確認
clone してきたばかりであれば、初回は yarn install 必要

$ yarn install

$ yarn start

起動確認 http://localhost:3000

続き

Amplify で GraphQL と Cognito 認証