（参考URL） https://mamunga.com/amplify-cli-appsync-api-key 基本的には

Amplify ドキュメント https://docs.amplify.aws/start/q/integration/next/ https://docs.amplify.aws/cli/ ■15. 投稿ページの下準備 uuidというのを利用するので、インストール yarn add uuid pages/create-post.jsを作成。 まずは、第一段階目のコーディ…

Amplify ドキュメント https://docs.amplify.aws/start/q/integration/next/ https://docs.amplify.aws/cli/ ■0. AWSのセットアップ アカウントだけは先に作っておくこと。それ以外は何もしなくても大丈夫。I AMユーザーの管理者権限も一応念のために先にあ…

まずは、属性値のvariablesとは？ https://docs.amplify.aws/lib/graphqlapi/query-data/q/platform/js/#query-declarations https://ja.reactjs.org/docs/hooks-effect.html#example-using-hooks-1 https://mo-gu-mo-gu.com/async-await-in-useeffect/ grap…

ほぼ答えに近いコードが掲載してるのが以下。Amplify graphQL Clientを使ったデータフェッチの、 https://qiita.com/otanu/items/2c522a652e5843a5e2c5 また、Amplifyの、getStaticPropsやgetServerSidePropsを使わない、データフェッチのやり方が以下。 htt…

まずは、package.jsonに、デプロイに必要な修正を加える。

Amplify Docs 公式ドキュメント_トップ （Libraries、UI components、CLI、などが閲覧頻度高い） https://docs.amplify.aws/ Amplify UI https://ui.docs.amplify.aws/?platform=react ■認証に関すること Amplify UI Authenticator https://ui.docs.amplify.…

subscriptionとmutationの機能の違いがわかった。subscriptionって、要は、「いいねボタン」とその通知みたいなもんで、押したら、フォローしている人全員に通知がいく、というようなことのために使うんだってことがわかった。 この考え方は、Udemyの「AWS A…

■EC2インスタンスの設置からファイアーウォール設定まで全体の流れ EC2インスタンスを設置 ーAMIの選択 ーインスタンスタイプの選択 ーインスタンスの詳細の設定 ーストレージの追加 ータグの追加 ーセキュリティグループの設定 ーSSHキーペアの設定 Apache…

■立ち上げ確認 EC2にアクセスして、インスタンスが起動しているか確認する。 Elastic IPを確認して、関連づけされているか確認する。 RDSにアクセスして、データベースのステータスが利用可能になっているか確認する。 ■SSHでアクセス ターミナルで ssh -i ~…

要件は ユーザー閲覧機歴機能 (No.1) ユーザーとMovieのデータベースを紐づける ユーザー閲覧機歴機能 (No.2) ユーザーが閲覧したら、該当のサイドナビゲーションにチェックが付く ユーザー閲覧機歴機能 (No.3) ユーザーが閲覧したら、プロフィールに閲覧記…

参考URL https://www.wakuwakubank.com/posts/639-aws-dynamodb-introduction/ 特徴 Key-Value型のNoSQLデータベースサービス 事実上無制限のスループットとストレージ 管理作業をまかせられる レプリケーション ソフトウェアのパッチ適用 クラスタースケー…

作業するマシンに、AWS CLIがインストールされているかを確認。 （参考）https://docs.aws.amazon.com/ja_jp/amazondynamodb/latest/developerguide/Tools.CLI.html https://aws.amazon.com/jp/cli/ テーブルを作成する前に、スキーマを作成するなど、構造が…

何度schemaを修正してから、Amplifyのバックエンドが壊れ、その度に初期構築からやり直しをしてきただろう。。。 特にCognitoが絡んできてからは、頻繁に起こった。 ようやく、schemaを修正してから、amplifyのアップデートの仕方がわかった！！ まずは、sch…

テーブル名を間違えた。。。なんてことになった場合の修正の仕方。 やると危険なのが、「いきなり最初にDynamoDB」のデータベースを消してしまうこと。 AppSyncとDynamoDBの仕組みの関係が大いにある。

