---
# System prepended metadata

title: '今週何知った？ week:30'

---

# 今週何知った？ week:30

## 各自発表

> [name=ken3ypa]

## Swing について
<img width="807" alt="image.png (171.9 kB)" src="https://img.esa.io/uploads/production/attachments/9475/2022/12/04/39171/a9f30098-d1d5-4928-9268-084293a7e47a.png">

## AWTとSwingの違いについて
<img width="723" alt="image.png (409.5 kB)" src="https://img.esa.io/uploads/production/attachments/9475/2022/12/04/39171/fbd417d7-ce20-474d-8941-e17a54648309.png">


## コードサンプル紹介

## JavaでGUIアプリを作る方法について
<img width="414" alt="image.png (207.9 kB)" src="https://img.esa.io/uploads/production/attachments/9475/2022/12/04/39171/3fd1241c-75df-4371-afa7-7295f3fb10e4.png">

## Swingの歴史について
<img width="792" alt="image.png (322.7 kB)" src="https://img.esa.io/uploads/production/attachments/9475/2022/12/04/39171/aade8b8a-99d8-4b18-be92-024e3c0861ef.png">

## 継承ツリーについて
- <img width="1007" alt="image.png (222.4 kB)" src="https://img.esa.io/uploads/production/attachments/9475/2022/12/04/39171/94922ccd-0000-4d32-aa48-c9bc66651b19.png">
- <img width="732" alt="image.png (275.6 kB)" src="https://img.esa.io/uploads/production/attachments/9475/2022/12/04/39171/d2963bec-e460-4ebc-b944-25f04b0c5f92.png">

---

> [name=makicamel]

## GraphQL って何？

> GraphQLとは API のために作られたクエリ言語であり、既存のデータに対するクエリを実行するランタイムです。理解できる完全な形で API 内のデータについて記述します。GraphQL を利用すれば、クライアント側から必要な内容だけを問い合わせられると共に、漸次的に API を進化させることが容易になり、強力な開発者ツールを実現できます。  
https://graphql.org/

> - GraphQL は、クライアント アプリケーションが必要なデータを API からフェッチするために設計された言語です。
> - GraphQL を使用すると、クライアント アプリケーションはバックエンド API から必要なデータの型とシェイプを取得できます。
> - GraphQL では、どんなタイプのリクエストでも、クライアント アプリケーションが呼び出すエンドポイントは 1 つだけです。
> - GraphQL は SQL とよく似ていますが、フロントエンドで機能します。
> 
> https://circleci.com/ja/blog/introduction-to-graphql/

> アプリケーション・プログラミング・インタフェース (API) 向けのクエリ言語とサーバーサイドランタイムの両方を指します。クライアントがリクエストしたデータだけを提供することを優先します。  
https://www.redhat.com/ja/topics/api/what-is-graphql

![](https://i.imgur.com/2wCOQ8w.png)


## はじまり

- Facebook 開発
- 2012 年 2 月にプロトタイプ完成、8 月に Facebook iOS に組み込み
- 当初はクローズドプロジェクト、2015 年に OSS 化

## クエリ

```graphql
{
     users {
	name
	email
     }
}
```

## 型

- デフォルト型
    - ID: 一意の識別子を使ってフィールドを定義する
    - Int: 符号付き 32 ビット整数
    - Float: 符号付き倍精度浮動小数点数
    - String: UTF-8 文字シーケンス
    - Boolean: true または false
    - Query: 後述
- カスタム型
    `!` は null を許容しないフィールドを示す
    ```graphql
    type User {
            id: Int!
            name: String!
            email: String
            posts: [Post!]
    }
    type Post {
        id: Int!
        title: String!
        published: Boolean!
        link: String
        author: User!
    }
    ```
- Query 型
    ```graphql
    type Query {
        users: [User!]!,
        user(id: Int!): User!
    }
    ```

## リゾルバ
照会ポイントをマッピングして、リクエストされたエンティティを返す関数

```javascript
const resolvers = {
  users: async (_) => {
    return Users;
  },
  user: async ({ id }, context) => {
    return Users.find((user) => user.id == id)
  }
};
```

[[GraphQL] N+1問題を解決するDataLoaderの仕組みとサンプル実装 | DevelopersIO](https://dev.classmethod.jp/articles/graphql-dataloader-sample/)


## クライアント例

- [Apollo Client](https://github.com/apollographql/apollo-client)
- [Urql](https://github.com/urql-graphql/urql)
- [Relay](https://github.com/facebook/relay)

## Getting Started

- プレイグラウンド https://graphql-demo.mead.io/
- Getting Started https://graphql.org/graphql-js/
- 