クエリの作成 import { gql } from '@apollo/client' export const GET_USERS = gql` query GetUsers { users(order_by: { created_at: desc }) { id name created_at } } ` export const GET_USERS_LOCAL = gql` query GetUsers { users(order_by: { create…

RPCとは ・Remote Procedure Call（遠隔手続き呼び出し） あるサービスから別のサービスの アプリケーションの処理（サブルーチン・クラス・関数など）を呼び出す技術。 RPCを使うことで、違うアプリケーションのロジックを あたかも自分のアプリケーション…

Rustとは ・２０１５年に正式リリース ・実行速度が速い ・静的型付け言語 ・メモリ安全性の保証 ・機械語に直接コンパイルされる ・GC（ガベージコレクションをもたない） JavaやPythonなどは独自の仮想マシンを持つ ・仮想マシンを入れるメリット さまざま…

ファンアウト ファンアウトパターンとは 処理を呼び出すプロセスから直接各処理を呼び出すのではなく、 間にノーティフィケーション（通知）コンポーネントと キューイングコンポーネントを入れることで 非同期かつ並列に処理が可能になる。 処理を呼び出す…

react-query ・サーバーからのデータ取得回数を減らす(fetch) （キャッシュに格納する） ・不要な再レンダリングを無くす 従来のstate管理 ●State management(useState, redux store) ・Server data(REST APIから取得したデータ) ・React app state(ローカル…

カスタムフックとは ・hooksの各機能を使用 ・コンポーネントからロジックを分離 ・使い回し、テスト容易、見通しが良くなる ・自由に作成できる カスタムフックなしで実装 $ mkdir ./src/components $ mkdir -p ./src/types/api $ touch ./src/components/U…

基本的な型 $ npx create-react-app <プロジェクト名> --template typescript /* eslint-disable @typescript-eslint/no-unused-vars */ /** TypeScriptの基本の型 */ // boolean let bool: boolean = true; // number let num: number = 0; // string let s…

グローバルなstate管理 グローバルなstate管理あり・なしで管理者の時は編集リンクを表示させ、 一般ユーザの時は編集リンクを表示させないことを実装する ツラい実装 まずはグローバルなstate管理なしで管理者の時は編集リンクを表示させ、 一般ユーザの時…

Atomic Designとは ・Brad Frost氏が考案したデザインシステム ・画面要素を５段階に分け、組み合わせることでUIを実現 ・コンポーネント化された要素が画面を構成しているという考え方 ・React、Vue用というわけではない ・モダンJavaScriptと相性がいい 5…

ページ遷移 // BrowserRouter このコンポーネントで囲った配下でルーティングを有効にする import { BrowserRouter, Link, Switch, Route } from "react-router-dom"; import { Home } from "./Home"; import { Page1 } from "./Page1"; import { Page2 } fr…

JSX // { } でJavaScriptの記法と認識される <button onClick={}>ボタン</button> // 外側の{ } はJavaScriptの記法と認識される // 内側の{ } はJavaScriptのオブジェクトのこと <h1 style={{ color: 'red' }}>こんにちは!</h1> イベント発火 export const App = () => { const onClickButton = () => alert(); return ( <div> <button onClick={onClickButton}></button></div>…

環境構築 npx create-react-app --scripts-version バージョン アプリ名 バージョン確認方法 npm info create-react-app 構築できたか確認（自動で立ち上がる） yarn start 基本 import React, { useState } from 'react'; const [count, setCount] = useSta…

構築 npx create-react-app . --template typescript npm start 立ち上がっていればOK 必要なライブラリをインストール npm i @material-ui/core npm i @material-ui/icons npm i firebase npm i react-router-dom @types/react-router-dom npm start 型をイ…

JavaScriptとは 主にWebブラウザ上の中で動くプログラミング言語 また、Webブラウザだけでなく、Node.jsというサーバ側のアプリケーションを作る仕組みでも利用されている JavaScriptはECMAScriptという仕様によって動作が決められている ECMAScriptという仕…

●インスタンスメタデータ 実行中のインスタンスを構成または管理するために 使用できるインスタンスに関するデータ インスタンスメタデータは、ホスト名・イベント 及びセキュリティグループなどのカテゴリに割り当てられる これを利用してインスタンスの構…

go mod の作成 go mod というファイルでパッケージ管理（外部ライブラリの管理）を行う go mod init プロジェクト名 go mod init $(basename `pwd`) ※basename pwdでカレントディレクトリの取得 echo 軽量なWebフレームワーク package main import ( "net/ht…

セキュリティの確保 Security：セキュリティ AWS内のデータ/システム/アセットを保護しモニタリングによりセキュリティを高める 【設計事項】 ◾️全てのレイヤーでのセキュリティを適用 ◾️アクセス追跡、モニタリングの確実な実施 ◾️条件ドリブンのアラートを…

イノベーションノウハウ テクノロジーの進化とビジネス変化のスピードに対応するため、柔軟で素早いサービス開発が求めれる ◾️テクノロジー×ビジネススピードへの対応 １、テクノロジー進化のスピードが加速 ２、テクノロジーを活用したビジネスの展開スピー…

疎結合化の追求 コンポーネントの疎結合 コンポーネント間の疎結合依存を減らした構成とすることで１つのコンポーネント変更や障害の影響を削減する ・関連する主要サービス Lambda、SQS、ELB、SNS 密結合の問題 密結合したアーキテクチャは障害や修正に弱く…

ElastiCacheの概要 キャッシュの利用 繰り返し取り出すデータやコンテンツについてはキャッシュを利用する構成とする 関連する主要サービス ・CloudFront、ElastiCache、S3 インメモリキャッシュ ElastiCacheはメモリ＋キャッシュというデータベース データ…

データベースの基礎 データベースは関連したデータの形式を揃えて収集、整理して検索などの操作やデータ管理を実行するシステム データベースを実現したシステムをDBMS（データベースマネジメントシステム）という 基本的なデータベースはテーブルという形式…

Route53の概要 DNS DNSはインターネットにおける人向けのURLをシステム向けの住所となるIPアドレスに変換するための仕組み 企業サーバーに一時的にDNS情報を保持するキャッシュDNSサーバーと実際に名前解決機能がある権威DNSサーバーがある Route53はAWSが提…

Well-Architected Framework AZの選択 １つのリージョンにつき２つのAZを利用してアーキテクチャーを設計することが基本（３つ以上はコスト効率が下がる） VPC 2つ以上のVPCでアーキテクチャを設計するのが基本となる ◾️１つのVPC ・可用性が低下するため、…

S3の概要 AWSストレージサービス AWSは３つの形式のストレージサービスを提供 ◾️ブロックストレージ ・EC2にアタッチして活用するディスクサービス ・ブロック形式でデータを保存 ・高速、広帯域幅 ・EBS、インスタンスストア ◾️オブジェクトストレージ ・安…

VPCの概要 Virtual Private Cloud(VPC) VPCはAWSクラウド内に論理的に分離されたセクションを作り、ユーザーが定義した仮想ネットワークを構築するサービス ・任意のIPアドレス範囲の選択して仮想ネットワークを構築 ・サブネットの作成、ルートテーブルやネ…

EC2の概要 EC2とは 数分で利用可能となる従量課金で利用可能な仮想サーバー ・起動、ノード追加、削除、マシンスペック変更が数分で可能 ・汎用的なIntelアーキテクチャを採用 ・管理者権限で利用可能 ・WindowsやLinuxなどのほとんどのOSをサポート ・OSま…

IAM IAMの概要 責任共有モデル セキュリティに対してAWSとユーザーとで責任分界して対応する責任共有モデルとなっている。 ユーザー側の責任範囲 ・IAMによるアカウント管理 ・セキュリティグループの設定 ・アプリケーションのロールベースのアクセス設定 …

S3の概要 AWSは３つの形式のストレージサービスを提供 ◾️ブロックストレージ ・EC2にアタッチして活用するディスクサービス ・ブロック形式でデータを保存 ・高速、広帯域幅 ・例：EBS、インスタンスストア ◾️オブジェクトストレージ ・安価かつ高い耐久性を…

VPCの概要 Virtual Private Cloud（VPC） VPCはAWSクラウド内に論理的に分離されたセクションを作り、ユーザーが定義した仮想ネットワークを構築するサービス ・任意のIPアドレス範囲の選択して仮想ネットワークを構築 ・サブネット作成、ルートテーブルやネ…