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```

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

何か問題が発生したり、質問がある場合はお知らせください。
To create a Svelte app with Material UI components that sends a GraphQL query for getting anime titles and ratings from Anilist and displays the information to the user in a clean way, you can follow the steps below:

1. Set up a new Svelte project by running the following commands in your terminal:

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

2. Install the required packages by running the following command in your terminal:

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

3. Create a new GraphQL client in a new file called client.js:

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

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

4. Create a new component in a new file called 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>```

In this component, we define a GraphQL query called GET_ANIME_LIST that retrieves the top 10 most popular anime titles and their ratings from Anilist. We use the useQuery hook from @apollo/client to execute the query and retrieve the data, and we use Material UI components to display the data in a clean way.

5. Update the App.svelte component to include the AnimeList component:

```<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>```

In this component, we import the GraphQL client from client.js, import the AnimeList component, and include it in the app.

6. Run the app by running the following command in your terminal:

```npm run dev```

This will start a development server.

Please let me know if you run into any issues or have anymore questions.