human
アニメタイトルとアニメの評価をアニリストに取得するためのGraphQLクエリを送信するマテリアルUIコンポーネントを備えたSvelteアプリを作成し、その情報をクリーンな方法でユーザーに表示します
gpt
お好きな方法でSvelteアプリを新規作成します。
必要なパッケージをインストールする：apollo/client、graphql、material-ui、@material-ui/icons、@material-ui/core。
srcフォルダに、アニメのタイトルと評価をAnilistから取得するためのGraphQLクエリを格納するgraphql.jsというファイルを新規作成する。
App.svelteファイルに、Material UIから必要なコンポーネントをインポートし、アニメデータを表示するための新しいコンポーネントを作成する。
apollo/clientパッケージを使用して、Anilist APIにGraphQLクエリを送信し、アニメデータを取得する。
取得したアニメデータをステップ4で作成したコンポーネントに渡し、ユーザーに表示する。
以下にgraphql.jsファイルのコード例を示す：
```js
import { gql } from 'graphql';

export const GET_ANIME = gql`
  query ($search: String!) {
    Page {
      media(search: $search, type: ANIME) {
        title {
          romaji
        }
        averageScore
      }
    }
  }
`;
```

そして、App.svelteファイルのコード・スニペット例です：

```html
<script>
  import { useState } from 'svelte';
  import { useQuery } from '@apollo/client';
  import { TextField, Button } from '@material-ui/core';
  import { Search } from '@material-ui/icons';
  import { GET_ANIME } from './graphql';

  let search = '';
  const [animeData, setAnimeData] = useState([]);

  const { loading, error, data } = useQuery(GET_ANIME, {
    variables: { search },
  });

  const handleSearch = () => {
    // Send the query to Anilist API and update animeData state
  };
</script>

<main>
  <h1>Anime Search</h1>
  <div class="search-container">
    <TextField label="Search" variant="outlined" bind:value={search} />
    <Button variant="contained" color="primary" startIcon={<Search />} on:click={handleSearch}>
      Search
    </Button>
  </div>
  <div class="anime-container">
    {animeData.length > 0 ? (
      animeData.map((anime) => (
        <div class="anime-card">
          <h2>{anime.title.romaji}</h2>
          <p>Rating: {anime.averageScore}</p>
        </div>
      ))
    ) : (
      <p>No anime found.</p>
    )}
  </div>
</main>
```

注意：これは単なる例であり、アプリとして完全に機能するとは限りません。正しく動作させるには、カスタマイズしてコードを追加する必要があります。