# 今週何知った? 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/ -