User:アニメタイトルとアニメの評価をアニリストに取得するためのGraphQLクエリを送信するマテリアルUIコンポーネントを備えたSvelteアプリを作成し、その情報をクリーンな方法でユーザーに表示します Assistant:AnimistからAnimeタイトルと評価を取得し、その情報をユーザーに表示するためのGraphQLクエリを送信するマテリアルUIコンポーネントを備えたSvelteアプリを作成するには、次の手順に従うことができます。

1.優先開発環境でSvelteテンプレートを使用して、新しいSvelteアプリを作成します。

2.次の依存関係をインストールします。
`` `
npmインストール @material-ui/core @material-ui/icons apollo-boost graphql graphql-tag svelte-apollo
`` `
3. Apollo Boostを使用して新しいGraphQLクライアントを作成します。
`` `
「apollo-boost」からアポロクライエントをインポートします。

const client = new Apolloclient（{
  URI：「https：//graphql.anilist.co」、
}）;
`` `
4.グラフQLクエリを作成して、アニメタイトルと評価を取得します。
`` `
「graphql-tag」からGQLをインポートします。

const anime_query = gql`
  クエリ（$ perpage：int！、$ page：int！）{
    ページ（perpage：$ perpage、page：$ page）{
      メディア（タイプ：アニメ、ソート：人気_desc）{
        id
        タイトル {
          ロマジ
          英語
        }
        AveragesCore
      }
    }
  }
`;
`` `
5.マテリアルUIコンポーネントを使用して、アニメタイトルと評価をレンダリングするためのスベルトコンポーネントを作成します。
`` `
<スクリプト>
  「Svelte-Apollo」から{Query}をインポートします。
  "./queries"から{anime_query}をインポートします。

  const {loading、error、data} = query（anime_query、{
    変数：{
      PERPAGE：10、
      ページ1、
    }、
  }）;
</script>

{#ifロード}
  <p>読み込み... </p>
{：エラーの場合}
  <p>エラー：{error.message} </p>
{：それ以外}
  <ul>
    {#each data.page.media as anime}
      <li>
        <h2> {anime.title.english ||Anime.title.romaji} </h2>
        <p>評価：{anime.averagescore} </p>
      </li>
    {/各}
  </ul>
{/もしも}
`` `
6.マテリアルUIを使用してコンポーネントをスタイリングします。
`` `
<slot> </slot>

<style>
  ：global（body）{
    マージン：0;
    フォントファミリー：「ロボット」、sans-serif;
  }
  ul {
    リストスタイル：なし;
    パディング：0;
  }
  li {
    パディング：16px;
    ボーダーボトム：1px solid #eee;
  }
  H2 {
    マージン：0;
    フォントサイズ：18px;
    font-weight：500;
    色：＃333;
  }
  p {
    マージン：0;
    フォントサイズ：14px;
    font-weight：400;
    色：＃666;
  }
</style>
`` `
7.メインアプリコンポーネントのコンポーネントをレンダリングします。
`` `
<テンプレート>
  <div class = "container">
    <h1>アニメのタイトルと評価</h1>
    <AnimeList />
  </div>
</テンプレート>

<スクリプト>
  "./animelist.svelte"からアニメリストをインポートします。
</script>

<style>
  。容器 {
    ディスプレイ：Flex;
    フレックス方向：列;
    Align-Items：Center;
    パディング：32px;
  }
  H1 {
    マージンボトム：16px;
    フォントサイズ：24px;
    font-weight：500;
    色：＃333;
  }
</style>
`` `
それでおしまい！これで、GraphQLを使用してAnilistからアニメタイトルと評価を取得し、材料UIコンポーネントを使用してそれらを表示するSvelteアプリを作成する必要があります。 
User:ありがとう！正確に私が必要としていたのは、さらに合併症を追加できますか？
確かに、必要に応じてさらに合併症を追加できます。あなたが私に含めて欲しい特定の要件や機能はありますか？たとえば、アニメリストにページネーションを追加したり、ユーザーが特定のタイトルを検索できるようにしてもらいたいですか？私に知らせてください、そして私は私に何ができるかを見ます！