import { jsx, jsxs, Fragment } from 'solid-jsx/jsx-runtime';

/*@jsxRuntime automatic @jsxImportSource solid-jsx*/
const toc = [{
  "depth": 1,
  "value": "はじめに",
  "children": []
}, {
  "depth": 1,
  "value": "Solid とは？",
  "children": []
}, {
  "depth": 1,
  "value": "Solid アプリの構造",
  "children": []
}, {
  "depth": 1,
  "value": "このチュートリアルの活用",
  "children": []
}];
function _createMdxContent(props) {
  const _components = Object.assign({
    h1: "h1",
    a: "a",
    p: "p",
    code: "code",
    pre: "pre",
    span: "span"
  }, props.components);
  return jsxs(Fragment, {
    children: [jsxs(_components.h1, {
      id: "はじめに",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#はじめに",
        children: "#"
      }), "はじめに"]
    }), "\n", jsx(_components.p, {
      children: "この対話型ガイドでは、Solid の主な機能をご紹介します。Solid の仕組みをより詳しく知るには、API やガイドを参照してください。"
    }), "\n", jsxs(_components.p, {
      children: ["また、新しい初心者向けチュートリアル（作業中!）は", jsx(_components.a, {
        href: "https://docs.solidjs.com/guides/tutorials/getting-started-with-solid/welcome",
        children: "こちら"
      }), "でご覧いただけます。"]
    }), "\n", jsxs(_components.h1, {
      id: "solid-とは",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#solid-とは",
        children: "#"
      }), "Solid とは？"]
    }), "\n", jsx(_components.p, {
      children: "Solid は、インタラクティブな Web アプリケーションを作成するための JavaScript フレームワークです。\nSolid では、既存の HTML および JavaScript の知識を使用して、アプリケーション全体で再利用可能なコンポーネントを構築できます。\nSolid は、コンポーネントをリアクティビティで強化するためのツールを提供します。これは、ユーザーインターフェイスを使用および作成するデータにリンクする宣言的な JavaScript コードです。"
    }), "\n", jsxs(_components.h1, {
      id: "solid-アプリの構造",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#solid-アプリの構造",
        children: "#"
      }), "Solid アプリの構造"]
    }), "\n", jsxs(_components.p, {
      children: ["Solid アプリはコンポーネントと呼ばれる関数で構成されています。右側の ", jsx(_components.code, {
        children: "HelloWorld"
      }), " 関数を見てください。この HTML と JavaScript の組み合わせを JSX と呼びます。Solid には、これらのタグを後から DOM ノードに変換するコンパイラが同梱されています。"]
    }), "\n", jsxs(_components.p, {
      children: ["JSX では、アプリ内でほとんどの HTML 要素を使用できますが、新しい要素を作成することもできます。", jsx(_components.code, {
        children: "HelloWorld"
      }), " 関数を宣言すると、アプリ全体で ", jsx(_components.code, {
        children: "<HelloWorld>"
      }), " タグとして使用できます。"]
    }), "\n", jsxs(_components.p, {
      children: ["Solid アプリのエントリーポイントは、", jsx(_components.code, {
        children: "render"
      }), " 関数です。 この関数は 2 つの引数を取ります。アプリケーションのコードをラップした関数と、マウントするための HTML の既存の要素です:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-title function_",
          children: "render"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " ", jsx(_components.span, {
          className: "xml",
          children: jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "HelloWorld"
            }), " />"]
          })
        }), ", ", jsx(_components.span, {
          className: "hljs-variable language_",
          children: "document"
        }), ".", jsx(_components.span, {
          className: "hljs-title function_",
          children: "getElementById"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "\"app\""
        }), "));\n"]
      })
    }), "\n", jsxs(_components.h1, {
      id: "このチュートリアルの活用",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#このチュートリアルの活用",
        children: "#"
      }), "このチュートリアルの活用"]
    }), "\n", jsx(_components.p, {
      children: "チュートリアルの各レッスンでは、Solid の機能と、それを試すためのシナリオが紹介されています。どの時点でも solve ボタンをクリックして解決策を確認したり、reset をクリックして最初からやり直すことができます。コードエディタには、コンソールとコードから生成されたコンパイル済みの出力を見ることのできる出力タブがあります。Solid がどのようにコードを生成しているのか興味がある方はご覧ください。"
    }), "\n", jsx(_components.p, {
      children: "楽しんでください！"
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = props.components || ({});
  return MDXLayout ? jsx(MDXLayout, Object.assign({}, props, {
    children: jsx(_createMdxContent, props)
  })) : _createMdxContent(props);
}

export { MDXContent as default, toc };
//# sourceMappingURL=lesson-13e87b70.js.map
