クエリの作成 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…