■@modelとは？ https://docs.amplify.aws/cli-legacy/graphql-transformer/model/ @model注釈が付けられたオブジェクトタイプは、生成されたAPIの最上位エンティティです。@model注釈が付けられたオブジェクトは、AmazonDynamoDBに保存され、@authを介して保…

■（必須）初期設定をする ログイン（アカウントの作成は済み） 料金アラートの設定 IAM（Identity and Access Management (IAM)）で作業用ユーザーを作成 CloudTrailで操作ログを記録 ■（ドメインを取得後、必要）Route53 ドメインを登録 ドメインの購入 Rou…

これが一番確かだった。 https://github.com/saltyshiomix/nextron react-draft-wysiwyg https://github.com/jpuri/react-draft-wysiwyg https://www.npmjs.com/package/react-draft-wysiwyg https://www.electronjs.org/docs/latest/tutorial/tutorial-pack…

Webpack環境下でBootstrapを使いながら、SassやJavascriptを使って簡単なフォーム作成 環境構築 npm init で初期化 →ディレクトリを作り、npm initで初期化 →package.jsonをひたすらenterでつくる 必要なnpmをインストール（今回はpug、sassを使う前提） →一…

■stateをオブジェクトとしてまとめて取り扱うプロセス import { useState } from "react"; export default function App() { const [state, setState] = useState({ pip: false, playing: true }); return ( <div className="App"> <p>あああ</p> </div> ); } このようにstateをオブジェクト形…

■スプレッド演算子 スプレッド演算子(...)は、配列の全ての値を一括で「展開」できる、という機能である。 push()について復習。配列やオブジェクトは「参照型」。値そのものではなく、値への参照を持っている。参照先のアドレスが変わらなければ、メモリの…

■概要 ジェネリック型とは、他の特定の型と結合された型のこと。汎用型とも言う。 TypeScriptにおける型安全性を高めることができ、自動保管等の開発サポートを受けることができる。 ジェネリック型は、Reactでよく登場する。 ◇Array Array → string[] と一…

ディベロッパーツールの「要素」から「プロパティ」をみると、非常に興味深い状態になっていた。

npm install -g @vue/cli でグローバルにvue/cliを入れる vue create (作るプロジェクトの名前) で、vueをインストール開始。 インストール方法を聞かれるので Manually select features を選択 Check the features needed for your project では以下を選択…

インストール & 初期開発画面 npm init vue@latest # セットした内容 ✔ Project name: … vue-project ✔ Add TypeScript? … No / Yes ✔ Add JSX Support? … No / Yes ✔ Add Vue Router for Single Page Application development? … No / Yes ✔ Add Pinia for …

■Firebaseへデプロイ Firebaseにログインしていることを確認します。 % firebase login vueアプリケーションをビルド。 % npm run build 最後にfirabaseデプロイコマンドでデプロイしていきます。 % firebase deploy デプロイが完了したらHostingURLにアクセ…

■Bootstrap Vueのインストール 公式サイトよりコマンド入手。 npm install vue bootstrap bootstrap-vue をアプリのディレクトリで実行。 パッケージのインポート。 import { BootstrapVue, IconsPlugin } from 'bootstrap-vue' を src/router/index.js にコ…

■Vueのローカル環境構築 npm install -g vue-cl グローバルにvue-cliをインストールする。 cd で作業ディレクトリに移動 vue init webpack [プロジェクト名] でアプリケーション作成用のコマンドを実行 実行すると色々質問されるが、基本全部enterでOK。一応…

■「?」について ◇オプションパラメーター(?) ◇オプショナルチェイニング(?.) ネストされたオブジェクトのプロパティが存在するかどうかの条件分岐を簡単に記述できるOptional chaining(?)。 以下のように「?」をプロパティアクセス時に用いることでnullまた…

TypeScriptではeventにも「型」が要求される。anyでは心許ない... type Props = { onClick: (event: React.MouseEvent<HTMLInputElement>) => void onChange: (event: React.ChangeEvent<HTMLInputElement>) => void onkeypress: (event: React.KeyboardEvent<HTMLInputElement>) => void onBlur: (event: React.Foc</htmlinputelement></htmlinputelement></htmlinputelement>…