アニメタイトルとアニメの評価をアニリストに取得するためのGraphQLクエリを送信するマテリアルUIコンポーネントを備えたSvelteアプリを作成し、その情報をクリーンな方法でユーザーに表示します
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```

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

何か問題が発生したり、質問がある場合はお知らせください。