human
アニメタイトルとアニメの評価をアニリストに取得するためのGraphQLクエリを送信するマテリアルUIコンポーネントを備えたSvelteアプリを作成し、その情報をクリーンな方法でユーザーに表示します
gpt
Anilistからアニメのタイトルと評価を取得するためのGraphQLクエリを送信し、ユーザーに情報をきれいに表示するMaterial UIコンポーネントを持つSvelteアプリを作成するには、以下の手順に従います：

1.ターミナルで以下のコマンドを実行して、新しいSvelteプロジェクトをセットアップします：

```npx degit sveltejs/template my-svelte-app
cd my-svelte-app
npm install```

2.ターミナルで以下のコマンドを実行して、必要なパッケージをインストールします：

```npm install @material-ui/core @apollo/client graphql```

3.client.jsという新しいファイルに新しいGraphQLクライアントを作成します：

```import { ApolloClient, InMemoryCache } from '@apollo/client';

export const client = new ApolloClient({
  uri: 'https://graphql.anilist.co',
  cache: new InMemoryCache(),
});```

4.AnimeList.svelteという新しいファイルに新しいコンポーネントを作成する：

```<script>
  import { gql, useQuery } from '@apollo/client';
  import { Box, Typography } from '@material-ui/core';

  const GET_ANIME_LIST = gql`
    query {
      Page {
        media(type: ANIME, sort: POPULARITY_DESC, perPage: 10) {
          id
          title {
            romaji
          }
          averageScore
        }
      }
    }
  `;

  const { loading, error, data } = useQuery(GET_ANIME_LIST);
</script>

<Box>
  <Typography variant="h4">Popular Anime</Typography>
  {loading && <Typography>Loading...</Typography>}
  {error && <Typography>Error: {error.message}</Typography>}
  {data && (
    <ul>
      {data.Page.media.map((anime) => (
        <li key={anime.id}>
          <Typography variant="h5">{anime.title.romaji}</Typography>
          <Typography variant="body1">Rating: {anime.averageScore}/100</Typography>
        </li>
      ))}
    </ul>
  )}
</Box>```

このコンポーネントでは、GET_ANIME_LISTというGraphQLクエリを定義し、Anilistから人気アニメのトップ10タイトルとその評価を取得する。apollo/clientのuseQueryフックを使ってクエリを実行し、データを取得します。そして、Material UIコンポーネントを使ってデータをきれいに表示します。

5.5.App.svelteコンポーネントを更新し、AnimeListコンポーネントを追加する：

```<script>
  import { ThemeProvider } from '@material-ui/core/styles';
  import CssBaseline from '@material-ui/core/CssBaseline';
  import { client } from './client.js';
  import AnimeList from './AnimeList.svelte';
</script>

<ThemeProvider>
  <CssBaseline />
  <AnimeList />
</ThemeProvider>```

このコンポーネントでは、client.jsからGraphQLクライアントをインポートし、AnimeListコンポーネントをインポートし、アプリにインクルードしている。

6.ターミナルで以下のコマンドを実行してアプリを実行する：

```npm run dev```

これで開発用サーバーが起動します。

何か問題が発生したり、質問がある場合はお知らせください。
human
GraphQLクエリを変更して、評価のみのアニメタイトルのみを取得するにはどうすればよいですか？